WooCommerce: I Need to hide my page title/header (including menu) from all the WooCommerce related product pages, such as category and keyword pages

Question

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!

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.