Home Forums WoodMart support forum Use of images in product variant options

Use of images in product variant options

Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #608206

    Ecommerce
    Participant

    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.
    #608334

    Luke Nielsen
    Keymaster

    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

    #608354

    Ecommerce
    Participant

    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.
    #608365

    Ecommerce
    Participant

    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.

    #608461

    Luke Nielsen
    Keymaster

    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

    #608467

    Ecommerce
    Participant

    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;
    }

    #608682

    Luke Nielsen
    Keymaster

    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

    #608715

    Ecommerce
    Participant

    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.

    #608755

    Ecommerce
    Participant

    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/,)

    #608785

    Ecommerce
    Participant

    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.

    #608908

    Luke Nielsen
    Keymaster

    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

    #608922

    Ecommerce
    Participant

    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.
    #608948

    Luke Nielsen
    Keymaster

    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

    #609065

    Ecommerce
    Participant

    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,

    #609076

    Ecommerce
    Participant

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

    #609147

    Ecommerce
    Participant

    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.

    #609184

    Luke Nielsen
    Keymaster

    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 equalshttps://take.ms/UC7wr

    Kind Regards

    #609205

    Ecommerce
    Participant

    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.

    #609219

    Luke Nielsen
    Keymaster

    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

    #609232

    Ecommerce
    Participant

    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.

    #609233

    Ecommerce
    Participant

    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.”

    #609235

    Luke Nielsen
    Keymaster

    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

    #609276

    Ecommerce
    Participant

    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.

    #609277

    Ecommerce
    Participant

    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?

    #609301

    Luke Nielsen
    Keymaster

    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

    #609316

    Ecommerce
    Participant

    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.

    #609330

    Luke Nielsen
    Keymaster

    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

Viewing 27 posts - 1 through 27 (of 27 total)