There are multiple ways of adding filters in the product shop catalog. WooCommerce has built-in widgets, but they’re not Ajax based, so i included a separate plugin for this.
Here’s the two solutions:
WooCommerce comes packed with a bunch of widgets that filters:
- Filter Products by Attribute
- Filter Products by Rating
- Filter Products by Price
- Product Categories (not a filter widget but good enough to use)
This feature requires WC Ajax Filter plugin to be installed and running. To install it, access Appearance > Install plugins . Please don’t try to install the plugin from WordPress repository because i forked it and added some tweaks to it.
What’s different from WooCommerce’s filter widgets? Because it uses Ajax, the page is not reloading. It will remain on the same page and just refresh the products.
This plugin comes packed with the following filtering widgets:
- WC Ajax Product Filter by Attribute . Displays attributes, styled depending on their attribute type. Read more on Variation Swatches.
- WC Ajax Product Filter by Category .
- WC Ajax Product Filter by Price
WC Ajax Active Filters . Displays the active filters that are in use, along with a reset button.
All of the above widgets have the option to either display as a list (and depending on the type, either as colored boxes or buttons) and as dropdowns.
To add filter widgets, access Appearance > Widgets and add them in one of the following sidebars:
- Shop Sidebar . Plain simple sidebar eg: Amsterdam Demo
- Filter Panel. Filters will be shown in a side panel that opens on clicking the FILTER button on the top right side of the products eg: London Demo .
- Filter Top Bar . Will show the filters (as dropdowns) before the product listing eg: Melbourne Demo .
All the sidebars above will be shown in the frontend automatically only when they have widgets inside them.