如何实现WooCommerce头部购物车数量在AJAX添加商品时自动更新

我完全理解你遇到的这个问题——用PHP静态输出的购物车数量，在AJAX添加商品后不会自动更新，用户看不到实时的购物车状态确实很影响体验。下面给你一套完整的解决方案，亲测有效：

第一步：调整HTML结构，给数量元素加专属标识 #

先修改你的头部HTML，给显示购物车数量的<span>标签加一个专属class，方便后续JS精准定位：

<div id="HeaderLeft">
    <ul>
        <li id="CartBox">
            <a href="/cart/"><iconify-icon icon="fluent:cart-24-regular"></iconify-icon></a>
            <!-- 添加class "cart-count" 用于JS定位 -->
            <span class="cart-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
        </li>
        <li><a href="/my-account/"><iconify-icon icon="fluent:person-48-regular"></iconify-icon></a></li>
        <li><a href="tel:<?php the_field('Telephone', 'option'); ?>"><?php the_field('Telephone', 'option'); ?><iconify-icon icon="fluent:call-48-regular"></iconify-icon></a></li>
    </ul>
</div>

第二步：添加PHP处理AJAX请求的函数 #

在你的主题functions.php文件中加入以下代码，用来响应前端的AJAX请求，返回最新的购物车数量：

// 处理登录用户和访客的购物车数量AJAX请求
add_action('wp_ajax_get_cart_count', 'get_cart_count');
add_action('wp_ajax_nopriv_get_cart_count', 'get_cart_count');

function get_cart_count() {
    // 直接返回当前购物车的商品总数
    echo WC()->cart->get_cart_contents_count();
    wp_die(); // 必须添加，用于正常结束AJAX请求
}

第三步：添加JS监听购物车变动事件 #

把这段JavaScript代码放到主题的footer.php（</body>标签之前），或者主题的自定义JS文件中，用来监听WooCommerce的AJAX事件并更新数量：

jQuery(document).ready(function($) {
    // 监听【商品添加到购物车】的AJAX完成事件
    $(document).on('added_to_cart', function() {
        // 发起AJAX请求获取最新购物车数量
        $.ajax({
            url: wc_cart_params.ajax_url, // WooCommerce提供的全局AJAX地址，无需手动编写
            type: 'POST',
            data: {
                action: 'get_cart_count' // 和PHP函数中的action名称保持一致
            },
            success: function(response) {
                // 更新页面上的购物车数量显示
                $('.cart-count').text(response);
            }
        });
    });

    // 监听【购物车更新/商品移除】的AJAX完成事件
    $(document).on('updated_cart', function() {
        $.ajax({
            url: wc_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'get_cart_count'
            },
            success: function(response) {
                $('.cart-count').text(response);
            }
        });
    });
});

原理说明 #

之前的PHP代码是静态输出页面加载时的购物车数量，AJAX操作后服务器端的购物车数据已经更新，但前端不会自动同步。我们通过以下方式解决：

1. 监听WooCommerce内置的added_to_cart（商品添加成功）和updated_cart（购物车更新/商品移除）事件，覆盖所有购物车变动场景；
2. 每次事件触发时，通过AJAX主动拉取服务器端最新的购物车数量，再更新页面上的显示；
3. 使用WooCommerce自带的wc_cart_params.ajax_url全局变量，避免手动编写AJAX地址带来的兼容性问题。

备注：内容来源于stack exchange，提问作者MahmoodZamaniNemati