color swatch on shop page, doesnt change image, and resizes image of product

Hello,

Color swatch doesnt change image on shop page ( it does inside product page).
And of top of that it also resizes the image on the shop page.

YOu can see this behavior in the link I attached.

Thanks

Hello,

But we don’t see color swatches on the shop page at all now. Could you please provide us a screenshot?

Regards

attached

Attachments:

You must be logged in to view attached files.

There is a “white” color swatch next to the black, maybe that is why you dont see it.

Are you sure that you have uploaded right images for black and white variations? As we can see, images are changed, but they seem to be incorrect.

I think I did, maybe you can guide me?

I have a shirt with multiple color and sizes. So I choose one color to be deafult, lets say white.
Now how do I set up up images for other colors? do I need to put image for each variation of color and size? i.e set image for black size small, set image for black size medium, set size for black size Large, and so on and on?
Is this the proper way to do it?

Thanks

Yes, you need to set images for each separate variation as you described.

wow it will take a long time. 5colors*4sizes*50items. there is no way to set an image for color variation so it will be set for all sizes together?

thanks

and one more thing, can you suggest a way to solve the issue where the image get smaller when you click the swatch?
Im guessing it something to do with image replacement on hover?

Thanks

You just need to upload images for variations the same size for the product featured image.

NO its not because of this.

look at this category.
I created a new product with variations and put the same photo for everything

https://www.bhpc.co.il/product-category/%D7%98%D7%99%D7%A9%D7%99%D7%A8%D7%98/

Could you please send us your admin so we can check it?

I prefer not to give admin details since this is for client.

But I found the cause for this fault, when the image div have the “product-swatched” attribute, the source for the image changes from the 720X900 image to the 1000X1000 version of the image.

Maybe you can guide to where the properties for “product-swatched” are set? so I can change it.

Thanks

ok so the images on the shop page shows the “catalog image” of woocommerce properties, while the swatch images uses the “single image property” of woocommerce.
I dont know if its something you need to change in your theme files or I need to change in woocommerce settings? it seems like swatch images on shop page should also use the “catalog image” property.

Yes, it is true. WooCommerce gives “Single product images” for variations and we can’t replace them with catalog images instead of in our theme. All you need to do is just keep all images in the same proportions without a hard crop.

Regards

Hey so I’m having a similar issue (I guess) with color swatch and resulting image sizes.
I have an image defined for all color variations and it each thumbnail has been correctly generated.

Unfortunately when I click on a swatch, the product image is resized as you can see in the attached screenshots.
I suppose there is a configuration fix somewhere ?

Attachments:

You must be logged in to view attached files.

Hello,

As we already described this issue in this topic, there is no fix for this if you are using hard crop for your catalog images but don’t use it for a single product page. Unfortunately, this issue depends on the WooCommerce mechanism and we are not able to fix it in our theme scope.

Kind Regards

[Author]

Posts