WooCommerce：如何隐藏未设置对应变体的产品属性？

嘿，这个问题我之前帮客户解决过！WooCommerce默认的变体选择逻辑确实有点反直觉——明明没有对应变体还显示所有选项，用户选错了才弹出提示，体验很差。下面是我实测有效的解决方案，分分钟搞定：

核心思路是监听用户的属性选择操作，实时过滤出当前已选属性对应的可用选项，把没有匹配变体的选项直接隐藏掉。

1. 核心JavaScript代码 #

这段代码会自动处理变体属性的动态过滤，你可以直接用：

jQuery(document).ready(function($) {
    // 先保存所有属性的原始选项，方便后续重置
    var originalAttributes = {};
    
    $('.variations select').each(function() {
        var attrName = $(this).attr('name');
        originalAttributes[attrName] = $(this).html();
    });

    // 监听变体重置事件，恢复所有选项
    $('form.variations_form').on('reset_data', function() {
        $('.variations select').each(function() {
            var attrName = $(this).attr('name');
            $(this).html(originalAttributes[attrName]);
            $(this).prop('disabled', false);
        });
    });

    // 监听属性选择变化，实时过滤选项
    $('.variations select').change(function() {
        var $form = $(this).closest('form.variations_form');
        var selectedAttrs = {};

        // 收集当前用户已经选中的属性
        $form.find('.variations select').each(function() {
            var attrName = $(this).attr('name');
            var attrValue = $(this).val();
            if (attrValue) {
                selectedAttrs[attrName] = attrValue;
            }
        });

        // 获取当前产品的所有可用变体
        var allVariations = $form.data('product_variations');
        if (!allVariations) return;

        // 遍历还没选择的属性，过滤出可用选项
        $('.variations select').not('[value!=""]').each(function() {
            var $select = $(this);
            var currentAttrName = $select.attr('name');
            var availableValues = [];

            // 逐个检查变体，找出匹配已选属性的变体，收集当前属性的可用值
            $.each(allVariations, function(index, variation) {
                var matches = true;
                $.each(selectedAttrs, function(attrName, attrValue) {
                    if (variation.attributes[attrName] !== attrValue) {
                        matches = false;
                        return false;
                    }
                });
                if (matches) {
                    availableValues.push(variation.attributes[currentAttrName]);
                }
            });

            // 对可用值去重，避免重复选项
            availableValues = $.unique(availableValues);

            // 恢复原始选项，然后隐藏不可用的选项
            $select.html(originalAttributes[currentAttrName]);
            $select.find('option').each(function() {
                var optionValue = $(this).val();
                if (optionValue && !$.inArray(optionValue, availableValues)) {
                    $(this).hide();
                }
            });

            // 如果当前选中的选项已经不可用，自动重置选择并触发更新
            if ($select.val() && !$.inArray($select.val(), availableValues)) {
                $select.val('');
                $select.trigger('change');
            }
        });
    });
});

代码逻辑说明： #

• 首先保存所有属性的原始选项，防止重置时丢失内容
• 监听属性选择变化，收集用户已选的属性值
• 遍历产品的所有变体，筛选出匹配已选属性的变体，提取当前未选属性的可用值
• 隐藏当前属性中不在可用值列表里的选项
• 如果用户之前选的选项变得不可用，自动重置并触发更新，保证逻辑一致性

2. 如何将代码添加到你的站点 #

这里提供三种安全的添加方式，选你顺手的就行：

• 方法一：通过主题functions.php添加
  把下面的代码加到你当前主题的functions.php文件末尾（建议用子主题，避免主题更新丢失代码）：

  add_action('wp_footer', 'custom_variation_attribute_hiding');
  function custom_variation_attribute_hiding() {
      // 只在可变产品页面加载代码
      if (is_product() && get_post_type(get_the_ID()) === 'product' && wc_get_product(get_the_ID())->is_type('variable')) {
  ?>
  <script>
  // 把上面的JavaScript代码粘贴到这里
  </script>
  <?php
      }
  }
  

• 方法二：用代码片段插件添加
  安装并激活类似「Code Snippets」的插件，新建一个代码片段，把上面的PHP+JS代码粘贴进去，设置为「仅在前端运行」，保存激活即可。这种方法不用修改主题文件，更安全。

• 方法三：块编辑器添加
  如果用的是WordPress块编辑器，可以在产品页面底部添加一个「自定义HTML」区块，把JavaScript代码直接粘贴进去，更新页面即可。

3. 注意事项 #

• 确保你的主题没有修改WooCommerce默认的变体选择结构（比如.variations select、form.variations_form这些选择器），如果主题做了自定义，可能需要调整代码里的选择器。
• 如果你用了缓存插件（比如WP Rocket、W3 Total Cache），添加代码后记得清除缓存，否则可能看不到效果。
• 测试所有变体组合，比如选蓝色后确认只有M码显示，选黄色/绿色后显示M/L/XL，确保逻辑正确。

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