如何实现WooCommerce空购物车页添加商品后自动更新

问题根源在于购物车页面内的产品加入购物车按钮默认未启用AJAX更新逻辑，需要手动补充对应的前端处理逻辑，同时配合PHP端的钩子实现完整的自动更新效果。

步骤1：替换原有PHP代码，添加AJAX支持与自定义脚本 #

将你原来的代码替换为以下内容：

add_action( 'woocommerce_cart_is_empty', 'add_content_empty_cart' );
function add_content_empty_cart() {
    echo '<h3>NEW</h3>';
    // 为产品列表添加自定义类，方便JS定位按钮
    echo do_shortcode( '[products limit="8" orderby="id" order="DESC" class="empty-cart-products"]' );
}

// 输出购物车更新的自定义JS脚本
add_action( 'wp_footer', 'empty_cart_ajax_update_script' );
function empty_cart_ajax_update_script() {
    // 仅在购物车页面加载脚本
    if ( is_cart() ) :
    ?>
    <script>
    (function($) {
        // 监听空购物车区域内的加入购物车按钮点击
        $(document).on('click', '.empty-cart-products .add_to_cart_button', function(e) {
            e.preventDefault();
            const $btn = $(this);
            
            // 添加加载状态提示
            $btn.addClass('loading');

            // 调用WooCommerce原生AJAX接口添加商品
            $.ajax({
                url: wc_add_to_cart_params.wc_ajax_url.replace('%%endpoint%%', 'add_to_cart'),
                type: 'POST',
                data: {
                    product_id: $btn.data('product_id'),
                    quantity: $btn.data('quantity') || 1
                },
                success: function(res) {
                    if (res.error && res.product_url) {
                        // 处理错误场景，跳转至产品页
                        window.location = res.product_url;
                        return;
                    }
                    
                    // 触发WooCommerce原生的购物车片段刷新事件，自动更新购物车内容
                    $(document.body).trigger('wc_fragment_refresh');
                    
                    // 移除加载状态
                    $btn.removeClass('loading');
                    
                    // 滚动到购物车内容区域，方便用户查看更新
                    $('html, body').animate({
                        scrollTop: $('.cart-content').offset().top
                    }, 500);
                },
                error: function() {
                    // 异常情况直接刷新页面
                    window.location.reload();
                }
            });
        });
    })(jQuery);
    </script>
    <?php
    endif;
}

代码说明 #

• 给产品列表添加empty-cart-products自定义类，确保JS只处理空购物车区域内的加入购物车按钮，避免影响页面其他按钮
• 调用WooCommerce内置的AJAX接口和wc_fragment_refresh事件，这是平台原生的购物车更新机制，能自动同步购物车内容、总价、数量等信息
• 增加了加载状态提示和滚动定位，优化用户体验
• 包含错误处理逻辑，确保异常场景下的页面可用性

额外注意 #

• 确保你的主题已正确加载WooCommerce核心脚本（wc-add-to-cart相关），否则AJAX功能无法正常工作
• 上述代码仅适配简单产品，若需支持变体产品，需额外添加变体选择的监听逻辑

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