Botiga Pro includes an exclusive sidebar widget that allows you to display product filters for custom fields added with the Advanced Custom Fields (ACF) plugin.
In the screenshot below, you can see an example where customers can filter the products by Color and Size, two custom fields created with ACF.
The values (e.g. Blue, Orange, Pink, etc., or Big, Medium, Small) are automatically updated whenever you edit a product.
Let’s see how to enable Botiga Pro’s Advanced Custom Fields sidebar widget.
1. Install and Activate the Advanced Custom Fields Plugin
First, you need to install and activate the ACF plugin.
To do so, 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
Now, you need to create some custom fields with Advanced Custom Fields for your WooCommerce products.
Check out the ACF documentation, which explains how to create custom fields with the plugin:
Once the custom fields have been added to your products, you are ready to start using Botiga Pro’s ACF sidebar widget.
3. Enable the Sidebar for Your Product Catalog
To show the widget, you’ll need to add a sidebar to your shop catalog page.
Go to Appearance > Customize > WooCommerce > Product Catalog > Layout > Sidebar Layout in your WordPress admin area, and choose a sidebar layout.
Then, set the Sidebar dropdown field to ‘Shop Sidebar’ or another sidebar option:
4. Insert the ACF Widget Into the Sidebar
Now, you need to insert the ACF widget into the sidebar you selected in the previous step — 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
That’s it! The ACF filters now should appear in the sidebar of your product catalog page.