images have different dimensions

Hello WoodMart Support,

I am using the latest version of WoodMart with WooCommerce.

My product images have different original dimensions, and on the Shop page, Home page, and Single Product page they are displayed using their original aspect ratios, which makes the layout inconsistent.

I would like all product images to display with a fixed aspect ratio (for example 4:5) or a fixed container size, without having to manually edit every image.

Could you please tell me the recommended way to achieve this in the latest version of WoodMart? Is there a built-in option or the recommended CSS/PHP solution?

Thank you.

Hello,

Yes, you can make product images appear the same size on category (archive) pages.
Do this:

– Navigate to Appearance > Customize > WooCommerce > Product Images.

– Set the Thumbnail width for catalog images. For best results, match it to your grid: for example, if your site container is 1200px wide with 4 columns, set about 300px.

– Enable cropping and choose a consistent ratio (e.g., square 1:1 or a custom ratio) so all thumbnails are uniform.

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

Also, here is an article that should help you with this https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

Best Regards

Hello,

Thank you for your previous reply.

The solution you provided fixed the product image size on the archive/category pages, but it did not solve the issue on the Single Product page.

On the product page, the main product image is still displayed using its original dimensions, so products with different image sizes appear with different heights and widths, resulting in an inconsistent layout.

I would like all product images on the Single Product page to be displayed within a fixed container or a fixed aspect ratio (for example 4:5), regardless of the original image dimensions, without having to manually edit each image.

Could you please let me know:

Is there a built-in WoodMart option to control the image aspect ratio or container size on the Single Product page?
If not, what is the recommended way to achieve this in the latest version of WoodMart?
Is there any CSS snippet or Theme Setting that you recommend for this?

Thank you.

Hello,

Navigate to Theme Settings > Single Product > Product Page Layout > Choose the Layout “Small Images” and check the issue. You can choose a different page layout depending on the product image size you need.

https://postimg.cc/CBrFMGHF

If you are using a single product page, Navigate to Layouts > Edit single product layout and configure the layout elements.

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Best Regards,

[Author]

Posts