Change Product Grid Images and Descriptions

Hi, I would like to solve this problem:
– I would like that the products within the grid are more uniform
– I would like the Product Title to be two lines high, because it’s cropping too much from the title at the moment

I’ve tried playing around with editing the ‘Archive Products’ within Elementor and set the Image Resolution to WooCommerce Thumbnail but it has not worked.

Looking forward for your help.

Attachments:

You must be logged in to view attached files.

Hello,

01. The difference in the product image sizes is caused by the images themselves having different dimensions and aspect ratios.

To make the product grid more uniform, please follow these steps:

1. Navigate to Appearance > Customize > WooCommerce > Product Images.
2. Set an appropriate Thumbnail width for your catalog images.
3. Under Thumbnail cropping, choose a consistent aspect ratio, such as 1:1 (Square) or another ratio: https://ibb.co/6mR6DbD

Additionally, if you are using the Archive Products element in Elementor, make sure the Image Resolution is set to WooCommerce Thumbnail, as this allows the layout to use the WooCommerce-generated thumbnail sizes correctly.

For the cleanest grid, try to upload product images with the same aspect ratio.

Please refer to the following documentation for more details:
https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

Once your product images have consistent dimensions and WooCommerce thumbnail cropping is configured correctly, the product grid will display much more uniformly.

02. Navigate to Theme Settings > Product Archive > Products loop > Product title lines limit. Set the number of product title lines to “Two Line”. https://ibb.co/2kztmN5

Best Regards

Thanks for your prompt reply.

I’ve updated the suggested settings and it’s 80% better. However, I notice that there are still cases where the thumbnails are of different sizes, if you could help advise why this is the case or how to fix, will appreciate.

I’ve uploaded images of my settings.

Attachments:

You must be logged in to view attached files.

Hello,

I checked your settings, and the 1:1 thumbnail cropping option is configured correctly.

The reason some images are still showing different heights is that the existing thumbnails were generated before this setting was applied. Please regenerate your WooCommerce thumbnails and clear the cache.
https://wordpress.org/plugins/regenerate-thumbnails/

After regenerating thumbnails, the product images should display with a consistent ratio in the grid.

Best Regards

Hi, I did that, but it’s not quite fixed everywhere.

Refer to images. I’ve generated an admin login for you to validate what I’ve done.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say, the login details you provided are not working. Please share the correct login details so I can check the issue and give you a possible solution.

Best Regards

Apologies, re-try with details below

Hello,

The issue is caused by the original product images having inconsistent dimensions. Some images are much taller than others, which is why the product grid is not displaying with a uniform height.

For the best and most consistent result, we recommend uploading all product images using the same dimensions and aspect ratio.

As a workaround, you can use the following CSS to force the product image container to maintain a consistent 1:1 aspect ratio:

.wd-products .wd-product .product-element-top,
.products .product .product-element-top {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

This will help make the product grid appear more uniform, although using product images with consistent dimensions is still the recommended solution.

Best Regards

[Author]

Posts