Woocommerce如何实现购买数量超过商品库存时显示提示消息的功能

你原有代码存在PHP语法错误、JS变量混淆、缺少提示隐藏逻辑、选择器错误等问题，以下是调整后的可直接使用的代码：

一、商品页实时提示功能 #

将以下代码添加到主题的functions.php文件中即可实现商品页输入数量超过现有库存时自动显示预售提示，数量回调到库存以下时自动隐藏：

function woocommerce_backorder_notice_on_product_page() {
    global $product;
    // 仅对启用了预售/允许缺货下单的商品生效
    if ( !$product->is_in_stock() || !$product->backorders_allowed() ) return;
    $current_stock = $product->get_stock_quantity();
    ?>
    <script>
    jQuery(function($) {
        const stockNow = <?php echo esc_js($current_stock); ?>;
        // 提示挂载位置可根据你的主题调整，默认挂在数量选择器下方
        const noticeContainer = $('<div class="backorder-notice-container"></div>').insertAfter('[name=quantity]');

        $('[name=quantity]').on('input change', function() {
            const inputQty = parseInt($(this).val()) || 0;
            noticeContainer.empty();
            if (inputQty > stockNow) {
                const backorderQty = inputQty - stockNow;
                const notice = `<p class="errormessagestock" style="color:#dc3232;margin:10px 0;">${backorderQty} 件商品属于预售，配送时效会略有延长</p>`;
                noticeContainer.html(notice);
            }
        });
    });
    </script>
    <?php
}
add_action( 'woocommerce_after_add_to_cart_button', 'woocommerce_backorder_notice_on_product_page' );

效果示例参考：

二、购物车页同步提示功能 #

添加以下代码到functions.php即可实现购物车中对应超库存的商品同步显示预售提示：

function woocommerce_backorder_notice_on_cart( $item_data, $cart_item ) {
    $product = $cart_item['data'];
    if ( $product->backorders_allowed() && $cart_item['quantity'] > $product->get_stock_quantity() ) {
        $backorder_qty = $cart_item['quantity'] - $product->get_stock_quantity();
        $item_data[] = array(
            'key'     => '预售提示',
            'value'   => sprintf( '%d件商品属于预售，配送时效会略有延长', $backorder_qty ),
            'display' => '<span style="color:#dc3232;">'.$backorder_qty.'件商品属于预售，配送时效会略有延长</span>',
        );
    }
    return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'woocommerce_backorder_notice_on_cart', 10, 2 );

补充说明 #

如果需要调整提示的样式，可直接自定义.errormessagestock选择器的CSS属性即可。

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