Home / Forums / WoodMart support forum / How to make product images the same height in category/shop grid
Home › Forums › WoodMart support forum › How to make product images the same height in category/shop grid
How to make product images the same height in category/shop grid
- This topic has 1 reply, 2 voices, and was last updated 5 days ago by
Aizaz Imtiaz Awan.
-
AuthorPosts
-
November 30, 2025 at 6:19 pm #698411
rafraf.deParticipantHello WoodMart support team,
I am using the WoodMart theme together with the [XTemos] Products archive widget in Elementor for my shop and category pages.
I have a question about product image alignment in the grid.
I have around 7,000 products in my shop.
The product images have different heights / aspect ratios (for example, oriental rugs with various proportions).
On the shop and category pages, the product grid looks messy because the images have different heights, so the product cards in one row are not aligned nicely.
If I leave everything as default:
Images are not cropped, but
The rows look uneven because some images are taller and some are shorter.
When I tried to fix this with custom CSS (setting a fixed height for the image container and using object-fit etc.):
The grid becomes aligned,
But on large desktop screens some images start to look cropped / cut, which is not what I want.
What I would like to achieve
I want a clean, consistent product grid where:
All product cards in the category/shop pages have visually the same height,
Product images are aligned in one row,
And ideally the images are not cropped, or at least cropped in the “recommended” way for WoodMart.
Because I have many products and images (7000+), I cannot manually edit or resize all images. I need to use the theme’s built-in options or a recommended CSS solution.
My questions
What is the recommended way in WoodMart to make all product images appear with uniform height in the grid (shop / categories), when the original images have different heights?
Is there any setting in WoodMart (Theme Settings or in the [XTemos] Products archive widget) that:
forces equal height for product images or product cards,
without badly cropping the images on large screens?
If the correct approach is custom CSS, could you please provide an official CSS example for:
making product images the same height in the grid,
keeping the layout clean on large desktop screens,
and working well with many products (performance-friendly)?
With around 7000 products, do you have any specific recommendations for product image sizes or ratios in WoodMart, so that the archive/category pages look tidy and consistent?
In the screenshots I sent, there are two categories from our site, and the last one is an example from one of our partner sites, which is exactly how we want all the products to be displayed in one row.
Thank you very much for your help.
This is an important visual/detail issue for my shop, and I would really appreciate your guidance on the best practice for WoodMart in this case.Best regards,
December 1, 2025 at 1:29 pm #698526
Aizaz Imtiaz AwanKeymasterHello,
Your images differ in size considerably. Please check this manual and upload the same size of the 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 -> Product styles, here you can enable the Even product grid for desktop option to align products if they have different height components:
Best Regards,
-
AuthorPosts
- You must be logged in to create new topics. Login / Register