Let’s take some time out and talk about product filtration. A good store allows its users to filter products as per their needs. This way, they can discover exactly what they need to buy. A Product filter is an essential and powerful instrument that can take your visitors to their ideal product. This results in quicker conversions.
So this simple feature can increase your conversion rates.
For this tutorial, I am going to tell you how you can use WooCommerce Product Filter plugin on your store.
Installing the Plugin
If you know WordPress, this should not be hard, but it never hurts to provide step-by-step instructions for guidance:
- Make sure you have the WooCommerce plugin installed and activated. For Woocommerce installation, you can read our post on how to install and setup a WooCommerce store.
- You can download the free plugin from Themify Product Filter website. It would be a zip file as the plugin is not available inside the official repository.
- Login to your WordPress admin dashboard. Navigate to Plugins >> Add New >> Upload Plugin.
- Then, upload the plugin zip file and click “Install Now”.
- After successfully installing, click “Activate Plugin” to get started.
Before using this plugin, you need to have a few products with category, tags, price, and attributes. You can read our beginner’s guide to WooCommerce product tags, categories and attributes.
Utilizing the WC Product Filter Plugin
After successfully downloading and activating this plugin, you’ll see a Product Filters option on the side panel where you can create your filter templates.
You need to understand all filter options will be connected with the product tags, categories, prices, and attributes. After making the filter template, you can copy and paste the required shortcodes anywhere you want in the pages and posts on your site.
Creating a New Product Filter
By adding a new product filter, you need to go to your Admin dashboard side panel and then navigate to Product Filters >> Add New. A popup will appear where you can see and manage all parameters of your product filters.
You will see the following options as shown in the image below:
- Form Title: Enter a title you like.
- Layout: You can see 2 choices here: Horizontal and Vertical.
- Product Sorting: Show or hide the capacity to sort the products. This is a drop-down option that’ll show up in the top-right corner.
- Product Count: This option permits you to show or hide result product number.
- Pagination: This option permits you to show or hide the pagination of your products.
- Product Per Page: You can add the maximum number of products that’ll appear in a search result.
- Toggle Field Groups: By using this option, you can allow field groups toggle-friendly.
- Scroll To Result: Select to navigate to the result field.
- Result Page Template: There are 2 options: Show result on the same page and show the result on a different page.
Presently, you can drag and drop the modules on your template builder where you put the modules in the Builder the way you want them to show up on your site.
- Category: You can show the product categories.
- Color Icons: Select to display categories as color icons. These attribute modules would only appear if your WooCommerce products have attributes such as sizes, colors, etc.
- In Stock: You can display products that are available.
- On Sale: You can view products that have any discounts.
- Price: You can show a price slider
- Product Title: This shows the title of the product.
- Size: This displays product size.
- Tags: This shows the product tags (if any).
- Submit Button: At the point when it’s added to your form, it’ll disable the live search results. Rather, it will demonstrate the search results based on what you’ve chosen on the “Result Page Template” option.
After clicking the Save button, a shortcode will appear. Copy the shortcode and paste it into any text editor.
Display Widget Sidebar Filter
To display the WooCommerce Product Filter on a sidebar, you need to go to your admin dashboard’s side panel and navigate to Appearance >> Widget. Drag and drop a WooCommerce widget on the sidebar dropdown option. It will then show on all pages and posts where you have the sidebar available.
Here we go. The result will appear on the sidebar as seen in the image below:
That’s all there is to it. I hope you have no issues while using WooCommerce Product Filter plugin and that this tutorial has proved to be of help. If you have any query or suggestion about this tutorial, you can leave a comment below!
Start Creating Web Apps on Managed Cloud Servers Now!
Easy Web App Deployment for Agencies, Developers and E-Commerce Industry