Image swatches for product variations

Hi there,

This is the product page:
https://www.dev.turtleconservationsociety.org.my/product/children-scrunchies/

1. I have set up the colour attribute and configured the colour swatch. Then on the product page itself, after adding colour variations, I’ve set the image of the red variation to the actual product in red colour. I’ve also enabled “To use images from product variations”. (screenshot: 00-use-images-as-product-variations)

However, when I view it on the front end, it does not show the product in red colour but a red colour swatch.

I want to be able to create a single colour attribute (let’s say red), which can then be added as variations in multiple products instead of creating multiple red colour attribute items under Colour attributes. And each of these products will of course have their own actual product photo in red. Is this possible and how can I do this? (see attached image -01-desired-results for an example of desired results )

2. How do I show a tooltip when I hover over the colour/image swatch? (see screenshot – 02-hover-colour-tooltip)

3. The disabled swatch is not visible when used on an item that is also red, giving the perception that the item is available when it is not. Is there a way around this? (see screenshot – 03-disabled-swatch)

Thanks!

Attachments:

You must be logged in to view attached files.

Please see extra info for password to access page

Hi speckywizard,

Thanks for reaching to us and appreciate your patience.

1. I see the variations images are now change according to selected color variations, please let me know if you need further helps.

2. Go to > Theme Settings > Performance > JS > Advanced scripts controls > set the Tooltips library Always Load.
https://snipboard.io/2UezWO.jpg

3. Navigate to Products > Attributes > edit attribute > Choose the disabled swatch. The disabled Swatch style is for the variants of the Products which are disabled not for the Out of Stock variants. So, you need to have the variant of the Product not checked with the Enable option on it and then the Disabled Swatch style will work accordingly.

See these images for reference:
https://snipboard.io/BMehIF.jpg
https://snipboard.io/NbOzfP.jpg

If you have any questions please feel free to contact us.

Regards,

Hi Hung Pham,

2. I’ve enabled the Tooltip library but the tooltip still does not appear on the single product page. It only appears on the product grid page. How do I resolve this?

3. What I meant is this…Let’s say I select the disabled swatch design style with a red cross overlaying the colour swatch. When I have the same red colour option on the colour swatch, the disabled swatch is not obvious or visible since the red cross is the same colour as the swatch colour option itself. This also happens when I choose the disabled swatch style with a grey line, if the colour option is grey then the disabled swatch is also not obvious or visible.

Thanks

Hi speckywizard,

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Regards,

Hi Hung Pham,

Please see link below

Hi speckywizard,

The admin link has been expired, can you please re-send the new one?

Regards,

Hi Hung Pham, please try again.

Hi speckywizard,

The link still didn’t work, I kindly recommend you to share credentials directly instead.

Regards,

[Author]

Posts