如何在WooCommerce AJAX加购后自动隐藏空购物车自定义按钮

这个问题其实很常见——WooCommerce的AJAX操作不会触发页面刷新，所以你的PHP函数只会在初始加载时执行一次。要解决这个问题，我们需要结合前端JavaScript监听购物车的变化事件，动态更新按钮的显示状态，同时保留原PHP逻辑处理页面首次加载的情况。

1. 优化原PHP函数（处理初始加载） #

首先保留你的核心逻辑，给按钮添加一个类名方便后续JS定位：

function shop_button_when_empty_cart() {
    if ( WC()->cart->get_cart_contents_count() == 0 ) {
        ?>
        <a href="/shop" class="empty-cart-button">
            <button>Your cart is empty, go to shop</button>
        </a>
        <?php
    }
}
add_action( 'wp_head', 'shop_button_when_empty_cart' );

2. 添加JavaScript监听购物车事件 #

WooCommerce内置了多个购物车相关的JS事件，我们可以监听added_to_cart（商品添加成功）和removed_from_cart（商品移除成功）事件，然后通过AJAX获取最新的购物车状态：

jQuery(document).ready(function($) {
    // 页面加载完成后先做一次状态检查
    checkCartStatus();

    // 监听商品添加到购物车的事件
    $(document.body).on('added_to_cart', function() {
        checkCartStatus();
    });

    // 监听商品从购物车移除的事件
    $(document.body).on('removed_from_cart', function() {
        checkCartStatus();
    });

    // 封装购物车状态检查逻辑
    function checkCartStatus() {
        $.ajax({
            url: wc_cart_params.ajax_url, // WooCommerce内置的AJAX地址
            type: 'POST',
            data: {
                action: 'get_latest_cart_count' // 对应后端的AJAX回调动作
            },
            success: function(response) {
                const cartItemCount = parseInt(response);
                const $emptyCartBtn = $('.empty-cart-button');

                // 根据购物车数量切换按钮显示/隐藏
                if (cartItemCount === 0) {
                    $emptyCartBtn.show();
                } else {
                    $emptyCartBtn.hide();
                }
            }
        });
    }
});

3. 添加后端AJAX回调函数 #

上面的JS需要一个后端接口来获取最新的购物车数量，添加以下PHP代码：

function get_latest_cart_count() {
    // 输出当前购物车的商品总数
    echo WC()->cart->get_cart_contents_count();
    wp_die(); // 必须调用此函数终止AJAX请求
}
// 登录用户可访问的AJAX接口
add_action( 'wp_ajax_get_latest_cart_count', 'get_latest_cart_count' );
// 未登录用户可访问的AJAX接口
add_action( 'wp_ajax_nopriv_get_latest_cart_count', 'get_latest_cart_count' );

为什么要这么做？ #

• 原PHP函数负责页面首次加载时的状态判断，确保用户打开页面时按钮显示正确。
• JavaScript监听WooCommerce的原生事件，能精准捕获购物车的AJAX变化。
• 通过AJAX请求后端获取购物车数量，避免前端状态与后端不一致（比如商品因库存不足被自动移除的情况）。

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