How to Use Your Theme's Header and Footer with CheckoutWC

We don't load the theme's header and footer for a couple of important reasons: 
  1. The typical site header includes lot of links, menus, and other things that can be distracting and lower conversions. We designed the checkout page to feel like a separate area of the site, intended for some thing: purchasing
  2. Loading the theme header and footer requires loading theme styles, which increases the risk of conflicts. 
If you would like to customize the header and footer to better match your brand, we recommend you use a custom child template: Template Files

If you are a developer, or work with a developer, it should not be very difficult to make this customization. It is also possible to make a customization like this using only Action Hooks instead of using a child template, which has the added benefit of being more future proof for updates.

For example, an easy way to add your own header would be to do something like this:

This will add custom header HTML above the normal header as well as hide the default header entirely. 

One trick to speed things up is to inspect your site's header using your browser's dev tools and copy the HTML for the header block as your starting point. You can also use the dev tools to look at the CSS applied to each element.

Generally, this goes pretty quickly because in reality you probably want to remove a lot of the cruft (i.e., reduce distractions!) so the amount of CSS and HTML you need will be much more minimal than your current header. 

Because this is a customization, this is an unsupported change and we will not be able to assist much beyond pointing out the best hooks and techniques.