[Resolved] Hide header and menu on Woocommerce pages

[Saskia]

Hi,
I would like to have completelty distraction free Woocommerce pages on my website:

Hide the header and (sticky) menubar on the product, cart and payment pages.

Would be great if somebody could help me with the correct css for this.
My website is: leden.hondenfotograferen.nl

Thanks, kind regards Saskia

[Leo]

Hi there,

Give this a shot:

.woocommerce-page .site-header, .woocommerce-page .main-navigation {
    display: none !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

[Saskia]

thanks, but header and menubar are still visible
any other suggestions?
thanks kind regards Saskia

[Leo]

Can you link me to a WooCommerce page?

[Leo]

Actually I edited the code above: https://generatepress.com/forums/topic/hide-header-and-menu-on-woocommerce-pages/#post-361634

Can you give it another shot and link me to a page where it’s not working? Thanks!

[Saskia]

The header is gone now, great!
The menu bar is still there, these are the links
thanks!!

https://leden.hondenfotograferen.nl/winkelmand/
https://leden.hondenfotograferen.nl/winkelmand/
https://leden.hondenfotograferen.nl/winkelmand/

[Leo]

I thought you only wanted sticky navigation removed?

I’ve edited the code above so main navigation and sticky navigation are both removed.

[Saskia]

Yesss perfect!
thanks and sorry for the confusion!
😀
me happy
kind regards Saskia

[Leo]

Glad I could help!

[moderndev]

Hey,

I would like to remove the header on the woocommerce Cart and Checkout.

I have tried to add this code, but it seems to remove the header on the my account page. Is there a more specific version that would work only on the cart and checkout?

Best,

Peter

[Leo]

Hi there,

You can use the Layout Element to do this now:
https://docs.generatepress.com/article/layout-element-overview/

Let me know if this helps 🙂

[moderndev]

Excellent! Thank you

[Leo]

No problem 🙂

[Author]

Posts