Published on

How to show header and footer at checkout page in Magento 2

Authors
  • avatar
    Name
    Bal Singh
    Twitter

By default magento 2 checkout page has no header and footer.

So in case you want to show header and footer at checkout page then follow the following steps

  1. Create a checkout_index_index.xml file inside your frontend theme. Path would be like
app/design/frontend/Your_Package/your_theme/Magento_Checkout/layout/checkout_index_index.xml
  1. Copy and Paste the following code in this file.
<?xml version="1.0"?> 
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page\_configuration.xsd"> 
        <body> 
            <referenceContainer name="footer-container" remove="false"/> 
            <referenceBlock name="minicart" remove="false" /> 
            <referenceBlock name="top.search" remove="false" /> 
            <referenceContainer name="header.panel" remove="false" /> 
            <referenceBlock name="catalog.topnav" remove="false"/> 
        </body> 
    </page>

  Note: Once you have added above script into xml file, then Top Menu may not be visible at checkout page. Because it may be hidden in checkout page style. So you need to show it by CSS. You need to overwrite the following style in your theme css file.
From: checkout-index-index .nav-sections, .checkout-index-index .nav-toggle { display: none;}
To:  checkout-index-index .nav-sections, .checkout-index-index .nav-toggle { display: block;}