Home › Forums › WoodMart support forum › Showing main variation images as swatches instead of drop-down menu
Showing main variation images as swatches instead of drop-down menu
- This topic has 34 replies, 2 voices, and was last updated 1 month ago by
Aizaz Imtiaz Awan.
-
AuthorPosts
-
July 14, 2024 at 8:54 pm #583242
wildguitarsParticipantGreetings 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,
TomJuly 14, 2024 at 8:56 pm #583243
wildguitarsParticipantContinuing 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,
TomJuly 15, 2024 at 11:12 am #583305
Aizaz Imtiaz AwanKeymasterHello,
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.
July 17, 2024 at 9:28 pm #584038
wildguitarsParticipantHi 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,
TomJuly 18, 2024 at 11:11 am #584126
Aizaz Imtiaz AwanKeymasterHello,
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.
July 22, 2024 at 10:36 am #584692
wildguitarsParticipantHi 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,
TomJuly 22, 2024 at 10:40 am #584695
wildguitarsParticipantI just noticed that I accidentally uploaded the video sideways, please use the following link instead: https://we.tl/t-oHtuAtZxGp
July 22, 2024 at 2:16 pm #584794
Aizaz Imtiaz AwanKeymasterHello,
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,
July 22, 2024 at 9:40 pm #584942
wildguitarsParticipantHi Aizaz, I have included all the requested information in the private content.
July 23, 2024 at 9:50 am #584996
Aizaz Imtiaz AwanKeymasterHello,
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.
July 23, 2024 at 10:28 am #585020
wildguitarsParticipantThanks 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
July 23, 2024 at 1:11 pm #585070
Aizaz Imtiaz AwanKeymasterHello,
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.
July 23, 2024 at 4:06 pm #585124
wildguitarsParticipantThanks 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?July 23, 2024 at 5:11 pm #585159
wildguitarsParticipantContinuing 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/qucJKFiJ6tUrBut, there is an unwanted side effect in the grid:
https://prnt.sc/fePzFbndUyOMAlthough 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?
July 24, 2024 at 9:57 am #585268
Aizaz Imtiaz AwanKeymasterHello,
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.
July 24, 2024 at 8:46 pm #585491
wildguitarsParticipantHi Aizaz, please see the screen recording that I have uploaded for you: https://we.tl/t-MawFwd0GnN
July 25, 2024 at 10:58 am #585601
Aizaz Imtiaz AwanKeymasterHello,
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.
July 25, 2024 at 1:03 pm #585674
wildguitarsParticipantThank 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,
TomJuly 25, 2024 at 2:54 pm #585717
Aizaz Imtiaz AwanKeymasterHello
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.
July 26, 2024 at 7:48 pm #586072
wildguitarsParticipantHi 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.
July 27, 2024 at 9:32 am #586112
Aizaz Imtiaz AwanKeymasterHello,
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.
July 27, 2024 at 9:48 pm #586230
wildguitarsParticipantI see – it did the trick, thanks. 🙂
Were you able to view the additional video I recorded? https://we.tl/t-8iPxqL3J66
July 29, 2024 at 9:55 am #586349
Aizaz Imtiaz AwanKeymasterHello,
I am not able to see the video because the video link has been expired.
Best Regards.
July 29, 2024 at 10:38 am #586362
wildguitarsParticipantI have re-uploaded the video: https://we.tl/t-QQvabMIgi6
July 29, 2024 at 5:56 pm #586543
Aizaz Imtiaz AwanKeymasterHello,
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.
July 29, 2024 at 9:49 pm #586570
wildguitarsParticipantHi 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/July 30, 2024 at 11:50 am #586690
Aizaz Imtiaz AwanKeymasterHello,
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.
July 31, 2024 at 11:40 am #586955
wildguitarsParticipantHi 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 BuilderCache 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,
TomJuly 31, 2024 at 3:36 pm #587045
Aizaz Imtiaz AwanKeymasterHello,
Sorry to say your staging site is not working.
Best Regards.
July 31, 2024 at 6:39 pm #587113
wildguitarsParticipantHi 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? -
AuthorPosts
- You must be logged in to create new topics. Login / Register