Woocommerce如何在特定商品变体中隐藏/排除指定变体属性

实现逻辑 #

你之前的代码只修改了下拉选项的参数，且判断逻辑不完整，无法实现动态隐藏整段属性字段的需求。正确的实现需要结合后端传参和前端变体事件监听，根据已选的变体属性动态控制Colors属性的显示状态。

操作步骤 #

1. 复制以下PHP代码添加到当前主题的functions.php文件，或使用自定义代码插件添加：

// 给变体添加额外数据，标记该变体需要隐藏的属性
add_filter( 'woocommerce_available_variation', 'add_variation_hidden_attributes_data', 10, 3 );
function add_variation_hidden_attributes_data( $variation_data, $product, $variation ) {
    // 此处设置触发隐藏的条件：当Printing Technique属性为LASER COMPASS时隐藏Colors
    $print_technique = $variation->get_attribute('pa_printing-technique');
    if( $print_technique === 'LASER COMPASS' ) {
        // 填入你站点Colors属性的实际slug
        $variation_data['hidden_attributes'] = array('pa_colors');
    }
    return $variation_data;
}

2. 在商品详情页引入以下JS代码，可通过主题自定义脚本功能添加，或挂载到WooCommerce脚本之后：

// 监听变体选择完成事件
jQuery(document).on('found_variation', function(event, variation) {
    // 先恢复所有属性字段的显示
    jQuery('.variations tr').show();
    // 存在需要隐藏的属性时执行操作
    if(variation.hidden_attributes && variation.hidden_attributes.length) {
        variation.hidden_attributes.forEach(attrSlug => {
            // 隐藏对应属性行
            const $target = jQuery(`.variations select[name="attribute_${attrSlug}"]`).closest('tr');
            $target.hide();
            // 给隐藏属性自动赋值，避免变体无法正常选中
            $target.find('select').val($target.find('select option:first').val()).trigger('change');
        });
    }
});

// 变体重置时恢复所有属性显示
jQuery(document).on('reset_data', () => {
    jQuery('.variations tr').show();
});

注意事项 #

• 代码中的pa_printing-technique、pa_colors需要替换为你站点对应属性的实际slug，可在WooCommerce后台「商品-属性」编辑页查看对应属性的slug值
• 如果需要调整触发隐藏的条件，只需修改PHP函数内的判断规则即可

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