Setting Woo Commerce Product Related to same size Thumbnails

lumipallostudio · January 2023

Good Afternoon!,

On my woocommerce "shop" , that is serving only as a catalogue display , due to lack of availability , some of the images are significantly smaller than others.

That is not an issue on the main product image, however, on the "Related products" page, the thumbnails are being generated as a 1:1 i assume, , and as such a few of them have different heights.

please see attached image for reference.

is there a way to force all related products ( i assume these are categorized as thumbnails ? ) for follow a specific size or extend all images in order to have uniformity, such as setting all related product image to extend to the same height or max thumbnail height ?

thank you for your time.

Phil · January 2023

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

lumipallostudio · January 2023

https://forum.muffingroup.com/betheme/discussion/comment/227549#Comment_227549

hello phil , apologies for not posting the direct link.

Link as follows : https://chiangly.com/product/bevel-gearbox-2/

Visible under the product picture, in related products

Also visible in : https://chiangly.com/transmission_gearing/ as multiple pictures are sized differently, even within the same category.

Phil · January 2023

You can use the following CSS code:

.mfn-related .products .mfn-li-product-row-image img{
   min-height: 140px;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS, but it will stretch the image.

The best solution would be to use images with the exact resolution.

Best regards

lumipallostudio · January 2023

https://forum.muffingroup.com/betheme/discussion/comment/227590#Comment_227590

thank you phil!

EDIT: did the test, it works with a slighly larger number, and its doable, at least for the time being.

is there a way to apply a similar CSS code to the other product page ? (See https://chiangly.com/transmission_gearing/ , and for example the area called 減速⾺達 , where some images are of smaller proportion )

Phil · January 2023

Changing it there would affect all images from that page, and some might look weird.

If you still want to try it, please, check the following CSS code:

.mcb-item-shop-inner .products .product a img{
   min-height: 220px;
}

Thanks

Setting Woo Commerce Product Related to same size Thumbnails

Comments

This website uses cookies