WooCommerce单产品页切换变体时同步更新自定义Swiper产品图

核心实现逻辑 #

• 依托WooCommerce可变产品原生触发的JS事件捕获选中状态，不需要额外发起AJAX请求
• 后端提前输出初始轮播数据、所有变体的图片映射关系到前端全局变量
• 变体选中时动态更新Swiper幻灯片内容，变体重置时自动还原初始轮播

第一步：改造product-image.php模板 #

在原有模板代码的PHP逻辑末尾，新增可变产品的数据输出逻辑，修改后的完整PHP代码如下：

<?php
global $product;

$attachment_ids  = $product->get_gallery_image_ids();
$image_urls      = array();
$image_id        = $product->get_image_id();
if ( $image_id ) {
    $image_url = wp_get_attachment_image_url( $image_id, 'full' );
    $image_urls[ 0 ] = $image_url;
}

foreach ( $attachment_ids as $attachment_id ) {
    $image_urls[] = wp_get_attachment_url( $attachment_id );
}

// 新增：可变产品输出变体数据供前端调用
if ( $product->is_type( 'variable' ) ) {
    $variations_data = array();
    $available_variations = $product->get_available_variations();
    foreach ( $available_variations as $variation ) {
        $variation_obj = wc_get_product( $variation['variation_id'] );
        $variation_img_id = $variation_obj->get_image_id();
        $variations_data[] = array(
            'variation_id' => $variation['variation_id'],
            'attributes'   => $variation['attributes'],
            'image_url'    => wp_get_attachment_image_url( $variation_img_id, 'full' )
            // 若需要变体专属画廊，可在此处追加变体gallery图片url字段
        );
    }
    // 把数据注入到变体脚本前，确保JS能读取到
    wp_add_inline_script( 
        'wc-add-to-cart-variation', 
        'const productInitialSlides = ' . wp_json_encode( $image_urls ) . '; const productVariationsMap = ' . wp_json_encode( $variations_data ) . ';', 
        'before' 
    );
}
?>
<div class="swiper swiper-single-product">
    <div class="swiper-wrapper">
        <?php 
        foreach ( $image_urls as $image_src_url ) {
            echo '<div class="swiper-slide"><figure class="zoom"><img src="' . $image_src_url . '"></figure></div>';
        }
        ?>
    </div>
    <div class="swiper-pagination"></div>
</div>

第二步：扩展Swiper初始化JS逻辑 #

在原有Swiper初始化代码后，新增WooCommerce变体事件监听，完整JS代码如下：

// 初始化Swiper
const swiper = new Swiper(".swiper-single-product", {
  slidesPerView: 1,
  grabCursor: false,
  preloadImages: false,
  lazyLoading: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
});

// 监听变体选中完成事件
jQuery(document).on('found_variation', 'form.variations_form', function(event, variation) {
  // 匹配当前选中变体的图片数据
  const activeVariation = productVariationsMap.find(item => item.variation_id === variation.variation_id);
  if (!activeVariation?.image_url) return;

  // 替换轮播首屏（主图位置）为变体图片
  swiper.slides[0].querySelector('img').src = activeVariation.image_url;
  
  // --- 如果需要替换整个轮播为变体专属图集，打开下面注释即可 ---
  // swiper.removeAllSlides();
  // swiper.appendSlide(`<div class="swiper-slide"><figure class="zoom"><img src="${activeVariation.image_url}"></figure></div>`);
  // 如有变体画廊数据，可在此循环追加slide

  // 切回第一屏、更新Swiper状态
  swiper.slideTo(0, 300);
  swiper.pagination.update();
  swiper.update();
});

// 监听变体重置事件（清空选择时触发），还原初始轮播
jQuery(document).on('reset_image', 'form.variations_form', function() {
  swiper.slides[0].querySelector('img').src = productInitialSlides[0];
  
  // --- 如果用了整组轮播替换逻辑，打开下面注释还原初始内容 ---
  // swiper.removeAllSlides();
  // productInitialSlides.forEach(imgUrl => {
  //   swiper.appendSlide(`<div class="swiper-slide"><figure class="zoom"><img src="${imgUrl}"></figure></div>`);
  // });

  swiper.slideTo(0, 300);
  swiper.pagination.update();
  swiper.update();
});

适配说明 #

• 如果需要点击变体选项即刻触发切换（不等WooCommerce校验变体库存/可用性），可以额外给变体选择下拉/色卡按钮绑定change/click事件，匹配当前选中的属性组合找到对应变体数据，执行相同的图片替换逻辑即可
• 如果主题对WooCommerce变体脚本做了延迟加载，注意把自定义JS的加载优先级调到变体脚本之后，避免读取不到全局变量
• 图片尺寸可以根据自身主题需求，把PHP里的full尺寸参数改成主题自定义的商品图尺寸，避免加载过大图片影响性能

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