How to add header and footer on Magento 2 checkout pages

How to add header and footer on Magento 2 checkout pages

As we know by default Magento 2 don’t provide Header and Footer on Checkout page. And this is the part which is very important for any Store.


It has been observed that almost every store owner wants to add Header and Footer on their store as this is the area from where your customers can move to different pages of your website. Let’s consider a situation where your customer reached to checkout page after selecting some items to his cart but now he just wants to shop more or edit some items that he has in his cart. He can not move further without typing the exact url in the browser again as there is no logo and links on the checkout page. He feels himself stuck on your site.


This is a very common and good scenario where your customer definitely needs the header/ footer on your site to shop further. It is very easy to add header and footer and for this we have to override checkout_index_index.xml as header and footer are removed from default layout. As we never should edit core files, we will do this in our custom theme.


NOTE:- Before proceeding , If you don’t have custom theme on your project then create and register theme first (by creating theme.xml and registration.php) and then proceed with this article.


Step 1: Create file in Create checkout_index_index.xml

file in app/design/frontend/<Vendor>/<themename>/Magento_Checkout/layout


We are creating “app/design/frontend/Bizspice/Biztheme/Magento_Checkout/layout/checkout_index_index.xml”


<?xml version="1.0"?>
  <page xmlns:xsi="" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
             <referenceBlock name="minicart" remove="false" />
             <referenceContainer name="header.panel" remove="false" />     
             <referenceBlock name="" remove="false" />
             <referenceBlock name="" remove="false" /> 
             <referenceBlock name="catalog.topnav" remove="false"/>
             <referenceContainer name="footer-container"  remove="false"/>


And done, by this way you are able to re-add mini cart, header, search bar, footer etc. i.e Header and Footer component.



But still there is no Navigation on the checkout page, this is because default Magento hides navigation Menu in checkout pages through CSS file.


For adding Navigation menu we will add custom css file and then display Navigation Menu.


For this:


Step 1: Add Css for Checkout Module by adding CSS reference in head of checkout pages.

Add default.xml in app/design/frontend/<Vendor>/<themename>/Magento_Checkout/layout


So, we are creating



<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
               <css src="Magento_Checkout::css/customcss.css" />
 <body /> 


Here we have added customcss.css in the head of checkout pages


Step 2:  Now create “app/design/frontend/Bizspice/Biztheme/Magento_Checkout/web/css/customcss.css”


.checkout-index-index .nav-sections, .checkout-index-index .nav-toggle {
               display: block;


So now Main Navigation will also show on the checkout pages