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

Use of images in product variant options

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 28, 2024 at 9:27 pm #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.
    October 29, 2024 at 11:43 am #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

    October 29, 2024 at 12:26 pm #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.
    October 29, 2024 at 12:39 pm #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.

    October 29, 2024 at 4:17 pm #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

    October 29, 2024 at 4:41 pm #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;
    }

    October 30, 2024 at 12:02 pm #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

    October 30, 2024 at 1:55 pm #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.

    October 30, 2024 at 3:07 pm #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/,)

    October 30, 2024 at 3:49 pm #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.

    October 31, 2024 at 10:42 am #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

    October 31, 2024 at 11:18 am #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.
    October 31, 2024 at 11:45 am #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

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)