如何在WooCommerce中根据库存状态显示或隐藏缺货按钮

需要实现功能：当产品（含任一变体）缺货时显示指定提示，库存充足则隐藏。现有代码未生效，相关信息如下：

• 目标HTML结构：

<div class="woocommerce-variation-add-to-cart variations_button">
	<p class="stock out-of-stock">Out of stock, Can be backordered</p>
</div>

• 当前使用的PHP+JavaScript代码（未生效）：

// Add Custom Content Before 'Add To Cart' Button On Product Page
function my_content() {
    global $product;
    
    // Check if the product or any of its variations is out of stock
    $is_out_of_stock = false;
    
    if ($product->get_manage_stock() && $product->get_stock_quantity() <= 0) {
        $is_out_of_stock = true;
    }
    
    if ($product->is_type('variable') && !$is_out_of_stock) {
        foreach ($product->get_children() as $variation_id) {
            $variation = wc_get_product($variation_id);
            if ($variation && $variation->get_manage_stock() && $variation->get_stock_quantity() <= 0) {
                $is_out_of_stock = true;
                break;
            }
        }
    }
    
    // Display the out-of-stock message if needed
    if ($is_out_of_stock) {
        echo '<p class="stock out-of-stock">Out of stock, Can be backordered</p>';
    }
    
    // Enqueue JavaScript to dynamically show or hide the out-of-stock message
    ?>
    <script>
        jQuery(function($) {
            var isOutOfStock = <?php echo $is_out_of_stock ? 'true' : 'false'; ?>;
            if (!isOutOfStock) {
                $('.stock.out-of-stock').hide();
            }
        });
    </script>
    <?php
}

// Add the action hook only once
add_action('woocommerce_before_add_to_cart_button', 'my_content');

1. 库存判断逻辑不准确：原代码仅通过get_manage_stock()和get_stock_quantity()判断，未考虑WooCommerce内置的is_in_stock()方法，该方法会综合库存设置（如是否允许缺货下单、库存阈值等）返回准确的缺货状态。
2. 未监听变体切换事件：变量产品切换变体时页面不会重新加载，原JS仅在初始化时执行，无法动态更新提示的显示状态。
3. 提示位置错误：原代码将提示输出在添加购物车按钮前，而变量产品的库存状态通常与variations_button容器关联，位置不匹配导致变体切换时无法正确绑定状态。

替换原代码为以下实现，修正逻辑并添加变体监听：

function custom_out_of_stock_button() {
    global $product;
    
    // 初始化缺货状态
    $is_out_of_stock = !$product->is_in_stock();
    
    // 处理变量产品：检查所有变体是否有缺货的情况
    if ($product->is_type('variable')) {
        $has_out_of_stock_variation = false;
        foreach ($product->get_children() as $variation_id) {
            $variation = wc_get_product($variation_id);
            if ($variation && !$variation->is_in_stock()) {
                $has_out_of_stock_variation = true;
                break;
            }
        }
        $is_out_of_stock = $has_out_of_stock_variation;
    }

    // 输出提示元素（默认隐藏，后续通过JS控制显示）
    ?>
    <p class="stock out-of-stock custom-backorder-note" style="display:none;">Out of stock, Can be backordered</p>

    <script>
        jQuery(function($) {
            var $note = $('.custom-backorder-note');
            var productType = '<?php echo $product->get_type(); ?>';

            // 页面初始化时根据初始状态显示/隐藏
            function updateNoteVisibility(isOutOfStock) {
                if (isOutOfStock) {
                    $note.show();
                } else {
                    $note.hide();
                }
            }

            // 初始加载时的状态处理
            updateNoteVisibility(<?php echo $is_out_of_stock ? 'true' : 'false'; ?>);

            // 监听变量产品的变体切换事件
            if (productType === 'variable') {
                $('form.variations_form').on('show_variation hide_variation', function(event, variation) {
                    if (event.type === 'show_variation') {
                        // 切换到具体变体时，检查该变体是否缺货
                        updateNoteVisibility(!variation.is_in_stock);
                    } else {
                        // 隐藏变体选择时，恢复到产品整体的缺货状态判断
                        updateNoteVisibility(<?php echo $is_out_of_stock ? 'true' : 'false'; ?>);
                    }
                });
            }
        });
    </script>
    <?php
}
add_action('woocommerce_variation_add_to_cart_button', 'custom_out_of_stock_button');
add_action('woocommerce_single_product_summary', 'custom_out_of_stock_button', 31);

• 库存判断优化：使用WooCommerce内置的is_in_stock()方法，准确获取产品/变体的缺货状态，无需手动判断库存管理开关和库存数量。
• 动态监听变体切换：通过show_variation和hide_variation事件，实时响应用户的变体选择操作，更新提示的显示状态。
• 元素位置调整：通过woocommerce_variation_add_to_cart_button和woocommerce_single_product_summary钩子，将提示输出到变量产品的添加购物车容器内，确保与变体状态关联。
• 默认隐藏处理：初始状态下提示元素默认隐藏，避免页面加载时的闪烁问题，完全由JS控制显示逻辑。

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