05 Nov

How to create a Color Filter for your WooCommerce shop with swatches and everything?

Hey, we all need filters! Get these awesome color swatches in your store today. Your customers will love the colorful way to shop. You’ll even increase your sales by using it. In the next 2 minutes, you’ll learn all about it! See how beautiful, fast, dependable search results will be in your reach.

Creating colors and filters!

  • Let’s first add some product attributes. Navigate Products > Attributes and create an attribute (Color) and configure the terms (Red, Blue..).
  • Then let’s visit the product that we want to add a color. Go down to the Attributes tab, select Color and click Add.
  • Select your colors/values and hit the Save Attributes button.
  • Color filter will appear in the filter settings and we only need to activate it to started.
Click the Color filter so that a tab with our settings will appear
  • Click the Color filter, so that a tab with settings will appear.
  • Adjust the settings you want your filter to have.
  • Now to finish up, let’s style the color terms! Click the Paint Bucket Icon, select style Color and set the term colors.
Choose Select Style Color and style the terms!
  • Click Save Customization and then save your filter.

This completes the whole guide about making and styling swatches for a simple Color Filter for WooCommerce. There are more complex stuff related to this, if you use Variable Product, which’ll add functionality for stock support, individual prices and product images, please read on!

Using a Color Filter with WooCommerce Variable Products?

Surely! Luckily for you we’ve already wrote an article on how to setup variable products for filtering. We go in detail on how to achieve that here → https://medium.com/@dzeriho/how-to-filter-woocommerce-variable-products-in-your-shop-product-archives-ajax-sure-bd3af31d0ddc. Crucial step I want to point out, is that you need to upload an image in every variation you have that matches your color. For example in your red variation you need to upload an image with a red shirt.

Upload images for all specific variations

Do that for all of variations and make sure that you have the same image with only difference being the shirt color. After you finished adding the attributes and creating product variations One more important thing left to do if you want your color filter to shine is not to forget to enable the Switch Variable Images option in the Installation and Advanced Options.

There you go, we’ve gone through all the essential steps, and as a result we have a visually pleasing filter that your customers will absolutely fall in love with.

Wanna checkout live demo for this plugin? Go here → Product Filter for WooCommerce Demo Page

Get the Product Filter for WooCommerce!

Leave a Reply