Documentation

Filters Preset Settings

Preset name

The Preset name option is for internal use only and its value will not show anywhere on the pages of your site. Use it at your convenience to describe your preset.

Preset title

The Preset title is the title that will show on top of all the filters on the pages of your site. You can set it to “Filters”, “Product Filters”, “Filter Products” etc. If you don’t want a title bar, leave this field blank.

Show active filters

Check the Show active filters option if you wish to show active filters’ collector on top of filters. Keep in mind that this will show active badges for all the enabled filters on the current page (if you have more than one presets on the page, it will show filters that are activated in all the presets).

You can also enable active badges in filter options for each filter individually.

Reset all button

Reset all button option controls the display of the Clear all filters button.

Filtering style

Filtering style option allows you to choose between the instant filtering style and filtering at a push of a Filter button. In combination with Enable Ajax option it can give you 4 distinct filtering combinations:

  • Instant filtering + disabled Ajax: instant filtering in which filter labels are essentially URL links, so the page will be reloading with each click on the filter
  • Instant filtering + enabled Ajax: classic Ajax filtering, when each click on a filter reloads the products list to reflect the new filters combination
  • Filter button + disabled Ajax: this will make your preset act as a classical html form element, with filters’ choices submitted with a push of a submit (“Filter”) button
  • Filter button + enabled Ajax: Ajax filtering with the filtering combination submitted by a push of “Filter” button.

Enable Ajax

Ajax calls allow to avoid the whole page reloads with each change of filters’ combination. With this option enabled only the products list part of the page will reload when applying a filter.

annasta Filters adjusts the URL part of the page each time an Ajax filter is applied, which facilitates page reloads, and enables the Back and Forward history moves in client’s browser.

Display on

To provide control over the pages of your site that will display your filters, the Display on section holds the list of pages associated with each filters preset. Adjust this list to meet the needs of your shop.

When you set the Display on option to “All pages”, the Add page association select box and button become unavailable. To change the Display on setting with “All pages” selected, simply remove the “All pages” association for the Add association options to re-appear.

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

Open and collapse filter options with the help of the Show/ hide filter options button located in the right corner of the filter title bar. You will also find a filter collapse button at the bottom of each 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.

Filter title

The Filter title field assigns the title for the filter’s title bar that will be displayed above the filter terms unless the Show title bar option is unchecked.

Show title bar

Uncheck this option if you don’t wish to have a title bar above the current filter.

Users of premium version should keep in mind that a filter can not become collapsible or act as a dropdown with this option disabled.

Show active filters

Check this option if you wish to have active filter badges enabled for this particular filter. A badge (with a reset button) will be created under the filter title (or on top of filter terms if the title bar doesn’t get displayed) whenever the current filter’s item becomes selected.

Reset all filters

This option is available in the premium version of the plugin.

Check this option if you wish to reset all the rest of the active filters whenever a visitor clicks on this filter.

Make collapsible

This option is available in the premium version of the plugin.

Enabling this option will add filter open / collapse buttons in the top right corner of the title bar.

Please remember that this option is not available if the Show title bar option is disabled.

Initialize in a collapsed state checkbox will put your filter into an initially collapsed state when the page loads.

Display as dropdown

This option is available in the premium version of the plugin.

Make your filters act as a dropdown, with checkboxes, custom icons, color boxes and all the rest of the styling options still available inside of the select box!

Filter type

Filter type setting controls how the filter items become selected. There are 3 built-in filter types in the annasta Filters plugin: singe item selection, multiple items selection, or range selection.

You can see all 3 filter types presented on the image above. The product categories filter is multiple items selection type, notice how this type allows for the selection of multiple filter items at the same time. The Product Stock Status Filter in the above example is a single item selection filter type, it allows for only one item being selected at any given moment (in the above example, only the products that are in stock are being displayed, and if you clicked on the Out of stock filter, then only the out of stock products would be displayed in the shop). The Products Price Filter shown above belongs to the range selection filter type. It allows the selection of a range of values, in our case these are the product prices in the range between 3 and 25 Euro.

If you have more than one annasta Filters presets working on the same page, make sure that the same taxonomies are associated with the same filter type (for instance, if you have Product Categories filter in 2 different presets displayed on the same page, make sure they are either single-, or multi-select Filter type in both cases). In case of the range filters it is also advised to have the multiple range filters’ scales match.

The multiple items selection and single item selection filter types are rather straightforward and do not have any additional settings, but a few more words should be said about the range selection type.

Range selection type

Range selection is the default filter type for the Products Prices and Products Rating filter. There are 2 ways to setup a range filter: with auto-completed range values, or with custom range values.

Automatically calculated range values

Whenever you need a range divided into equal segments, you can use the Automatically calculated range values setting of the Range values field. In a case like that all you need to do is to setup the minimum and maximum values for your range, and specify how many range divisions you want to have.

For example, you need a range of prices from 0 to 100 USD, and you want to divide it into 4 equal sections of 25 USD. Set the Minimum value option to 0, the Maximum value to 100, and put 4 in the Range divisions field. Push the preset settings Save button, and the range of 0 – 100 USD divided into 0 – 25 | 25 – 50 | 50 – 75 | 75 – 100 will be created for you automatically (if the Precision option is set to 0).

In case the Precision is set to 0.01, the automatically created range will become 0 – 24,99 | 25,00 – 49,99 | 50 – 74,99 | 75 – 100. You will see that if you set the number of decimals option to 2 (if the decimals are set to 0, you will see the rounded values both in previews and on shop pages, so the difference made by the Precision setting may not be visible, though it will still be there when applying filters).

Custom range values

If you need a better control over your range divisions, you can use the Custom range values option of the Range values select box. Custom range will give you the power to setup your own value for each range division.

You will see a list of all the range values right under the Range values select box. To remove an unneeded range value just push at this value’s label in the list. Add a new value to the range by putting it into the Add value field and pushing the Add value button. After each deletion or addition values will be automatically sorted in descending order.

Let’s illustrate the setup of custom range values on an example. Say, you want to divide your range of 0 – 100 USD into the following uneven divisions: 0 – 14,99 | 15 – 49,99 | 50100. You do have to have the 0 and 100 on the range scale, since they’re the left-most (minimum) and the right-most (maximum) values of the scale. Then, you will add the 15 and the 50 by entering these values into the Add value field and pushing the Add value button.

The sections’ end-values of 14,99 and the 49,99 will be calculated automatically based on the value of the Precision field according to the following formula: next range value – precision. You can use the Precision option to make the last value of the range segment to be a little less than the first value of the next range segment with both automatically created and custom range values whenever you want you ranges to be more accurate. If you want the end value of the segment to be the same as the first value of the next range division, set the Precision to 0.

Keep in mind that there always have to be at least 2 values present in a range (the minimum and the maximum values), so you can’t delete anymore values if only 2 are left. if you need to change the minimum or the maximum value in a 2-value range, just add the new value, and then delete the unneeded one.

Precision

The value of the Precision option is used to create the auto-calculated end-values of range divisions. It can help in creating more accurate ranges for price filters or ratings filters styled as radio buttons or custom icon lists.

To understand how it can be used, imagine that you have a range of 0 to 100 USD which you wish to divide into 2 sections of 0 – 49,99 | 50 – 100. If the Precision is set to 0, you will get the range segments of 0 – 50 | 50 – 100, but say you don’t want the first value of the next range segment to be included in the previous segment. To get the end values of range divisions differ with the starting value of the next range division by 0.01 set the Precision to 0.01. This way all the end-values except for the last one will be calculated according to the formula value-precision (in our case 50-0.01=49,99), and you can achieve a range of 0 – 49,99 | 50 – 100 type.

Number of decimals

This setting is mostly used for the formatting purposes. Whenever possible, it controls the display of range values in the shop. You can use it if you do not wish your prices (or ratings) to display decimals: just set the setting field value to 0, and you will get rounded numbers without decimals showing in the range values.

Keep in mind that this will not change the real values of the range divisions’ end values, it will only format the “,99” part to not be seen. Still, if you want your ranges to have the label formatting of 0 – 25 | 25 – 50 | 50 – 75 | 75 – 100, you are welcome to use this setting.

Value prefix

The value of this field will be displayed before the range values. It can be used for the currency symbols etc.

Value postfix

The value of this field will be displayed after the range values. Use it for the currency symbols and the like.

Label for active badges

The value of this setting will be used during the creation of an active badge for your range filter. It will be added before the selected range values, so you can set it to smth like “Product prices” for the price badge to display “Product prices $22 – $33”.

Filter style

The Filter style setting controls the appearance of your filter. Different options are available depending on the Filter type and the plugin version that you use. The css styling of the filters’ elements has intentionally been left as “light” as possible, for filters to seamlessly fit into your existing shop theme. You can make any changes you need through your theme’s style sheets.

System radio buttons

The browser-controlled radio buttons (or option buttons) are the most basic style option for the single-select or the range selection filter type. This control element may look a bit different in different browsers, but in essence will do the same job of allowing the user to choose only one of a predefined set of mutually exclusive options.

System checkboxes

This style is available for the multi-select filter type. Usually a browser checkbox is shown as a square box that is ticked (checked) when activated and is used to let a user select one or more options of a limited number of choices.

Custom icons

Custom filter icons option allows you to choose any of the Font Awesome Free icons for your filters, with hover state support for both selected and unselected filter icons. This style option is available for all the filter types.

To setup custom icons for you filter, select the Custom icons option in the Filter style select box. The most commonly used icons are presented at the bottom of the Custom Icons Settings admin section. You can copy them into the clipboard by simply clicking on them. If you need something more customized, please visit the Font Awesome Gallery for a full selection of Font Awesome Free icons.

Copy – paste Font Awesome Free icons in the regular and hover state fields for Inactive (unchecked) and Active (checked) filter icons. Use the Solid style option to achieve the needed effect.

Some Font Awesome icons are available only in Solid or Regular style. If the icon that you need is not showing properly, just toggle its Solid style checkbox to see if it fixes the problem.

The interactive filter items Preview next to the settings fields will allow you to assess the appearance of your filter even before saving the options. Bring your mouse pointer to the filter item label of the Preview section to see the hover effects that you have created.

Color boxes

Color boxes can be used in both single-select and multi-select filter types.

To setup a filter with color box controls, select the Color boxes option from the Filter style select box.

You will see a list of the current filter items with a color-picker control next to each of them. Select the needed colors from the color picker (or enter their hex codes directly into the hex code box), and set the Display label option as needed.

If you need your boxes to show in a row, select the Display items in a row option right underneath the Filter style section.

Whenever you update the color values and notice that the changes do not get reflected in your browser, you might need to clear your browser’s cache (or use another browser) to see the refreshed style.

Tags

Tags style will display your filter labels as boxes with border. You can combine it with Display items in a row option to display the tags one after the other.

To apply the Tags style to your filters, select “Tags” in the Filter style select box.

Images

This option is available in the premium version of the plugin.

If you are using the premium version of annasta Filters, you can also use images in front of (or instead of) your filter labels.

To setup this style for your filter, choose Images in the Filter style select box.

You can select a distinct image for each filter item, or use One image for all terms option to display the same image for all filter items.

To select an image, click on the Select image from media library button, and choose the needed image from the WordPress Media Library section, or, alternatively, you can directly enter a url link of your choice into the Image link field next to the item.

Check or uncheck the Display label option as needed.

If you need your image boxes to show in a row, select the Display items in a row option right underneath the Filter style section.

Whenever you update the terms images and notice that the changes do not get reflected in your browser, you might need to clear your browser’s cache (or use another browser) to see the refreshed style.

Labels

Labels are available for the single-select filters and are basically just filter item name without any icon. They are minimally styled so that you could customize the appearance by applying your own css rules to suit your shop theme.

Custom term icons and labels

This option is available in the premium version of the plugin.

This advanced style option allows you to assign an individual icon for each filter term, as well as set custom labels. Select the Custom term icons and labels style from the Filter styles select box.

In the list of the filter terms, put the chosen Font Awesome icon for the corresponding filter term, and adjust the label as needed. Whenever you don’t want any icon for a term, simply leave the icon field empty. Don’t forget to push the Save button at the bottom of the page when finished.

Some of the icons are presented at the bottom of the section. You can copy them into the clipboard by simply clicking on them. To explore the whole variety of the available icons, please visit the Font Awesome Gallery .

Stars

This option is available in the premium version of the plugin.

This premium style has been created especially for the average product rating filter. It will display the rating range values with the corresponding amount of stars near each range division.

To assign this style to your product rating filter, choose it from the Filter style select box.

Please pay attention to the custom range values, as well as the Precision option value on the image above. Copy these settings to your own filter to achieve the average ratings divisions of 1-1.99 | 2-2.99 | 3-3.99 | 4-4.99, 5, or edit according to the same pattern as needed.

This style also gives you the option of specifying any custom label of your preference.

Display items in a row

Check this option if you prefer the filter items to be shown in a row instead of column (list) view.

Make children collapsible

This option is available for the hierarchical (multi-level) taxonomies, such as product categories (which can have sub and sub-sub categories). Enabling this option will place toggle buttons next to each parent level filter label to allow opening and closing of its child level lists.

Initialize with children collapsed checkbox will put the filter’s child levels in an initially collapsed state whenever the page first loads or reloads.

Display items search

Enabling the filter items search will add a search box at the top of the filter items list. This search box will dynamically filter the contents of the filter items list to show only the items that satisfy the search string criteria. You may find this option useful for filters with a large list of options.

Excluded terms

This is a very useful setting for the cases when you wish to exclude some of the filter items from the list of filter options. For instance, with the help of this option you can exclude the universal “Uncategorized” Woocommerce product category from the options list of a Product Categories filter.

To exclude an item, select the label of the option that you want to exclude from the Exclude terms select box, and push the Exclude button. To remove an exclusion, click on the Remove button next to the name of the excluded option.

The items from the excluded terms list are only removed from the list of filter options. Any products associated with those items will show in the shop normally.

Sort filter items by

This option controls the order in which the individual terms appear within the filter. You are given the choice of sorting by Name, Order of creation, or the Admin sort order. By the Admin sort order is meant to custom items order that you can set (at least for the product categories and product attributes) on their respective admin settings pages. The ability to assign the display order for the custom taxonomies depends on the custom taxonomy manager that you use.

Filter items sort order

The sort order setting works in combination with the previous option of Sort filter items by. You can set the ascending order for name and date sort type (which will equal to the regular display for the Admin sort order), and descending (for the Admin sort order type this will display the filter items in the reverse order).

Limit filter height

If you have filters with long lists of options, or would like to make several filters have the same height (which can be useful for arranging the filters nicely at the top of the products list), set this setting to the desired height in pixels, and you will see the filter height limited to this value and the vertical scrollbars appearing to allow scrolling through the filter list.

Go to the Styles section of the plugin options and enable the pretty scrollbar option to replace the standard browser scrollbar with a minimalistic – looking JavaScript one.

Show products’ counts

Enable this option to display the dynamic product counts next to each filter option. The value of the product count will be changing with each new filter application to reflect the amount of products available in each filters’ combination.

For example, if your shop sells 10 apples 5 of which are red, the count will show 10 near the Apples filter option in a shop with no active filters, and 5 if you have applied the Red color filter.

A lot of attention has been given during the development of this plugin to the product counts management. A caching mechanism and other technologies are in place to ensure its smooth functioning. Still, we would like to draw your attention to the fact that this option is rather resource-consuming, so if you are on a shared hosting plan and/or run a shop with very large amount of products and many filters, please use it only on the filters that really need it.

Styles Settings

Enable pretty scrollbars

Check this option for the minimalistic modern-looking scrollbars to replace the standard browser ones in filters with limited height.

Plugin Settings

Enable product categories views

This option is available in the premium version of the plugin.

This setting enables support for the “www.your-shop-address/product-category/cat-1,cat-2,cat-3/” links of your shop, which you may want to have for the better SEO of your shop.

Please, keep in mind that this option will only work on sites with enabled permalinks. To check the Permalinks settings of your site, go to the Settings > Permalinks admin page. The permalinks are enabled if anything except for Plain is selected under the Common Settings heading.

Include subterms’ products

This option controls the behavior of the filtering engine for the hierarchical taxonomies. Enable this if you want the products belonging to the filter children terms to show in the results for the parent term.

Let’s illustrate this on a small example. Imagine you make a filter out of the Product Categories taxonomy of your shop. Product categories are a hierarchical taxonomy, meaning that there may exist sub-categories. Let’s say we have a shoe shop, and you have a parent category of Boots, which has the subcategories of Hunting Boots, Hiking Boots and Casual Boots. If you wish for the products for all these subcategories (as well as all the possible sub-sub-sub… categories) to show when the shop is filtered for the Boots category, check the Include subterms’ products option! If on the other hand you choose to leave it unchecked, only the products that are directly declared as belonging to the Boots category (and none of the products from the Boots subcategories) will be displayed whenever you apply the Boots filter option.

Shortcodes pages

This field registers your site pages with product lists created via the Woocommerce [products] shortcode to work with filter presets that are associated with them.

If you have pages with product lists created by means of the Woocommerce [products] shortcode, and you want to setup product filters to work on those pages, you need to have each of these pages selected in this multi-select field.

If you omit this step, any filters that will appear on the page will redirect to the relevantly filtered results of you main shop page. If you want for the filters to work directly with the product lists of the page, you do have to add this page to the Shortcode pages list.

For the filter preset to display on the shortcode page, don’t forget to include the pages registered here in the Display on section of the preset settings, and make sure that the site element in which you placed the annasta Filters widget or shortcode is present in the shortcode page!

Force products display

This option controls the way the main shop page is displayed. Since the filters are usually set to work on the main shop page, they need this page to be set to the products display mode in order to function properly.

There is a Woocommerce setting that allows product categories to be displayed on the shop pages, or subcategories to be displayed on the category pages (you will find it in the Appearence > Customize > WooCommerce > Product Catalog section in Shop page display and Category display options). Whenever this options are enabled, they break the proper filtering of the main shop page products, for which reason the annasta Filters plugin automatically disables them.

If you do not wish the filters to work on the shop page (in cases when one uses them only on the [products] shortcode pages), and want your shop to display product categories on the front page, and/or subcategories on the category pages, you can uncheck this option.

Product columns

This option is available in the premium version of the plugin.

Specify the amount of product columns that you want to display in your shop.

Products per page

This option is available in the premium version of the plugin.

This option will set the default products per page value for your shop. Use it in combination with the products per page control to give the visitors of your site the power to choose the amount of products that they want to see with each page load.

Products list html container

This is an advanced setting for those who use a theme with non-standard Woocommerce html markup. The default setting of this field is “#main” which is the standard Woocommerce and WordPress container holding the contents of the page. If your theme uses a different page structure, you’ll need to check the shop page source html to see which container encapsulates the Woocommerce product lists. Enter the id or class for this container into the Products list html container field (please put the # sign in front of the id, or a dot before the name of the class).

Advanced Settings

Query parameters’ labels

This advanced option gives you the power of specifying your own labels for the filtering parameters that appear in the url string of the filtered page address. For example, if you wish to remove the native ” pa_” prefix from the product attribute filters’ labels in the url strings and want to change “pa_sizes” into “sizes”, you can do it here.

Be careful not to assign the parameter names that are reserved by the WordPress itself, Woocommerce, or any of the plugins that are running on your site. Doing so will result in unpredictable filters behavior and numerous other possible conflicts and errors.

Query operators for product taxonomies

With the help of this option you can change the query inner-logics for each filter taxonomy from the default IN to AND, or NOT IN.

The default IN taxonomy logics filters the Woocommerce store for all the products that are associated with the selected taxonomy terms. Taking an online grocery store as an example, setting the IN relationship between the terms of its Product Categories will result in the display of all the products that belong to the selected categories. This means that if you filter such a shop for the Fruit, Berries, and Vegetables product categories, you will be shown all the products that are Fruit, Berries, or Vegetables.

The AND operator used in a relationship between the members of the same taxonomy will result in the display of the products that belong to ALL of the selected taxonomy terms at the same time. For example, tomatoes can be put both into the Vegetables, and the Berries product categories. If you now set the AND relationship for the members of the Product Categories taxonomy, and then filter for Berries and Vegetables, you will get the tomatoes displayed, along with any other products that are also associated with both of these categories. In a Colors filter with an AND operator, selecting Red and Yellow will display only the products that have both of those colors associated with them.

As you might have already guessed, the NOT IN logics filters the products for those that are NOT associated with the selected filter term. Returning to the grocery store example, in a case like that selecting Dairy products will show all the products that are NOT in the Dairy category. Clicking on the Fruit will remove fruit from the filtered result as well, and so on.