Home Display add to cart button inline on category page WooCommerce
Reply: 0

Display add to cart button inline on category page WooCommerce

user1697
1#
user1697 Published in April 20, 2018, 10:44 am

I am trying to display all of my add to cart buttons "inline" but due to the text being longer on some products it is jumping around. I have tried various fixes but with no luck.
What is the easiest way to fix this?

I used a CSS to set a min height of the background banner, which fixed part of the issue. But the add to cart buttons still jump around.
Is it possible to set a relative height or something so they show up at the same place?

The CSS code I tried (but this doesn't really make it look proper either):

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

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

This is how it looks:

This is how it should look:

I am not very good at advanced coding (primarily know CSS) and the site is built in a theme, so changing major parts of the HTML is not possible. Therefore a CSS option or PHP code for functions.php is prefered.

This CSS code somewhat fixes the problem, but forces a very large gap on top of some products with short descriptions. Is there any CSS way to make it slightly more welcoming?

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

Site is on: http://detitalienskekoekken.dk.linux99.unoeuro-server.com/shop/

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305908 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO