How to Filter Products Using Product Custom Fields?

The Products Grid (Elementor, WPBakery) content element offers extensive options for filtering your product catalog using built-in filter settings. However, the built-in filter settings in the Products Grid do not support custom product meta fields out-of-the-box. But what if you have added multiple custom fields to your products (for example, via the ACF Plugin or TheGem Custom Fields - learn more about using custom fields in chapter "Custom Fields") and you wish to use these custom fields in your product catalog filters? For this purpose, you need to use the Grid Filter element in combination with the Products Grid element.

Here is a basic example of how to do this.

The screenshots in the example are from the Elementor page builder, but for WPBakery, all the steps and settings are the same:

1. Add your product custom fields (in our example, we have added two fields using the ACF plugin)

2. Define the custom field values in your products

3. Open a page where you wish to show your products in the page builder (let's say in Elementor)

4. Add two columns and adjust their width

5. In the first column, add the Products Grid element and specify its Grid ID (let's say "Gridtofilter")

6. In the second column, add the Grid Filter element and specify the same Grid ID ("Gridtofilter")

7. Now, while editing the Grid Filter element, go to the Attributes repeater and add the repeater item

8. In the "Filter By" field, select the ACF fields group you added in step 1 (see above)

9. In the "Select Custom Field," choose the custom field for your filter

10. In the same way, add one more repeater item and choose another custom field

11. Publish your page and check the result in the preview

That's all. Similarly, you can add product sorting with product custom fields for your product catalog using the Grid Sorting element.

Learn more about the power of the Grid Filter element in these chapters (Elementor, WPBakery).

Learn more about the Grid Sorting element in these chapters (Elementor, WPBakery).