Pro Filtering Products by Meta Box Custom Fields

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 Meta Box plugin.

In this guide, we’ll walk you through how to filter products by Meta Box 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 Meta Box 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 Meta Box. The values, such as Blue, Orange, and Pink, or Big, Medium, and Small, update automatically whenever you edit a product.

Product filters for color and size shown in a Botiga shop sidebar

1. Install and activate the Meta Box plugin

First, install and activate the Meta Box plugin. Go to the Plugins » Add New page in your WordPress admin area, search for “meta box,” then install and activate the plugin.

Installing and activating the Meta Box plugin

2. Create custom fields with Meta Box

Next, create some custom fields with Meta Box for your WooCommerce products. The Meta Box documentation explains how to create custom fields with the plugin.

The Meta Box documentation site

Once the custom fields are added to your products, you’re ready to use Botiga Pro’s Meta Box 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.

Product catalog sidebar layout options in the Customizer

4. Insert the Meta Box widget into the sidebar

Now insert the Meta Box 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 Meta Box widget.
  • Add the widget to the sidebar.
Finding the Botiga Meta Box widget in the Widgets screen
Adding the Botiga Meta Box widget to the shop sidebar

The Meta Box 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 Meta Box custom fields in Botiga.

Can I use ACF instead of Meta Box?

Yes. Botiga Pro includes a separate sidebar widget for Advanced Custom Fields. The setup is the same, only the plugin and widget differ.

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 Meta Box 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 ACF custom fields to learn more.

image_print