NEW 🔥 Free Online Photo Editor
My store has over 100+ products listed which makes it tricky for my users to find the products they were looking for. I needed a way to allow my users to quickly find the product they were looking for.
The simplest way to allow users to search your product archive pages is by adding a powerful hierarchical filter that allows the user to display the products by taxonomies such as category, tags .e.g
In this tutorial, Im showing you how to create a custom product archive page and dynamic filter using Search and filter Pro and Elementor Pro.
Plugins Used In the Tutorial
Search and Filter Pro [Premium]
Create Custom Taxonomies for your Product Archive [Step 1]
Assuming you already installed the Custom Post type UI from the WordPress depository, the option to add/edit taxonomies will be visible in the WordPress dashboard.
Create category slug and admin dashboard labels
Taxonomy slug. If you have two words or more, make sure to use underscores to separate or the category taxonomy will not function properly.
The labels are only for administration purposes. This is how we’re going to recognize this taxonomy.
When we refer to post type, we refer to product posts, blog posts, etc. For this tutorial, we are only going with product post types.
Select Post Type
Select the products option in post types.
Once selected and saved, you can now see the new category taxonomy in product posts in WordPress dashboard.
You can skip the next section called Labels. This section is not critical for creating a custom category.
In the settings section, select the hierarchical as true. If this is not set to true, you will not be able to create a parent-child relationship within your custom category taxonomy.
Once we create child and parent categories within our custom taxonomy, we are ready to assign the newly created categories to our products.
Assign Custom category to products
Go to >> Products >> select any product
You will now see a new taxonomy tab in the right-hand sidebar. In this box, you can assign the newly created category to the product.
Create Product filter in Search and Filter Pro [Step 2]
And we can click on search and filter. From here we click add new search and filter form.
Right off the bat, the interface looks extremely intimidating but with a little bit of guidance, it will all make sense pretty soon.
In the General tab
Search in the following post types:
Here we associate the post type with the filter >> Select products
and deactivate the unnecessary post types.
In the Display Results tab
Display results method: Select >> custom
That means that we can display the results from the filter on any page we want.
We want to display the filter results on the product archive page we are going to create.
Template Options:
Here we specify the URL where we want to display the filter results. In this tutorial, we will be using the URL from the custom category taxonomy created earlier.
Ajax Container:
This step is best to describe with video footage because of the complexity of the procedure. Please refer to the video timestamp: 15:30
This step can only be complete once we created the custom archive page within Elementor Pro. We can skip this step for now.
In the Tags, Categories, and Taxonomies tab
Search for the custom category taxonomy you created and click on the search icon. Inside this box select all the parent and child categories you want to include and display within your filter UI. This is a critical step, if you fail to select the appropriate taxonomies, the filter will display the wrong information.
Now that the filter backed is configured, it’s time to create the UI display for the front-end.
Scroll down to the bottom of the page, here you will find two tabs called available fields and search form UI</strong class=”mon-bold”>.
Drag and drop taxonomy button from available field into search form UI.
Click on search form filter UI to open the box. Here we can configure how the filter will appear for users.
In the taxonomy dropdown search for the custom category created earlier.
In the Input type dropdown >> choose dropdown
The options on the right, choose the same options as the image below. These options are important if you want to display the parent and child relationship in your custom category.
The only thing left for us to do is to create a custom product archive page in Elementor for the custom category and implement the filter on the page.
Create a custom product archive page in Elementor with a filter
Here is the query shortcode for search and fillter Pro:
[searchandfilter id=”98753″ action=”filter_next_query”]
