如何实现用户离开结账页面时自动清空购物车（含访客）

当前使用的代码仅对已登录用户生效，访客离开结账页面后必须加载其他页面才能触发购物车清空，现需实现已注册客户和访客在离开结账页面时自动清空购物车。

原代码如下：

<?php

//we inserted a script in wordpress and put it in the head
add_action('wp_head', 'woocommerce_clear_cart_url');
function woocommerce_clear_cart_url()
{
   global $woocommerce;
   //we used the jquery beforeunload function to detect if the user leaves that page
?>
   <script>
      jQuery(document).ready(function($) {
         $(window).bind('beforeunload', function() {
            //Used WordPress to help jQuery determine the page we're targeting 
            //pageID is the page number of the page we're targeting
            <?php if (!is_page(pageID)):
               //empty the cart
               $woocommerce->cart->empty_cart(); ?>
            <?php endif; ?>
         });
      });
   </script>
<?php } ?>

原代码问题分析 #

原代码的核心错误是：将服务器端PHP代码（$woocommerce->cart->empty_cart()）直接写在前端beforeunload事件回调里。PHP代码在页面加载时就已执行完毕，不会在浏览器触发页面卸载事件时再次运行，导致访客的会话购物车无法及时清空。

解决方案：使用AJAX触发服务器端清空逻辑 #

通过前端触发AJAX请求，在页面卸载时通知服务器执行购物车清空操作，同时兼容登录用户与访客：

<?php
// 注册AJAX动作，处理购物车清空
add_action('wp_ajax_clear_cart_on_leave', 'clear_cart_on_leave_callback');
add_action('wp_ajax_nopriv_clear_cart_on_leave', 'clear_cart_on_leave_callback');

function clear_cart_on_leave_callback() {
    if (WC()->cart) {
        WC()->cart->empty_cart();
    }
    wp_die(); // 必须终止AJAX请求
}

// 前端脚本输出
add_action('wp_footer', 'enqueue_clear_cart_script');
function enqueue_clear_cart_script() {
    // 仅在结账页面加载脚本
    if (!is_checkout()) {
        return;
    }
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 绑定页面卸载事件
            $(window).on('beforeunload', function() {
                // 发起AJAX请求清空购物车
                $.ajax({
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    type: 'POST',
                    async: false, // 同步请求，确保服务器收到请求后再卸载页面
                    data: {
                        action: 'clear_cart_on_leave'
                    }
                });
            });
        });
    </script>
    <?php
}
?>

关键说明 #

• AJAX动作双注册：wp_ajax_前缀对应登录用户，wp_ajax_nopriv_前缀对应访客，确保两类用户都能触发。
• 同步请求：设置async: false，避免页面快速卸载导致AJAX请求被浏览器取消。
• 页面判断优化：用is_checkout()替代硬编码pageID，更准确识别结账页面。
• 脚本加载位置：将脚本放在wp_footer而非wp_head，减少页面阻塞，确保jQuery已加载。

内容的提问来源于stack exchange，提问作者Mohamed el amine