1×1 ratio image on products list

Hey!

On the product page (woocommerce), if I change color attribute, it doesn’t load me a 1×1 aspect ratio image (default is 300×300) and it turns out ugly.

How to do that always load 300px x 300px images here?

Example: https://youtu.be/F69_WWG8wYw

Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :).

I watched the video you attached. The product images are controlled by WooCommerce and our theme doesn’t influence this. WooCommerce provides some settings that can be found under Appearance >> Customize >> WooCommerce >> Product Images.

Screenshot for Clarification: https://ibb.co/1L7ZNjp

You can make settings of your own from there.

Best Regards.

It’s work for product page. On grid is still the same 🙁

And yes, I run regenerate thumbnails in Woocomerce tools and clean cache.

Looks like Ajax get image without 300×300 parameters?

Video: https://www.loom.com/share/2edd39957ad34c34b419ea3de61c28e8

And by the way, I already have 4 licenses for WoodMart. …and counting 🙂

Hello,

I watched the video you attached.

As I mentioned in my previous reply that the images of products are controlled by WooCommerce and our theme doesn’t influence this. It seems that you are using different images for product variations that are of different sizes. Please try and add the variation images of the same sizes, clear cache and check back.

Or you can try changing the image crop ratio from Appearance >> Customize >> Woocommerce >> Product Images.

Screenshot for Clarification: https://ibb.co/1L7ZNjp

Best Regards.

I temporary fix it with edit CSS in Woodmart theme.

I replace:
img{max-width:100%;height:auto;border:0;vertical-align:middle;}

with:
img{max-width:100%;border:0;vertical-align:middle;object-fit:cover;}

Why are you using “height:auto;”? I can’t remove it within child theme, so with every update I need to fix it again?

Hello,

We are Glad that you resolved the issue by yourself. You are Great!!

You can use the CSS in the Child theme that will not be lost after the theme update. If you use the CSS in the main theme then it will be lost after updating.

Best Regards.

You don’t understand me.

In the main CSS, “height: auto;” is set for the img tag.

This overrides the attributes that Javascript gives to a woocomerce photo.

However, I cannot overwrite “height: auto” in child theme because height should not be defined for img{}.

“height: auto” must be deleted in the theme CSS

Look at photo.

I hope you will understand me now. 🙂

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached. The image height is defined in the main theme files and you don’t need to apply any height. That’s why you need to update them from the main theme files. As you did in your case.

You can keep the solution as far as it is working for you.

Best Regards.

No,

“height: auto;” overwrite the height set in Woocomerce settings (under Appearance >> Customize >> WooCommerce >> Product Images).

So you need to delete this line in your theme CSS. I cant do that in child theme, it’s impossible.

For now I need edit your main CSS with every update and that’s annoying. Just deleting this line and everything works fine. It actually doesn’t make sense that “height: auto” is there.

This line height: auto; is required to make all images responsive. It doesn’t influence your images aspect ratio if you don’t customize anything in the code. 1×1 ratio can be achieved if you enable crop in WooCommerce settings without any extra code customization.

Not quite true.

Try create a product with different colors and upload different height image for each color. And than start clicking on colors. After color change it will never be 1×1 again, even though you have 1×1 cropping in the settings.

I cant find solution except delete the “height: auto”.
But I have to keep an eye on it every update..

That means that you didn’t set 1×1 ratio for the single product page. The problem is that swatches and WooCommerce variations take images with single product page size. So if you want to use this feature, you need to have the same size for shop catalog and for single product page.

[Author]

Posts