How to editing Magento Checkout

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 the path to a component which you are planning 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.

Hope this article will help you in some way, You can see useful articles in the next articles.

Anything you need support from Magento 2 feel free to contact us at Alothemes and

Phone: (+84)865633728