Woocommerce off canvas filters

Weird, the menu randomly appears when I changed the secondary menu location to above header. What was even weirder is that it would not go below the head intil I changed the drop down direction from left to right. What is weird is when I changed it back to left, it stayed below the header. Seems a bit buggy.

The problem I have now is that this secondary nav does as you say, but it is not inline in the main part of the header so you lose it on the stick nav!

Any ideas about that?

thanks
Sam

We are looking at options to make it so the slideout can be used without losing the primary nav on mobile. I am just checking to see if there is a way we could do it today without having to turn everything upside down.... if you don't mind bearing with me.

Hi David, no worries it seems a bit crazy but is starting to make sense! I realise that the layered nav widgets disappeared because I was on a product page and when you are on a product page you cannot filter it!!

Look forward to a solution!

Thank again.

Right got it now :) ( I think )

1. You can keep your Primary Navigation as your main navigation with a menu.
2. Enable the Off Canvas Panel for Desktop Only.
3. Hook in this HTML to display the toggle for mobile:

<span class="slideout-toggle hide-on-desktop hide-on-mobile"><a href="#"></a></span>

After that it will just be a case of hiding both toggles on the shop.

OK! so we're nearly there I think. What the above does is allow the primary menu across the header in desktop with the hamburger for the off canvas to the right of the header. Then on mobile the off canvas menu hamburger disappears but we still have the mobile version of the main menu.

However, there are two more crucial things I need to achieve now:

1) the hamburger for the off canvas toggle needs to be positioned in the .woocommerce-notices-wrapper div along with the results count and sorting drop down, is that possible?

2) it needs to be visible on mobile and/or desktop.

3) as a bonus... the mobile version of the Primary menu appears as a drop down or vertical menu on mobile, is it possible for it to come in from the left like the off canvas panel?

Can we do that?

Thanks
Sam

Awesome :)
1. You can add the HTML for the toggle i provided to the woocommerce_before_shop_loop hook - which is the same hook the sorting and counter uses.

2. You will need to remove the hide-on-desktop hide-on-mobile classes from the HTML provided above.

3. Currently no easy way of doing that without custom development.

Just want to add a bump to this thread about getting this feature added. Essential for WooCommerce.

Hi I was wondering where you guys we at with regards to adding a dedicated off-canvas panel for Woocommerce filters.

We are in 2022 now and with 80% of traffic on mobile, this is essential. I understand this "can" be done with GP but it means you cannot then have an off-canvas menu for your main menu, only an expandable one.

I imagine all your Woo users would jump for joy if this was added!

thanks