Let’s take some time out and talk about product filtration. Product filters is an important part of your site user experience. Without product filtering option, your customers will not buy freely on your store whatever they want. On the other side, if you have a good product filtering option on your store then the customers will easily be filtering the products and take a good experience on your store.
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. So this simple feature can increase your conversion rates.
Table of Content
For this tutorial, I am going to tell you how you can use WooCommerce Product Filter plugin to your online store.
1. Install the WooCommerce Product Filter Plugin
Although there are many plugins for WooCommerce product filter, but in this tutorial, I am using Themify Product Filter plugin for WordPress. It is a flexible tool to set up product filter options on your WooCommerce store. This free WordPress plugin allows users to easily filter through products by price range, tags, attributes, categories, and many more. This awesome tool to help shoppers find any products fastly and easily!
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” button.
- After successfully installing, click “Activate Plugin” button to get started.
2. Getting Started WooCommerce Product Filter Plugin
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.
3. Utilizing WooCommerce 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.
4. 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 the parameters of your product filters.
You will see the following options as shown in the image below:
- Form Title: Enter a title whatever 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 will appear in a search result.
- Toggle Field Groups: By using this option, you can allow field groups toggle-friendly.
- Scroll To Result: You can select to navigate to the result field.
- Result Page Template: Here you need to select any one option. Show result on the same page or 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 successfully. Copy the shortcode and paste it into any text editor.
After adding this shortcode the result will appear on your screen something like below image.
You can also add filtration on the sidebar through a widget. To do this let’s see the next step.
5. Display Widget Sidebar Filter
To display the WooCommerce Product Filter on a sidebar, you need to go to your admin dashboard side panel and navigate to Appearance > Widget. Drag and drop a WooCommerce widget on the sidebar drop-down 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:
6. Reinstall Plugin
Sometimes the auto plugins update does not work, if you face this issue then you need to reinstall this plugin. Reinstalling the plugin shouldn’t affect the content/data because they are saved separately in the database. So in this scenario, you need to backup your WordPress content (posts, pages, menus, etc.) before reinstalling it.
Go to WP admin > Tools > Export and export all contents to a zip file. You may use WP Admin > Tools > Import to import these contents in the future if necessary.
That’s all there is to it. If your store is made with WooCommerce platform, then you should add this plugin to your WooCommerce Store and start multiplying your sales. 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!
Saud is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform. Saud is responsible for creating buzz, spread knowledge, and educate the people about WordPress in the Community around the globe. In his free time, he likes to play cricket and learn new things on the Internet. You can email him at email@example.com
Be the first to check out WordPress 5.0
Use our Staging feature before upgrading your website to WordPress 5.0.