Distraction free Checkout

[Matt]

I have the distraction-free setting checked for Woocommerce checkout but it only seems to have disabled the footer and the entire header still shows. Perhaps it’s where there’s a lot of custom css to get it styled correctly.

I’ve disabled the secondary nav just on the checkout page without an issue but using the same .page-id-xxxxx method (below) for the primary nav removes it from all pages and not just the checkout. V odd. Can you suggest the best method to achieve this?

.page-id-xxxxxx .nav-aligned-right .main-navigation .menu>li {
display:none;}

[David]

Hi there,

you should be able to disable any elements using the Layout Element:

https://docs.generatepress.com/article/layout-element-overview/

The display rules would be Page > Checkout

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

[Matt]

That’s handy! It didn’t do exactly as I need – because the primary nav is the header – it removes my site logo too. Would it be best to add my site logo directly to the page above checkout shortcode?

[Leo]

Hmm CSS solution would probably be the easiest in this case.

Can you link me to the page in question?

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

[Matt]

https://mattgoddardphotography.co.uk/checkout

[Leo]

Try this CSS:

body.woocommerce-checkout .main-nav {
    display: none;
}

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

[Matt]

Thanks Leo – that’s done the job.
To help my knowledge – how come page-id-xxxx method worked for secondary nav but not for the main nav?

[Leo]

Page ID should work as well:

body.page-id-250072 .main-nav {
    display: none;
}

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

[Author]

Posts