WooCommerce：自定义变体选择时触发缩略图切换的条件？

要让自定义变体选择器触发缩略图切换，你的HTML结构必须匹配WooCommerce内置JS（add-to-cart-variation.js）的监听规则，具体需要满足以下几点：

• 外层容器要求：所有属性选择器必须包裹在带有variations类的容器内（原生用<table class="variations">，也可以用<div class="variations">）
• 下拉框的CSS类：每个属性<select>标签必须添加wc-select类，同时要加上attribute-{属性slug}的类（比如属性slug是pa_size，则类为attribute-pa-size）
• 数据属性与命名规则：
  • 保持name="attribute_{属性slug}"的命名（你当前代码已经满足）
  • data-attribute_name属性值必须为attribute_{属性slug}（注意属性slug要和产品后台设置的一致，比如pa_color而非color）
• 选中状态的正确判定：selected()函数的参数要调整为用$product->get_variation_default_attribute($attribute_name)匹配默认选中的变体选项，而非$product->get_attribute($attribute_name)（后者获取的是产品所有属性值集合，不是默认选中项）

另外要确保页面正常加载了WooCommerce的add-to-cart-variation.js脚本（variable产品页面默认会加载，无需额外引入）。

调整后的自定义结构示例（假设属性slug是pa_size）：

<div class="variations">
  <select 
    id="someId" 
    class="wc-select attribute-pa-size" 
    name="attribute_pa_size" 
    data-attribute_name="attribute_pa_size" 
    data-show_option_none="yes"
  >
    <option value=""><?php echo esc_html('Select an option'); ?></option>
    <?php foreach ($options as $option) : ?>
        <option 
          value="<?php echo esc_attr($option); ?>" 
          <?php echo selected($product->get_variation_default_attribute($attribute_name), sanitize_title($option), false); ?> 
          class="attached enabled"
        >
            <?php echo esc_html($option); ?>
        </option>
    <?php endforeach; ?>
  </select>
</div>

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