如何在WooCommerce可变产品未选变体时显示自定义提示文本？

一、添加页面加载时的默认提示 #

不用直接修改主题的content-single-product.php，用WooCommerce的钩子更稳妥，避免主题更新丢失代码。将以下代码添加到主题的functions.php文件中：

add_action( 'woocommerce_single_product_summary', 'add_default_availability_message', 25 );
function add_default_availability_message() {
    // 仅针对可变产品显示
    if ( ! wc_product_is_type( 'variable' ) ) return;
    
    echo '<div class="woocommerce-variation-availability default-availability">选择地点和日期查看库存情况</div>';
}

如果坚持要修改主题文件，可在content-single-product.php的变体表单区域，直接插入上述HTML代码即可。

二、调整库存文本过滤器 #

通过woocommerce_get_availability_text过滤器确保变体选中时的库存消息正确输出：

add_filter( 'woocommerce_get_availability_text', 'custom_variation_availability_text', 10, 2 );
function custom_variation_availability_text( $text, $product ) {
    // 仅针对变体产品处理
    if ( $product->is_type( 'variation' ) ) {
        $text = $product->is_in_stock() ? '有货' : '缺货';
    }
    return $text;
}

三、添加JavaScript控制提示切换 #

添加以下JS代码，监听变体选择事件，切换默认提示和实际库存消息的显示：

jQuery(document).ready(function($) {
    // 初始状态隐藏WooCommerce默认的库存容器
    $('.woocommerce-variation .woocommerce-variation-availability').hide();
    
    // 监听变体选择变化
    $('form.variations_form').on('woocommerce_variation_select_change', function() {
        var $form = $(this);
        var $defaultMsg = $('.default-availability');
        var $variationAvail = $form.find('.woocommerce-variation .woocommerce-variation-availability');
        
        // 检查是否所有变体选项已选择
        var allSelected = true;
        $form.find('.variations select').each(function() {
            if ($(this).val() === '') {
                allSelected = false;
                return false;
            }
        });
        
        if (allSelected) {
            // 选中所有选项时，隐藏默认提示，显示变体库存消息
            $defaultMsg.hide();
            $variationAvail.show();
        } else {
            // 未选全时，显示默认提示，隐藏变体库存消息
            $defaultMsg.show();
            $variationAvail.hide();
        }
    });
    
    // 页面加载时触发一次检查
    $('form.variations_form').trigger('woocommerce_variation_select_change');
});

可将这段JS代码添加到主题的自定义JS区域，或者通过wp_enqueue_script函数规范加载。

补充样式（可选） #

如果默认提示样式和WooCommerce自带库存消息不一致，可添加CSS统一样式：

.default-availability {
    margin: 1em 0;
    padding: 1em;
    border-radius: 4px;
    background-color: #f0f0f0;
}

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