如何对齐 WooCommerce 中的“添加到购物车”按钮？答案

【问题标题】：How to allign Add to Cart buttons in WooCommerce?如何对齐 WooCommerce 中的“添加到购物车”按钮？
【发布时间】：2017-07-19 16:04:52
【问题描述】：

我的shop 中的“添加到购物车”按钮有一个问题。添加到购物车按钮未对齐，看起来很糟糕，所以我想把所有东西放在一条线上。这是那部分的 CSS：

.dark .button.is-form:hover,.button:hover,input[type='submit']:hover,input[type='reset']:hover,input[type='button']:hover {
outline: none;
opacity: 1;
color: #000;
box-shadow: inset 0 0 0 100px rgba(0,0,0,0.2);
}

如何使添加到购物车的按钮排列在一行中，如图所示？

【问题讨论】：

您好，将添加到购物车按钮的链接粘贴到您的网站上..
在我的第一篇文章中有网址。

标签： php css wordpress woocommerce

【解决方案1】：

所有产品包装盒都有不同的尺寸，修复product-small的高度，

.product-small{
    height: 490px;
}

按钮会自动调整。

【讨论】：

这并没有解决问题。插入该代码时，我会与产品图片重叠，并且添加到购物车按钮不会被产品图片覆盖。

【解决方案2】：

您可以下载此免费插件以自动对齐 woocommerce 添加到购物车的按钮。

https://wordpress.org/plugins/woo-align-buttons/

代码也可以在 GitHub 上找到。

https://github.com/Aquafortis/woo-align-buttons

希望这会有所帮助。

【讨论】：

一些额外的信息可能会有用。