How do I add color swatch filter?

I tried to make this happen to my one of my shop filter, for example the filter source I select is:

And the Product Query setting:

And inside the Filter block, I put a Swatch block in there, and the Attribute I select ‘Colour’
I’m sure all the query ID are matched, and still nothing is rendering, either the color selection in filter, or my products in the query.

Can anyone help?

Hi @lukelee,

Sorry to hear you’re experiencing trouble with this.

Could you possibly try setting your field to “slug” in the Query Editor > Taxonomy Query?

Once you have done so, kindly let me know if the issue persists.
Thank you in advance.

@Araminta I tried, and still not working.

In the console log, it just say:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘slug’)

Is it possible for you to make a quick video to show me how to create a color swatch filter properly? For WooCommerce product catalog.

@Araminta Also if there are any documentation on setting up the filters for WooCommerce product catalog in general? For example now I don’t know how to setup the price range filter properly either. A documentation or a video tutorial will be great

Sorry to hear you’re still experiencing trouble with this, @lukelee.

I’ll try to record a short video as soon as I have some free time.
However, I suggest you to take a look at our docs, as it goes over how to set up a colour swatch.

You should be able to find all the necessary information on our docs here.

Please let me know if this helps!

@Araminta so the doc you provided is building a single product template, is this the same as building the Frontend rendering filter at Product catalog?

The color swatch works on my single product template, but when I try to create a frontend rendering filter, it just doesn’t show anything and I don’t know how to set things up properly.

In the HTML output, I do see them:


But, nothing is working or showing, either the filter itself, or the Query.

Same thing goes to my Price range filter. I’m using Query builder and set the source instead of Post, I select Product.

What do you think it might went wrong in my setup?

Just some update: I removed the Swatch block inside of my filter, and now the color filter works in my product catalog. Now I just don’t know how to apply colors to all my filter buttons? As you can see from my last reply’s screenshot, it does render these buttons that shows all my colors in my color attributes with sytle=“–cc-wac:#xxxxxx”. Currently I just put a div inside of my filter block, but don’t see a way to set a dynamic background color to get all of my attribute color codes?

Hi @lukelee, perhaps this intro video from @Louis may be of help:

https://www.youtube.com/live/dl-HxEClCL4?feature=share&t=2709

(note: starts at correct timestamp for colour filters)

@StrangeTech this literally saved my day! I was very close that I put --cc-wac in my background of the div, didn’t know that we should wrap it with var().

Appreciated the video! I was looking for this one too just didn’t find it.

@Louis unfortunately some videos seem to have been removed? I remember a video from you going through many WooCommerce features that I can’t find on the YT channel anymore. I assume the link from @StrangeTech was referring to it.

1 Like

@Jonas, I can confirm from my quick test that video has been made private as you mentioned.

1 Like

@StrangeTech maybe they removed some videos because the UI of Cwicly changed a lot. But for me at least the old videos would be helpful nonetheless.

1 Like