[Support request] Woocommerce off canvas filters

[Sam]

Hi, I have been experimenting with the premium version of GP for a week or so and while it is super fast and very competent with woocommerce it misses one key feature and I was wondering if you have any intention of adding it and if so when? or even if it could be achieved currently?

Off canvas filters or mobile filters for woocommerce. This is a crucial feature for WC stores these days with over 60% of traffic being mobile. I have seen some threads how this can be achieved using the “off canvas panel” but this seems to be at the expense of the mobile navigation which seems to make no sense.

Astra theme seems to do it but not well and that theme seems pretty buggy so would be awesome if GP had this.

Any help here would be gratefully received.

Regards
Sam

[Leo]

Hi there,

Not quite sure if I understand.

What is the filter supposed to do?

Can you link me to an example?

[Sam]

Hi Leo thanks for the quick reply. Allo me to explain, in Woocommerce, you have something called the Layered Nav, this is a collection of widgets you can place in a sidebar or any widget area that allow you to filter the product archives and category archives etc. of your Woocommerce products. The problem is that in most WC themes (including GP), while the website is responsive, it usually does one of two things:

1) push all the filters (often when using the right sidebar layout) to the bottom of the page below the product, so the users will not easily find them.
2) they remain at the top, but on a normal sized WC store with lots of attributes that are filterable like Size, Colour, Gender, Category, Price etc. this pushes the products way down the page and subsequently results in high bounce rates for users and a poor experience.

What is needed in a mobile-first design is a button at the top that appears on a mobile or tablet view port (or even with the option to appear on desktop) that will display the filters by either expanding them or revealing a slide-out pane or overlay. What this does is give the user the option to view the products as soon as the page is loaded with minimal scrolling but whilst having access to filtering options.

Please view any of the below websites on a mobile viewport and you will see what I mean:

https://m.nike.com/gb/en_gb/pw/mens-shoes/7puZoi3?intpromo=MLP-MEN%3ATOPNAV%3ASU18%3AMNSXCAT%3ASHOPMEN%3ASHOES

https://www.adidas.co.uk/men-shoes-new_arrivals

https://www.asos.com/women/new-in/new-in-shoes/cat/?cid=6992&nlid=ww|new+in|new+products

Some themes that offer this are ShopKeeper, Flatsome, Astra, OceanWP, however, these are either bloated multipurpse themes or buggy (Astra, OceanWP).

If GP could add this function it would make it an indespensible Woocommerce theme, but without it, in todays mobile world, I feel it lags behind on user experience even with the incredible load speeds.

Does that help explain what I mean? Is this something in your road map or is it something that can be done already (with hooks maybe) and I just don’t understand how?

Thanks
Sam

[Sam]

In addition to the examples above they all use the off canvas or overlay solution, see below link to a solution that uses the expandable way, this our current site using the Atelier theme, but we are work to move away from (hopefully to GP) as it loads pretty slowly.

https://www.supereight.net/shop/

Hope this all helps, looking forward to your reply!

Sam

[David]

Hi there,

you could use the Off Canvas Panel ( formerly the Slide Out Navigation ):

https://docs.generatepress.com/article/off-canvas-panel-overview/

It has its own Widget Area so you can stack as many widgets in there as you need.

[Sam]

Hi David, thanks again for the quick reply. I checked the link you gave, however, as I noted in my original message, where then does the mobile menu go? It is not relavent for them to be on the same panel. Can there be two separate off canvas panels so you can still have the mobile menu?

In addition, the filters (more so the button that reveals them) should only be displayed on shop archive pages how is this then achieved?

Thanks
sam

[David]

Sorry missed that part 🙂
Currently it would require a little ‘shenanigans’ shall we say. Such as using the Secondary Nav for the main navigation, then both navs can be displayed on mobile. The Layout Element can then be used to Disable the Primary Navigation on all pages apart from the shop.

Its either that or some custom code.

But yes, an option to make this function more rounded, particulary for WOO, is somewhere on the roadmap.

[Sam]

Hmm, I see what you mean here, but the issue remains that the hamburger would be in the menu rather than the products right?

thanks
Sam

[David]

You can add the toggle in other places – this topic shows one method:

https://generatepress.com/forums/topic/trigger-slideout-menu-with-secondary-button/

[Sam]

Right I see and that could be put in a hook?

I am sorry but I am struggling to make the above work if I am honest, if I set the secondary nav in in the main location and the Main nav in the primary location, how do I get that to show with a toggle on mobile?

[David]

To display the toggle in the Primary Nav it has to have a menu assigned to it, as your’re gonna be using it solely for the slideout then just create and assign a blank menu to it.

[Sam]

OK I am completely lost, sorry. I have been changing all the options and now the widgets don’t see to display in the off canvas pane even though they are in the widget location.

Would it not be simpler to just have a mobile nav AND an off canvas widget area?

[David]

Can you link us to the Site so i can take a look as to why the widgets are not working?

[Sam]

Hi David, sorry to make things more complicated I am working on a local Mamp server…

[Sam]

I think the thing that is also confusing is that the secondary nav disappears on mobile view. I read your forum and I see it is meant to display with a hamburger, is there a way to set this? I cannot find it in the customizer.

[Author]

Posts