Use of images in product variant options

Hello,

All of my products have variants and color attributes are defined. Color attributes are selected as a drop-down menu on the product page. I want the product image to appear in the variant selections. How can I do this? I am sending the image as an attachment to the request.

Attachments:

You must be logged in to view attached files.

Hello,

1. Enable the text swatch in the settings of each color attribute – https://prnt.sc/0kKwUqEsMpzn

2. Then enable the “Color” attribute as “Grid swatch attribute to display” – https://prnt.sc/FlxC3B4Iksfp

3. In the settings of the product, set different images for the product variations: https://take.ms/RzeG4

Result – https://take.ms/wAG9M, the size can be changed in the settings of the attribute – https://prnt.sc/28aDu62XjqTW

Kind Regards

Hello, thank you for your support. There are a few things I would like to do, can you help me with these issues?

I don’t want variant information to be visible in some of my categories (or products) in the grid view, how can I do this? In the theme settings section the minimum “Number of visible color swatches in the grid” is 1, is there a way to make this 0? (sample2.jpg)

Attachments:

You must be logged in to view attached files.

Case 2: Although the “Scroll to the variation and select [mobile]” option is enabled in the theme settings, there is no scrolling on the page after selecting the variation. You can see the product link sent in the hidden field by testing it on the mobile version.

Hello,

1. Try to use the code below:

.wd-product .wrap-price .wd-swatches-grid {
    display: none;
}

2. Send me access to your website so I can check the site settings.

Kind Regards

I have sent the relevant information in the private area,

1- I used the css custom code but it turned off the variant display in all products. Can’t I use the option to turn off the variant in the grid view only for certain products and categories?

3- Since the text that appeared after the variant selection on the product page was not legible, I had to increase the font, and I had to do this with the following css. Is there another way? Is the code I am using correct?

Code:
table.variations .label span {
margin-left: 5px;
font-size: 16px;
color: black;
}

Hello,

1. In this case, try to use our theme presets: https://xtemos.com/docs-topic/theme-settings-presets/,

2. Navigate to WoodMart -> Patcher and apply the 608672 patch, then clear the cache and check how it works.

3. If it works for you, then it’s okay.

Let me know if you have additional questions.

Kind Regards

The patch has been applied and the scrolling issue after selecting the variant on mobile has been fixed, thank you. There seems to be a small hitch before you start scrolling after selecting the variant, please check again if you wish.

hi,

1. Thanks for the information about theme presets. Can you show me how to do the feature I want as an example? I’ve never used this field before. It’s a bit complicated.(https://xtemos.com/docs-topic/theme-settings-presets/,)

I found a 2nd new issue:

When clicking on variant #16539, scrolling does not work on mobile. This may be due to the product image also being used as the product cover image. Can you fix this issue? Otherwise, we will have to have two images in the gallery.

Hello,

1. May I request you to make a video with the issue related to the scrolling?

2. Create a preset that is related to the specific category – https://prnt.sc/MScX5Z7d3tiK, then enable the above code to hide the swatches – https://prnt.sc/dUliviLD6wVh so in such a way they will be hidden only for that category that is mentioned in our preset condition.

Kind Regards

Hello, I followed the steps you said, but the variant options are not visible in the grid overview for any product.

I am explaining the example I want to do again: Do not let the variant color options appear in the grid overview for our products in the category with the code “ID: 185”.

Information has been sent in the private area so that you can make the relevant correction.

Attachments:

You must be logged in to view attached files.

Hello,

Remove that code from the Global Theme Settings – https://prnt.sc/1lNZZQaJ7F-p, it should be only in Theme Settings that is related to specific theme preset – https://prnt.sc/tc3tWqKYpiqY. Uncheck the checkbox – https://prnt.sc/korw3ZSNGPnU and paste the code at the bottom. Thus that code will work only for theme preset that is related to the selected category.

Kind Regards

[Author]

Posts