[Support request] Price align on the same line

[Alin]

Hello,

I would like to align the price of the products on the same line and i can seem to find a way.

Thank you very much

[David]

Hi there,

can you share a link to a page where i can see the price alignment?

[Alin]

Hy David,

Is this page: https://somelierultau.ro/

[David]

Try adding this CSS:

#wc-column-container .product,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column;
    flex: 1;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .price {
    margin-top: auto !important;
    margin-bottom: 20px;
}

[Alin]

David, you are a life saver and a genius.

Thankyou very much. Long live GeneratePress

[David]

You’re welcome – glad to be of help!

[fecso]

Hi David,

It works! Great! May I ask similar code for the product title too?

Thanks,
Ferenc

[David]

The product titles are vertically aligned to the top – there isn’t really a simple way to align them any other way then that

[fecso]

Hi David,

Thanks for your fast response. I am working on a site where product pictures are different sizes (books) but I need a much more tidy look in product loops (i.e. https://konyv.de/termekkategoria/konyv/ajandekkonyv/). Do you have any idea what to do?
Thanks,
Ferenc

[Elvin]

Hi,

This is pretty tricky to do because your images don’t have the same aspect ratio.

While we can force the image to have the same height, but there’s a chance that the landscape oriented images will be cropped on its left and right.

There also a chance of problems in legibility for portrait oriented images because they will shrink to fit the height we set based on landscape image’s aspect ratio.

That said, the best way is to actually set 1:1 aspect ratio images for products so we don’t have to worry about this.

But I understand that its going to be tedious to fix all of them. So its really a choice between landscape product images being cropped or portrait product images being too small to be read properly.

More things to ponder on: We can add a min-height to the .wc-product-image and remove the margin-top: auto; on span.price so the price’s position can be uniform but that will cause weird negative space on items with landscape oriented images.

[Author]

Posts