Would you like shoppers to filter your products by custom fields like color or size? Botiga Pro includes a sidebar widget that displays product filters for custom fields added with the Advanced Custom Fields (ACF) plugin.
In this guide, we’ll walk you through how to filter products by ACF custom fields in Botiga.
Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active. The ACF sidebar widget is a Botiga Pro feature, so this requires Botiga Pro.
In the screenshot below, customers can filter products by Color and Size, two custom fields created with ACF. The values, such as Blue, Orange, and Pink, or Big, Medium, and Small, update automatically whenever you edit a product.
1. Install and activate the Advanced Custom Fields plugin
First, install and activate the ACF plugin. Go to the Plugins » Add New page in your WordPress admin area, search for “advanced custom fields,” then install and activate the plugin.
2. Create custom fields with ACF
Next, create some custom fields with ACF for your WooCommerce products. The ACF documentation explains how to create custom fields with the plugin.
Only fields that return a single value are allowed, so one field cannot hold more than one value. The allowed ACF field types are:
- Text
- Select
- Textarea
- Radio
- URL
- Number
- Range
- Password
- Button Group
- Date Picker
Once the custom fields are added to your products, you’re ready to use Botiga Pro’s ACF sidebar widget.
3. Enable the sidebar for your product catalog
To show the widget, add a sidebar to your shop catalog page. Go to Appearance » Customize » WooCommerce » Product Catalog » Layout » Sidebar Layout and choose a sidebar layout. Then set the Sidebar dropdown to Shop Sidebar or another sidebar option.
4. Insert the ACF widget into the sidebar
Now insert the ACF widget into the sidebar you selected, which is the Shop Sidebar in our example. To do so:
- Go to Appearance » Widgets in your WordPress admin area.
- Find the Shop Sidebar area.
- Click it to add a new widget.
- Search for the Botiga ACF widget.
- Add the widget to the sidebar.
The ACF filters now appear in the sidebar of your product catalog page.
Frequently asked questions
Below, we’ve answered some of the most common questions about filtering products by ACF custom fields in Botiga.
Why isn’t my ACF field available in the widget?
The widget only supports fields that return a single value, such as Text, Select, Radio, and Date Picker. Fields that can hold multiple values won’t appear as filter options.
Do the filter values update on their own?
Yes. The values shown in the filter update automatically whenever you edit a product, so you don’t need to manage them by hand.
That’s it! You’ve successfully set up product filters for ACF custom fields in Botiga.
Next, would you like to filter products with a different custom fields plugin? Check out our guide on filtering products by Meta Box custom fields to learn more.
