如何为WooCommerce色板显示的缺货变体添加out-of-stock类

我懂你要解决的问题——之前找到的代码能给下拉列表里的缺货变体加灰，但色板的渲染逻辑完全不同，得换个方式处理。下面是一套可行的方案，核心思路是先找出所有缺货变体对应的属性值，再在色板渲染时给对应选项加上自定义类。

实现代码 #

// 收集当前可变产品中，所有缺货变体对应的属性值
function get_out_of_stock_variation_attributes( $product_id ) {
    $out_of_stock_attrs = array();
    $product = wc_get_product( $product_id );
    
    if ( $product->is_type( 'variable' ) ) {
        foreach ( $product->get_available_variations() as $variation ) {
            $variation_obj = wc_get_product( $variation['variation_id'] );
            if ( ! $variation_obj->is_in_stock() ) {
                // 遍历该缺货变体的所有属性，记录对应的属性值
                foreach ( $variation['attributes'] as $attr_key => $attr_value ) {
                    $attr_name = str_replace( 'attribute_', '', $attr_key );
                    if ( ! isset( $out_of_stock_attrs[$attr_name] ) ) {
                        $out_of_stock_attrs[$attr_name] = array();
                    }
                    $out_of_stock_attrs[$attr_name][] = $attr_value;
                }
            }
        }
    }
    
    return $out_of_stock_attrs;
}

// 修改色板属性选项的HTML输出，添加out-of-stock类
add_filter( 'woocommerce_variation_option_name', 'add_out_of_stock_class_to_swatch', 10, 3 );
function add_out_of_stock_class_to_swatch( $option_name, $option, $product ) {
    if ( ! $product->is_type( 'variable' ) ) {
        return $option_name;
    }
    
    $out_of_stock_attrs = get_out_of_stock_variation_attributes( $product->get_id() );
    $attr_name = wc_attribute_name( $product->get_variation_attribute_name( $option ) );
    
    // 检查当前属性选项是否属于缺货变体
    if ( isset( $out_of_stock_attrs[$attr_name] ) && in_array( $option, $out_of_stock_attrs[$attr_name] ) ) {
        // 这里根据你的色板结构调整HTML，下面是两种常见情况：
        // 1. 带文字的属性色板（比如尺寸）
        return '<span class="swatch-option out-of-stock">' . $option_name . '</span>';
        // 2. 颜色/图片色板（无文字，仅背景）
        // return '<span class="swatch-color out-of-stock" style="background-color:' . $option . '"></span>';
    }
    
    return $option_name;
}

关键说明 #

1. 适配不同的色板结构：
   不同主题或色板插件的HTML结构不一样，你需要根据自己的实际情况修改代码中返回的HTML片段。比如如果用的是第三方色板插件（如WooCommerce Color or Image Variation Swatches），可能需要改用插件提供的钩子（比如wvs_swatch_attribute_html），但核心逻辑还是先收集缺货属性值，再给对应元素加类。

2. 和下拉列表代码的区别：
   你之前用的woocommerce_variation_is_active钩子是控制下拉列表里的变体是否可点击，但色板是直接渲染单个属性选项，所以必须修改属性选项的输出HTML才能添加自定义类。

3. 样式补充：
   加完类后，你还需要在CSS里写对应的样式，比如：

   .swatch-option.out-of-stock {
       opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
   }
   

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