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. 

Using Your Theme's Header and Footer

If you would like to customize CheckoutWC to use your theme's footer and header you have two main options.

Option 1) Elementor Pro

If you're an Elementor Pro user, you're in luck! Simple head to Settings > Integrations and click the checkbox next to 'Enable Elementor Pro support.'

When this setting is enabled, we'll pull in the header and footer you have configured with Elementor Pro.

Option 2) Custom coding

Option 2 is a little less straightforward, but if you are a developer (or have access to a developer), you should be able to do it without too much pain.
There are two main strategies:
  1. Use action hooks
  2. Create a custom template

We recommend using the action hook strategy wherever possible. 

For instance, to add a custom header you could do something like this:

That will add a custom header with styling, as well as hide the default header.

If you would like to do something more custom, you can try your hand at creating a custom template. However we really recommend you do this as a last resort. Maintaining a custom template will require a lot more time in the long run than using action hooks and you should be able to do anything you need to do with action hooks.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us