在 WooCommerce 商店页面中将“添加到购物车”按钮对齐成一条直线

Question

请指导我将所有“添加到购物篮按钮”排成直线。目前它们不成比例。

如果有人可以帮助我快速编写代码？

如何在 WooCommerce 商店页面中将“添加到购物车”按钮对齐？

Answer 1

您可以使用 flexbox，然后在按钮上使用魔术 margin-top: auto。您可以忽略 .items 容器上的 display: grid。它只是用于列。

.items{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.item{
  display: flex;
  flex-direction: column;
}
.item button{
  margin-top: auto;
}

<div class="items">
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <button>Add</button>
  </div>
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consetetur  </p>
    <button>Add</button>
  </div>
  <div class="item">
    <p>Lorem ipsum dolor sit amet </p>
    <button>Add</button>
  </div>
</div>

更多关于 flexbox 的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

产品名称（或标题）以这种方式嵌入标签中：

<h2 class="woocommerce-loop-product__title">Product title</h2>

因此，您需要为该类定义min-height css 规则，选择产品名称的最大高度。因此，如果产品名称的最大高度为 96 像素，您将这样设置规则（例如）：

.woocommerce-loop-product__title {
    min-height: 100px;
    /* OR
    min-height: 100px !important; */
}

您应该将此 css 规则添加到您的活动子主题（或活动主题）的 style.css 文件中。