[Resolved] Align Product Price

[Ash]

So I would like to align prices in product categories, I found this code

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

But if 1 entire row of products have shorter titles it makes the product card different size to other rows. If you look at the link the 3rd product has a shorter title so price isnt level with the other 3 products. I want the price to be level with the other 3.

[David]

Hi there,

that code looks to be working for me – browser cache maybe? If not which browser are you viewing it in ?

[Ash]

This is what I mean

https://ibb.co/2Yv2zYG

[David]

Hmmm… maybe give the Title a minimum height like so:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2, 
.woocommerce ul.products li.product .woocommerce-loop-category__title {
    min-height: 45px;
}

[Ash]

Perfect thanks 🙂

[David]

You’re welcome

[Author]

Posts