如何在 WooCommerce 产品页中实现点击缩略图切换主图-js教程-PHP中文网

如何在 WooCommerce 产品页中实现点击缩略图切换主图

本文介绍如何通过 jQuery 实现 WooCommerce 产品画廊中点击缩略图即时替换主图的功能，解决因未同步更新 src、data-src 和 srcset 属性导致的图片不刷新问题。

本文介绍如何通过 jquery 实现 woocommerce 产品画廊中点击缩略图即时替换主图的功能，解决因未同步更新 `src`、`data-src` 和 `srcset` 属性导致的图片不刷新问题。

WooCommerce 默认产品画廊支持缩略图切换，但部分主题（尤其是自定义或轻量级主题）可能未启用该功能，此时需手动增强交互逻辑。核心原理是：监听缩略图区域（.gallery）内 <a></a> 标签的点击事件，提取其子 <img> 的 data-src（原始高清图地址），并同时更新主图 <img> 元素的 src、data-src 和 srcset 三个关键属性——仅改 src 不足以触发现代浏览器的响应式图片重载与懒加载兼容逻辑。

以下为完整、健壮的解决方案：

jQuery(document).ready(function($) {
    // 使用事件委托，确保动态加载的缩略图也生效
    $('.woocommerce-product-gallery__wrapper').on('click', '.woocommerce-product-gallery__image a', function(e) {
        e.preventDefault();

        const $thumbImg = $(this).find('img');
        const imageUrl = $thumbImg.data('src') || $thumbImg.attr('src'); // 兜底取 src

        if (!imageUrl) return;

        const $mainImg = $('#main-image img');
        // 同步更新三项关键属性，确保兼容性与响应式表现
        $mainImg.attr({
            'src': imageUrl,
            'data-src': imageUrl,
            'srcset': imageUrl + ' 1000w' // 可根据实际尺寸调整，或动态生成多分辨率 srcset
        });

        // 可选：同步更新 data-large_image（用于 Lightbox 等插件）
        $mainImg.attr('data-large_image', imageUrl);
    });
});

✅ 关键注意事项：

必须同步更新 src、data-src 和 srcset：WooCommerce 内置 JS（如 zoom.js 或 photoswipe 集成）依赖这些属性触发图片切换与放大；仅改 src 会导致 Lightbox 打开旧图、缩放失效或响应式图片不生效。
选择器更精准：使用 .woocommerce-product-gallery__wrapper 作为委托容器，并匹配 .woocommerce-product-gallery__image a，避免误触其他链接，提升兼容性。
容错处理：通过 data('src') || attr('src') 防止因某些主题省略 data-src 导致空值。
不要移除原生 JS：此脚本是对 WooCommerce 默认行为的增强，而非替代，因此无需禁用 wc-product-gallery 脚本。