Attribute swatches not working after changing color attribute

Hi,

After I renamed the color attribute to “colour”, I found that the image swatches are no longer working correctly. Pls refer to the link in private content area.

1) The Colour swatches is no longer displaying a thumbnail of the product image. ( I have already turned it on from the “Use images from product variations” setting in the Theme Settings )

2) Clicking on a colour option does NOT change the main product image anymore. ( I have already configured the corresponding product image for each colour option )

Could you please advise what has gone wrong?

Thank you.

UPDATE (Please ignore previous post)

Hi,

After I renamed the color attribute to “colour”, I found that the image swatches are no longer working correctly. Pls refer to the link in private content area.

1) The Colour swatches is no longer displaying a thumbnail of the product image. ( I have already turned it on from the “Use images from product variations” setting in the Theme Settings )

2) Clicking on a colour attribute will change the first thumbnail image to the corresponding attribute swatch. However, you will see that the thumbnail size is not the same size as the rest of the other thumbnails. Why is this so? See attached image

Could you please advise what has gone wrong?

Attachments:

You must be logged in to view attached files.

Hello,

Try to remove the old attribute from the product and add the new one.

Best Regards

Hi

I don’t understand. You mean delete the existing colour attribute and create a new colour attribute instead?

Hi,

I just tried creating a new colour attribute with the name “color” and added it to the product. It didn’t work. Colour swatches are still just showing the colour – not the thumbnail of the image.

I hope you could help look into this.

Hello,

You need to add image and enable swatches for this attribute and add the image into variation.

1. Remove the old attribute.

2. Create a new attribute and configure it as you did it with the old one.

3. Add it to the product, create variation, add an image.

Best Regards

Hi —

I tried again and it did not solve the problem. Here is what I did:-

1) Removed the old attributes – “colour” and “color” as you suggested.
2) Create new attribute – “colour” and added 2 colours to it – red and dark red.
3) Create a new product.
4) Create variations – dark red and red. Added image to each variation.

The end result is still the same. The swatches are still NOT displaying the image thumbnails like they used to.

I have already enabled this setting in the Theme Settings panel.
https://prnt.sc/p5gic3

I used to be able to see the image thumbnails on the swatches, but not anymore. The last thing I did was change the attribute name from “color” to “colour”. This feels like something is wrong at the code level.

I have not been able to create any new products just in case I have to redo everything – that would be a complete waste of my time.

Please could you look into this?

I am adding the link to the new product I created

Hello,

Image swatches are working correctly https://gyazo.com/79fb91330efd2fb10e0df6d8575346a6 and https://gyazo.com/83169c7ea5d12eb3b956d75d31787d18

You should also choose the size. This is the way Woocommerce works.

Best Regards

Hi Elise,

I am NOT referring to the changing of the main image when you click on the colour swatches. That is working fine, no issues there.

If you go back and have a look at my reply again, you will see that I am referring to
>>>>
“The swatches are still NOT displaying the image thumbnails like they used to.”

I don’t mean to be condescending, but in your theme, you allow your users to display image thumbnails as the swatches, if the user turns this setting to “ON”.
https://prnt.sc/p5gic3

I have always turned it on, and it USED TO display the actual image as the swatches, not the colour. >>> https://prnt.sc/p5l86q

Unfortunately, like I said, after I renamed the color attribute to “colour”, it seem to break the functionality, and no matter what I do, I can’t get it to display the image thumbnail anymore. It will only show the colours – just as you see on the page now.

I have tried removing all the attributes, creating a new product, adding the attributes again, etc. and nothing works.

I don’t really know how else to explain this, so I really hope this makes sense this time.

Hello,

You need just to enable the option http://prntscr.com/p5m665

Navigate to the Theme Settings > Shop > Attribute swatches.

Best Regards

Hi

Thank you. That does resolve the problem. However, I wished that your documentation was a little more detailed, as it is not explained anywhere what that feature was for. To be honest, I don’t understand what the explanation on the setting means at all. I did not know that changing an attribute name could break everything – a lot of time was wasted trying to find out what’s wrong.

Without having to repeat myself again, please refer to my previous post below. Issue #2 was not resolved. Why is the first thumbnail (the swatch image) elongated in comparison to the rest of the images?
https://xtemos.com/forums/topic/attribute-swatches-not-working-after-changing-color-attribute/#post-143305

Hello,

Which one #2?

#143303
2) Clicking on a colour option does NOT change the main product image anymore. ( I have already configured the corresponding product image for each colour option )

This works correctly https://gyazo.com/35a5221fd7eebad72ee807c69decd1bd

#143305
2) Clicking on a colour attribute will change the first thumbnail image to the corresponding attribute swatch. However, you will see that the thumbnail size is not the same size as the rest of the other thumbnails. Why is this so? See attached image

You need to have images of the same size and same proportion. Now you have vertical gallery and it does not matter now.

Swatches are round and of the same form and size http://prntscr.com/p6pkxh

What problem are you talking now? Please provide page URL, screenshot and steps how to reproduce.

Best Regards

Hi Elise,

Ok sorry maybe I should not have referenced the previous post, to avoid confusion.

Let’s try again.

Issue 1:
When you click on a colour swatch, the main product image will change (correct) but the thumbnail image will look very long – not the same size as the other thumbnails (wrong).

1) Go to URL provided in private content area.
2) Click on grey colour option, and any size.
3) You will see the main image change (correct)
4) The first thumbnail also changes, but it becomes a long rectangle shape. –> https://prnt.sc/p70qll

While the issue may not be obvious on desktop, it is very obvious on mobile devices. See screenshot here –> https://prnt.sc/p70r40. Also, it looks very sloppy.

I understand that the images need to be the same ratio – and they are. I just imported these images from our Opencart website, and the images have always been saved in the same ratio – 686×900 (rectangle).

Issue 2:
Please also note that I have never configured the thumbnails to be square. In fact, I don’t even know how to do this. I imported your Basel main demo theme (https://demo.xtemos.com/basel/) because I wanted the images to look exactly like yours.

Your thumbnails are rectangle shaped, whereas mine is square shaped. How can I get my images and thumbnails to look like yours – rectangle shaped, please?

— This is what your thumbnails look like (rectangle) >> https://prnt.sc/p70sv9
— This is what my thumbnails look like (square) >> https://prnt.sc/p70t8z

Even on your Related products widget, your thumbnails are also rectangles
— This is what your Related products widget looks like (rectangle) >> https://prnt.sc/p70tin
— This is what mine looks like (square) >> https://prnt.sc/p70ts0

I need the images and thumbnails to be rectangle shaped, because when it is square, most of the time the face of the model and the bottom of the dress gets cropped off.

I don’t know what steps to give you to reproduce this, because I don’t even know why mine are squares, and yours are rectangles. I only imported the demo files per your documentation but I don’t get the same result as your demo site.

I hope the explanation I’ve provided above is much clearer now. Thanks.

Hello,

1. Upload images of the same size and check. Images are not equal in size that is why one is longer https://gyazo.com/eaa75cd3f9d4e00118dc1bef3cde248e

2. In order to settle the issue, navigate to Appearance – > Customize -> WooCommerce -> Product Image and find the size option for product page image as well as images in a grid:

Main image width – Image size used for the main image on single product pages. These images will remain uncropped. Image width used in demo sites are: 600px;
Thumbnail width – Image width used for products in the catalog, Image width for the catalog is 350px;
Thumbnail cropping checkboxes:

1:1 – Images will be cropped into a square;
Custom – Images will be cropped to a custom aspect ratio, for example, 4:3 or there is the option to insert the aspect ratio
Uncropped – Images will display using the aspect ratio in which they were uploaded

Best Regards

Hi,

Issue #1
Just tested, it has got nothing to do with the image sizes. I used the images from your demo site to create a test product and the results are the same.
– Link in private content area
– https://prnt.sc/p77zc6

Issue #2
Could you please give me a step by step instruction or a clear answer, how do I make my images and thumbnails look just like your demo site – that is, rectangle shaped?

It would also help if you could provide a screenshot of how you configured your demo site (Appearance – > Customize -> WooCommerce -> Product Image) so I can replicate it on my site. As I said before, my images ratio is 686×900, so what settings should I use/how should I configure it so that I can get the images to look like your demo site?

Thank you.

Hello,

1. Have a look at the screen https://prnt.sc/p7cd7f If images of the same width and height they look perfect. Dimensions: 443 by 620 pixels

2. Here are the configurations: https://prnt.sc/p7bzng When you enable cropping, images are more square, disabling cropping make images rectangular.

Images should be of the same sizes.

If it does not work as on our demo, disable all the plugins not related to the theme and check again.

Best Regards

[Author]

Posts