WooCommerce可变产品双下拉：强制首个始终显示全部选项

要实现你需要的效果，我们需要从后端PHP修改属性选项的过滤逻辑，以及前端JS处理下拉切换时的重置行为两部分入手：

1. 后端PHP：让「Type」下拉始终显示所有选项 #

WooCommerce默认会根据已选的其他属性过滤当前属性的可用选项，我们需要覆盖这个行为，强制「Type」属性始终展示所有选项：

// 强制Type属性下拉加载全部术语，忽略其他属性的过滤
add_filter('woocommerce_dropdown_variation_attribute_options_args', 'force_all_type_attribute_options', 20, 1);
function force_all_type_attribute_options($args) {
    // 替换成你的属性名称（注意区分大小写）
    if ('Type' === $args['attribute']) {
        // WooCommerce属性的分类名前缀为pa_，拼接完整分类名
        $taxonomy = 'pa_' . strtolower($args['attribute']);
        
        // 获取该属性的所有术语（包含无变体的术语）
        $all_terms = get_terms([
            'taxonomy' => $taxonomy,
            'hide_empty' => false,
            'orderby' => 'name'
        ]);
        
        // 整理成下拉选项需要的键值对（slug => 名称）
        $full_options = [];
        foreach ($all_terms as $term) {
            $full_options[$term->slug] = $term->name;
        }
        
        // 替换默认的过滤后选项
        $args['options'] = $full_options;
    }
    return $args;
}

// 确保Type属性的选项不会因其他属性选择而被标记为不可用
add_filter('woocommerce_variation_is_active', 'keep_type_variations_available', 10, 3);
function keep_type_variations_available($active, $variation, $product) {
    $selected_attrs = WC()->session->get('selected_attributes');
    
    // 如果已选择了Size属性，强制保留Type相关的变体活跃状态
    if (!empty($selected_attrs['pa_size']) && $variation->get_attribute('pa_type')) {
        return true;
    }
    return $active;
}

2. 前端JS：切换Type下拉时重置Size下拉 #

当用户切换「Type」选项时，自动把「Size」下拉重置为初始状态：

你可以把以下代码添加到主题的functions.php文件中（或者自定义插件里）：

// 加载重置下拉的自定义脚本
add_action('wp_enqueue_scripts', 'reset_size_on_type_change');
function reset_size_on_type_change() {
    // 仅在产品详情页加载脚本
    if (is_product()) {
        wp_enqueue_script('jquery');
        
        // 内联添加JS逻辑，无需单独创建文件
        wp_add_inline_script('jquery', '
            jQuery(document).ready(function($) {
                // 监听Type下拉的change事件
                $("select[name=\'attribute_pa_type\']").on("change", function() {
                    // 找到Size下拉元素
                    const sizeSelect = $("select[name=\'attribute_pa_size\']");
                    // 重置为默认选项（空值对应初始提示文本）
                    sizeSelect.val("");
                    // 触发change事件，让WooCommerce更新变体状态
                    sizeSelect.trigger("change");
                });
            });
        ');
    }
}

注意事项 #

• 请确保属性的slug正确：WooCommerce中属性的分类名是pa_+属性名称的小写，比如「Type」对应pa_type，「Size」对应pa_size，如果你的属性slug不同，需要修改代码中的对应字段。
• 代码添加后，记得清除WooCommerce和浏览器的缓存，确保新逻辑生效。

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