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

Display add to cart button inline on category page WooCommerce

eMikkelsen Published in 2017-12-07 22:20:14Z

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/

PHP Geek
PHP Geek Reply to 2017-12-08 04:23:58Z
.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;}

Should be CSS Code for the Button.

And rest needs to be done by adjusting the HTML.

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO