Getting Started

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.

annasta Filters preset settings admin screen
Image 3

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 an official WooCommerce products archive page (shop/ taxonomy archive 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 page. 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).

Image 4

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 the 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.

Image 5

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

Image 6

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’ll need to place it into the chosen section of your site. There are 3 ways to do that:

  1. annasta WooCommerce Filters Guttenberg block
  2. The [annasta_filters preset_id=1] shortcode
  3. annasta WooCommerce Filters Widget in the Appearance > Widgets section of your WordPress admin
annasta WooCommerce Filters Guttenberg block

Since version 1.5.5 of the plugin (with sites running WordPress 5.8 or later) you can use the annasta WooCommerce Filters Guttenberg block, both inside of the WordPress page editor, and in Appearance > Widgets.

The [annasta_filters] shortcode

The [annasta_filters preset_id=1] shortcode is another way to insert an annasta filters preset into the pages and sidebars of your site. Set the preset_id parameter to the needed preset id.

Shortcode Widget

Add the “Shortcode” widget to the chosen section of your site and type in the annasta_filters shortcode with the needed preset id.

Image 10. annasta Filters shortcode added in the Widgets area of WordPress 5.8 and up

Inserting the shortcode programmatically

You can also use the shortcode to display the needed preset directly from a PHP file by using the do_shortcode function, like so:

echo do_shortcode( '[annasta_filters preset_id=1]' );
annasta Woocommerce Product Filters Widget

Prior to WordPress 5.8 annasta widget was the easiest way to place your filters into the site. You can still use it, though please keep in mind that it may be deprecated in favour of the annasta WooCommerce Filters block at some point in the future.

To use the widget, go to the Appearance > Widgets screen of your WordPress admin and find the annasta WooCommerce Filters in the list of the available widgets. In WordPress 5.8 and later the widgets are located in the Legacy Widget group.

Select the annasta Woocommerce Product Filters Widget from the Legacy Widget dropdown, or type in “annasta Filters” in add widget search box to find the widget, and click on it to add it to page element. Select the needed filters preset in the Filters Preset field of widget options and push the Update button of the Widgets screen.

Classic Widgets editor

Prior to WordPress version 5.8, the Widgets Editor had a different interface. You can use it in the older versions of WordPress by installing the Classic Widgets plugin.

Image 9. annasta Filters widget in the Classic Widgets editor

To add the annasta Woocommerce Product Filters Widget to the needed widget area in the 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 the page of your site that contains the widget area to test the filters.

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.