Showing main variation images as swatches instead of drop-down menu

Greetings lovely Xtemos team.

I would like to show the main image of each variation as a swatch on the variable product pages, instead of the drop-down menu. The variations have not been configured through Products -> Attributes, rather I have created unique and individual attributes on the product pages themselves and enabled “Used for variations.” Therefore I am unable to select anything relevant in the “Grid swatch attribute to display” drop-down menu. Since our site has thousands of products and thousands of variations configured in this fashion, I’m afraid it would not be possible to create a new attribute through Products -> Attributes just for this setting.

Is there a way to use the “Use images from product variations” feature without having to select something in “Grid swatch attribute to display”?

Thanks,
Tom

Continuing my previous message, I’d like to stress that I don’t want the swatches to be displayed on the grid or anywhere else on the website except for the product pages themselves. I see that the “Grid swatch attribute to display” setting is for the product grid, which again, I do not need.

So I’m hoping that the “Use images from product variations” will be enough. Alas, I have enabled it and cleared cache but I still see a drop-down menu. Link for reference: https://www.wildguitars.co.il/product/prs-se-nf3/

Best regards,
Tom

Hello,

Navigate to Products > Attributes > edit the terms of the attribute and upload Image Swatch.
https://prnt.sc/ryIZHQaYZSkQ.

You can read more here https://xtemos.com/docs-topic/variable-products-and-swatches/ and https://xtemos.com/docs-topic/attribute-swatches/

Best Regards.

Hi Aizaz,

Thank you for the prompt reply.
As I mentioned in my previous email, the attributes I would like to use for the swatches have not been set up through Products -> Attributes.
They have been set up through Attributes -> Add new in the product pages themselves. This action does not create or add the attributes to the Products -> Attributes section which has always been my preference.
We work with dozens of different guitar manufacturers that occasionally use the same color name with vastly different shades, and I don’t want hundreds (if not thousands) of different color attributes when they are usually unique for each individual guitar.

In conclusion, I am asking if I can use the “Use images from product variations” option for these attributes that have been set up through the product pages themselves and not through the Product -> Attributes section.

I can make a screen recording if you require further clarification.

Best regards,
Tom

Hello,

You need to enable the option ‘Use images from product variations’ in Theme Settings -> Shop -> Variable Products. Then, you need to add images for each variation while editing your product in Dashboard -> Products -> edit product.

To make it work, you need to disable the color swatch and enable the text swatch, then the image from the variation will be shown: https://take.ms/ll6kZ

Best Regards.

Hi Aizaz,

Thanks again for your prompt reply.
1. ‘Use images from product variations’ is already enabled.

2. Please view the following video that I have recorded, to clarify what I am trying to do. https://we.tl/t-W6TDfZnC1n

Best regards,
Tom

I just noticed that I accidentally uploaded the video sideways, please use the following link instead: https://we.tl/t-oHtuAtZxGp

Hello,

Can you please share the product page url where you are using the variation swatches. Also share the wp logins details so i will further check on your site and give you a possible solution.

Best Regards,

Hi Aizaz, I have included all the requested information in the private content.

Hello,

Please update the new version of the theme “WOODMART WordPress NEW: 7.5.2 RELEASED” and update the required plugin and check the option.
https://xtemos.com/docs-topic/update-the-theme/

If the issue remains, Please edit the color attribute and share the link because there are a lot of attributes in other languages and I cannot identify.

Best Regards.

Thanks again for the prompt reply, Aizaz.
As I have attempted to explain, there is no “color” attribute in the Products -> Attributes page. The “color” attribute that is used for the variations on each variable product page is created through Attributes -> Add new on the variable product page itself.

I have recorded an additional video to try and clarify this further. https://we.tl/t-8PvxjUO7a6

Hello,

You need to add the attributes in Products > Attributes and configure the term value.
You can read our detailed documentation for further help:
https://xtemos.com/docs/woodmart/variable-products-swatches/

Best Regards.

Thanks again for getting back to me, Aizaz.
We have over 500 variable products in our shop, and for all of them the variation attributes have been configured via the method I described (Product page -> Attributes -> Add new as opposed to Products -> Attributes).
I’m afraid it will be impossible for us to re-create all of these attributes through the Products -> Attributes page.
Additionally, as I mentioned, many of our manufacturers have conflicting colors (for example all manufacturers have a “red” color but for each of them it’s a different shade). So I’m not sure how it will be possible to do this. Can you please clarify?

Continuing my previous messages, I now understand that this entire discussion is only relevant for global attributes.

I have performed a successful test, and the color thumbnails now appear on the product page:
https://prnt.sc/qucJKFiJ6tUr

But, there is an unwanted side effect in the grid:
https://prnt.sc/fePzFbndUyOM

Although this is a nice feature and I may decide use it, for now I am not interested in it.
When disabling “Grid swatch attribute to display” in Theme settings -> Shop -> Variable products -> Attribute swatches, the thumbnails on the product grid disappear and instead it shows the text description of the colors.

How can I only display the color thumbnails on the product page and not in the grid?

Hello,

Navigate to Theme Settings -> Shop -> Variable products and disable the attribute to the “Grid swatch attribute to display” field: https://prnt.sc/jVxH52JZb9xD

Best Regards.

Hi Aizaz, please see the screen recording that I have uploaded for you: https://we.tl/t-MawFwd0GnN

Hello,

Please update the new version of the theme “WOODMART WordPress NEW: 7.5.2 RELEASED”, update the required plugin, and check the option.
https://xtemos.com/docs-topic/update-the-theme/

If the issue remains, turn off all of the plugins not related to the theme, refresh your cache, and check if the problem persists.

If the issue still remains, let me know and I will check and give you a possible solution.

Best Regards.

Thank you for the reply, Aizaz.
As you know updating the theme is a complicated process as many things can break on the front end, so we need to perform many tests on our staging site before performing the update on our live site. I hope to get to this week.

On a related note, please view the following video and let me know if you have a solution/suggestion for me: https://we.tl/t-8iPxqL3J66

I have included links to the variable product and to the composite product that includes this variable product, in the private content.

Thanks,
Tom

Hello

Try to add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS

[class*="wd-swatches"].wd-text-style-1.wd-swatches-grid {
    display: none;
}

Best Regards.

Hi Aizaz, I added the custom CSS code to the appropriate section (and cleared cache) but unfortunately it doesn’t look like there is any change.

https://prnt.sc/liLzUyc6ZIyw
https://prnt.sc/AoSTwlzP1VGv

Hello,

This code will remove the swatches variation from the archive pages (shop or category pages). Please check back your and check the archive pages.

Best Regards.

I see – it did the trick, thanks. 🙂

Were you able to view the additional video I recorded? https://we.tl/t-8iPxqL3J66

Hello,

I am not able to see the video because the video link has been expired.

Best Regards.

I have re-uploaded the video: https://we.tl/t-QQvabMIgi6

Hello,

You need to turn the swatches options from Theme Settings >> Shop >> Variable Products >> https://ibb.co/m8sygk1

Please read more details here:
https://xtemos.com/docs-topic/attribute-swatches/

Best Regards.

Hi Aizaz, these two options are already enabled.
The issue is only with Composite Products, such as this one:
https://www.wildguitars.co.il/product/composite-product-test/

On the variable product that is part of this composite product, the thumbnails are displayed correctly:
https://www.wildguitars.co.il/product/sire-s3/

Hello,

First of all update the new version of the theme “WOODMART WordPress NEW: 7.5.2 RELEASED”, update the required plugin, and check the option.
https://xtemos.com/docs-topic/update-the-theme/

If the issue remains, turn off all of the plugins not related to the theme, refresh your cache, and check if the problem persists.

If the issue still remains, let me know and I will check and give you a possible solution.

Best Regards.

Hi Aizaz,

Let’s use our staging site for the troubleshooting.
I have disabled all plugins except for the following:
Classic Editor
Code Snippets
Loco Translate
Woo Composite Products
WooCommerce
Woodmart Core
WP Rocket (cache)
WPBakery Page Builder

Cache has been cleared.
Please see the details and links in the private content.

You can see that while the variation thumbnails are displayed properly on the variable product page, they are not displayed properly on the composite product page. Instead there is a drop-down menu.

Best regards,
Tom

Hello,

Sorry to say your staging site is not working.

Best Regards.

Hi Aizaz, can you please clarify?
I use our staging site every day it seems to be working just fine.
Foreign IP addresses are accepted as well, there is just a CloudFlare challenge page for them.
Only FTP access requires whitelisting of specific IP addresses.
Perhaps you can send some screenshots to demonstrate what you are experiencing?

[Author]

Posts