Disabling entire header for WooCommerce's Storefront theme for a single product's page with CSS?

Question

I've tried doing things like .page-id-1122 #different-elements-i-saw-in-chrome-inspector-here { display: none; } without any luck.

Can anyone tell me how I'd accomplish this? Thank you in advance.

Answer 1

Just get your header id and go to your style css, add this code

body.product-template-default.single.single-product.woocommerce.woocommerce-page.customize-support .header-area { display: none; }

Here .header-area will be your header class/id.

Answer 2

Try this:

.page-id-1122 #different-elements-i-saw-in-chrome-inspector-here { display: none !important; visibility: hidden !important; }