Remove Header and Footer From Single Woocomerce Category and Product Pages

I am working to try to remove the Navbar/Header and Footer from a SINGLE Woocommerce Category, and the Product Pages within said category. The previous forum threads basically show you how to remove all of the headers/footers from Woocommerce categories/product pages, but I’m just curious if there is a way to remove the header and footer from just a single category, not the entire marketplace.

Thank you!

Hello @SimRacingPaddock,

Thanks for writing in! You can only remove the custom header or footer in a specific category with the help of a custom css. Can you please provide which category url so that we can check the page and give your what might be applicable to the page.

Regards.

Here you go! http://www.viccimoto.com/product-category/slashdot/

Hello @SimRacingPaddock,

To get rid of the header and footer in the provide product category url, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.archive.term-slashdot .masthead,
.archive.term-slashdot .x-colophon {
    display: none;
}

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

Hey @ruenel thanks for the reply! Unfortunately, this did not work though…

Hello @SimRacingPaddock,

The header and footer no longer displays in the given product category page.

For the single product pages that falls under this category, it will require custom development. Please be aware the custom development is beyond the scope of our support. We are only limited to minor cosmetic changes, setting your site up and bug fixes.

Thank you for your understanding.

Hello @ruenel

You may have looked at the page right as I was doing some coding experiments with the page itself. So when I had typed in “.archive” instead of “archive.term-slashdot”, then the header disappeared. However, if I did “archive.term-slashdot”, then the header did NOT disappear.

Could there be something weird with the hierarchy of my categories that could be causing that?

Hi @SimRacingPaddock,

The code provided by Ruenel is taking effect on that archive page, so it works.


I see you have a caching plugin, please clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating/changes so it will take effect immediately.

Thanks,

friech

I just cleared the cache and tried disabling and reenabling the CDN, and it’s still not showing up properly…

EDIT: I also tried the page in Incognito mode, in a different browser, and on other computers as well. The issue is still coming up, and for some reason, I’m not seeing the code like you are…

Hi @SimRacingPaddock,

I checked your page in Incognito mode in Windows 10 and I see the code is being applied and it hides the header and footer. This is what I see when I inspect your page:

image

It still looks like the browser’s cache issue, try hard reloading the browser and see if this resolves the issue.

Let us know how this goes!

Unfortunately this is still not working. If I remove the “archive.term-slashdot” from the code, it does remove the header, but it also removes it from everything else as well, which will not work…

Also, when I modify the code to omit the “archive.term-slashdot”, it actually does reflect when I inspect the page… I add the “archive.term-slashdot”, and it just doesn’t show up when I inspect.

Note: I disabled all cache and jetpack “speed boosting” things

Hi @SimRacingPaddock,

Hi there,

There might be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

If you’re still not able to track the issue, please provide us with the admin access to your site in a Secure Note:

@jade thank you for your info! I’m unfortunately still having difficulty dialing in the issue, and it seems like I have done everything properly… I did have a couple “Warnings” on the CSSLint, but I’m guessing that’s okay.

Hi @SimRacingPaddock,

Thank you for providing the credentials. I checked your setup and your code looks fine and is being applied on the front-end as well. However I went ahead and added the suggested code in the Global CSS section

I checked again and the added code is also being applied on the front-end (see screenshot)

image

You can try on a different browsers and see if you can see the changes, if it still doesn’t work then try checking your page by adding the ?nocache=1 parameter in the URL so it will be like this http://www.viccimoto.com/product-category/slashdot/?nocache=1

Let us know how this goes!

@nabeel Thank you for your help!!! I ended up being able to solve it! Basically what you wrote helped it finally “click”. The code was ONLY going to the main Slashdot category, I had to enter more code to apply to all the subcategories. Thank you.

Another question, if that is alright. Is there a way to remove the header and footer from Woocommerce Product Pages? We’re looking to potentially try that as well.

Hi @SimRacingPaddock,

Glad you sorted the original issue, in the end, cache is really involved in it.

Regarding your question, you can use the CSS code provided by Ruenel as a guide, You can find the proper CSS code selector using the Chrome browser Developer Toolbar

Thanks,

@friech

Thank you for that video! It is really helpful.

So actually my client has informed me he’s wanting to take things a different direction, and is wondering if there is a way to build a SECONDARY header with the design he’s looking for, and have that header only apply to this certain WooCommerce category? Is that a feature that may be able to be handled with the Pro Header tool?

Thank you for your help again, and sorry for this somewhat sudden turn!

Hello @SimRacingPaddock,

As of now Product category page is not yet included on the assignment area for Pro headers. This is a feature that is included on the next milestone of development. We cannot promise a specific date yet on when it can be release. As of the moment, an alternative is to set specific header as GLOBAL. When a header is set as global, it will then show on all special pages and it will act as your default header.

You can also take a look at following tutorial for some help. Please note that the article explains the concepts using Search page but the fundamentals remains the same and that you will have to use conditional tags.

https://michaelbourne.ca/assign-pro-header-search-results-page/#comments

https://www.isitwp.com/ultimate-guide-wordpress-conditional-tags/

https://codex.wordpress.org/Conditional_Tags

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.