php - How to make WooCommerce 3.0 Single Image Gallery so it is like version 2.x? -

if updated woocommerce 3.0 , theme hasn't updated how make woocommerce 3.0 single product image gallery work previous version?

is question themes not copy template files , use conditionals, hooks, , filters modify avoid many issues.

to add theme support new woocommerce single product gallery features, add in functions.php file in 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 js issues on end, wrong height on load when product images not same size. smoothheight false. when it's turned on (via filter), there large gap. in all, on both chrome , firefox issue persists.

therefore, easy way similar functionality 2.6 (which didn't have slider anyway) better lightbox, add following theme support:

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

then filter thumbnail images use shop_thumbnail size:

/**   *  * change thumbnail size run in @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 in 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' );