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

Thanks for the detailed information, but there is a problem affecting the presets. I created the preset conditions by excluding the category group where I want the variant options to appear in the general grid view, the settings made in the categories and subcategories work correctly. The operations made in the Store – All My Products page do not work, it shows variants in the general view for all products. I am sending the url information in the hidden field,

There has been no response to this ticket for a long time. Can you check?

I am sending the video about the scrolling problem in the private area, please let’s solve all the problems today. Your support registration times are too long.

Hello,

1. May I disable 3rd party plugins for testing?

2. It will not work in such a way. Just select it for specific categories using equals – https://take.ms/UC7wr

Kind Regards

1) I made “equals” the categories that I did not want to appear as variants as you said, but it did not work. Can you check the situation and do the process? The issue is a bit urgent, we need to solve the situation before the weekend. (I am sending the image in the private area)

3) Yes, you can disable the plugins to test. Do not forget to reactivate them and please do not let the deactivation period take too long.

Hello,

1. The code didn’t work, due to this mistake in the preset’s Theme Settings – https://take.ms/SiCDz, but I have disabled that custom code and just disabled the grid swatch – https://take.ms/3bVMu

Result – https://take.ms/YpxV7

2. This problem is caused by the last update of Elementor, namely that they broke all JS scrolls https://github.com/elementor/elementor/issues/29103, so please add the below custom CSS code and we will fix this issue in the next update:

@media (prefers-reduced-motion: no-preference) {
		
		html {
			scroll-behavior: auto;
		}
}

Do not forget to fix your custom code in the global theme Settings – https://take.ms/SiCDz

Kind Regards

1) I don’t understand what you did, this is not the process I want. I’ll explain it in detail again. I don’t want the variant preview to appear in any area of ​​my website for the products belonging to the category I entered as “equal” in the presets. I want the variant information to appear only for one product or one category. In other words, let the grid variant information appear for one of my products, and let the grid variant not appear in any area of ​​the website for the other products.

I didn’t understand what you did; this isn’t the operation I wanted. I’ll explain it in detail again. For products in the category that I set as ‘equal’ in the presets, I don’t want variant previews to appear on any part of my website. I only want variant information to be visible for a single product or a single category. In other words, the grid variant information should appear for only one of my products, and for other products, the grid variant should not appear anywhere on the website.”

Hello,

If you want variant information to appear only for one product or one category, then disable the global option for gird swatches – https://take.ms/X1Xn73, then create a preset that is equal to 1 product or 1 category and enable that grid swatches option in the preset’s Theme Settings – https://take.ms/JTKCi

Thus, the grid swatches will be enabled only for the preset you created in which you define conditions that are related either to 1 product or 1 product category.

Kind Regards

This process shouldn’t be this complicated. I tried, but it’s not working. The variant preview of the product is visible in its own category, but it doesn’t appear on other pages! Please resolve this issue today; we’ve had too many exchanges about it. Go ahead and adjust the theme settings and presets yourself. I am conveying to you in the private area what needs to happen.

Don’t you see it in the video you sent? The variant preview of the product is visible on the category URL, but it doesn’t appear on other pages! How could you not understand this? Do I really need to explain this in so much detail for the process to be carried out?

Hello,

Sorry for the misunderstanding. The above solution is related to the specific category – #post-609235. You want to show the swatches grid only for 1 specific product on the whole website or only for 5 specific products related to 1 category on the whole website, it is impossible when you use 1 attribute color for a lot of products.

You need to create a separate color attribute for such products in which you want to show variations grid and select that separate color attribute for the whole website – https://take.ms/rXXYB

I made an example on your side:

1. created a test product that is related to the specific category and has a separate attribute that will be shown on the product grid – https://take.ms/YXByc

2. Then I have defined that specific attribute as product grid swatches – https://take.ms/IxOqa

3. As a result, only that product has a swatches grid, video – https://take.ms/5AGyu

I await your response.

Kind Regards

Isn’t it possible to carry out this process without creating a new color attribute? As you saw in the support correspondence, a condition was established by setting the product category for which variant display is desired to ‘equal’ in the settings, and unwanted products were blocked. The only issue was that the unwanted products appeared on the homepage and store page. I believe you can solve this issue without creating a second color attribute. A second color attribute could also complicate things on the Google Merchant side.

Hello,

The theme presets activate to the pages like category, etc., and not to the direct category item that is assigned to the product. That is why you saw grid swatches in the specific category page and on the home page there weren’t.

So the best way now is to use a separate attribute.

Kind Regards

[Author]

Posts