sidebar for woocommerce page

Hi there,

David used a similar idea for Niche template in our site library here:
https://gpsites.co/niche/shop/

It's explained here:
https://gpsites.co/niche/how-the-shop-was-made/

It might be easier if you have a staging site to import Niche so you can see exactly what's involved.

It will still take quite a bit of custom coding to make it like your example though so hopefully you are comfortable with that.

Hope this helps :)

Hi Leo,

Thank you that did what I need!

But I still have 2 problems.

1- I dont think this code to hide toggle from the Primary Navigation on Desktop is working

.main-navigation ul li.slideout-toggle {display: none !important;}

2- The icon is not showing.

Any idea what I am doing wrong?

Can you disable the caching plugin so I can inspect the code better?

Done, sorry

1. Edit the code to this:

.main-navigation .menu-bar-item.slideout-toggle {
    display: none;
}

2. Can you change the HTML markup to:

<span class="gp-icon pro-menu-bars woo-filter-toggle slideout-toggle has-svg-icon">
				<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
					<path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z"></path>
				</svg>
</span>

Hi Leo,

We are almost there, I made the changes you asked, but now the sidebar doesn't work
I left the code from David and yours so you can see both

Any idea what wrong?

By the way I took out the (hide on mobile) from the code as I want it to be visible on mobile.

Can you try adding the slideout-toggle class back in?
https://generatepress.com/forums/topic/sidebar-for-woocommerce-page/#post-1452868

Hi Leo,

Yes, sorry my mistake, I didn't add that class, now its working but, I still have a weird symbol https://a.cl.ly/12uJG9p8

One more update to the HTML markup:
https://generatepress.com/forums/topic/sidebar-for-woocommerce-page/#post-1452868

thank you very much !!!!
Now I can recreate this on several websites.

You guys rock

No problem :)