[Pro] Sidebar Widget: Product Filters for ACF Custom Fields

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:

Install and activate the Advanced Custom Fields 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:

Advanced Custom Fields documentation, screenshot

Only fields that will return a single value are allowed. This means that one field can’t have more than one value.

Allowed ACF field types:

Text
Select
Textarea
Radio
URL
Number
Email
Range
Password
Button Group
Date Picker

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:

Product catalog sidebar layout options in the Customizer

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.