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.


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


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="" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="content">
            <block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false">
                    <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>

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 name="before-place-order" xsi:type="array">
    <item name="componentDisabled" xsi:type="boolean">true</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 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>

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

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">
                <argument name="block_id" xsi:type="string">additional-custom-block</argument>

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">
                <argument name="block_id" xsi:type="string">additional-custom-footer</argument>


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

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!

You made it all the way down here so you must enjoyed this post! You may also like:

Feb 27, 2018

How to display CMS block in Magento 2 Checkout

/ Leave a comment
Reorder input fields on Shipping and Billing step in Magento 2 Feb 13, 2018

Reorder input fields on Shipping and Billing step in Magento 2

/ Leave a comment
Sep 08, 2015

Meet Magento Belarus features an Inchooer talking Magento 2 Checkout

/ Leave a comment


  1. Hello ,

    I have change position of terms-condition but after place terms-condition “place order” button.Terms-condition validation and other validation is not working.


  2. Hi, I want to display billing-address form below the shipping address form with checkbox like the way it is shown in payment method “My billing and shipping address are the same”. without any extension using magento 2.1 itself how to do.

  3. Hi,

    I added terms and condition on shipping step just the way it is show. It works perfectly fine for guest users but for logged in customers it shows “Please agree to all the terms and conditions before placing the order” when i click on place order button. Any reason why?

  4. Hey Matej

    Awesome article. Thank you for sharing!

    I am trying to bring the shipping and billing information into one step, so effectively there is a single view for the checkout (rather than the default two-step process. How would you suggest I do this please? Any insight would be greatly appreciated πŸ˜„

    Many thanks

    1. Thanks Steve, and that’s not so easy, i recommend you one of One Step Checkout extensions. Magestore is ok, and it easy to customise.

      Good luck! πŸ˜‰

  5. Is there something like a copy method? Instead of readding everything by copy & paste in the checkout?

  6. Hi, In example 2, step 2 what exactly does “end of checkout” means? After which node am I suppose to place the new code?

    1. Hi Reya, place in “checkout” node in “children” after ” <item name=”steps” xsi:type=”array”>…</step> “ and step 3 add in onepage.html

      Good luck!

  7. Hi Matej Djakovic

    How can I remove the shipping methods step from shipping and add as a separate step in checkout flow.


  8. Hi!
    How is possible to remove some tooltips from checkout?
    I tried so many possible solutions but none worked for me…

    1. Hi Francis,
      i think the best way to do this through CSS, i tried in several ways, but considering all the complications with Checkout, best through CSS.

      Good luck! πŸ˜‰

  9. How to add validation to the shipping address fields in checkout page? For ex: UPS Address validation

  10. Hello,
    I am having a serious issue. I need a help. I want to add new shipping method i.e., In-store. If it is selected then customer can choose stores which is listed in admin section and goto next. When In-store is selscted then no need to add shipping address and store adderss will be added as a shipping address. I have tried using custom js and ajax and I am facing huge page loading issue. What is the best way to do so and how?

  11. Hi!

    First off all great article, easy and understandable :).
    Second, now i’m searching for a more indept article about the checkout.
    Cause i want to build an address autocompleter in it, but can’t figure realy out how i can make use of the observable objects of the shipping address form input’s, so that when a few fields are filled in i can do a request with JS to auto complete the address and make some fields readonly. Any “simple” example’s about it?

    Kindly regards

    1. Hi Pascal,
      at start you need add your custom JS on Checkout, add in head of checkout_index_index.xml,
      for make read only field need create new template for field (see here) and add attribute to field “disabled”

      Good luck! πŸ™‚

  12. hi,

    in my checkout_index_index.xml i have added


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

    What is the problem?

Leave a Reply to Steve Anderson Cancel 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>.