Add header and footer in checkout page Magento2

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?

"By default Magento 2 don't provide HEADER and FOOTER in CHECK OUT page." <= this is not true. Default Magento 2 provides both footer and header on checkout, your CUSTOM theme deleted them. — Raphael at Digital Pianism, Commented Jul 15, 2016 at 10:51
@RaphaelatDigitalPianism But I have use magento/blank theme as a parent theme and create my theme.then why checkout page not showing header and footer? I didn't change anything in Magento_Checkout module.I have used default Magento_Checkout module that provided by magento . And this issue is not only for me. I have seen so many developer who has same issue. — Dhaval, Commented Jul 15, 2016 at 10:54
@RaphaelatDigitalPianism, actually OP is right. By default Magento doesn't include header and footer, because the checkout layout uses the empty layout handle instead of 1column. — Erfan, Commented Aug 7, 2017 at 8:29

Community · Accepted Answer · 2018-11-24 14:32:54Z

26

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.

edited Nov 24, 2018 at 14:32

CommunityBot

1

answered Jul 15, 2016 at 10:50

Dhaval

1,6959 gold badges27 silver badges46 bronze badges

Exception #0 (LogicException): Overriding view file 'D:/xampp/htdocs/nickstore/app/design/frontend/Mytheme/themename/Magento_Checkout/layout/override/theme/Magento/blank/checkout_index_index.xml' does not match to any of the files. Got this error
– Asish Hira
Commented Sep 8, 2016 at 12:52
@AsishHira I think you made some mistake to override files.
– Dhaval
Commented Sep 9, 2016 at 7:31
No i don't.. I checked it with your answer 12times
– Asish Hira
Commented Sep 9, 2016 at 8:00
Did you find the solution? I have the same issue. and i know it is becuase blank theme has no layout/ch‌eckout_index_index.x‌ml file.
– Abdul Shakoor Kakar
Commented Sep 27, 2016 at 4:06
2

I had to add a </page> at the end of this code block to get this to work. Also to answer the other users questions, I placed this file at app/design/frontend/VENDOR/THEME/Magento_Checkout/layout/checkout_index_index.xml
– domdambrogia
Commented Jan 22, 2018 at 19:39

| Show 2 more comments

OZZIE · Accepted Answer · 2016-09-28 08:35:17Z

16

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>

answered Sep 28, 2016 at 8:35

OZZIE

5527 silver badges13 bronze badges

3

2017 here. Still great!
– mniess
Commented Dec 12, 2017 at 23:36
Then dont go to 2020 and 2021
– Black
Commented Jan 21, 2021 at 10:08
Yep - at least 2.4 magento (not sure which earlier) use a completely different page_layout file. Much more than just the logo will be missing. Notice there is a page_layout folder in vendor/magento/module-checkout/view/frontend/. With the new layout for the checkout_index_index page request handle, there is no header-wrapper container, nor is there a header.container . The latter is replaced with checkout.header.container. So whatever in your default pages you had in header.container before, you need to move it to checkout.header.container. Install CommerceBug3 extension, big time saver
– grok_in_full
Commented Apr 29, 2021 at 16:35

Add a comment |

fassl · Accepted Answer · 2017-01-16 17:54:51Z

7

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>

answered Jan 16, 2017 at 17:54

fassl

1911 silver badge3 bronze badges

We have OSC module installed so this code works for us!
– Jack
Commented Sep 4, 2019 at 5:15
Yes, I suppose just reverting to the original 1column page_layout seems like the easiest way to correct this. However, if you made any big changes to your header, you'll have to be careful about ordering. Using Alan Storm's CommerceBug3 helps to make this easier to figure out. It creates a nice visual graph of all the containers and blocks as well as the full layout for each page request handle, so you can compare between your normal, looking good page and the checkout page and see what needs to move.
– grok_in_full
Commented Apr 29, 2021 at 16:54

Add a comment |

Nady Shalaby · Accepted Answer · 2022-06-03 17:45:59Z

Magento 2.4

Edit checkout index page: app/design/frontend/<vendor>/<theme>/Magento_Checkout/layout/checkout_index_index.xml

to be like this:

<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>

Edit checkout page_layout: app/design/frontend/<vendor>/<theme>/Magento_Checkout/page_layout/checkout.xml

to be like this:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content" />
        <container name="page.top" as="page_top" label="After Page Header" after="header.container" />
        <container name="checkout.header.container" as="checkout_header_container" label="Checkout Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content">
            <container name="checkout.header.wrapper" label="Checkout Page Header" as="checkout_header_wrapper" htmlTag="div" htmlClass="header content"/>
        </container>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

And that's all you need (^_^)!!!

Thanks! Worked with M2.4.4
– alexwatever
Commented Jun 3, 2022 at 1:17 — alexwatever, Commented Jun 3, 2022 at 1:17
thanks it worked with Magento 2.4.6 version
– Niraj Patel
Commented Jan 4 at 4:40 — Niraj Patel, Commented Jan 4 at 4:40
Thanks its work well for me ...
– fetra
Commented Jan 24 at 8:16 — fetra, Commented Jan 24 at 8:16

Vikram Kumar · Accepted Answer · 2021-07-30 06:33:13Z

Simple and easy solution for Magento 2 to display header and footer on checkout page

To display same header and footer on checkout page like other pages, you just override checkout page_layout into your theme.

vendor/magento/module-checkout/view/frontend/page_layout/checkout.xml

Copy into your theme

app/design/frontend/[Vendor]/[Your_Theme]/Magento_Checkout/page_layout/checkout.xml

Replace checkout.xml file code with default 1column.xml like below and check after removing your cache.

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<update handle="empty"/>
<referenceContainer name="page.wrapper">
    <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
    <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
    <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
</referenceContainer>

I hope it will work for you!

Khoa TruongDinh · Accepted Answer · 2016-10-17 14:04:20Z

1

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>

edited Oct 17, 2016 at 14:04

Khoa TruongDinh

32.3k11 gold badges90 silver badges156 bronze badges

answered Oct 17, 2016 at 13:55

Bhagyavant Panhalakr

212 bronze badges

like this<move element="header-wrapper" destination="checkout.header.wrapper" before="logo"/> <move element="footer_div" destination="checkout.header,wrapper"/>
– Bhagyavant Panhalakr
Commented Oct 17, 2016 at 13:58

Add a comment |

Devtype · Accepted Answer · 2016-11-17 11:57:50Z

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.

andy.ashler · Accepted Answer · 2016-10-11 08:16:50Z

0

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

answered Oct 11, 2016 at 8:16

andy.ashler

1

Add a comment |

Gnucho · Accepted Answer · 2017-10-29 21:58:04Z

0

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 :)

edited Oct 29, 2017 at 21:58

answered Oct 29, 2017 at 21:52

Gnucho

11 bronze badge

Great job posting the same answer again ^^ (if that file exists is because some developer in your team/company/you put it there already..)
– OZZIE
Commented Dec 4, 2017 at 13:22

Add a comment |

HoangHieu · Accepted Answer · 2021-07-01 17:28:46Z

0

Now the solution should be

from the adding update handle the page layout 1column to the page layout checkout

page_layout/checkout.xml

<update handle="1column"/>

answered Jul 1, 2021 at 17:28

HoangHieu

1,3588 silver badges24 bronze badges

Add a comment |

Stack Exchange Network

Add header and footer in checkout page Magento2

10 Answers 10

Your Answer

Not the answer you're looking for? Browse other questions tagged
checkout
layout
magento-2.1
or ask your own question.

Linked

Hot Network Questions

Add header and footer in checkout page Magento2

10 Answers 10

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged checkoutlayoutmagento-2.1 or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
checkout
layout
magento-2.1
or ask your own question.