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

[Author]

Posts