如何调整WooCommerce产品页首访显示特色图及变体图的逻辑？

我懂你遇到的这个糟心问题——点击带专属特色图的商品进入产品页，本该显示产品本身的真实特色图，结果跳出来的却是变体图。想要实现首次访问显示主产品特色图，仅在手动切换变体时才更新对应图片，同时保留预选中的变体状态，可以按以下步骤修改：

第一步：调整产品图片模板代码 #

先修改你的single/product-image.php文件，确保主产品的特色图始终作为轮播的第一张图，同时给它标记一个专属类，方便后续JS识别：

替换原有<figure>标签内的代码为以下内容：

<figure class="woocommerce-product-gallery__wrapper <?php echo implode(' ', $slider_classes); ?>" data-flickity-options='{ "cellAlign": "center", "wrapAround": true, "autoPlay": false, "prevNextButtons":true, "adaptiveHeight": true, "imagesLoaded": true, "lazyLoad": 1, "dragThreshold" : 15, "pageDots": false, "rightToLeft": <?php echo $rtl; ?> }'>
    <?php
    // 强制将主产品特色图放在轮播最前面
    if ( $product->get_image_id() ) {
        $main_image_html = flatsome_wc_get_gallery_image_html( $product->get_image_id(), true );
        // 给主图添加自定义类用于标记
        $main_image_html = str_replace('woocommerce-product-gallery__image', 'woocommerce-product-gallery__image main-product-image', $main_image_html);
        echo $main_image_html;
    } else {
        echo '<div class="woocommerce-product-gallery__image--placeholder">';
        echo sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        echo '</div>';
    }

    // 加载其他画廊图片（跳过主图避免重复）
    $attachment_ids = $product->get_gallery_image_ids();
    foreach ( $attachment_ids as $attachment_id ) {
        if ( $attachment_id == $product->get_image_id() ) continue;
        echo flatsome_wc_get_gallery_image_html( $attachment_id, true );
    }

    do_action( 'woocommerce_product_thumbnails' );
    ?>
</figure>

这段代码的核心作用：

• 把主产品特色图固定在轮播首位
• 给主图加上main-product-image类，方便后续JS精准定位
• 跳过重复的主图，避免画廊里出现两张一模一样的图片

第二步：添加自定义JavaScript控制逻辑 #

接下来需要添加JS代码，阻止WooCommerce默认的「预选中变体自动切换图片」行为，同时保留用户手动切换变体时的图片更新功能。你可以把这段代码添加到主题的functions.php文件，或者通过自定义JS插件引入：

add_action('wp_footer', 'custom_product_image_variant_behavior');
function custom_product_image_variant_behavior() {
    // 仅在产品页加载该脚本
    if ( !is_product() ) return;
    global $product;
    if ( !$product->is_type('variable') ) return;
    ?>
    <script>
    jQuery(document).ready(function($) {
        // 获取主图在轮播中的索引
        const mainImageIndex = $('.main-product-image').index();
        
        // 页面初始化时强制切换到主图，忽略预选中的变体
        $('.woocommerce-product-gallery__wrapper').flickity('select', mainImageIndex);
        
        // 移除WooCommerce默认的变体切换事件，重新自定义逻辑
        $('form.variations_form').off('found_variation');
        $('form.variations_form').on('found_variation', function(event, variation) {
            // 只有用户主动切换变体时，才更新对应图片
            if (variation.image_src) {
                const variantImage = $('.woocommerce-product-gallery__image img[src="' + variation.image_src + '"]').closest('.woocommerce-product-gallery__image');
                if (variantImage.length) {
                    $('.woocommerce-product-gallery__wrapper').flickity('select', variantImage.index());
                }
            }
        });
    });
    </script>
    <?php
}

这段JS的关键逻辑：

1. 页面加载完成后，强制把轮播切换到主产品特色图
2. 移除WooCommerce默认的found_variation事件（这个事件会导致预选中变体时自动换图）
3. 重新绑定事件，只有当用户主动操作切换变体时，才同步切换到对应的变体图片
4. 预选中的变体选项会保持选中状态，只是初始图片不会自动切换

第三步：测试验证 #

修改完成后记得清除网站缓存，然后验证以下场景：

• 点击带特色图的可变产品进入产品页，显示的是主产品的特色图，而非预选中变体的图片
• 预选中的变体选项依然处于选中状态
• 手动切换其他变体时，图片会自动切换到对应变体的图片
• 切换回预选中的变体，图片也会同步切换

这样就完美实现了你想要的效果，而且完全适配Flatsome主题的Flickity图片轮播组件。

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