Collapsible Filters

Using a lot of filters on your website can become quite messy and annoying to navigate. Quite often people won’t be needing or wanting to use all of them. What if you could decide whether or not to show all of the filter options? You can!

With our Faster Woo Widgets, there is an option in every widget that allows you to decide whether or not to have expandable/collapsible filters, and if the default option is having the filters expanded or collapsed, or even have the filters open/closed status tied together with the Accordion option. Here is an example of a website not using any collapsible filters:

It just never ends. Now have a look at a website using collapsible filters:

 

That’s much tidier.

Always Show Option

I will be activating the Envo Marketplace and the Online eStore themes and using them I’ll show a few examples of our awesome collapsible widgets.  I’m going to start by making sure that my FWW Product Categories, FWW Custom Taxonomy: Brands, and FWW Product Attributes: Colour widgets are all set to Always Show in the Show/collapse widget settings.

Always Show is our default setting for these widgets and is what you would choose to get the normal display of non-collapsible widgets.

                         

Default Open Option

Next, I will set them all to Default Open. With this setting, all products will be showing but you can decide to collapse them and you’ll see a little arrow added to the widget title hinting to your users that they can click it to expand/collapse.

Our default settings per widget are set to 200 pixels so if there are more products than can be shown in that box there is a little CSS scrollbar. This is customisable/removable through CSS and will be explained further at the bottom of this article. Here they are in my two themes:

                                       

Default Closed Option

Now I will set them all to Default Closed so they will all be collapsed by default, but expandable. Note our troubleshooting section – our widgets have a ‘memory’ so once you have clicked to open/close a widget then this fact will be remembered in your browser and you will no longer see the default option. You can clear your cookies or use private browsing to see what your users would see on first visit.

                                       

Accordion Option

The last setting is Accordion, called this because if one filter is expanded and another one gets selected, the previous one will close. The accordions start closed, and then when your users open a second widget, the first one they opened will close.

Customising CSS of Collapsible Filters

If you want to expand the scrollable area, you could use this:

.fww-widget-content {
max-height:500px; /*default is 200px */
}

The collapsible filters have a little arrow on them to indicate that the widget is expandable and collapsible.

If, like Glyn, you think the arrows on the collapsible filters are the wrong way around then you can invert them using this CSS:

.hide-fww-content .fwwicon-keyboard_arrow_down {
   transform: rotate(0deg);
}
.fww-widget-toggle .fwwicon-keyboard_arrow_down {
   transform: rotate(180deg);
}

Troubleshooting

One oddity that may confuse you is that the collapsible filters have a ‘memory’ stored in cookies in your browser. So – if you configure a widget to be collapsible and ‘default open’, but then you visit your page and close that widget, now this widget will be ‘default closed’ for you – only for you. If you wish to see what your customers will see, either clear your cookies or open your store in private browsing mode so you can see the initial defaults of closed or open widgets.