How To Setup Filter Swatches?

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to set up filter swatches.

What Are Filter Swatches?

A Filter Swatch is an attractive WooCommerce Filter that uses colour or images instead of words. Our Filter Swatches are used in the Filter Posts Module.

Step 1: Create Product Attributes

Go to Product > Attributes and add your attribute. For example, Origin Country is one of the Product Attributes below.

Step 2: Edit Each Attribute

When editing each Product Attribute you will need to choose a Type. Make sure that you select the correct type depending on the type of data that you would like to use. For example, Colour will be Type Color and Image will be Type Image.

Step 3: Configure Items

Next up you will need to configure Items for each Attribute. The configuration will depend on the type of data that you have assigned to this attribute. For example, if you have selected Color then add your different Colours as Items.

Step 4: Add Filter Item

Make your way to the page where you have added the Filter Posts and Archive Loop Module and add a New Filter Item searching for the correct Product Attributes. Then enable the Show Attributes Swatches button and select Filter Type as Checkbox / Radio Buttons.

Step 5: View Swatches

View your new Filter Swatch from the frontend.

More Support?

Please email us at [email protected] if you are unable to get Divi Ajax Filter working.