WooCommerce Product Category Archive
This document explains how to use the custom query option available in the Divi FilterGrid plugin to display the current product category results. We are also using the custom filters option to display any child product categories of the current product category and product tags as filters in the grid.
The first step is to add the Divi FilterGrid module to the product category archive pages. To do this, log into your WordPress site and go to Divi -> Theme Builder. Click on the Add New Template box and then select the All Product Category Pages option in the popup and then the Create Template button at the bottom of the popup.
Next click on the Add Custom Body box and then Build Custom Body in the next popup. You should now see the standard Divi Page Builder options that appear when creating a new page. Create the layout you want and add the Divi FilterGrid module to the layout.
Configure the Divi FilterGrid module however you want as usual. There are two options we need turn on. In the Query Options section, choose the Custom Query option under the Query Type dropdown. In the Filters Options, turn on the Use Custom Filters option. These two options are required to enable our custom query and custom filters.
Before we save our module, we need to give it a special CSS ID, which we’ll then use in our functions below to target this specific module. Go to the module’s Advanced tab and give the module the CSS ID dfg-product-category.
Next we need to save our module, save our template, go back to the Divi Theme Builder page, and click the Save Changes button in the top left corner. The Divi FilterGrid module will now load on every product category archive page. But we still need to tell the module which product and filters to load.
The last step is to add the custom query and filters functions and filters to your functions.php file located in your child theme.
Copy and paste the code below to your functions.php file: