Return to previous page

Handling Portrait and Landscape Product Images for a Uniform Grid Display

This topic has 2 replies, 2 voices, and was last updated 1 days, 8 hours ago ago by Tony Rodriguez

mutta

Participant

January 3, 2025 at 16:31

Hey everyone,

Hope you’re all doing well.

I’m having a bit of a headache with product image sizes. I’m trying to get a consistent look on my homepage product grid, but it’s proving tricky.

The problem is I’ve got a mix of portrait and landscape product photos, and I want them to display nicely without looking stretched or squashed. Ideally, I’d like all the image containers to be roughly the same size, so the grid looks clean and tidy, but the images inside should retain their original aspect ratio, ideally with empty space either on the top/bottom for landscape images, or on the sides for portrait images.

I’ve played around with the WooCommerce settings a bit, but haven’t quite cracked it. Has anyone else dealt with this? Any tips or CSS tricks that could help me get these images looking sharp and uniform?

Any help would be greatly appreciated!

Thanks in advance!

Content is visible for topic creator and
support staff only.

#429468 Copied Theme version: 9.4.6

1 Answer

Tony Rodriguez

Support staff

January 4, 2025 at 05:47

Hello, mutta,

Thank you for reaching out to us with your concern regarding the product image size on your website. We understand how important it is for the images to appear clear and properly aligned to ensure a great visual experience for your users.

Please read the next articles – https://www.8theme.com/documentation/xstore/woocommerce/product-images/

The size of products comes not from our theme, but from WooCommerce settings in Appearance > Customizer > WooCommerce > Product Images.

Please note that once you change these settings you need to regenerate thumbnails using the appropriate plugin.

Regenerate Thumbnails: After changing the image size, install and run the Regenerate Thumbnails plugin to ensure all images are resized correctly. This will help remove the blurriness caused by mismatched image dimensions.

It is recommended to use a graphics editor and prepare product images (make them the same size) before uploading images to your media gallery and for products. In other cases, images may have different heights on the frontend.

We hope this helps. Further assistance you can get from the WooCommerce support team – https://wordpress.org/support/plugin/woocommerce/

Best Regards,
8Theme’s Team

#429491 Copied
Viewing 2 results - 1 through 2 (of 2 total)