Woocommerce equal height in grid view

[Erik]

Hello, I have a CSS problem on my GP / Woocommerce site.
On desktop view, in catalog, the heigt of each product varies after how much space the product title require.
I want the height to be equal for all products so the “buy” buttons goes on one line, not floating around

This is a screen shot of how ti appears now:

And this is how i want it to be:

Any suggestions?

GP Premium 1.7.8

[Leo]

Hi there,

This has actually been added by default in the next version of GP Premium which is available for Alpha (2) testing:
https://generatepress.com/gp-premium-1-8/

We are almost into the beta phase and so far haven’t had any major issues reported.

Would you consider it?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erik]

Yes, I’m in Beta mode my self with this project so I give the Alfa version a try 🙂
Will give you a feedback in a day or two

[Leo]

Awesome.

Lots of sweet WooCommerce features added so definitely check them out!

Thanks for testing 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erik]

Hi, Alpha 1.8 partly solved the problem on the product pages. I could wish that the star ranking and price also followed the buy button to the bottom of the row.

It does only solve the problem when weaving clean product sites, ii i set up a page to show a product category or part of it it still look messy as in picture 1
Take a look at: https://huspynt.no/kjokken-og-bad/
On this page I’ve only used this shortcode:
[products columns=”4″ category=”Bad, Kjøkken” ]

Else seems the Alpha nice and smooth. I have however found some incompatibility with the “gutenberg” system in WP, When i switch to edit in classic mode everything seems ok

[Tom]

GP doesn’t have control over the markup WooCommerce outputs in it’s shortcode, unfortunately. You could maybe try some CSS like this?:

ul.products.columns-4 {
    display: flex;
    flex-wrap: wrap;
}

What kind of incompatibility did you find?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Erik]

Thanks! The CSS code solved the problem!

incompatibility gutenberg:
When I write in a text block, everything looks okay while I write, but when I publish, text refraction does not work. Thus, all text on a line, mostly outside the monitor.
I do not know if this is a problem in Gutenberg or GP, but everything seems fine in classic version

Erik

[Tom]

Any chance you can show me a screenshot of the issue? I can’t get that to happen.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts