Skip to content

SSF Above – Woocommerce Products

If you want, you can also display your filters above the products instead of in a sidebar. This isn’t always possible with all themes so we went ahead and made it possible.  There are multiple Display types you can use for this but this can get pretty messy, depending on which filters you add. I recommend using the dropdown Display type for our FWW Above Woocommerce Products and I will show you a couple of examples as to why. To start, go to your Dashboard > Appearance > Widgets and add the widgets you would like to display above your products in the FWW Above Woocommerce Products.

Using different Display types

I’m going to set all of these to different Display types, List, Label, and Dropdown and show some screenshots.

Here they are with the List Display type:

And here with the Label Display type:

Now with the Dropdown Display type:

Vertical or horizontal

As you can see, all the filters show from top to bottom, Ideally, for me, these would be horizontal. This can be done by removing the titles of your widgets. One of the reasons I prefer the Dropdown Display type is that you can add a Drop Down Text. As you can see above, every title is displayed twice because I made the Drop Down Text the same as the widget titles. I’m going to remove all the titles and show three more screenshots in the same order as before.

List:

Label:

Dropdown:

And if I open one of the Dropdown Displays:

Using the Accordion option

It just looks a lot cleaner and takes up less space. Alternatively, you could keep the titles and set all the Show/collapse widgets to ‘Accordion’. Then they will be displayed vertically but depending on how many filters you have it could still look reasonably good. Here is a gif of that in action. You can of course make it look prettier with some CSS. If you have an example of a website you would like this to resemble, send us some screenshots and Dave will take a look if he can make it happen.

 

 

 

 

 

 

 

Did this article answer your question?

Leave a Reply

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


Click to join our Discord community and read the rules for a 20% discount coupon. Coupon usable once per customer only.