WooCommerce中removed_from_cart事件失效，如何更新购物车计数器？

问题原因分析 #

WooCommerce重大更新后，removed_from_cart事件的触发逻辑和传递参数发生了变化，同时移除商品时会通过AJAX局部刷新购物车相关DOM片段。你原代码仅手动对计数器做减1操作，一旦DOM元素被重新渲染，修改内容就会被覆盖；另外手动加减也可能出现计数与实际购物车数量不一致的情况（比如批量移除商品场景）。

解决方案1：利用事件传递的购物车数据更新计数 #

added_to_cart和removed_from_cart事件都会传递包含最新购物车数据的参数，直接使用该参数里的准确计数更新DOM，避免手动计算的误差：

修改你的app.js代码为：

jQuery(function($) {
    // 处理商品添加事件
    $(document.body).on('added_to_cart', function(event, fragments, cartHash, cartData) {
        $('.cart-count').text(cartData.cart_contents_count);
    });

    // 处理商品移除事件
    $(document.body).on('removed_from_cart', function(event, fragments, cartHash, cartData) {
        $('.cart-count').text(cartData.cart_contents_count);
    });
});

解决方案2：监听购物车片段刷新事件（更可靠） #

如果方案1仍有问题，可以监听WooCommerce全局的wc_fragment_refreshed事件，该事件会在购物车任何片段更新（添加/移除商品、修改数量等）时触发，然后通过AJAX获取最新计数：

1. 更新app.js：

jQuery(function($) {
    // 监听购物车片段刷新
    $(document.body).on('wc_fragment_refreshed', function() {
        // 发起AJAX请求获取最新购物车数量
        $.get(wc_cart_params.ajax_url, { action: 'get_cart_count' }, function(count) {
            $('.cart-count').text(count);
        });
    });
});

2. 在主题的functions.php中添加AJAX处理函数：

// 注册AJAX接口，供前端获取购物车数量
add_action('wp_ajax_get_cart_count', 'return_cart_count');
add_action('wp_ajax_nopriv_get_cart_count', 'return_cart_count');

function return_cart_count() {
    echo WC()->cart->get_cart_contents_count();
    wp_die(); // 必须终止输出
}

额外注意事项 #

• 确保你的主题已正确加载WooCommerce的核心脚本，wc_cart_params全局变量必须存在（可通过浏览器控制台检查）。
• 避免直接依赖DOM文本计算计数，优先使用WooCommerce提供的官方数据接口或事件参数，保证计数准确性。

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