In this guide, we will show you how to filter product variations by the custom fields created by Custom Fields for Variations.

We’ll show you how to do this using the plugin FacetWP as your product filter plugin, but this same technique can be used with other filter plugins.

Custom Fields for Variations stores the data of the field within the post meta of the variations, which is the standard way of storing any kind of extra information for any post type within WordPress. Because of this standardized way of storing data, the custom fields that are created by Custom Fields for Variations can be used by any filtering plugin to filter products.

Before we begin, please make sure that the Custom Field for Variations and FacetWP plugin are installed and activated on your site.

Step 1:Create a custom field

Let’s begin by adding a custom field group in Custom Fields for Variations and some fields within it.

1. From your WordPress dashboard, go to Products > Variation Field Groups.
2. Click on Add New from the left sidebar.

3. Give your field variation a title. This is just for internal reference.

4. Click on the Add Field button, then give your field a label, type, and choices if applicable.

5. Save the field by clicking on the Save Field button.
6. Save the field group by clicking on the Publish/Update button on the right sidebar.
7. Click on the Edit field button and copy the Meta ID for it.

Step 2: Save custom field data for each variation

1. If you haven’t already created a variable product then create one. If you already have a variable product then edit it.
2. Scroll down to the Product Data section of the edit product page and click on the Variations tab on the left panel.
3. Click on each variation and then enter the value of the custom field.
4. Click save and add custom fields for other variations too.

Step 3: Create a Facet/Filter

1. From your WordPress dashboard, go to Settings > FacetWP.

2. Click on the Add New button to add a new filter.

2. Give this a label, select a Facet type and other settings. In the data source field, search and select the Meta ID we copied in step 1 while creating the custom field.

4. Click on the Save Changes button and then click on the Re-index button.

Step 4: Add Facet to a widget

1. From the Facet we just created, copy the shortcode using the Copy shortcode button.

2. Go to Appearance > Widget. Identify the widget that shows on the Shop page sidebar.
3. Within the Widget, click on the plus icon (+) button and search for the Shortcode widget.

4. Click on the widget to add it, and then paste the Facet shortcode we copied in the last step.
5. Visit the shop page and confirm that the Facet appears on the sidebar showing the filtering options.