Home › Forums › WoodMart support forum › Image Swatches not showing up on product pages

Image Swatches not showing up on product pages

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • August 5, 2019 at 1:50 pm #136070

    Alaina Anglin
    Participant

    Hi,

    I am having issues getting my swatches to show up on product pages. I followed the tutorial and all appropriate settings seem to be selected. Can you take a look and tell me what I’m doing wrong?

    We are wanting them to function exactly like this: https://markthomasfurniture.squarespace.com/config/

    August 5, 2019 at 2:56 pm #136086

    Alaina Anglin
    Participant

    The “763 Huxley” product is the one I’m currently working on.

    August 5, 2019 at 4:29 pm #136108

    Alaina Anglin
    Participant

    Also, we want the swatches always showing up on the products pages, even if there is only one cover option. (Example: 838 Argentine only has some cover/color option, but we still need the swatch image to show up).

    Can you please help?

    August 5, 2019 at 7:55 pm #136133

    Elise Noromit
    Member

    Hello,

    Please deactivate all the plugins not related to the theme and check the site admin access I cannot log in

    Best Regards

    August 5, 2019 at 8:16 pm #136139

    Alaina Anglin
    Participant

    I deactivated the “Safe SVG” plugin. It was the only one not related to the theme.

    Dropping login info below. Let me know if this works!

    August 5, 2019 at 8:42 pm #136141

    Alaina Anglin
    Participant

    And now they’re showing in the “additional info” tab… in a list…

    This is driving me nuts!

    August 6, 2019 at 7:51 am #136186

    Elise Noromit
    Member

    Hello,

    1. Add more than one variation to products, use the global attributes.

    2. Please navigate to Dashboard -> Products -> Attributes -> Color -> Configure items, enable swatch as shown http://prntscr.com/jskm29

    Navigate to Theme Settings > Shop > Attribute swatches > choose pa_color (your color attribute)

    Make sure each variation in a variable product has an image: http://prntscr.com/kk870w

    Best Regards

    August 6, 2019 at 1:45 pm #136250

    Alaina Anglin
    Participant

    [In reference to 763 Huxley product]

    1. There are 6 active color attributes added for this product.

    2. All swatches are enabled.

    3. pa_color has been selected

    4. Each variation has an image.

    Swatches still not showing up.. Now they are actually listed out in the “additional information” tab.

    Can you please log in and help spot the actual problem? I’m wondering if it’s an issue within the code of the theme. That is what WooCommerce suggested.

    Also, having the color swatches show for EVERY product is vital for us. Some products only have one color option (838 Argentine, for example), but we still need the swatch image to show. How can we achieve this?

    August 6, 2019 at 2:31 pm #136258

    Elise Noromit
    Member

    Hello,

    You have enabled the catalog mode https://gyazo.com/a5b0f53959b9f04b7822422e9621ca74

    Now the swatches work https://gyazo.com/74795a4f83e2c88041f1a10a8fef07ea

    Best Regards

    August 6, 2019 at 8:33 pm #136352

    Alaina Anglin
    Participant

    Getting closer! See screenshot.

    1. Glad to see the swatches displaying! However, we had Catalog Mode enabled because we do not want “add to cart” or quantities showing. Is there a workaround – perhaps a code that I could add to hide those? Or a code to enable catalog mode, while also showing the swatches?

    2. The swatch names are still listed out in the “additional information tab” – how can I get rid of that?

    3. We do not want the swatch variant image actually showing up in the gallery – just in the small circles as a preview.. Is there a way to remove the small swatch image from our product gallery?

    4. Also, some products will only have ONE color option (838 Argentine, for example), but we still need the swatch image to show. How can we achieve this?

    Thanks so much for all of your help!

    August 7, 2019 at 10:04 am #136498

    Elise Noromit
    Member

    Hello,

    1. Woocommerce does not provide the option to show the variations (swatches) in catalog mode and our theme does not influence.

    2. Please add this code to the Theme Settings > Custom CSS > Global:

    body .tabs-layout-tabs .tabs li.additional_information_tab {
    display: none;
}

    3. Try this code 

    body .swatches-on-grid  {
   display: none;
}

    4. In the same way as any variable product, leave just one variation.

    Best Regards

    August 13, 2019 at 4:20 pm #137988

    Alaina Anglin
    Participant

    1. Solved 🙂

    2. Solved 🙂

    3. I tried the suggested code, but the small swatch image is still showing up in the product gallery (see attached screenshot).

    4. Solved 🙂

    + 5. Is there a way to always show which variable is chosen? We are trying to achieve something like this: https://www.article.com/product/11833/sven-charme-tan-sofa
    Screenshots attached also.

    + 6. How do I get rid of “x clear” beside the swatch variations?

    Thanks so much for all your help!

    Attachments:
    You must be logged in to view attached files.
    August 14, 2019 at 7:05 am #138069

    Elise Noromit
    Member

    Hello,

    3. Please provide the page URL.

    6. Please add this code to the Theme Settings > Custom CSS > Global:

    body .variations_form.variation-swatch-selected .reset_variations {
display:none!important;
}

    Best Regards

    August 14, 2019 at 1:21 pm #138167

    Alaina Anglin
    Participant

    3. Link provided.

    6. CSS added, cache cleared, but “x clear” still showing up.

    August 14, 2019 at 2:03 pm #138193

    Elise Noromit
    Member

    Hello,

    3. Please provide the link where swatches are on the product grid. You provided a link to the product page, do you want to remove the swatches on the product page? Just switch to the simple product.

    6. Clean your browser cache.

    Best Regards

    August 14, 2019 at 5:22 pm #138240

    Alaina Anglin
    Participant

    3. Definitely don’t want to remove the swatches from the product page! Sorry if I was unclear. On the product page, when a customer clicks on a swatch, the first product image that they see is the swatch image. We do not want the swatch variant image actually showing up in the product gallery – just in the small circles as a preview. See attached screenshot. Please advise.

    6. Browser cache has been cleared. “x clear” is still showing up. Please advise.

    Attachments:
    You must be logged in to view attached files.
    August 15, 2019 at 8:32 am #138331

    Elise Noromit
    Member

    Hello,

    By default, Woocommerce works in the way as it does now. It is the correct operation and our theme does not influence that.

    There is an option to display the swatches as images which are set globally in “Image preview for this value” of the attribute item. The color from “Color preview for this value” should be cleared. In this case, the color, for example, =Red= would have one and the same image for all the products.

    This option is provided in Dashboard -> Products -> Attributes -> chose the attribute -> Configure Items -> Edit.

    Best Regards

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