Why are my store's header, navigation and footer not included?
We understand that you may want to use the site-wide header with the navigation in the checkout page too for the sake of brand consistency and a sense of continuity for your customers. Please allow us to explain why this is detrimental to conversion.
This type of checkout is called an 'Enclosed Checkout' where non-checkout-related elements are removed to allow users to focus on completing the checkout process. This, in particular, means removing the site-wide navigation, sidebars, and footer with links (except Returns Policy, etc.)
Sites that don’t provide an enclosed checkout risk distracting users with a high number of interface elements not related to the checkout flow. This can be particularly problematic if the site-wide elements are interactive, like a hover-activated, drop-down main navigation menu that will overlay the actual checkout content if accidentally hovered.
This can lead to several issues:
- Unnecessary navigation in the checkout interface might encourage a user to exit the checkout process, despite having already indicated an interest in finalizing the order by initiating the checkout flow.
- A non-checkout element might be activated by a user’s unintentional hover or click. At a minimum, this can lead to confusion or annoyance, but in case of accidental clicks, this will also lead to the user being yanked out of the checkout flow.
- By having more interface elements to examine, the checkout process may be slower to complete as it’s simply more difficult to maintain focus on the task at hand leading to fatigue, or real-life interruptions impacting the checkout process.
Please note that the decision to not include the header and footer is based on Baymard Institute's intensive e-commerce testing and not a personal preference.
You can see examples of enclosed checkout on all leading e-commerce sites. Even Amazon.com uses an enclosed checkout.
Consistent Brand Style
To maintain the look and feel of the rest of your store through to the checkout, you can add custom CSS to the checkout page under WooCommerce › Settings › Cartimize tab. (as of v1.0.1)
We also provide a custom-styled checkout service where we will design and implement a fully customised checkout for you, in terms of colors, fonts and other styles. For more information, email us at firstname.lastname@example.org.