【问题标题】:Display add to cart button inline on category page WooCommerce在类别页面 WooCommerce 上显示添加到购物车按钮内联
【发布时间】:2018-05-22 03:14:17
【问题描述】:

我正在尝试“内联”显示所有添加到购物车的按钮,但由于某些产品上的文本较长,它会跳来跳去。我尝试了各种修复,但没有运气。
解决此问题的最简单方法是什么?

我使用 CSS 设置背景横幅的最小高度,这解决了部分问题。但是添加到购物车按钮仍然跳来跳去。
是否可以设置相对高度或其他东西,以便它们出现在同一个地方?

我尝试过的 CSS 代码 (但这也不能让它看起来很正常)

.woo-product-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woo-product-box {
    min-height: 160px;
}

看起来是这样的:

应该是这样的:

我不太擅长高级编码(主要了解 CSS),而且网站是在主题中构建的,因此无法更改 HTML 的主要部分。因此,functions.php 的 CSS 选项或 PHP 代码是首选。

这段 CSS 代码在一定程度上解决了这个问题,但在一些描述简短的产品之上造成了很大的差距。有什么 CSS 方法可以让它更受欢迎吗?

.box-text a:not(.button) { min-height: 90px; }

网站上线:http://detitalienskekoekken.dk.linux99.unoeuro-server.com/shop/

【问题讨论】:

标签: php css wordpress woocommerce wordpress-theming


【解决方案1】:
.ajax_add_to_cart.add_to_cart_button.product_type_simple.button.primary.is-outline.mb-0.is-small {
margin-top: 20px;
width: 100%;
padding: 5px 0 5px 0;
background-color: #c31919;
color: #FFFFFF;
border-radius: 5px;}

应该是按钮的 CSS 代码。

其余的需要通过调整HTML来完成。

【讨论】:

  • 考虑到我在 HTML 编辑方面的经验为 0 并且它内置在我的主题中,我最好的选择是什么?有没有像样的纯 CSS 修复?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-05
  • 2018-03-05
  • 2013-12-24
  • 2018-05-12
  • 1970-01-01
  • 2018-10-30
相关资源
最近更新 更多