php - 如何制作 WooCommerce 3.0 单一图片库，使其类似于 2.x 版？

Question

如果您更新到 WooCommerce 3.0 而您的主题也没有更新，您如何使 WooCommerce 3.0 单一产品图片库像以前的版本一样工作？

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

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 类似的功能(无论如何都没有 slider )但使用更好的灯箱的简单方法，只添加以下主题支持:

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