How to reorder the fields in the Shipping Address section?

We need to create an extension with the name checkout (vendor/app/code/theme_name/Checkout)

Inside that checkout folder, we need to create an etc folder, inside that we need di.xml file and module.xml

di.xml 
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="address_fields_order" type="JJ\Checkout\Plugin\Checkout\Block\LayoutProcessor" />
    </type>
</config>

module.xml 
<?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="JJ_Checkout" setup_version="1.0.1"></module>
</config>

2. Inside the checkout folder, we need to create a Plugin folder and inside that, we need 2 more folders Checkout and Block (Plugin->Checkout-> Block), and create LayoutProcessor.php file inside Block.

LayoutProcessor.php

<?php

namespace JJ\Checkout\Plugin\Checkout\Block;

class LayoutProcessor {

  /**
   * Position the telephone field after address fields
   *
   * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
   * @param array $jsLayout
   *
   * @return array
   */
   public function afterProcess(
      \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
      array  $jsLayout
    ) {
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']
       ['children']['street']['sortOrder']=3;
//       $jsLayout['components']['checkout']['children']['steps']['children']
//      ['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']
//       ['children']['country_id']['sortOrder'] = 1605;
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['firstname']['sortOrder'] = 1;
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['lastname']['sortOrder'] =2;
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['city']['sortOrder'] =4;
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['region_id']['sortOrder'] =5;
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['postcode']['sortOrder'] =6;
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['telephone']['sortOrder'] = 7;
      return $jsLayout;

    }
}

3. Inside the checkout folder we need to create a php file

registration.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'JJ_Checkout',
    __DIR__
);

Output :

Leave a comment Cancel reply