[Resolved] sidebar for woocommerce page

[Victor]

Hello,

I am trying to recreate a site that has a button to open a sidebar https://a.cl.ly/X6uNZxOb
and once opened the sidebar look like this https://a.cl.ly/qGuNQjv8

I am using GP Versión: 3.0.0-alpha.4
and GenerateBlocks Versión: 1.1.2

Any idea how to do this?
Thanks for all the support

[Leo]

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 🙂

[Victor]

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?

[Leo]

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

[Victor]

Done, sorry

[Leo]

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>

[Victor]

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.

[Leo]

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

[Victor]

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

[Leo]

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

[Victor]

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

You guys rock

[Leo]

No problem 🙂

[Author]

Posts