[Support request] Price align on the same line

Hi there,

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

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

You’re welcome – glad to be of help!

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

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.