WooCommerce实现所有变体缺货时默认显示售罄灰色按钮

我明白你的需求了——当可变商品的所有变体都缺货时，页面一加载就把「添加到购物车」按钮直接改成「Sold out」并设置灰色样式，而不是等用户选变体才变化；如果还有至少一个变体有库存，就保留默认的选择变体逻辑。

你的现有代码只处理了选择变体后的按钮变化，缺少页面初始化时的全局库存判断。下面是完整的解决方案，结合PHP后台判断和前端JS来实现：

完整代码实现 #

把这段代码添加到你的主题functions.php文件或者自定义插件中：

add_action('woocommerce_before_single_product', 'check_all_variations_stock_status');
function check_all_variations_stock_status() {
    global $product;
    
    // 只针对可变商品
    if (!$product->is_type('variable')) return;
    
    $all_out_of_stock = true;
    $variations = $product->get_available_variations();
    
    // 遍历所有变体，检查是否有库存
    foreach ($variations as $variation) {
        $variation_obj = wc_get_product($variation['variation_id']);
        if ($variation_obj->is_in_stock()) {
            $all_out_of_stock = false;
            break;
        }
    }
    
    // 如果所有变体都缺货，输出JS和CSS来修改按钮
    if ($all_out_of_stock) {
        ?>
        <style>
            .single_add_to_cart_button.sold-out {
                background-color: #ccc !important;
                border-color: #ccc !important;
                cursor: not-allowed;
                pointer-events: none;
            }
        </style>
        <script>
            jQuery(document).ready(function($) {
                // 页面加载时修改按钮文本和样式
                var $addCartBtn = $('.single_add_to_cart_button');
                $addCartBtn.text('<?php esc_html_e("Sold Out", "woocommerce"); ?>').addClass('sold-out');
            });
        </script>
        <?php
    } else {
        // 有可用变体时，保留默认逻辑，但处理变体选择后的状态
        ?>
        <script>
            jQuery(document).ready(function($) {
                // 监听变体选择变化
                $('form.variations_form').on('show_variation hide_variation', function(event, variation) {
                    var $addCartBtn = $('.single_add_to_cart_button');
                    
                    if (event.type === 'show_variation') {
                        // 显示选中的变体时，判断库存状态
                        if (variation && !variation.is_in_stock) {
                            $addCartBtn.text('<?php esc_html_e("Sold Out", "woocommerce"); ?>').addClass('sold-out');
                        } else {
                            $addCartBtn.text('<?php esc_html_e("Add to cart", "woocommerce"); ?>').removeClass('sold-out');
                        }
                    } else {
                        // 隐藏变体（未选择或切换变体时），恢复默认按钮文本
                        $addCartBtn.text('<?php esc_html_e("Select options", "woocommerce"); ?>').removeClass('sold-out');
                    }
                });
            });
        </script>
        <?php
    }
}

代码说明 #

1. PHP库存判断：

   • 首先获取当前可变商品的所有变体，遍历每个变体的库存状态
   • 如果所有变体都缺货，标记$all_out_of_stock为true，否则为false

2. 全缺货时的处理：

   • 输出自定义CSS，给按钮设置灰色背景、禁用点击事件，避免用户点击后弹出选择变体的提示
   • 页面加载完成后，直接修改按钮文本为「Sold Out」并添加样式类

3. 有可用变体时的处理：

   • 监听WooCommerce原生的show_variation和hide_variation事件
   • 选中变体时，如果该变体缺货，修改按钮文本和样式；如果有库存，恢复「Add to cart」
   • 未选择变体或切换变体时，恢复默认的「Select options」文本

效果验证 #

• 当所有变体缺货时：页面加载后按钮直接显示「Sold Out」，灰色不可点击，不会触发选择变体的提示
• 当有至少一个变体有库存时：初始显示「Select options」，选到缺货变体时按钮变「Sold Out」灰色，选到有货变体时显示「Add to cart」可点击

这样就完美实现了你想要的两种场景的逻辑啦！

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