Price vertical alignment

[David]

Hi,

I would like to align my products prices like in the pictures bellow:

Wrong:

Correct:

This is WC products shortcode displayed on homepage and I also need to achieve the same on shop page.

If possible, I prefer flex or “clean” way.

Thank you!

[David]

Hi there,

try this CSS:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    margin-bottom: unset !important;
    flex: 1;
    display: flex !important;
    flex-direction: column;
}

.woocommerce ul.products li.product .price {
    margin-top: auto !important;
}

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

[David]

It works. Thank you. 🙂

[David]

You’re welcome

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

[Baltaru]

Hi there David!
Can you please add something to this CSS in order to align the star ratings too?
It works for me too, but the stars are misaligned.
https://www.offroadmax.ro

Thanks!

[David]

Hi there,

remove this CSS rule:

.woocommerce ul.products li.product .price {
    margin-top: auto !important;
}

And add this instead:

.woocommerce ul.products li.product .star-rating {
    margin-top: auto !important;
}

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

[Baltaru]

You continue to amaze me with your support. 🙂
I simply came to believe that I pay too little for so much attention and for such quick and HELPFUL answers!

Chapeau!

[David]

Awesome – glad to be of help

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

[Author]

Posts