Issue With Color Swatches

Hello,

Please I need your help to fix an issue with color swatches display. I followed the instruction provided in your video tutorial, yet I have not been able to accomplish my goal. To clarify and provide a better understanding of the issue, I have added a video link in the private content section. Kindly watch and respond.

Regards,

Hello,

Sorry to say I am unable to understand. Could you please elaborate on your concern more with some useful screenshots for better understanding that demonstrate the problem, so we can understand and reproduce it on your website?

Also, share your site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

Hi Aizaz,

I am sorry that you could not understand the issue from the video I shared in the private content section. I have added some screenshots that may help you understand better. Simply put, what I want to accomplish is for product variation images to be visibly displayed in the color swatch buttons instead of the plain hex color. The screenshots I attached show both examples and how products are currently displayed on my site. I want to change it from the plain color display to the actual product image display as the screenshots show.

I have also added the WP admin access details in the private content section as you requested.

Regards

Attachments:

You must be logged in to view attached files.

Hello,

Enable the “Use images from product variations” in Theme Settings > Shop > Variable products: https://postimg.cc/4K0cgmGy

Define the image for the variation in the settings of the product: https://postimg.cc/phYnnkj7
Enable the “Text swatch” for the attributes: https://postimg.cc/H8dXSFHw

Navigate to Theme Settings > Shop > Variable products > set them as “Grid swatch attribute to display”: https://postimg.cc/FfxThbRd

When this option is enabled, the swatches will automatically use the images assigned to product variations.

For more details, please review these helpful guides:https://xtemos.com/docs-topic/variable-products-and-swatches/, https://xtemos.com/docs-topic/attribute-swatches/, https://shrturl.app/ju1iWc

Best Regards

Hello Aidan,

I have checked my settings as you instructed. All settings on my site is the same as you highlighted. However, the front end is not displaying image swatches. It’s still showing the color buttons. I also watched the video that you added to your message and I can confirm that my settings are in accordance with the tutorial instructions. Not exactly sure why it’s not working for me.

Thanks

I meant to write Aizaz in my greeting. Was a typo.

Hello,

Can you please share the product page URL where you have added the variation images so I can further check on your site and give you a possible solution?

Best Regards

Hello Aizaz,

You can check the product page using the link below.
https://noraroot.com/product/nora-two-piece-kaftan-with-embroidery/?v=2b8741a3dcda

Since the site is not yet live, to view it you should first login to the admin on one tab using the admin login information I previously sent you. You may then paste the URL on another tab.

Currently, since I couldn’t accomplish my goal, I left the color attribute text swatch setting disabled and the color swatch intact. You may play around with it as you please. All other theme settings look okay.

Hello,

Navigate to Products > Attributes > Configure term value of color attribute and disable the color swatch and enable the text swatch.

See screenshot for clarification: https://postimg.cc/H8dXSFHw

Best Regards

Sir,

I have done that already multiple times without success. If I disable the color swatch and enable the text swatch, the color attribute is replaced with the text (name of color e.g. sky blue) instead of the actual product image. I have repeated the process multiple times following your previous instructions and the guide provided in the video tutorial you sent me.

I thought that you requested for the admin login credentials so that you can experiment and see the outcome on the front end. Doing so may help you find out what the problem is.

Regards

Hello Aizaz,

Please disregard my last message. I found out the problem. On the product listing interface I did not select color as the attribute swatch to display. See attached screenshot. Neither the tutorial nor the instructions mentioned this. Without making this selection, the settings at the color attribute interface will not work. The display works well now. Many thanks for your continued support.

Attachments:

You must be logged in to view attached files.

Sounds Great! that your issue has been solved.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.
Thanks for contacting us.

Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts