WooCommerce 3.1.2: How to restore “add to cart” button in product category page

I noticed “add to cart” (or “select option” for variable products) buttons are no longer there with the most recent version of WooCommerce.
I checked content-product.php to see if the button was removed…it was not according to their template comment:

/**
 * The template for displaying product content within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 3.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product;

// Ensure visibility
if ( empty( $product ) || ! $product->is_visible() ) {
	return;
}
?>
<li <?php post_class(); ?>>
	<?php
	/**
	 * woocommerce_before_shop_loop_item hook.
	 *
	 * @hooked woocommerce_template_loop_product_link_open - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item' );

	/**
	 * woocommerce_before_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_show_product_loop_sale_flash - 10
	 * @hooked woocommerce_template_loop_product_thumbnail - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item_title' );

	/**
	 * woocommerce_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_template_loop_product_title - 10
	 */
	do_action( 'woocommerce_shop_loop_item_title' );

	/**
	 * woocommerce_after_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_template_loop_rating - 5
	 * @hooked woocommerce_template_loop_price - 10
	 */
   
	do_action( 'woocommerce_after_shop_loop_item_title' );

	/**
	 * woocommerce_after_shop_loop_item hook.
	 *
	 * @hooked woocommerce_template_loop_product_link_close - 5
	 * @hooked woocommerce_template_loop_add_to_cart - 10
	 */
    
   	do_action( 'woocommerce_after_shop_loop_item' );
	?>
</li>

Regardless, the button is still not there so I added the button again in the current theme’s functions.php (since I wasn’t making any other overwrite):

//woocommerce - restore "add to cart" button in product category page
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

And voila, it’s back.

The same disappearance behavior was observed in multiple themes…so I’m suspecting something happened in WooCommerce plugin (as opposed to a theme-related bug).

Include CSS the right way in a WordPress’ child theme

We really should be using wp_enqueue_style functions to include your theme’s stylesheets rather than using @import statements. The enqueue functions allows us to specify dependencies in much better way.

//enqueue style for child theme
function  custom_child_enqueue_styles(){
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() . '/style.css' );
	// enqueue child styles - style.css
	wp_enqueue_style('parent-theme-child', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	// enqueue child styles - scss/child.css
	wp_enqueue_style('parent-theme-child-scss', get_stylesheet_directory_uri() .'/scss/child.css', array('parent-theme', 'parent-theme-child'));
}
add_action('wp_enqueue_scripts', 'custom_child_enqueue_styles');

How to change thumbnail size for Divi’s gallery module

post_thumbnails_divi.php is where Elegant Themes‘ Divi specifies the custom image sizes:

add_theme_support( 'post-thumbnails' );

global $et_theme_image_sizes;

$et_theme_image_sizes = array(
	'400x250'  => 'et-pb-post-main-image',
	'1080x675' => 'et-pb-post-main-image-fullwidth',
	'400x284'   => 'et-pb-portfolio-image',
	'510x382'   => 'et-pb-portfolio-module-image',
	'1080x9999' => 'et-pb-portfolio-image-single',
	'400x516'   => 'et-pb-gallery-module-image-portrait',
	'2880x1800' => 'et-pb-post-main-image-fullwidth-large',
);

$et_theme_image_sizes = apply_filters( 'et_theme_image_sizes', $et_theme_image_sizes );
$crop = apply_filters( 'et_post_thumbnails_crop', true );

if ( is_array( $et_theme_image_sizes ) ){
	foreach ( $et_theme_image_sizes as $image_size_dimensions => $image_size_name ){
		$dimensions = explode( 'x', $image_size_dimensions );

		if ( in_array( $image_size_name, array( 'et-pb-portfolio-image-single' ) ) )
			$crop = false;

		add_image_size( $image_size_name, $dimensions[0], $dimensions[1], $crop );

		$crop = apply_filters( 'et_post_thumbnails_crop', true );
	}
}

I wanted to modify the “et-pb-gallery-module-image-portrait” thumbnail size to be 500×500. Since I was using a child theme, my thought was to copy the post_thumbnails_divi.php into the child theme and change the value there.

…Nope, that didn’t work.
Continue reading “How to change thumbnail size for Divi’s gallery module”

jQuery conflict in WordPress 4.5 and WooCommerce 2.5

If your WooCommerce site is having a problem since you upgraded your WordPress to version 4.5, the problem might be associated with jQuery version that came with the new WordPress.

WordPress 4.5 “Coleman” comes with jQuery 1.12.3, the first version 1.12.0+. Previously it was using 1.11.x.

Check to see if your site generates script error(s). My script error after the WordPress upgrade was

 Syntax error, unrecognized expression: a[href*=#]:not([href=#])

I discovered when I wasn’t able to add a variable product to a shopping cart (the product page did not show the product price after all the options are selected, and displayed “please choose options” message)

Solutions

If you haven’t upgraded WordPress 4.5, my recommendation is to hold off the ugprade for now. If you already have upgraded, then you can add the following code to your theme’s functions.php to downgrade jQuery version:

// Downgrade to jQuery given version
function downgrade_jquery() {
  global $wp_scripts;
 
  if ( !is_admin() ) :
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3');
  endif;
}
add_action( 'wp_head', downgrade_jquery() );

How to darken post background images in Fable theme 1.7.4

The theme I’m currently using for this site is Fable Theme by Elegant Theme.

One of the issues I recently dealt was how I have to be picky about selecting featured images for each post. The featured image is used as the background image for each post on homepage and archive pages. And by default, when there is an featured image assigned to a post, the font color of the post title and its summary is white.

Initially, I darken the text shadow to make the text more readable. But depending on the image I picked, it wasn’t an effective solution for some posts.

So I decided to apply linear gradient over the post background/featured image to make it little darker to give little more contrast between the text and the image.

Unfortunately, you can’t simply overwrite style.css in this case. The themes uses a function, et_fable_get_background(), to insert background-image property in the section in content.php

So in order to make the change, you need to modify two files in the child theme folder.
Continue reading “How to darken post background images in Fable theme 1.7.4”

How to sort grouped product’s children in WooCommerce 2.5.x

You MUST backup your database and your web files before you try this method.  If you decide to try this method, please do so at your own risk. I will not be responsible for any site breakage.

The order of child products in a group product page in WooCommerce is based on “menu_order” value in ascending order. You can change each product’s menu order value in “Edit Product” page under “Advanced” tab.

The problem is you can’t go through this process when you have hundreds or thousands or products and finish in timely manner.

There are several ways you can do to re-sort your child products in much faster manner.
Continue reading “How to sort grouped product’s children in WooCommerce 2.5.x”

WooCommerce 2.3.8 – how to set minimum order amount for a product

It’s not uncommon to be asked to implement minimum checkout requirements to WooCommerce Cart. The common requirements are:

  • Minimum Dollar Amount Per Order
  • Minimum Number of Products Per Order or Per Products

Luckily, there is a great tutorial for implementing these by Yojance Rabelo.

But the other day, I got a request to implement minimum dollar amount PER PRODUCT…not too common, but not never-heard-of either.

So I decided to tweak Yojance’s Minimum Dollar Per Order code to set minimum order amount for a product instead of for the entire order: Continue reading “WooCommerce 2.3.8 – how to set minimum order amount for a product”

WooCommerce 2.1.9 cheatsheet – product listing page

How To Change Number Products Displayed Per Page

Insert the following code in your theme’s functions.php

// Display 40 products per page. 
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 40;' ), 20 );

Continue reading “WooCommerce 2.1.9 cheatsheet – product listing page”

WooCommerce 2.1.9 cheatsheet – single product page

How To Remove Related Products

Add the following code to your theme’s functions.php

//remove related products from single product page
remove_action ( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

Continue reading “WooCommerce 2.1.9 cheatsheet – single product page”