WooCommerce：开启隐藏无库存商品后，如何在单品页显示无库存变体？

1. 让无库存变体在单品页下拉选项中可见 #

开启「隐藏目录中的无库存商品」后，WooCommerce 会通过 woocommerce_variation_is_visible 钩子过滤掉无库存变体。我们只需在单品页场景下跳过这个过滤，就能让无库存变体出现在下拉框中，同时不影响归档页的隐藏逻辑：

add_filter( 'woocommerce_variation_is_visible', 'keep_oos_variations_visible_on_single', 10, 4 );
function keep_oos_variations_visible_on_single( $is_visible, $variation_id, $variable_product, $variation ) {
    // 仅在单品页强制显示所有变体
    if ( is_product() ) {
        $is_visible = true;
    }
    return $is_visible;
}

2. 给无库存变体添加灰化效果和「售罄」标注 #

通过 woocommerce_dropdown_variation_attribute_options_html 钩子修改下拉选项的 HTML，给完全无库存的属性选项添加禁用状态和文本标注：

add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'add_oos_label_to_variation_options', 10, 2 );
function add_oos_label_to_variation_options( $html, $args ) {
    global $product;
    
    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        return $html;
    }

    // 解析HTML DOM以便修改
    $dom = new DOMDocument();
    libxml_use_internal_errors( true );
    $dom->loadHTML( mb_convert_encoding( $html, 'HTML-ENTITIES', 'UTF-8' ) );
    libxml_clear_errors();

    foreach ( $dom->getElementsByTagName( 'option' ) as $option ) {
        $value = $option->getAttribute( 'value' );
        if ( empty( $value ) ) continue;

        // 检查该属性值对应的所有变体是否均无库存
        $all_oos = true;
        foreach ( $product->get_available_variations() as $variation ) {
            if ( $variation['attributes'][ "attribute_{$args['attribute']}" ] === $value ) {
                $variation_obj = wc_get_product( $variation['variation_id'] );
                if ( $variation_obj && $variation_obj->is_in_stock() ) {
                    $all_oos = false;
                    break;
                }
            }
        }

        if ( $all_oos ) {
            $option->setAttribute( 'disabled', 'disabled' );
            $option->nodeValue = "{$option->nodeValue} (售罄)";
        }
    }

    return $dom->saveHTML( $dom->getElementsByTagName( 'select' )->item(0) );
}

3. 修复前端AJAX自动隐藏问题（可选） #

部分场景下WooCommerce的前端AJAX会自动隐藏无库存选项，可添加JS强制显示禁用状态的选项：

jQuery(document).ready(function($) {
    $('body').on('woocommerce_update_variation_values', function() {
        $('select.variation option[disabled]').show();
    });
});

将上述代码添加到主题的 functions.php 文件，或使用自定义代码插件即可生效。

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