Image Swatches not showing up on product pages

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/

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

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?

Hello,

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

Best Regards

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!

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

This is driving me nuts!

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

[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?

Hello,

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

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

Best Regards

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!

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

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.

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

3. Link provided.

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

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

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.

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