How to make WooCommerce 3.0 Single Image Gallery s

Question

If you updated to WooCommerce 3.0 and your theme hasn't updated as well how do you make the WooCommerce 3.0 Single Product image gallery work like the previous version?

Is is a question for themes who DO NOT copy template files and DO use conditionals, hooks, and filters to modify to avoid many issues.

Answer 1

To add theme support for the new WooCommerce single product gallery features, you would add in your functions.php file in a child theme:

add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' ); 

Using add_theme_support( 'wc-product-gallery-slider' ); loads FlexSlider. Without any JS issues on my end, I get is the wrong height on load when my product images are not exactly the same size. SmoothHeight is false. Even when it's turned on (via the filter), there is a large gap. All in all, on both Chrome and FireFox this issue persists.

Therefore, an easy way to get similar functionality as 2.6 (which didn't have a slider anyway) but with the better lightbox, only add the following theme support:

add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );

Then filter the thumbnail images to use the shop_thumbnail size:

/** 
 *
 * Change Thumbnail Size but run only in the @woocommerce_product_thumbnails hook
 *
 */
function yourprefix_single_product_thumbnail_size_filter( $html, $attachment_id ){

        $full_size_image  = wp_get_attachment_image_src( $attachment_id, 'full' );
        $thumbnail        = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' );
        $thumbnail_post   = get_post( $attachment_id );
        $image_title      = $thumbnail_post->post_content;

        $attributes = array(
            'title'                   => $image_title,
            'data-src'                => $full_size_image[0],
            'data-large_image'        => $full_size_image[0],
            'data-large_image_width'  => $full_size_image[1],
            'data-large_image_height' => $full_size_image[2],
        );

        $html  = '<div data-thumb="' . esc_url( $thumbnail[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '">';
        $html .= wp_get_attachment_image( $attachment_id, 'shop_thumbnail', false, $attributes );
        $html .= '</a></div>';

        return $html;

}

Then apply it only in the woocommerce_product_thumbnails hook.

function yourprefix_do_single_product_image_size_filter() {

    //apply filter
    add_filter( 'woocommerce_single_product_image_thumbnail_html', 'yourprefix_single_product_thumbnail_size_filter', 10, 4 );

}
add_action( 'woocommerce_product_thumbnails', 'yourprefix_do_single_product_image_size_filter' );