Product thumbnail cropping

https://imgur.com/a/ABKEBUX

Hello,

the even grid option doesn’t really make the grid even. I cannot assure that all the product images will be the same size, so I want to ensure that the thumbnail will be cropped to some size. I’d like to make the image cover a certain space, which will be the same for all products, so the grid is really even. I have the Appeareance -> Woocommerce -> Product Images -> Thumbnail Cropping set to 1:1 from the beggining. It doesn’t really affect anything. What are my options if I don’t want to crop the images before uploading everytime and I want to assure they all appear the same size on the page?

Hi jakubsamanek,

Thanks for reaching to us.

It is due to different heights of images. In order to have the same size image, I kindly recommend you prepare images you want before uploading them to your media library using the graphic editor (Photoshop or any other) to have a nice-looking grid or You need to find a third party plugin to achieve more functionality that best suits you.

For the Product Archive page, please navigate to Theme Settings > Product archives -> Products styles, here you can enable the Even product grid for desktop option to align products if they have different height components.
https://prnt.sc/ASt5z0mmasuz

Please note that this option helps product items to be even, not resizing images.

Regards,

But there must be a way to just change how the image fills the space right?
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The object-fit attribute should be the one doing that. I know it’s not that easy with all the styling you got going on.

I was messing with it myself and eventually got to something like this:
https://imgur.com/a/GjUlWZy

The images are the same height, but the grid isn’t really fit for that and the padding stops working correctly. I am not really experienced in this so I was hoping you could help with this one.

Hi jakubsamanek,

Thanks for your patience.

I see the images and padding are looking good https://ibb.co/F1Q0z9j Please let me know if you found the way.

Regards,

[Author]

Posts