Pro Sidebar Widget: Products Filters for Meta Box Custom Fields

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.

Meta Box Product Filters, example

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:

Install and activate the Meta Box 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:

Meta Box documentation, screenshot

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:

Product catalog sidebar layout options in the Customizer

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
Find the Meta Box widget
Add the Meta Box widget to the shop sidebar

That’s it! The Meta Box filters now should appear in the sidebar of your product catalog page.