I've been trying to hide my page header from showing different WooCommerce related product pages/search. I managed to put the right CSS to hide it from main product page, but when certain category or keyword is selected to show products, the page header is still there. What CSS would fix this problem?

Here's an example of product page without the header, works nice: https://vaporisaattori.fi/tuote/boundless-cfx-kannettava-vaporisaattori

Here's an example of WooCommerce showing products in certain category that I would like to get my page header removed completely: https://vaporisaattori.fi/tuoteryhm%C3%A4/kannettavat-vaporisaattorit

Also the same problem with the header when showing products using keywords I have used with the products: https://vaporisaattori.fi/tuotekohdenne/hybridi

I would really appreciate the help in this point. Thank you!

  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer.
    – Community Bot
    Commented Oct 26, 2022 at 14:15

1 Answer 1


Take a look at the body class tags. This will help you further define your CSS selectors to target the elements you want to hide. In this use case, you can a single CSS rule to hide the header on each and every woocommerce page.

Here is what I would use in your case .woocommerce header{ display: none; }

There are many different ways to do this. You could use PHP or Javascript to accomplish the same results but I believe this is the simplest solution.

  • Wow! It really was this easy. Thanks a lot!
    – mjhalonen
    Commented Oct 25, 2022 at 8:11
  • Glad I could help! Commented Oct 30, 2022 at 18:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.