移除最后一件商品后自动刷新WooCommerce购物车页面的问题

原生JS转换中的问题分析 #

你提供的原生JS代码无法正常工作，核心原因有三点：

1. 逻辑差异：原jQuery代码是跳转到当前购物车页面（get_permalink()输出的是购物车页URL），而location.reload()是刷新页面——WooCommerce的AJAX操作后，页面缓存可能导致刷新后状态未同步，和跳转的效果不一致。
2. DOM更新延迟：wc_cart_emptied事件触发时，WooCommerce可能还没完成.woocommerce-cart-form元素的移除操作，此时直接检查元素是否存在会得到错误结果。
3. 事件监听可靠性：仅监听body元素可能因为事件冒泡的问题错过触发，换成监听document并使用捕获模式更稳定。

修正后的原生JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 监听document，用捕获模式确保事件被捕获
  document.addEventListener('wc_cart_emptied', function() {
    // 延迟100ms检查，确保DOM已完成更新
    setTimeout(function() {
      if (!document.querySelector('.woocommerce-cart-form')) {
        // 跳转到当前购物车页面，和原jQuery逻辑一致
        window.location.href = window.location.href;
      }
    }, 100);
  }, true);
});

替代方案：用PHP钩子注入JS（更可靠） #

直接通过WooCommerce的PHP钩子在购物车清空时注入JS代码，避免前端事件监听的不确定性：

在主题的functions.php文件中添加以下代码：

add_action('woocommerce_cart_emptied', 'auto_refresh_after_cart_empty');
function auto_refresh_after_cart_empty() {
    // 注入JS代码，跳转到购物车页面
    wc_enqueue_js("
        setTimeout(function() {
            if (!document.querySelector('.woocommerce-cart-form')) {
                window.location.href = '" . esc_url(get_permalink(wc_get_page_id('cart'))) . "';
            }
        }, 100);
    ");
}

另一种简化的原生JS写法 #

如果偏好纯前端方案，也可以用window.location.replace()避免历史记录重复：

document.addEventListener('DOMContentLoaded', function() {
  document.body.addEventListener('wc_cart_emptied', function() {
    setTimeout(() => {
      const cartForm = document.querySelector('.woocommerce-cart-form');
      if (!cartForm) {
        window.location.replace(window.location.href);
      }
    }, 150);
  });
});

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