- This topic has 21 replies, 1 voice, and was last updated 7 months, 1 week ago by Checkmate Hosting.
June 6, 2019 at 1:31 pm #922069Sam
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.
SamJune 6, 2019 at 1:34 pm #922071LeoStaffCustomer SupportJune 7, 2019 at 12:30 am #922352Sam
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:
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?
SamJune 7, 2019 at 12:33 am #922354Sam
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.
Hope this all helps, looking forward to your reply!
SamJune 7, 2019 at 3:03 am #922424DavidStaffCustomer Support
you could use the Off Canvas Panel ( formerly the Slide Out Navigation ):
It has its own Widget Area so you can stack as many widgets in there as you need.June 7, 2019 at 3:10 am #922431Sam
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?
samJune 7, 2019 at 3:53 am #922464DavidStaffCustomer Support
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.June 7, 2019 at 5:37 am #922529Sam
Hmm, I see what you mean here, but the issue remains that the hamburger would be in the menu rather than the products right?
SamJune 7, 2019 at 5:48 am #922549DavidStaffCustomer Support
You can add the toggle in other places – this topic shows one method:June 7, 2019 at 5:55 am #922552Sam
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?June 7, 2019 at 6:35 am #922570DavidStaffCustomer SupportJune 7, 2019 at 6:55 am #922684Sam
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?June 7, 2019 at 7:55 am #922727DavidStaffCustomer SupportJune 7, 2019 at 8:26 am #922755Sam
Hi David, sorry to make things more complicated I am working on a local Mamp server…June 7, 2019 at 8:54 am #922772Sam
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.
- You must be logged in to reply to this topic.