WooCommerce产品页点击缩略图无法切换主图问题求助

问题分析 #

你已成功获取到缩略图的目标URL，但主图未更新，核心原因有两点：

1. 仅修改主图的src属性不足以覆盖WooCommerce默认的图片加载逻辑——主图包含srcset、data-src等属性，浏览器会优先使用这些属性加载图片
2. 主图的链接容器（<a>标签）和主图容器的缩略图属性也需要同步更新，才能保证功能完整

修复后的代码 #

jQuery(document).ready(function($) {
    $('.gallery').on('click', 'a', function(e) {
        e.preventDefault();
        
        // 提取缩略图的完整图片信息
        var $thumbImg = $(this).find('img');
        var imageUrl = $thumbImg.attr('data-src');
        var imageSrcset = $thumbImg.attr('srcset');
        var largeImage = $thumbImg.attr('data-large_image');
        var thumbUrl = $(this).closest('.woocommerce-product-gallery__image').attr('data-thumb');
        
        // 更新主图的所有关联属性
        var $mainImg = $('#main-image img');
        $mainImg.attr({
            'src': imageUrl,
            'data-src': imageUrl,
            'data-large_image': largeImage,
            'srcset': imageSrcset
        });
        
        // 更新主图跳转链接
        $('#main-image a').attr('href', largeImage);
        
        // 更新主图容器的缩略图标识属性
        $('#main-image').attr('data-thumb', thumbUrl);
    });
});

额外注意事项 #

• 原HTML中缩略图容器的class存在拼写错误：wwoocommerce-product-gallery--with-thumbnails多了一个前缀w，建议修正为woocommerce-product-gallery--with-thumbnails，避免后续样式或JS选择器出错
• 若修复后仍无效果，检查浏览器控制台是否存在WooCommerce自带画廊脚本的冲突，可尝试在主题functions.php中禁用默认画廊脚本：

add_action( 'wp_enqueue_scripts', 'disable_woocommerce_gallery_scripts', 99 );
function disable_woocommerce_gallery_scripts() {
    wp_dequeue_script( 'wc-single-product' );
}

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