Magento 2 – Change the order of the fields in the checkout

A problem, which we have again and again with German online shops, when we set up Magento, is, among other things, the wrong order of the address fields in the checkout area.

Of course you can also put the fields in the order cityZip code let, however, this always leads to it, that customers fill in the fields in the order they are familiar with and then when creating (automatic) Shipping labels gets into trouble.

So, as always, we swap the fields in the desired order. In Magento 1 this was very much easy to do, because you just had to find the right PHTML and put the fields in the correct order. in Magento 2 it works a little differently by creating the file checkout_index_index.xml and in the folder app / design / frontend /[Theme]/[designation]/Magento_Checkout / layout / store.

This file then contains the following content:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
      <referenceBlock name="checkout.root">
          <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">
                                                      <!-- The name of the form the field belongs to -->
                                                      <item name="shipping-address-fieldset" xsi:type="array">
                                                          <item name="children" xsi:type="array">
                                                              <item name="city" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">600</item>
                                                              </item>
                                                              <item name="region_id" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">800</item>
                                                              </item>
                                                              <item name="street" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">4</item>
                                                              </item>
                                                              <item name="postcode" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">500</item>
                                                              </item>
                                                              <item name="country_id" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">700</item>
                                                              </item>
                                                              <item name="lastname" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">2</item>
                                                              </item>
                                                              <item name="firstname" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">1</item>
                                                              </item>
                                                              <item name="company" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">3</item>
                                                              </item>
                                                              <item name="telephone" xsi:type="array">
                                                                  <item name="sortOrder" xsi:type="string">900</item>
                                                              </item>
                                                          </item>
                                                      </item>
                                                  </item>
                                              </item>
                                          </item>
                                      </item>
                                  </item>
                              </item>
                          </item>
                      </item>
                  </item>
              </argument>
          </arguments>
      </referenceBlock>
    </body>
</page>

After the file is created and uploaded, it is best to execute the following SSH command:

php bin/magento cache:clean

The fields are then in the correct order.

Noticeable is one thing: “street” is not recognized correctly. If you assign the order normal from 1-8 becomes the address- / Street line(n) always at the end, appear behind all other address fields. But you assign all fields, that appear behind the street should be one number larger / equal 100 and the fields, that appear in front of the street should be one number smaller / equal 50, the order is correct. You can also clip your own entry for street at the top of the xml.

Verwendet in Magento CE 2.4.2

Published by Covos

Since 2009 I have been working intensively with Magento. I started with the creation and operation of B2C stores. This was extended through my work in the logistics sector. This resulted first specialized B2E systems. Today I work day-a day with exciting B2C, B2B- and B2E projects and reports in this blog about challenges and give insider tips.

Leave a Reply

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