WordPress：修改WooCommerce商品页woocommerce_single响应式图片尺寸

这个需求完全可以实现，只需要在原有钩子的判断逻辑中，增加针对woocommerce_single缩略图尺寸的校验即可，不会影响其他位置的图片输出规则。

方案1：使用wp_get_attachment_image_attributes钩子（更推荐） #

这个钩子的第三个参数直接返回当前调用的缩略图尺寸，你可以直接判断是否为woocommerce_single，再修改对应的sizes属性：

function custom_woocommerce_single_image_sizes( $attr, $attachment, $size ) {
    // 仅针对woocommerce_single尺寸的图片生效
    if ( $size === 'woocommerce_single' ) {
        // 移动端视口≤767px时，告知浏览器仅需要265px宽度的图片，会自动匹配高度300px的版本
        $attr['sizes'] = '(max-width: 767px) 265px, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
    }
    return $attr;
}
// 优先级设置为20，确保覆盖主题/插件默认的规则
add_filter( 'wp_get_attachment_image_attributes', 'custom_woocommerce_single_image_sizes', 20, 3 );

如果需要仅在产品详情页生效，可以在判断条件中增加is_product()校验：

if ( is_product() && $size === 'woocommerce_single' )

方案2：使用wp_calculate_image_sizes钩子 #

这个钩子的第二个参数$size同样是当前缩略图的尺寸数组，你也可以通过它来做针对性修改：

function custom_woocommerce_single_calculate_sizes( $sizes, $size, $image_src, $image_meta, $attachment_id ) {
    // 获取当前注册的woocommerce_single尺寸的宽度
    $wc_single_width = wc_get_image_size( 'woocommerce_single', 'width' );
    // 判断当前图片宽度和woocommerce_single的宽度一致
    if ( $size[0] === $wc_single_width ) {
        $sizes = '(max-width: 767px) 265px, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
    }
    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'custom_woocommerce_single_calculate_sizes', 20, 5 );

注意事项 #

1. 代码添加到当前主题的functions.php文件，或者自定义功能插件中即可生效
2. 修改后需要清空站点缓存、CDN缓存，浏览器硬刷新后再测试效果
3. 如果使用了WooCommerce的AJAX图库插件，需要确认插件是否自定义了图片输出逻辑，必要时调整钩子优先级保证你的规则生效

内容的提问来源于stack exchange，提问作者Cray