Botiga Pro includes an exclusive sidebar widget that allows you to display product filters for custom fields added with the Meta Box 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 Meta Box.
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 Meta Box sidebar widget.
1. Install and Activate the Meta Box Plugin
First, you need to install and activate the Meta Box plugin.
To do so, go to the Plugins > Add New page in your WordPress admin area, search for ‘meta box’, then install and activate the plugin:
2. Create Custom Fields with Meta Box
Now, you need to create some custom fields with Meta Box for your WooCommerce products.
Check out the Meta Box 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 Meta Box 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 Meta Box Widget Into the Sidebar
Now, you need to insert the Meta Box 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 Meta Box widget
- add the widget to the sidebar
That’s it! The Meta Box filters now should appear in the sidebar of your product catalog page.