How to make checkout page 2columns-left on magento 2

Magento Asked by Alin Lupoiu on December 13, 2020

I try to make the checkout page 2columns-leftlayout, but i can’t.

If i add this code in checkout_index_index.xml

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 layout="2columns-left"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

the page is not loading

by default this layout is 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">

so if i change layout=”checkout” to layout=”2columns-left” the page is not loading

I sucesfull changed the checkout cart page in this way and is working, but not for checkout page.’

Does anyone know how to change checkout page to 2columns-left layout?

checkout layout magento2 xml

One Answer

To change the checkout page to 2columns-leftlayout, just change the file

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

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="2columns-left"/>
    <referenceContainer name="page.wrapper">
        <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>
    </referenceContainer>
</layout>

NOTE : css changes are need afterwards to style the checkout page.

Answered by Nikolas on December 13, 2020

Add your own answers!

Ask a Question

Get help from others!