Woocommerce中card-columns致第二列及以后链接失效求助

我之前也碰到过一模一样的Chrome兼容性问题，这其实是Bootstrap的card-columns布局在Chrome浏览器中的层级堆叠特性导致的——虽然视觉上第二列及以后的卡片显示正常，但它们的链接被上层元素（或者浏览器渲染的层级bug）给遮挡了，所以无法触发点击事件。

问题复盘 #

你已经做了不少有效的排查：

• 切换card-deck/card-group后所有链接正常，说明核心业务逻辑没问题，就是card-columns的特定渲染问题
• 尝试替换<li>为<div>无效，大概率是结构没配合调整，或者没触碰到层级问题的本质
• 仅Chrome出现故障，这是因为Chrome对CSS多列布局（column属性）的渲染机制和Firefox/Edge存在差异

解决方案 #

1. 修复卡片层级（最直接有效）

给card-columns下的每个卡片添加相对定位和显式层级，确保每一张卡片的点击区域都能正常响应：

.card-columns .card {
  position: relative;
  z-index: 1;
}

Chrome在处理card-columns的多列流时，会默认让前面的列元素占据更高的堆叠层级，导致后面列的链接被“盖住”，通过显式设置z-index可以强制修正这个问题。

2. 调整HTML结构（配合层级修复）

你之前尝试把<li>换成<div>但没效果，可能是因为外层还是<ul>容器，和<div>子元素的组合不符合Bootstrap的布局预期。可以调整结构如下：

• loop-start.php（简化嵌套，直接用card-columns作为容器）：

<div class="container-fluid">
  <div class="row mx-auto">
    <div class="card-columns">

• content-product_cat.php（把<li>替换为<div>，保持类名不变）：

<div <?php wc_product_cat_class( 'd-inline-block card', $category ); ?>>
  <?php
  /**
   * woocommerce_before_subcategory hook.
   *
   * @hooked woocommerce_template_loop_category_link_open - 10
   */
  do_action( 'woocommerce_before_subcategory', $category );

  /**
   * woocommerce_before_subcategory_title hook.
   *
   * @hooked woocommerce_subcategory_thumbnail - 10
   */
  do_action( 'woocommerce_before_subcategory_title', $category );

  /**
   * woocommerce_shop_loop_subcategory_title hook.
   *
   * @hooked woocommerce_template_loop_category_title - 10
   */
  do_action( 'woocommerce_shop_loop_subcategory_title', $category );

  /**
   * woocommerce_after_subcategory_title hook.
   */
  do_action( 'woocommerce_after_subcategory_title', $category );

  /**
   * woocommerce_after_subcategory hook.
   *
   * @hooked woocommerce_template_loop_category_link_close - 10
   */
  do_action( 'woocommerce_after_subcategory', $category );
  ?>
</div>

这样结构变成card-columns > div.card，更贴合Bootstrap对card-columns的布局要求，避免列表容器带来的潜在渲染冲突。

3. 排查额外干扰

• 检查是否有其他自定义CSS给.row或.container-fluid添加了overflow: hidden、position: fixed/absolute等属性，这些可能会截断卡片的点击区域
• 暂时禁用其他WooCommerce插件，排除插件CSS冲突的可能

验证方法 #

添加完CSS和调整结构后，用Chrome开发者工具（F12）选中无法点击的链接，查看“Elements”面板的“Layers”标签，确认卡片的层级已经正常，没有被其他元素覆盖。

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