Don’t Mess with the Magento 2 Checkout

Hello! Do you hate editing Magento Checkout? I know how you feel… 😀

The checkout in Magento 2 is built up from a series of Knockout JS components which are then rendered using the Knockout JS templating system. Magneto 2 defines each one of these components and their parent/child relationship in a large XML file which can be extended or overridden in your own theme or module.

First of all, it all starts in checkout_index_index.xml.

[Magento_Checkout_module_dir]/view/frontend/layout/checkout_index_index.xml

Create this file in your theme, and we can start:

[Magento_Checkout]/layout/checkout_index_index.xml

Example 1: Remove field from Shipping form

Define path to component which you are planing to remove and add this item as a child:
(in this example Fax field)

<item name="visible" xsi:type="boolean">false</item>
<?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>
        <referenceContainer name="content">
            <block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="shipping-address-fieldset" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="fax" xsi:type="array">
                                                                        <item name="visible" xsi:type="boolean">false</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        ...

Clean the cache and the changes will be visible.

Example 2: Move component’s on Checkout

In this case, we will move Terms and Conditions from the default position (under payment method) to the end of Checkout.

Step 1: To show the item in the new place, we must first disable an item from the default position, follow XML tree and replace item:

<item name="before-place-order" xsi:type="array">
    ...
</item>

with:

<item name="before-place-order" xsi:type="array">
    <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

Step 2: Re-add to your desired location, in this case on the end of Checkout:

<item name="after-place-agreements" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="displayArea" xsi:type="string">after-place-agreements</item>
    <item name="dataScope" xsi:type="string">before-place-order</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="agreementss" xsi:type="array">
            <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
            <item name="sortOrder" xsi:type="string">100</item>
            <item name="displayArea" xsi:type="string">after-place-agreements</item>
            <item name="dataScope" xsi:type="string">checkoutAgreements</item>
            <item name="provider" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
</item>

Step 3: Call this template where you need:
(in our example on the end of Checkout: “after-place-agreements”)

<!-- ko foreach: getRegion('after-place-agreements') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Example 3: Adding Custom block in Header

You’ll probably be in a position that the client wants more information in the Checkout header to increase the conversion rate, a sense of security sites, etc. Here’s how:

<referenceBlock name="checkout.header.wrapper">
    <container name="additional-custom-block-wrapper" label="additional-custom-block-wrapper" htmlTag="div" htmlClass="additional-custom-block-wrapper">
        <block class="Magento\Cms\Block\Block" name="additional-custom-block">
            <arguments>
                <argument name="block_id" xsi:type="string">additional-custom-block</argument>
            </arguments>
        </block>
    </container>
</referenceBlock>

Example 4: Adding Custom Footer to Checkout

If a want to highlight some specific things, methods of payment, information delivery, additional coupons, etc.
This is a sample of how to create a custom footer with CMS block or template file:

CMS Block

<referenceContainer name="page.bottom.container">
    <container name="additional-custom-footer-wrapper" label="additional-custom-footer-wrapper" htmlTag="div" htmlClass="additional-custom-footer-wrapper">
        <block class="Magento\Cms\Block\Block" name="additional-custom-footer">
            <arguments>
                <argument name="block_id" xsi:type="string">additional-custom-footer</argument>
            </arguments>
        </block>
    </container>
</referenceContainer>

Template

[Magento_Theme]/templates/checkout-footer.phtml
<referenceContainer name="page.bottom.container">
    <container name="additional-custom-footer-wrapper" label="additional-custom-footer-wrapper" htmlTag="div" htmlClass="additional-custom-footer-wrapper">
        <block class="Magento\Framework\View\Element\Template" name="additional-custom-footer" template="Magento_Theme::checkout-footer.phtml" />
    </container>
</referenceContainer>

If you’re going to need any help regarding your Magento development or Migration from Magento 1 to Magento 2 in particular, we would be more than happy to offer you insights and various solutions. Happy coding!


About Matej Djakovic

Frontend Developer

Matej is a Frontend Developer who is passionate about Wordpress, Symfony 2 and Magento. He is also enthusiastic about sports and spends some of his free time for inline roller skating.

Read more posts by Matej / Visit Matej's profile

2 comments

  1. hi,

    in my checkout_index_index.xml i have added

    true

    but the placeholder button is always present on payment list checkout.

    What is the problem?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.