本文介绍如何通过 jQuery 实现 WooCommerce 产品画廊中点击缩略图即时替换主图的功能，解决因未同步更新 src、data-src 和 srcset 属性导致的图片不刷新问题。
本文介绍如何通过 jquery 实现 woocommerce 产品画廊中点击缩略图即时替换主图的功能，解决因未同步更新 `src`、`data-src` 和 `srcset` 属性导致的图片不刷新问题。
在 WooCommerce 默认主题（如 Storefront 或 Twenty Twenty-Four）中，产品页面的主图区域与缩略图画廊是分离渲染的。虽然 HTML 结构中缩略图 <img> 标签携带了 data-src（原始大图地址）和 srcset（响应式图片集），但仅修改主图 <img> 的 src 属性不足以触发完整更新——WooCommerce 的 JS 图片懒加载、Lightbox 初始化及响应式逻辑会依赖 data-src 和 srcset 等属性进行二次处理。因此，必须同时更新 src、data-src 和 srcset 三个关键属性，才能确保主图正确显示、适配不同屏幕尺寸，并兼容 Lightbox 等扩展功能。
以下是经过验证的完整解决方案（推荐添加至子主题的 footer.php 底部或通过 wp_enqueue_script 加载）：
jQuery(document).ready(function($) {
// 使用事件委托监听动态生成的缩略图链接（兼容 AJAX 切换等场景）
$('.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('data-src');
const imageSrcset = $thumbImg.data('srcset') || $thumbImg.attr('srcset');
const imageAlt = $thumbImg.attr('alt') || '';
if (!imageUrl) return;
const $mainImg = $('#main-image img');
$mainImg
.attr({
'src': imageUrl,
'data-src': imageUrl,
'srcset': imageSrcset || imageUrl
})
.attr('alt', imageAlt);
// 可选：同步更新 data-large_image（用于 Lightbox）
$mainImg
.data('large_image', imageUrl)
.attr('data-large_image', imageUrl);
});
});
✅ 关键说明与注意事项：
-
选择器优化：使用
.woocommerce-product-gallery__wrapper作为委托容器，比.gallery更准确（避免误匹配其他画廊组件）；直接绑定到.woocommerce-product-gallery__image a提升可维护性。 -
健壮性增强：优先使用
.data()方法读取data-*属性（自动类型转换），并提供.attr()回退，兼容不同主题的数据写入方式。 -
无障碍与 SEO：同步更新
alt属性，保持语义化；若缩略图无alt，主图将保留原值或设为空（可根据需求调整默认值）。 -
Lightbox 兼容：显式设置
data-large_image，确保点击主图时 Lightbox 能正确加载高清图。 - 性能提示：避免重复绑定——本代码仅在 DOM 加载后执行一次，且利用事件委托无需遍历所有缩略图。
⚠️ 常见失败原因排查：
- 主图容器 ID 不为
#main-image？请检查实际 HTML，部分主题可能使用#product-image或无 ID，建议改用类选择器如'.woocommerce-product-gallery__image:first img'。 - jQuery 未正确加载？确认主题已引入 jQuery 且脚本在 jQuery 后执行（使用
wp_enqueue_script并声明'jquery'为依赖）。 - 缩略图图片未包含
data-src？可通过浏览器开发者工具检查元素属性；若缺失，需在主题函数中通过woocommerce_product_thumbnails钩子补充数据。
此方案轻量、兼容性强，无需修改 WooCommerce 核心文件，适用于绝大多数基于默认画廊结构的主题。完成部署后，用户点击任意缩略图即可实时切换主图，并保持响应式、懒加载与 Lightbox 功能正常运作。
