使用Astra主题搭配Elementor搭建WooCommerce商店，CSS无效时如何移除产品跳转链接？

• 选择器层级完全错位：Astra主题适配的WooCommerce产品循环结构里，跳转链接a标签是作为外层容器存在的，把产品图、产品标题整个包裹在内，DOM结构大致是：

  <a class="woocommerce-loop-product__link">
    <img class="product-img" />
    <h2 class="woocommerce-loop-product__title">产品名称</h2>
  </a>
  

  你之前写的.items .woocommerce-loop-product__title a，意思是查找“标题元素内部嵌套的a标签”，但实际a标签是在标题的外层，这个选择器根本匹配不到任何元素，代码自然不起作用。
• 两层额外的跳转逻辑未覆盖：Astra主题默认会给整个产品卡片容器绑定JS点击跳转，就算把内部的a标签全禁了，JS触发的跳转照常生效；另外Elementor自带的商店、产品列表控件，默认也会给整块产品卡片绑定点击跳转，不是只有内部链接才会触发跳转到详情页。

1. 零代码优先配置（最稳定，建议优先操作） #

• 打开你使用的Elementor产品类控件（比如商店页面、产品列表控件）的设置面板，在「内容」板块的「产品」分组下，找到「为产品添加链接」的开关，直接关闭。控件本身就不会给产品块绑定跳转逻辑，从根源去掉跳转行为。
• 进入WordPress自定义页面，路径为「外观 > 自定义 > WooCommerce > 产品卡片」，把「点击产品卡片跳转至单个产品详情页」的开关关闭，移除Astra主题层的JS跳转绑定。

2. 修正后的CSS代码（适合不想改动原有配置、需要临时通过样式拦截的场景） #

/* 作用在自定义类为items的区块下，拦截所有WooCommerce产品跳转链接 */
.items a.woocommerce-loop-product__link,
.items .product .elementor-loop-product__link,
.items .product a {
  pointer-events: none !important;
  cursor: default !important;
}

注意：这段代码要放在站点自定义CSS的最靠前位置，避免被其他更高优先级的样式覆盖；如果添加后仍会跳转，说明存在JS层的强制跳转，单靠CSS无法拦截，需要回到上面的零代码配置步骤关闭相关绑定。

3. 兜底JS拦截 #

如果上述配置都检查完毕仍触发跳转，可以在产品列表区块的上方插入一个Elementor自定义HTML组件，写入以下短代码：

document.querySelectorAll('.items .products .product').forEach(card => {
  card.addEventListener('click', (e) => {
    e.preventDefault();
  })
})

这段代码只会拦截你自定义items类区块下的产品卡片点击行为，不会影响站点其他区域的正常链接跳转。

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