“Issue with Product Image Aspect Ratio on Homepage Carousel

Hello, good morning! How are you? I hope you’re doing well.

I’m facing an issue with my website. I made a change to ensure the images display in a 3:4 aspect ratio, as shown in this screenshot: https://prnt.sc/HELYO2n1j0GY, and also here on the following link: https://amorella.ar/tienda/.

I’m also sharing a screenshot of the configuration I applied: https://prnt.sc/JROruwNFmYhx.

The issue is that the product carousel on the homepage doesn’t display the images in this 3:4 format, and I can’t find any option to fix this. Here’s how it looks: https://prnt.sc/CaTf3fMCe0pD.

Could you please help me resolve this? Thank you!

I’m adding one more issue related to this: when I add a variable product, as seen in the product “Collar” (https://amorella.ar/tienda/), the full aspect ratio is not displayed: https://prnt.sc/0VLUBs8hjK_Y.

Hello,

Navigate to Pages > Edit home page with elementor > Edit Products Grid or Carousel Widget and in the style tab open the products design settings and change the image size to “Thumbnail”.
https://ibb.co/GP18wWq

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

Hi, how are you? Thanks so much for your response. The first issue is resolved, but in the second one (https://prnt.sc/aikVn5Hh3tb5), I already had that option enabled, and they still appear like this: https://prnt.sc/ojI6OEI6Poho.

Hello,

It is due to the different heights of images. In order to have the same size image, I kindly recommend you prepare images you want before uploading them to your media library using the graphic editor (Photoshop or any other) to have a nice-looking grid

Best Regards

Alright, I understand what you’re saying about uploading images in a more elongated aspect ratio. But here’s the issue: Why is it that with Necklace 1 and 2, even when uploading square images, they look fine (https://prnt.sc/nVZ8bBimJzeS), but that’s not the case with Necklace 3? Here’s the link so you can check it out yourselves: https://amorella.ar/categoria-producto/collares/.

Even when removing the color variation or the variable product, it doesn’t adjust automatically. The problem with using elongated images is that they look fine in the product archive but not on the product page itself, as they appear too stretched, which looks bad. I need to upload square images, just like for Necklace 1 and 2, and have them adapt with a zoom effect on their own. Could you help me understand what’s happening?

I even tested it by removing the color attribute from Necklace 3 – Silver, and it still looks wrong.

I just fixed it by forcing the following code in the theme’s CSS:

img.attachment-woocommerce_thumbnail {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
}

Maybe this helps in case someone enables the option https://prnt.sc/ArtjKGjKPBJT in the WooCommerce settings so it works correctly in the theme without having to change the square image in the individual product page.

Thank you very much!

Hello,

While your solution works to standardize the image sizes visually, it might not be the most optimal approach in the long term. Using CSS to enforce dimensions can sometimes lead to distorted images, depending on the original aspect ratio.

However, your workaround is a quick fix and could be useful in certain cases.

Best Regards

[Author]

Posts