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/

[Author]

Posts