在类别页面WooCommerce上显示内嵌添加到购物车按钮

时间:2017-12-07 22:20:14

标签: php css wordpress woocommerce wordpress-theming

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

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

我尝试的CSS代码 (但这并不能让它看起来合适)

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

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

这就是它的外观:

how it looks

这就是它的外观:

how it should look

我不擅长高级编码(主要是知道CSS)并且网站是以主题构建的,因此无法更改HTML的主要部分。因此,首选的是.com选项或者php.php的PHP代码。

这个CSS代码在某种程度上解决了这个问题,但是在一些产品的简短描述上会产生很大的差距。是否有任何CSS方式使其更受欢迎?

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

网站已开启:http://detitalienskekoekken.dk.linux99.unoeuro-server.com/shop/

1 个答案:

答案 0 :(得分: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;}

应该是Button的CSS代码。

休息需要通过调整HTML来完成。