Magento 2 - Tips and Tricks

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 a Header and a Footer to their store because it is the area from where your customers can move to different pages of your website. Let’s consider a situation where your customer reached the checkout page after adding some items to his cart, but now he just wants to shop more or edit some items in his cart. He can not move further without typing the exact URL in the browser again as there are no logos or links on the checkout page. He feels stuck on your site.

This is a very common and good scenario where your customer needs the header/ footer on your site to shop further. It is very easy to add a header and a footer. For this, we have to override checkout_index_index.xml as the header and the footer are removed from the 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 a custom theme on your project, create and register the 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="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
             <referenceBlock name="minicart" remove="false" />
             <referenceContainer name="header.panel" remove="false" />     
             <referenceBlock name="top.search" remove="false" />
             <referenceBlock name="catalog.compare.link" remove="false" /> 
             <referenceBlock name="catalog.topnav" remove="false"/>
             <referenceContainer name="footer-container"  remove="false"/>
 </body>
 </page>

And done. This way, you can re-add the 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 the navigation Menu in the checkout pages through a CSS file.

For adding the Navigation menu, we will add a custom CSS file and then display the Navigation Menu.

For this:

Step 1: Add CSS for Checkout Module by adding a CSS reference at the head of the checkout pages.

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

So, we are creating

“app/design/frontend/Bizspice/Biztheme/Magento_Checkout/layout/default.xml”

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
               <css src="Magento_Checkout::css/customcss.css" />
   </head>
 <body /> 
</page>

Here we have added customcss.css at 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

  • Written by: BizSpice
  • Posted on: December 3, 2018