woocommerce_add_to_cart_validation钩子在Ajax加购场景如何显示错误提示

问题原因 #

开启Ajax加购时，校验逻辑返回的内容是异步响应的一部分，你当前直接echo输出的HTML不会被自动渲染到前端页面，只有整页刷新（关闭Ajax）时输出内容才会被加载显示。

第一步：修改后端校验逻辑 #

将直接echo的方式替换为WooCommerce原生的通知方法，同时优化参数调用避免直接读取全局$_POST提升安全性，修改后的代码如下：

function so_validate_add_cart_item($passed, $product_id, $quantity, $variation_id = '', $variations = '') {
    // 仅可变商品走变体库存校验，简单商品可自行调整逻辑
    if ($variation_id) {
        $variation_o = wc_get_product($variation_id);
        if (!$variation_o) return $passed;
        
        $varSku = $variation_o->get_sku();
        $get_parent_id = $variation_o->get_parent_id();

        $livequantity = get_update_quantity($varSku, $get_parent_id, $variation_id);

        if ($livequantity <= 0) {
            $passed = false;
            $message = __("No stock", "woocommerce");
            // 用WooCommerce原生方法添加错误通知，不要直接echo
            wc_add_notice($message, 'error');
        }
    }
    return $passed;
}
add_filter('woocommerce_add_to_cart_validation', 'so_validate_add_cart_item', 10, 5);

// 额外添加钩子，将错误通知注入Ajax加购的返回结果中
add_filter('woocommerce_add_to_cart_fragments', function($fragments) {
    ob_start();
    wc_print_notices();
    $fragments['.woocommerce-notices-wrapper'] = ob_get_clean();
    return $fragments;
});

第二步：添加前端JS监听Ajax加购结果 #

将以下JS代码添加到主题的自定义JS文件中，或者通过主题设置的自定义脚本入口插入：

// 监听Ajax加购失败事件，渲染错误通知
jQuery(document).on('ajax_failure', function(e, data) {
    if (data && data.responseJSON && data.responseJSON.fragments) {
        // 替换页面上的通知容器内容
        jQuery('.woocommerce-notices-wrapper').replaceWith(data.responseJSON.fragments['.woocommerce-notices-wrapper']);
        // 自动滚动到通知位置提升用户体验
        jQuery('html, body').animate({
            scrollTop: jQuery('.woocommerce-notices-wrapper').offset().top - 100
        }, 300);
    }
});

// 兼容部分主题的Ajax加购成功后清除旧通知
jQuery(document).on('added_to_cart', function() {
    wc_clear_notices();
});

注意事项 #

• 确保你的主题页面中存在.woocommerce-notices-wrapper容器，绝大多数WooCommerce适配主题都会默认自带该容器，如果没有可以手动在商品页模板合适位置添加<div class="woocommerce-notices-wrapper"></div>
• 如果测试发现错误提示重复出现，可以在每次加购请求前先清空现有通知，在上述JS的ajax_failure事件开头添加jQuery('.woocommerce-notices-wrapper').empty();即可

内容的提问来源于stack exchange，提问作者Dani Evan Rubenstien