如何使 WooCommerce 3.0 Single Image Gallery 像 2.x 版本一样？

Question

如果您更新到 WooCommerce 3.0 并且您的主题尚未更新，如何使 WooCommerce 3.0 单一产品图片库像以前的版本一样工作？

对于不复制模板文件并使用条件、挂钩和过滤器进行修改以避免许多问题的主题来说，这是一个问题。

Answer 1

要添加对新的 WooCommerce 单一产品库功能的主题支持，您可以在子主题中的functions.php 文件中添加：

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

使用 add_theme_support( 'wc-product-gallery-slider' );加载 FlexSlider。如果我没有任何 JS 问题，当我的产品图像尺寸不完全相同时，我会得到错误的加载高度。SmoothHeight 为假。即使打开（通过过滤器），也存在很大的间隙。总而言之，在 Chrome 和 FireFox 上这个问题仍然存在。

因此，获得与 2.6 类似的功能（无论如何都没有滑块）但具有更好的灯箱的简单方法，只需添加以下主题支持：

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

然后过滤缩略图以使用 shop_thumbnail 大小：

/** 
 *
 * 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;

}

然后仅将其应用到woocommerce_product_thumbnails钩子中。

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' );