Style options for filters

Clicking on the Style button under Filter Options will get you to a Style options tab. These options apply only to the currently edited filter preset.

The style options are:

  • Select design
  • Always visible
  • Row display
  • Max columns
  • Max height
  • JS Scroll Bars
  • Checkbox style
  • Hierarchy style Filter icon
  • Filter title text
  • Filter button text
  • Button position
  • Content align
  • Hide elements
  • Loader animation

Select design

Filters have design options. Here you set the overall look of the product filter element. Available options are:

  • Default – Normal appearance
  • Pop up – Filters will appear in a pop-up, modal
  • Select boxes – All filters will be HTML5 select box elements. This is important, as some of you need color swatches in select boxes, and the only way to achieve it, is to set the design here to select box
  • Fixed sidebar left – Sidebar that’ll slide in from left. There’s the version with an overlay too
  • Fixed sidebar right – Sidebar that’ll slide in from right. Version with overlay is available
  • Fullscreen – This is more like a modal product filters that’ll take the full screen

Always visible

If checked it’ll make the filters visible at all times. This of course, doesn’t go for the widgets, or pop-ups or the full-screen filters. This basically only applies for the Default style

Row display

Filters can be displayed in a few ways. These are the options:

  • One row – It displays filters in one row with a horizontal scrollbar in the count of filters is larger than the Max Columns value
  • Multiple rows – This is the basic grid layout. When Max Columns is reached a new row of filters will start
  • Masonry filters – Here isotope.js is used to make a masonry filter grid

This option has no effect on widgets, as widgets are always one columned

Max columns

This option sets the max columns for filters. For example, you have 5 filters and set Max columns to 3. If you use One row display, a horizontal scroll bar will appear for the fourth and fifth filter. If you use Multiple or Masonry modes next row of filters will begin after the third filter. This option has no effect on widgets, as widgets are always one columned

Max height

This option sets the max height of the filter lists. Value is entered in pixels. If the list is longer than the value a vertical scroll bar will appear

JS Scroll Bars

In conjunction with the previous option. this one will add JavaScript scroll bar library for a better scroll bar displays. This only is for desktop screens, and using it isn’t that much advised today

Checkbox style

When in default lists styles, filters have checkboxes. Here you can set the checkbox style. These are the styles:

  • Round
  • Square
  • Checkbox
  • System checkbox – If you want the terms to have system checkboxes. Here’s the option

Hierarchy style

Hierarchy in filters is represented with basic + icons aside parents. There are more styles for this too. Styles:

  • Line icon
  • Circle
  • Circle Solid
  • Arrow
  • Hide – You can even hide the hierarchy icon, but the indent will stay. Set to hide if you want this look

Filter icon

Filter icon in title is replicable. The idea here is to input the class for the element that represents an icon. Try using prdctfltr-filter or FontAwesome fa fa-shopping-cart A note, for the FontAwesome sample to actually work, FontAwesome will need to be loaded, either by theme or a plugin

Filter title text

Change the filter title that goes aside the icon here

Filter button text

Filter button, that triggers filtering, can also have a custom text. Replace it by typing yours here. Remember, if you use Filter on Click, this button is hidden

Button position

Group of filtering buttons, sale, instock and clear filters can have its position set. The options available are:

  • Bottom
  • Top
  • Both – This will show the button group on top and bottom

Content align

Contante align will set the align of the filter titles, buttons and collectors. If you need centered content filters, use this option, however, this will not set the filter terms to center. Still you can use this and Max Columns option. Supported options are:

  • Left
  • Right
  • Center

Hide elements

To hide some of the elements, like buttons, titles or else use this option. The things that can be hidden are:

  • Filter icon
  • The whole top bar (title bar)
  • Showing text in top bar (or text that shows product counts in the title)
  • Sale button
  • Instock button
  • Clear all button

Basically if you want to hide all the buttons, you’d need to hide those tree, plus set a Filter on Click from the General options for this filter preset

Loader animation

When filtering starts loader is shown. Here set which one. Available options have a few for fullscreen, but have some called in title. The in title ones will show instead of the Filter Icon in the product filters top title bar. To use these “in title” loaders you will need a title bar and the icon to show it, meaning they shouldn’t be hidden, and it’s not possible with widgets

Leave a Reply

Your email address will not be published. Required fields are marked *

12 comments on “Style options for filters”

  1. The Horizontal style plus drop down style you show on you site doesn’t seem to exist with the actual plugin as I’ve tried all options within the style section but can’t seem to be able to achieve that. Also there’s little or rather very poor video for this plugin on YouTube. Consider getting one up there.

  2. Is it possible to just have the filter search bar and hide terms? The taxonomy I have set to locations is far too long to show all options.

    It would also be great to be able to link the keyword search bar to a specific taxonomy.

  3. If I choose any of the style options available, nothing changes on the front end. I’ve a custom theme. What could be the reason?

    P.S. I’m actually removing these styles:
    wp_dequeue_style( ‘wp-core-blocks’ );
    wp_dequeue_style( ‘wp-block-library’ );
    wp_deregister_style( ‘advanced_nav_css’ );