To start using the annasta Woocommerce Product Filters WordPress plugin, you have to install and activate it. Go to the Plugins > Add New section of your WordPress admin page, and enter “annasta filters” into the plugins search box. In the search results list, click the Install Now button of the annasta Woocommerce Product Filters. Activate the plugin when the installation is over.
For further instructions on the ways to install a WordPress plugin please refer to the WordPress official Plugin Management Guide.
This plugin needs the Woocommerce plugin to function properly.
Once you’ve successfully installed and activated the plugin, navigate to the “annasta Filters” tab of the Woocommerce > Settings menu page. You can go directly to the plugin settings from the annasta Filters section of the WordPress sidebar menu, or by clicking the Settings link under the plugin name of the Installed Plugins admin page (see image 1).
In order to setup the filters for your Woocommerce shop you will need to edit the default filters preset that has been created for you during the plugin installation. Open the preset options by clicking on the Edit preset (cog) button of the Default Plugin.
Help tips can assist you in editing the preset options. To read a tip, bring your mouse pointer to (or tap on) the black circle with the question mark near the option in question.
Setting up the display pages
Our plugin offers you the flexibility of defining site pages on which the filters are going to be displayed. This way you can place it into a universal section of your site (a sidebar, or a header), but still control that it displays only on the pages that you need (shop pages, pages with Woocommerce product shortcodes etc), but not during Checkout, or on a User Account page. Furthermore, if you need custom filter sets for different pages of your shop (for example, different sets of filters for different product categories), you will be able to achieve it by associating different presets with different pages (multiple presets are available in the premium version of the plugin).
Please keep in mind that whenever your preset is displayed on a page that is not a shop page or a Woocommerce [products] shortcode page registered for filtering, the filters will act as simple links to the corresponding filtered results of the shop. For example, if you have a product colors filter displaying on a Shopping Cart page, clicking on “red” will open your shop page with products filtered by the selected color (in this case, red).
You will specify the display pages for your preset in the Display on section of the preset options page. By default your filters are set to display on all pages, but you can change that at any time by adding and removing page associations. To delete an association click on the Remove page association button next to it. Add another page by selecting it from the dropdown and clicking on the Add page association (+) button.
To set up your preset to display on a particular archive page (for example, a category archive page of type www.yoursite.com/product-category/smartphones), search the Display on select box for the item starting with the corresponding taxonomy name and ending in “taxonomy archive pages” (in case of our example it would be “Product category taxonomy archive pages”). In the second dropdown that will appear, search for “Smartphones archive pages” , and push the Add page association (+) button. Select “All” to display your preset on all the product category archive pages. In the same manner you can set up your preset to display on filtered shop pages, by adding the “Shop pages with enabled … filters” types of associations.
You can disable parent-level presets display on sub-level (child) pages in annasta Filters > Plugin settings > Display parent presets on child pages.
When setting up multiple presets to work on different taxonomy archive pages (for example, different category pages), please keep in mind that presets do not get automatically replaced in AJAX mode! To ensure that relevant presets are always displayed on their respective category pages, you will need to provide a URL (and not AJAX) switch for your archive pages. This is usually done via top / sidebar menus, Woocommerce Product Categories widget, by setting preset to URL filters Filtering style, or using the Force page reloads filter option in AJAX mode. In 2 latter cases you can also consider enabling the filter’s Reset other filters option.
Managing your filters
All the available filters are listed in the select box under the Preset Filters section title. You can add, delete and re-add your filters at any moment. Filter open/ collapse buttons are provided for your convenience in the right corner of the filter title bar, as well as at the bottom of an opened filter. Use the drag-and-drop technique by grabbing the filter by its position label (in the left corner of the title bar) to change the filter’s position in the preset.
When you are ready to add filters to your preset, select the filter that you would like to add in the select box under the title of the Preset Filters section. Click the Add filter (+) button to add the selected filter to your preset.
Editing filter options
To illustrate the filter options setup, let’s assume that we added a Product categories filter (see image 6).
One of the first things that you have to decide when creating a filter is whether you want it to be a single-select, or a multi-select filter. In a single-select filter only one item can be selected at a time, whereas in a multi-select filter, you and the visitors of your shop will be able to select multiple filter terms.
To explain this on our product categories filter example, if you choose the single item selection Filter type, it will be EITHER the Tshirts category, OR the Hoodies category that will be getting selected by clicking on them at any given time, while a multi-select filter type will allow the selection of BOTH Tshirts AND Hoodies (as well as Accessories etc) categories at the same time.
Select Multiple items selection for the multi-select filters, or Single item selection for the single-select filters in the Filter type field.
The Products Price and Products Rating filters will have their Filter type option limited to the Range selection type. Please refer to the corresponding article of the plugin documentation for the detailed description of a range filter setup.
After having decided on the filter type, you can move on to choose the Filter style. Here you have a variety of options to choose from, ranging from the standard browser radio and check-box controls, labels, tags, and color boxes, to setting Font Awesome Free icons to display as filter icons in front of your filters.
Additionally, you can set the filter items to display in a row (which can be used for color boxes and tags), display a filter items search box on top of the filters, and limit the height of the filters list container (in this case a vertical scrollbar will appear if the list of filter items spreads further than the specified height, to allow your visitors to scroll through the list. You can also enable the “pretty” scrollbars for such cases in the Styles section of the annasta Filters settings page) .
Another useful feature of the annasta Woocommerce Product Filters plugin is the Filter items control option. Use it to remove the unneeded terms (such as the “Uncategorized” product category) from the list of your filter items, or manually create the list of filter options.
Check the corresponding option if you wish to display product counts for the current filter.
Don’t forget to save the preset settings each time you make changes by pushing the Save button at the bottom of the page.
Inserting preset into the site
When your preset is ready for display, you need to place it into the chosen section of your site. There are 2 options available to you to accomplish this task: via the annasta Woocommerce Product Filters widget, or with the help of the [annasta_filters preset_id=1] shortcode.
Widget is the easiest and quickest way to place your filters into the site, so let’s see how to do that. Go to the Appearence > Widgets screen of your WordPress admin and find the annasta Filters widget in the list of the available widgets.
Classic Widgets editor
Drag and drop the widget into the chosen section of your site and make sure that the needed filters preset is selected in the annasta Filters Preset field of widget options. Click Save when you are finished, and open a page of your site to make sure that the filters started displaying.
WordPress versions 5.8 and above
Type in “annasta Filters” in add widget search box to find the annasta Filters widget, and click on it to add it to page element. Select the needed filters preset in the annasta Filters Preset field of widget options.
Another way to use widgets to insert filters into the chosen section of the site is to use the “Shortcode” widget in combination with annasta_filters shortcode. Select “Shortcode” from the list of widgets, and type [annasta_filters preset_id=1] into the shortcode field (adjust the preset id if needed).
We hope that this tutorial was helpful in guiding you through the first steps of your Woocommerce shop filters’ setup. For further information about all the variety of functions and options of our plugin please consult the plugin documentation.