WooCommerce 3.0 Compatibility (New Zoom/Lightbox feature)

[newtlabs]

How can this bug be reproduced?

1. Update to the latest version of WooCommerce (currently 3.0.7)

2. Add theme compatibility:

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

3. Click on zoom icon on product gallery

What did you expect to happen?
open lightbox

What happened instead?

broken page with jquery error (Uncaught TypeError: Cannot read property 'x' of undefined - photoswipe)

Please List the Following:

• OS & version: Chrome latest
• Node version (node -v) [Node v4+ is required] : latest
• Foundation version (bower list) : 6.3.0

[wishe]

This is caused by a function in /library/responsive-images.php that removes the height and width attributes of post_thumbnails. Photoswipe needs these attributes to calculate image positions and other things.

The function causing the issue:

// Remove inline width and height attributes for post thumbnails
function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
	$html = preg_replace( '/(width|height)=\"\d*\"\s/', '', $html );
	return $html;
}
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

You can either remove this function and hook or you can change it to:

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    if(!strpos($html, 'attachment-shop_single')) {
        $html = preg_replace( '/(width|height)=\"\d*\"\s/', '', $html );
    }
    return $html;
}
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

Hope this helps!

[newtlabs]

Changing the function works great thank you.

In addition the following needs adding:

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

Do you want to do a pull request for this or shall I?

[olefredrik]

@newtlabs : Great! Please create a pull request so others can make use of this fix as well 👍

[JPOak]

@wishe Just had this problem. Thanks for finding! I was staring at debugger and seeing the error. I would have never found the connection. Works great.

[olefredrik]

Fixed in #1021 . Kudos to @linuxbastard for the fix 👍