[Resolved] Woocommerce

[Rob]

Hi, can you help

Can you help me set an equal height for the product boxes on the products page?

They are all different heights and it looks wierd.

[David]

Hi there,

the main issue is variance in image sizes and title lengths. If possible its always best to have all your images the same aspect ratio and the original images the same size. But we can use this CSS that forces all images to 150px and forces the titles to occupy 3 lines regardless. The last rule not necessary but adds a nice drop shadow border:

.woocommerce ul.products li.product a img {
    width: 150px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    lineheight: 2.5ex;
    height: 7.5ex;
    overflow: hidden;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    padding: 2% 2% 3%;
    box-sizing: border-box;
    box-shadow: 0 5px 5px -2px rgba(0,0,0,0.5);
}

[Rob]

Awesome as usual!!!

Thanks so much David

[David]

You’re welcome – i must say they do look rather good 🙂

[Author]

Posts