One of the WP Grid Builder‘s many facets is Apply whose job is to pass the selected search parameters to a target page.
In this tutorial, we show how WPGB’s Apply facet can be used to set up a faceted drilldown of WooCommerce Product Category > Product Tag > Product Size.
This method can be used for easily creating faceted searches in different use cases without writing a single line of code. A few examples are
- Real estate properties search
- Job search
- Hotel bookings
- Year-Make-Model car search
Note: While certain aspects of this article are Oxygen specific, you can apply the overall idea in any WordPress site.
Step 1
Install and activate WP Grid Builder.
Step 2
Create your dropdown-type of facets at Gridbuilder → All Facets.
The Data Source can be Taxonomy or WordPress Field or a Custom Field.
Here’s one used in our example:
Create another facet to reset the filters on the /shop page.
Step 3
Create the Apply facet.
In the “Redirect URL” field, set the relative or absolute URL of the page in your site to which the user selections should be sent. In this example, the results are to be sent to example.com/shop and hence /shop was entered.
Step 4
Go to Gridbuilder → Dashboard.
Under Import Content click on BROWSE DEMOS and import the Carnelian card since the example in this tutorial applies to WooCommerce.
If you are planning on making any customizations, clone this card.
Step 5
Create a grid at Gridbuilder → All Grids.
In our test site, we created one to be used on the main WooCommerce Shop page.
Add your facets to the grid (ignore the Product Color facet in the screenshot):
Set the card from the previous step:
Step 6
Edit the Template/Page where you would like to display the drilldown facets.
In our example, we edited the Page set as the static homepage with Oxygen, added a Section and inside that, a Div having four Facet components (thanks to the WPGB’s Oxygen addon).
and you are done!