如何实现用户离开WooCommerce站点时自动清空购物车

核心实现逻辑：服务端PHP无法直接监听浏览器窗口关闭行为，需采用「前端监听页面卸载事件+后端接收请求触发清空」的方案实现，同时可自定义规则排除页面刷新、站内跳转等误触发场景。

第一步：新增后端清空购物车接口 #

将以下代码添加到你当前使用主题的functions.php文件中，或者自定义功能插件的代码文件中：

// 注册登录用户AJAX处理接口
add_action('wp_ajax_clear_cart_on_unload', 'clear_cart_on_unload');
// 注册未登录游客AJAX处理接口
add_action('wp_ajax_nopriv_clear_cart_on_unload', 'clear_cart_on_unload');
function clear_cart_on_unload() {
    // 校验请求合法性，防止恶意调用
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'clear_cart_nonce')) {
        wp_send_json_error('非法请求');
    }
    // 执行清空购物车逻辑
    if (function_exists('WC')) {
        WC()->cart->empty_cart();
    }
    wp_send_json_success('购物车已清空');
}

// 向前端注入校验参数和接口地址
add_action('wp_enqueue_scripts', 'inject_clear_cart_script_params');
function inject_clear_cart_script_params() {
    wp_localize_script('jquery', 'clear_cart_params', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('clear_cart_nonce')
    ]);
}

第二步：添加前端页面卸载监听逻辑 #

将以下JS代码添加到主题的全局JS文件中，或者通过wp_footer钩子注入到页脚：

// 标记是否为站内操作，避免误触发清空
let is_internal_navigation = false;
// 监听站内链接点击行为
document.querySelectorAll('a[href^="' + window.location.origin + '"]').forEach(link => {
    link.addEventListener('click', () => {
        is_internal_navigation = true;
    });
});
// 监听站内表单提交行为
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', () => {
        is_internal_navigation = true;
    });
});

// 监听页面卸载事件
window.addEventListener('beforeunload', () => {
    // 站内跳转/操作不触发清空逻辑
    if (is_internal_navigation) return;
    // 使用sendBeacon保证页面卸载时请求可正常发出
    const formData = new FormData();
    formData.append('action', 'clear_cart_on_unload');
    formData.append('nonce', clear_cart_params.nonce);
    navigator.sendBeacon(clear_cart_params.ajax_url, formData);
});

可选优化项 #

• 可根据需求新增键盘事件监听，排除F5刷新、CTRL+R刷新等场景的误触发
• 如需兼容不支持sendBeacon的老旧浏览器，可替换为同步AJAX请求，仅会对页面关闭速度有轻微影响
• 极端场景（浏览器强制结束进程、崩溃）下beforeunload事件可能不触发，可配合WooCommerce默认的购物车过期机制兜底，默认购物车有效期为48小时，可通过钩子调整为更短的过期时间

内容的提问来源于stack exchange，提问作者2bTech Consultoria