Add header and footer in checkout page Magento2

magento.stackexchange https://magento.stackexchange.com/questions/125882

  •  01-10-2020
  •  | 
  •  

Question

By default Magento 2 don't provide HEADER and FOOTER in CHECK OUT page.

So I checked checkout_index_index.xml file on path 

app/design/frontend/package_name/theme_name/Magento_Checkout/layout/override/base

There is remove attribute set for header and footer

so I unset remove attribute from remove=true to remove=false.

But still header and footer is not showing in checkout page so can anyone tell me how can I get header and footer on checkout page?

Was it helpful?

Solution

I got a solution.

First go to Magento_Checkout in your theme folder app/design/frontend/package_name/theme_name/Magento_Checkout

Now create below folder structure in layout folder on the above path. override/theme/Magento/blank/checkout_index_index.xml

in this checkout_index_index.xml file add below code.

<?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>
        <move element="logo" destination="header-wrapper" before="-" />
        <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>

I hope someone will find this useful.

OTHER TIPS

In Magento 2.1(.1) the logo is moved in the /vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml from it's regular place to checkout.header.wrapper and then it seems to get lost somewhere..

This is the culpit:

<move element="logo" destination="checkout.header.wrapper"/>

To get the logo back, add/edit the file: [root]/app/design/frontend/[vendor]/[theme]/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>
        <move element="logo" destination="header-wrapper"/>
    </body>
</page>

For me this worked:

app/design/frontend/Vendor/themename/Magento_Checkout/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
      <move element="logo" destination="header-wrapper"/>
    </body>
</page>

app/design/frontend/Vendor/themename/Magento_Checkout/page_layout/checkout.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
</layout>

To get the logo back, add/edit the file: [root]/app/design/frontend/[vendor]/[theme]/Magento_Checkout/layout/checkout_index_index.xml And before end of body tag add this code.

<?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>
            <move element="logo" destination="header-wrapper"/>
            <move element="header-wrapper" destination="checkout.header.wrapper" before="logo"/> 
            <move element="footer_div" destination="checkout.header.wrapper"/>

        </body>
    </page>

None of the above worked for me and accepted answer results in the following error:

Exception #0 (LogicException): Overriding view file '/app/design/frontend///Magento_Checkout/layout/override/theme/Magento/blank/checkout_index_index.xml' does not match to any of the files.

Reason for the error there's no checkout_index_index.xml file to override in the specified location (under blank theme).

Solution: After consulting devDocs https://goo.gl/gvE23c I had to override the base file for checkout module by copying checkout_index_index.xml file from vendor/module-checkout/layoutdirectory and copied it over to app/design/frontend/<Vendor>/<themename>/Magento_Checkout/layout/override/base and changed layout="checkout" to layout="1column"

Logo was not showing caused by <move element="logo" destination="checkout.header.wrapper"/> line so I commented it out and it started to show again.

Try adding watsons checkout_index_index.xml to [root]/app/design/frontend/[vendor]/[theme]/Magento_Checkout/layout/override/theme/blank/checkout_index_index.xml

Go to...

[root]/app/design/frontend/[vendor]/[theme]/Magento_Checkout/layout/checkout_index_index.xml

change this line

<move element="logo" destination="checkout.header.wrapper"/>

to

<move element="logo" destination="header-wrapper"/>

That worked for me :)

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top