Archived topic

Price vertical alignment

7 replies · Started by David on February 28, 2020

Viewing posts 1–8 of 8

February 28, 2020 at 8:27 am #1179834

Hi,

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

Wrong:
wrong alignment

Correct:

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!

February 28, 2020 at 8:52 am #1179850

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;
}

February 28, 2020 at 10:30 am #1179917

It works. Thank you. :)

February 29, 2020 at 4:12 am #1180369

You're welcome

October 10, 2020 at 5:48 am #1481821

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!

October 10, 2020 at 6:41 am #1481883

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;
}

October 10, 2020 at 6:54 am #1481902

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!

October 11, 2020 at 4:05 am #1483048

Awesome - glad to be of help

This archived topic is closed to new replies.

Start building better websites today.