Color swatch doesn't show up in product grid

Hey!

I got a shop with variable products with variable and different colors.

To help with those, I got two different attributes for colors. One is the actual color we use to specify our products e.g. “lighter olive” or “twilight” which is a blue tone.
= specific color

The other color is the color we specify for the filter to not have those many options to search those colors. Simple colors like green or blue.
So when they want blue pants, they press on the blue swatch and “deeplue” “darkblue” and “twilight” shows up.
= searchcolor

THIS WORKS FINE! I also have the color swatches in my filters in the sidebar widget. So I added colors in the attributes and took a color to show.
I also activated the checkbox, it shall use the swatches.
In Woodmart I chose a productstyle which shows these swatches and I also filled out “choose the attribute which should be shown in the product grid”. There I chose the searchcolor. But the swatches doesn’t show up in the productgrid. They show up as filter in the sidebar and when I tick the “Stick selected option name on desktop and tablet” in woodmart, it even shows the name of the color in the productgrid. But not the swatch.

What can I do to add those swatches to the grid?

Hello,

I can hardly help without checking the site, please check and follow this manual thoroughly, perhaps you have missed something: https://xtemos.com/docs/woodmart/variable-products-swatches/

Best Regards

Hello,

I followed your guide and even watched the video. It should work. I did exactly the same. But everything what is shown is only the word of the color on the product itself. No swatch under the product.
I will attach a picture so you know what I mean.
If you still need to check the site, I will see what I can do.

Attachments:

You must be logged in to view attached files.

Hello,

Do you want to disable these labels on the image? In order to deactivate the attribute, navigate to Products > Attributes > enter the attribute and disable “Show attribute label on products”

Best Regards

Hey,

no. I don’t want to disable them. I wan’t the color swatch to be displayed under the product like it’s showed in the example picture of woodmart.

Hello,

In order to show the color swatches in the product grid, you need to create variable products and configure swatches as per this manual: https://xtemos.com/docs/woodmart/variable-products-swatches/

If you do not see the swatches, please try to change the design on hover in the Theme settings > Shop > Product Styles.

Best Regards

Okay so I try again.
It’s ALL activated, checked what needs to be checked. I changed the design in Theme seetings > Shop > Product Styles too.
Yes, I did.
I made a picture for you, so you understand what my problem is. Please review it and help me.

Attachments:

You must be logged in to view attached files.

Hello,

Please enter the Products > Attributes > Configure item > enter each item, enable swatches, add color and image.

Please read and follow this instruction: https://xtemos.com/docs/woodmart/variable-products-swatches/

If it does not work, provide your site admin access to the private area.

Best Regards

Hello,

I already did that as I said.

Hello,

You have not configured the attribute swatches https://gyazo.com/813471fe86db199ba1fc0376cbeb4487

Please follow this manual: https://xtemos.com/docs/woodmart/variable-products-swatches/

Best Regards

I did. I configured all 7 colors. See picture.

I don’t know which colors you looked at, but the ones I want to show, are configured. The attribute is titled “color” and contains 7 colors.

Attachments:

You must be logged in to view attached files.

Hello,

Please configure all the colors and check.

Best Regards

Elise, I beg you. I configured all colors. I did that already a few weeks ago. There are only 7 colors. And those are configured. You’ve got the access and you can check it yourself. I did it.
Please look at the picture I send you now.
You will see that the slug is correct, that I configured all colors (7) and that I also checked all important boxes.

If they wouldn’t be configured, the filter in the sidebar to filter colors, also wouldn’t show colors. But they do. As you can see in my second picture, too.

Attachments:

You must be logged in to view attached files.

Hello,

You have set the attribute “Color” in the Theme Settings https://gyazo.com/9d2970ff922a0e88ce6befbdc0f5bfdf

You apply the attribute “Farbname” in the variable product. https://gyazo.com/b873ff06d5ce623602383c5d199349a0

You should use one and the same color attribute both in the Theme Settings and in Products.

Please check the first 5 attribute items, they are not configured as per instruction https://gyazo.com/3b9b3ba0f4ba9f45b42e53dbbdbc742b

Please configure the attributes as per the manual I provided above.

Best Regards

Hey,

no, not exactly. I set the attribute “color” because I want those to be shown. Since there are more than 50 colors in “Farbname”, I can’t them alle to be shown. So I picked basic colors like green, blue and 5 others and put them in “color”. Those colors are the colours which should be used to filter the products and which should be shown unter the product like I show you in my last posts.

However I linked all products to BOTH of these, as you can see in my image. So a shoe got the “bluewashed” “Farbname” but also the attribute color “blue”.

Why? Because if you pick the color and size of the shoe, there can be variable blue tones which couldn’t be picked, if I only got “blue”. So there need to be the specific color term.

But there would be just too many colors in it, if I would want to filter these.

So a product got the attribute “Farbname” with several colors which should be pickable on the single prodct page but got also the attribute “color” (which only has 7 colors in it) which should be filterable.

Attachments:

You must be logged in to view attached files.

Hello,

If you want to show “Color”, remove “Farbname” from all the variable products and set “Color” and create variations basing on “Color”

Please provide your FTP access we will double check.

Best Reards

Hey,

but the products still need the “Farbname” attribute since those are the names of the color from the procut.

Just to be clear and sum up again:
All products will have 2 attributes based on colors.

One attribute is the actual color how it was named from the designers and is the color which needs to be sold on. So if it’s a darker white, it’s probably “offwhite”. Is it a greyish blue, it could be “smokey blue” or something. Those colors NEEDS to be displayed on the product single page in the dropdown to select which color you want to buy, like the size dropdown too. Since we got severeal blue colors for example, we can’t just name it blue. Because which blue is it then? Our merchants know the difference so it needs to be named as the actual color.
This one here is set as “Farbname” at the moment. As you see, there are plenty of colors. More than 80 different colors.

BUT
since there are so many colors, it would be ridiculous if we used all of them to filter the products. To simplify this, we chose 7 basic colors. Every of these 80 colors are set to a basic color.
smokey blue -> blue
dark blue -> blue
offwhite -> white
etc.

So these 7 basic colors (set as attribute “color” and are also defined and checked to show as swatch) are the one I want to be filtered on. If they choose red, I want to display all redish colors.
THIS WORKS! The filter option in the sidebar widget works fine!
I chose the layout/style of the product where under the product picture all colors are seen as a small swatch icon. You already got pictures on the top of this thread where I showed you this.
Here is the problem. I don’t know why but there is no swatch on the products but there are just words of the color. There’s also a picture earlier from me. So if the product got colors which are set to red, blue and white there is a word on the product which says “red, blue, white” but as word, not as swatch.
So the filter works fine and it knows what to show, but it shows the color as word. I want it to be shown as swatch.

Hello,

Please provide your FTP access I will submit the issue to our development department.

Best Regards

FTP Access in private content

Hello,

We have checked and we see that there is no option to replace the attributes.

Remove “Farbname” attribute from all the variable products.

Add “Color” to the variable products, and create variations basing on “Color”

The functionality you describe requires Woocommerce customization that is not covered by our support.

Best Regards

Hey,

that doesn’t work too. I already tried something like that. It doesn’t matter which settings I set, it’s not possible for me to get the colorswatches under the thumbnail like it’s shown in woodmart product styles.
I created a test article to test your suggestion. Without any other color attributes. Only the basic colors. It still shows the words and not the color swatch as icon.

Feel free to try it out on my page and get it to work. Test Article product link in private content.

Hello,

Create a testing product, make it variable, add Color attribute and make the variations basing on the Color attribute.

Best Regards

That’s just what I wrote. I created a test object and did that.

Hello,

Please take this manual and create a variable product basing on the “Color” attribute: https://xtemos.com/docs/woodmart/variable-products-swatches/

You have added this attribute https://gyazo.com/25c91860c0f5d588b847fb5a09eb13e6 I asked to create the product basing on the “Color” attribute.

This functionality works perfectly, the problem occurs cause you do not follow the instructions prcecly.

Best Regards

[Author]

Posts