[Support request] Woocommerce off canvas filters

Home Forums Support [Support request] Woocommerce off canvas filters

Home Forums Support Woocommerce off canvas filters

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #922069
    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

    #922071
    Leo
    Staff
    Customer Support

    Hi there,

    Not quite sure if I understand.

    What is the filter supposed to do?

    Can you link me to an example?

    #922352
    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

    #922354
    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

    #922424
    David
    Staff
    Customer Support

    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.

    #922431
    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

    #922464
    David
    Staff
    Customer 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.

    #922529
    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

    #922549
    David
    Staff
    Customer Support
    #922552
    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?

    #922570
    David
    Staff
    Customer Support

    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.

    #922684
    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?

    #922727
    David
    Staff
    Customer Support

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

    #922755
    Sam

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

    #922772
    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.

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.