WooCommerce开启Ajax后归档页直接结账链接跳转异常如何解决

问题根因 #

你的问题由两个常见错误共同导致：

1. 全局Ajax加购脚本监听了所有带加购逻辑的元素点击事件，默认阻止了原生跳转行为，执行完Ajax加购逻辑后错误跳转到了单品详情页
2. <a>标签嵌套<button>属于不符合HTML规范的写法，不同浏览器对该结构的事件冒泡逻辑处理不一致，会导致跳转逻辑异常

解决方案 #

步骤1：修正归档页按钮HTML结构 #

去掉嵌套的button标签，直接将a标签设置为按钮样式，同时添加专属类名用于排除Ajax监听：

<a href="/checkout/?add-to-cart=<?php echo $product->get_id(); ?>" class="buy-now-btn btn-shop no-ajax-buy-now">Buy now</a>

自行给.no-ajax-buy-now补充CSS样式，匹配原有按钮的视觉效果即可。

步骤2：添加JS阻止全局Ajax脚本拦截点击事件 #

将以下代码添加到主题自定义JS区域，或子主题footer.php的</body>标签前：

document.addEventListener('DOMContentLoaded', function() {
  const buyNowLinks = document.querySelectorAll('.no-ajax-buy-now');
  buyNowLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 优先阻止事件冒泡，避免被全局Ajax加购脚本捕获
      e.stopImmediatePropagation();
    });
  });
// 优先级设置为100，确保比默认Ajax加购脚本先绑定事件
}, 100);

如果你的站点使用jQuery开发，也可以用以下代码：

jQuery(document).ready(function($) {
  $(document).on('click', '.no-ajax-buy-now', function(e) {
    e.stopImmediatePropagation();
  });
});

验证方案 #

修改完成后清除站点缓存，在归档页点击Buy Now按钮，即可正常触发加购并跳转结账页，和手动访问链接的效果一致。

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