WooCommerce中为每个商品变体显示自定义库存状态信息的技术实现问询

你的问题核心在于当前代码只是一次性输出所有变体的库存状态，没有和前端的变体选择交互绑定。要实现「选中某一变体才显示对应库存」的效果，我们需要结合PHP输出带唯一标识的库存文本，再用JavaScript监听WooCommerce的变体选择事件来控制显示逻辑。

下面是完全基于woocommerce_after_add_to_cart_form钩子实现的完整代码：

add_action( 'woocommerce_after_add_to_cart_form', 'change_stock_message', 5 );
function change_stock_message( $product ) {
    global $product;

    // 仅针对可变产品执行逻辑
    if ( ! $product->is_type( 'variable' ) ) return;

    // 隐藏容器：存放所有变体的库存文本（默认不显示）
    echo '<div class="variation-stock-library" style="display:none;">';

    foreach ( $product->get_visible_children() as $variation_id ) {
        $variation = wc_get_product( $variation_id );
        $stock_status = $variation->get_stock_status();

        // 根据库存状态匹配文本
        switch ( $stock_status ) {
            case 'instock':
                $stock_text = 'In stock';
                break;
            case 'outofstock':
                $stock_text = 'Out of stock';
                break;
            case 'onbackorder':
                $stock_text = 'On backorder';
                break;
            default:
                $stock_text = '';
        }

        // 输出带变体ID标识的库存文本项
        echo '<span class="stock-status-item" data-variation-id="' . esc_attr( $variation_id ) . '">' . esc_html( $stock_text ) . '</span>';
    }

    echo '</div>';

    // 用于显示当前选中变体库存的容器
    echo '<div class="current-selected-stock"></div>';

    // 嵌入JavaScript处理交互逻辑
    ?>
    <script>
        (function($) {
            $(document).ready(function() {
                const $stockDisplay = $('.current-selected-stock');
                const $stockItems = $('.stock-status-item');

                // 监听WooCommerce变体选中事件
                $('form.variations_form').on('found_variation', function(event, variation) {
                    // 找到对应变体的库存文本并显示
                    const targetText = $stockItems.filter(`[data-variation-id="${variation.variation_id}"]`).text();
                    $stockDisplay.text(targetText);
                });

                // 监听变体选择重置事件，清空显示内容
                $('form.variations_form').on('reset_data', function() {
                    $stockDisplay.text('');
                });
            });
        })(jQuery);
    </script>
    <?php
}

关键逻辑说明： #

1. PHP部分：
   • 先判断产品类型，避免在简单产品上执行无效代码
   • 用隐藏容器存储所有变体的库存文本，每个文本项通过data-variation-id绑定对应变体的ID
   • 单独创建一个显示容器，用于展示当前选中变体的库存状态
2. JavaScript部分：
   • 监听WooCommerce内置的found_variation事件（用户选中有效变体时触发），根据返回的变体ID匹配对应的库存文本并展示
   • 监听reset_data事件（用户重置变体选择时触发），清空库存显示内容

这样修改后，页面加载时不会显示任何库存文本，只有当用户选中某个变体时，对应的库存状态才会实时显示出来，完全符合你的需求。

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