1. Home
  2. Docs
  3. WooCommerce Addons
  4. WooCommerce Product Filters

WooCommerce Product Filters

The WooCommerce Product Filters addon enhances the functionality of your WooCommerce-powered online store by seamlessly integrating product filters onto the Shop page using a shortcode. This valuable addition streamlines the shopping experience for your customers, allowing them to easily refine and narrow down their product searches based on specific criteria. 

With the WooCommerce Product Filters addon, navigating through your extensive inventory becomes more efficient and user-friendly, empowering shoppers to find exactly what they’re looking for with greater ease. Simplify the browsing process and enhance customer satisfaction with this addon that seamlessly integrates powerful filtering options into your WooCommerce store’s Shop page.

In this article, you’ll learn how to set up the WooCommerce Product Filters add-on and filter the WooCommerce products on the shop page. 

Installation

  • Install and Activate the Woocommerce plugin.
  • Install the WooCommerce Product Filters add-on & activate it.
  • After activation, a new “WooCommerce Product Filters” sub-menu will be added under the “WooCommerce” menu along with Another sub-tab “Colors”, added under the “Products” menu. 
Woocommerce Product Filters – Main Menu 1
Woocommerce Product Filters – Main Menu 2

License

License keys can be found in the email received when you purchased the add-on. To activate your license, place your license key in the License Key field and click on Activate

Woocommerce Product Filters – License Configuration

WooCommerce Product Filter Settings

General Settings

Navigate to the, WooCommerce > Woocommerce Product Filters > General Settings.

Woocommerce Product Filters – General Settings

Product Filter Shortcode

Navigate to the “Appearance” > “Widgets” sub-menu. Place the [woo_wnpf_filters] shortcode in any widget/sidebar to view the product filter and click on the “Update” button.

Woocommerce Product Filters – Shortcode

By Price

Enable the option “By Price” to show the price range filter on the frontend on the shop page. This will allow your customers to view the products available in the shop/store within their price range.

Woocommerce Product Filters – Filter by Price

In Stock

Enable the option “In Stock” to show the products on the frontend of the shop page that are currently available for purchase. 

Woocommerce Product Filters – Filter by Stock

Use it, if you intend to use the “Stock” related functionality of WooCommerce Products.

Woocommerce Product Filters – Stock Management

Product Categories

Enable the option “Product Categories” to show the category filter on the frontend of the shop page.

Woocommerce Product Filters – Filter by Categories

Use it, if you intend to use the “Product Category” related functionality of WooCommerce Products.

Woocommerce Product Filters – Product Categories 1
Woocommerce Product Filters – Product Categories 2

On Sale

Enable the option “On Sale” to show the “Products on Sale” filter on the frontend on the shop page. This filter will show all the products on sale.

Woocommerce Product Filters – Filter by Sale

Use it, if you intend to use the “Sale Price” related functionality of WooCommerce Products.

Woocommerce Product Filters – Sale Price

By Color

Enable the option “By Color” to show the Color filter on the frontend on the shop page.

Woocommerce Product Filters – Filter by Color

Use it, if you intend to use the “Color Attribute” related functionality of WooCommerce Products.

Woocommerce Product Filters – Colors 1
Woocommerce Product Filters – Colors 2

Search Field

Enable the option “Search Field” to show the “Product Title” filter on the frontend on the shop page.

Woocommerce Product Filters – Filter by Product Title

This is how the frontend of the shop page will look like:

Woocommerce Product Filters – Shop Page Preview

Filter Styles

Navigate to the, WooCommerce > Woocommerce Product Filters > Filter Styles.

Woocommerce Product Filters – Filter Styles

Show Toggles

Enable the option “Show Toggles” to show Toggles instead of check fields on the frontend on the shop page.

Woocommerce Product Filters – Show Toggles

Open Category Dropdown

Enable the option “Open Category Dropdown” to make the Category dropdown open (on page load) by default on the frontend on the shop page. If not enabled, the “Filter By In Categories” dropdown will not be open on page load. It will look like below.

Woocommerce Product Filters – Open Category Dropdown

FAQ’s

1. Is the “Search Filter” section available with the above mentioned product attributes (Product Attributes are the characteristics that are connected with a product, such as color, size, or material are referred to as attributes. It other words, they can also be called as it’s properties) only?

Yes Currently, The “Search Filter” section is available with the above mentioned product attributes only.

2. Are there plans to add more search filter attributes in the later releases?

Yes, More product search filter attributes will be added in the later releases of this addon for the WooCommerce Products.

3. Is “Filter by Product Rating” functionality available in this addon?

No Currently, there is no “Filter by Rating” functionality available in this addon.

4. Does this Add-On require any external plugin on your site to work properly?

Yes, this add-on requires Woocommerce plugin (free version) to be enabled on your site. If you want to test your site locally, please make sure to enable the above-mentioned plugin on your site.


Changelogs

1.0.0

  • Initial Release.

How can we help?