Woocommerce商品循环悬停翻转图自定义代码返回图片分辨率过低如何解决

问题原因 #

你调用wp_get_attachment_image()时未指定图片尺寸参数，WordPress默认调用thumbnail尺寸（默认150×150px），因此出现分辨率过低的问题。

修改方案 #

1. 调整PHP代码 #

替换原有PHP代码为以下版本，指定使用WooCommerce商品列表专用的woocommerce_thumbnail尺寸，和你当前Storefront主题的默认商品列表图尺寸完全匹配，同时增加空值判断避免无gallery图时出现报错：

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
    global $product;
    $attachment_ids = $product->get_gallery_image_ids();
    // 判断是否存在gallery首张图，避免报错
    if ( isset( $attachment_ids[0] ) ) {
        // 第二个参数指定图片尺寸为WooCommerce商品列表缩略图
        echo wp_get_attachment_image( $attachment_ids[0], 'woocommerce_thumbnail' );
    }
}

2. 可选：优化CSS过渡效果 #

原有CSS仅在hover状态添加过渡，鼠标移出时会出现生硬跳转，可以调整为以下版本，让切换更顺滑：

ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* 过渡放在默认状态，移入移出都有动画 */
    transition: opacity 0.5s ease;
}
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1):hover {
    opacity: 0;
}

3. 自定义尺寸调整（可选） #

如果你需要修改商品列表图的默认尺寸，可直接在WordPress后台操作：

• 进入「外观」→「自定义」→「WooCommerce」→「商品目录」
• 调整「缩略图宽度」和「缩略图裁剪方式」，保存后重建所有缩略图即可生效，不需要修改代码。

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