2. Filter settings
After installing WooCommerce Product Filters, you can configure the plugin settings. These options appear on the plugin settings page at Products → Filters → Settings, and also in the setup wizard. They control how the filters behave on your site.
Enter your license key here. This is essential for the plugin to work.
This dropdown lists all your filter groups. If you have only just installed the plugin then only the default filter group - "Recommended Filters" - will be available.
The selected filter group will automatically appear on the product list pages which are created by WooCommerce itself, such as the Shop page, categories, product tag archives, etc.
The filters will appear in a horizontal layout above the list of products. If you would prefer to add filters to pages manually, or to display them in a sidebar instead of horizontally, then you can do this. Simply leave this option blank and follow the instructions for adding filters to a page.
Use this option to choose whether the filters above the list of products are visible when the page first loads:
- Always display filters (the default) - The filters are always visible above the list of products. When this is enabled, additional options appear allowing you to hide the filters on mobile. This is a popular combination because more space is available on desktop than mobile, so lots of sites like to always show the filters on desktop, while requiring users to click a button to view the filters on mobile. (Learn more about how the filters work on mobile.)
- Click a button to reveal filters - If you want to save space, then you can hide the filters when the page first loads and allow customers to view them in a slide-out panel by clicking a button.
This option only affects the filters above the list of products. It does not change the visibility of filters which you have added to the sidebar (e.g. as widgets).
Number of filters per row
By default, the horizontal filters above the list of products appear as 4 columns of dropdowns. You can change this by entering a different number.
If there are too many columns to fit on a user's screen size, then they will automatically stack onto multiple rows. This prevents them from ever looking broken.
There are two options for choosing what happens when customers use the filters:
- Apply filters as soon as the customer makes a selection (the default) - The list of products updates instantly using AJAX as soon as the customer selects an item from any of the filters.
- Click a button to apply the filters - The customer selects from as many filters as they like, and then click an 'Apply Filters' button to update the list of products. If you select this option then a 'Button text' option appears underneath, allowing you to change the text to anything you like.
Tip: In general, it is more user-friendly to use the instant (AJAX) option. This reduces clicks for the customer and updates the list of products instantly. However, if there are lot of filters on the page then it is sometimes better to allow customers to make all their selections before the filters are applied.
This option is disabled by default and adds open/close arrows to the right of each filter heading in the sidebar widget and slide-out panel. Customers can click on these to open/close the filter options.
Default toggle state
This option appears if 'Toggle filters' is enabled. You can use it to choose whether the filters are closed (the default) when the page first loads, or whether they are loaded open so that the customer can click on a filter heading to close them.
Tip: We would generally recommend setting this option to 'Open' if you have a relatively small number of filters, or 'Closed' if you have lots of filters on the page and want to save space.
Enable this to display the number of products next to each option. For example, if you have 10 'Red' products then the red filter will say '10'. This can be a helpful guide for customers to know which filters to click on without restricting their choices too much.
You can change the text of the various action buttons and links which appear on the product filters.
- 'Show filters' button text - Use this field to change the text which appears in the button which customers click to reveal hidden filters. This button appears above the list of products in 2 scenarios:
- When the 'Visibility' option above is set to 'Click button to reveal filters'.
- On mobiles, if your page contains filter widgets.
- 'Apply filters' button text - Customers use this button to finalize their filter selections and load the list of results. This button is used in the following scenarios:
- When the 'Filter mode' option above is set to 'Click a button to apply the filters'.
- In the slide-out panel, regardless of the filter mode. If you have set the filter mode to AJAX and have enabled the slide-out panel on mobile or desktop, then we recommend rewording the button to something more relevant such as "View Products". This is better for this use case because the filters have already been applied in the background, and clicking the button simply closes the slide-out panel.
- 'Clear filters' text - This appears whenever filters have been applied, providing an easy way for the customer to remove all their selections at once and return to the full list of products.
Now you have configured the plugin settings, it's time to start adding filters.