[appletreewebParticipant]

I have set up an ecommerce site and have a child theme set up where I have made some customisation. However I would like to know how I can fix the product blocks on the summary page so they are all the same height and also the images at a fixed height. At the moment I have sized the demo images to the same height but its likely my client won’t be able to do that when the new products and images are added.

Please can you advise?

Thanks

[appletreewebParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.archive.woocommerce-page .entry-featured {
	min-height: 200px;
}

If this does not work, please keep a product with different image size so we can have a closer look.

Hope it helps, Cheers!

[appletreewebParticipant]

Thanks for your reply. I have added this to my child .css and added !immportant after it to ensure its applied but this doesn’t seem to have worked. If you look at the same page I have changed the image of the gold ring to a landscape proportion and althought it looks like the space for the image is consistant on all there is a white gap. I would like it to make these fit the width and height and hide any overflow so the image always shows as a square. (The same needs to apply for the additonal product images that show on the product details page rather than them all being random heights)

Also if you look at the 3rd product, the title is longer so its making the product box deeper than the others. So ideally would need to have the others auto made deeper but with white space so that all the product blocks are the same height and width.

Thanks in advance for your help!

[Paul RModerator]

Hi,

Please add this code as well

.archive.woocommerce li.product .entry-wrap, 
.archive.woocommerce-page li.product .entry-wrap {
    min-height: 93px;
}

Hope that helps.

[appletreewebParticipant]

Thanks for your help that makes the product sumary blocks a more consistent height but also need to do the same with the image within that block but set the overflow to hidden maybe?

On the product detail pages the thumbnails under the main image need to be the same height and width and also related products blocks at the bottom are not the same height?

[ZeshanMember]

Hi there,

I’ve checked your site and it seems you have achieved consistence featured image size (see: http://prntscr.com/921ove). Please confirm.

As for the single product thumbnails, use this CSS code:

.woocommerce div.product .images .thumbnails>a, .woocommerce-page div.product .images .thumbnails>a {
    max-height: 52px;
    overflow: hidden;
    border: 5px solid #fff;
    padding: 0;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
}

And related posts, use this CSS:

.single-product.woocommerce li.product .entry-wrap, .single-product.woocommerce-page li.product .entry-wrap {
    min-height: 93px;
}

.single-product.woocommerce li.product .entry-featured, .single-product.woocommerce-page li.product .entry-featured {
    max-height: 175px;
    overflow: hidden;
}

Thank you!

[Author]

Posts