Product Image Size

Product main image size is not matching. Please check the attached image to understand better.

Attachments:

You must be logged in to view attached files.

Hello,

Regarding making the Products Grid of the same size, you can go to Dashboard > Theme Settings > Product archive > Products style > Layout > in that you can find the option of Even product grid for Desktop: https://snipboard.io/cAn1HR.jpg

There you can toggle that option on.

You can read about it more here on the following Documentation link:
https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

Best Regards

I toggled the option on Even product grid for Desktop but it is still the same.

Hello,

The Even grid option seems to be working fine on your Site, it’s the Product Image size which is different on your Site which is why you are seeing that uneven concern.

As you know the Product Images are handled by WooCommerce, so in order to settle the Image Size, you can navigate to Appearance – > Customize -> WooCommerce -> Product Image and find the size option for product page images as well as images in a grid.

If you want, the other way possible in this regard is to adjust the Height of the Product Images, which can be modified with the help of following Custom CSS that you can try out and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.product-grid-item :is(.product-image-link,.hover-img) img {
   object-fit: contain !important;
   height: 25em !important;
}

Best Regards

Okay I putted the CSS to Global and now the height in desktop view is okay but the width is not aligned. Please check the screenshot: https://i.imgur.com/2StiIhC.png

And in mobile view the width and height both are not okay. Please check the screenshot: https://i.imgur.com/5a0uSvk.png

Hello,

Sorry for the inconvenience. Actually, CSS was sent as an alternative solution to try out if you don’t want to upload all the Images resized to standard WooCommerce defined size. Unfortunately, it didn’t work out in your case.

With your provided Logins, we further checked the mentioned concern on your Site. Commented-out our CSS and then check back the concern again, actually this certain Product has a different sort of dimension on your Site which is why this issue is specifically arising here. The best way is to upload the resized Image of it according to the WooCommerce standard size which is around 800×800 pixels.

Or you can use the WooCommerce Thumbnail option for this Products Section specifically and it would appear like this: https://snipboard.io/puIANY.jpg

Best Regards

[Author]

Posts