Product Grid Cards – Uneven Height Due to Image Size

Hello,

I’m using the Woodmart theme and facing an issue with the product grid layout on my shop page.

As you can see in the attached screenshot, the product cards have uneven height due to different image dimensions. This causes the entire layout to look broken and misaligned.

What I want is:

1. All product cards to have equal height regardless of the image dimensions.
2. Product images to be stretched or cropped proportionally, but the product boxes should stay the same height.
3. A solution using the Woodmart theme settings (I prefer not to rely on custom CSS if possible).

I’ve looked through Theme Settings → Shop, but couldn’t find options like “Equal height for products” or “Product image height” that are mentioned in some older tutorials.

Could you please guide me where to find this setting in the latest version of the theme, or how to achieve this layout using the built-in options?

Looking forward to your help!

Best regards,
Zerehsaz

Attachments:

You must be logged in to view attached files.

Hello,

Your images differ in size considerably. Please check this manual and upload the same size of product images: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

The only way to make the view awesome is to upload images of the same size and proportion.
WooCommerce allows some settings that you can find under Appearance >> Customize >> WooCommerce >> Product Images.

You can define the “height” of the shop thumbnails by setting up the width : height aspect ratio in the “Thumbnail cropping” section:

Custom: In Custom, you can select the aspect ratio of the image.

Here are some of the popular aspect ratios (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).

Uncropped: The height of the image will be untouched. Images will be displayed using the aspect ratio in which they were uploaded: https://ibb.co/6mR6DbD

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.

Best Regards,

[Author]

Posts