WooCommerce商店/归档页选择变体时如何切换对应产品图片？

直接套用单品页加购模板不生效，核心有3个原因：

• WooCommerce变体图片切换依赖的wc-add-to-cart-variationJS脚本、配套样式默认仅在单品页加载，商店/产品归档页不会默认加载
• 变体切换的JS逻辑绑定了单品页固定的DOM结构（图片容器类为.woocommerce-product-gallery、变体表单对应唯一产品ID），商店页产品列表的图片结构、类名和单品页完全不一致，JS找不到要替换的图片元素
• 商店页存在多个可变产品，默认脚本初始化逻辑仅适配单产品场景，会出现ID冲突、选择器匹配错误的问题

所有PHP代码建议放在子主题的functions.php文件中，避免主题更新丢失，按以下步骤修改即可：

步骤1：在商店页加载变体依赖的资源 #

添加如下代码，判断当前是商店/产品归档页时，主动加载变体切换需要的脚本和样式：

add_action( 'wp_enqueue_scripts', 'enqueue_variation_scripts_on_shop' );
function enqueue_variation_scripts_on_shop() {
    if ( is_shop() || is_product_taxonomy() ) {
        // 加载变体加购脚本
        wp_enqueue_script( 'wc-add-to-cart-variation' );
        // 加载WooCommerce单品页图库样式
        wp_enqueue_style( 'woocommerce-general' );
    }
}

步骤2：适配商店页产品图片的DOM结构 #

给商店页每个产品的图片容器添加和单品页匹配的类名、绑定唯一产品标识，方便JS定位元素。如果你的主题使用默认的WooCommerce循环图片钩子，可以用如下代码修改：

add_filter( 'woocommerce_post_class', 'add_variation_gallery_class_to_shop_item', 10, 2 );
function add_variation_gallery_class_to_shop_item( $classes, $product ) {
    if ( ( is_shop() || is_product_taxonomy() ) && $product->is_type( 'variable' ) ) {
        // 给可变产品的外层容器加标识类
        $classes[] = 'shop-variable-product';
    }
    return $classes;
}

// 修改商店页图片容器结构，添加匹配的类
add_action( 'woocommerce_before_shop_loop_item_title', 'wrap_shop_product_image_with_gallery_class', 9 );
function wrap_shop_product_image_with_gallery_class() {
    global $product;
    if ( $product->is_type( 'variable' ) ) {
        echo '<div class="woocommerce-product-gallery shop-product-gallery" data-product-id="' . esc_attr( $product->get_id() ) . '">';
    }
}

add_action( 'woocommerce_before_shop_loop_item_title', 'close_shop_product_image_wrap', 11 );
function close_shop_product_image_wrap() {
    global $product;
    if ( $product->is_type( 'variable' ) ) {
        echo '</div>';
    }
}

步骤3：添加自定义JS监听变体切换事件，替换对应图片 #

添加如下JS代码，可以放在子主题的自定义JS文件中，或者用wp_add_inline_script挂载到之前加载的变体脚本后面：

jQuery(document).ready(function($) {
    // 监听变体选择成功事件
    $(document).on('found_variation', '.shop-variable-product form.variations_form', function(event, variation) {
        // 获取当前产品的ID，定位对应图片容器
        const $gallery = $(this).closest('.shop-variable-product').find('.shop-product-gallery');
        
        // 替换图片src、srcset、alt属性
        if (variation && variation.image && variation.image.src) {
            const $img = $gallery.find('img');
            $img.attr('src', variation.image.src);
            $img.attr('srcset', variation.image.srcset);
            $img.attr('alt', variation.image.alt);
        }
    });

    // 监听变体重置事件，恢复默认主图
    $(document).on('reset_data', '.shop-variable-product form.variations_form', function(event) {
        const $gallery = $(this).closest('.shop-variable-product').find('.shop-product-gallery');
        const $img = $gallery.find('img');
        const defaultSrc = $img.data('default-src') || $img.attr('src');
        const defaultSrcset = $img.data('default-srcset') || $img.attr('srcset');
        
        $img.attr('src', defaultSrc);
        $img.attr('srcset', defaultSrcset);
    });

    // 页面加载时保存默认图片信息
    $('.shop-variable-product .shop-product-gallery img').each(function() {
        $(this).data('default-src', $(this).attr('src'));
        $(this).data('default-srcset', $(this).attr('srcset'));
    });
});

步骤4：保留原有加购模板替换代码 #

你之前的代码不需要修改，保留即可：

add_action( 'woocommerce_before_shop_loop', 'show_production_variations_on_shop_page' );
function show_production_variations_on_shop_page() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30 );
}

注：如果你的主题自定义了商店页产品列表的HTML结构，需要根据主题实际的类名调整上述代码中的选择器，保证能正确定位到图片容器和变体表单。

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