How to remove white space under header on woocommerce product pages

[Minna]

How to get rid of that white space under the header ONLY on woocommerce SINGLE product pages. Not the shop index page for example. I found this code which worked, but then it messed up the shop index page, making the title there to disappear… website www.gopala.com

.woocommerce.woocommerce-page .x-header-landmark,
.woocommerce.woocommerce-page .x-colophon.bottom {
display: none;
}

[ruenel]

Hello Minna,

Thanks for writing in!

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Based on our screenshot above, we can use single-product and x-header-landmark to update your CSS code and add the CSS code into X > Theme Options > CSS .

.woocommerce.woocommerce-page .x-header-landmark,
.woocommerce.woocommerce-page .x-colophon.bottom
.single-product .x-header-landmark{
    display: none;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

We would love to know if this has worked for you. Thank you.

[Minna]

thank you for the quick reply. This code eventually worked as wanted:

.single-product .x-header-landmark {
display: none;
}

[ruenel]

You are most welcome!