1

Is there a way to reorder/sort magento 2 checkout form fields from admin. In admin I just find to display/hide fields for checkout form.

I want to sort like ( Move firstname to bottom or move any other field to another place )

So is there any option to sort the checkout form fields in magento admin or I have to go with coding.

1 Answer 1

5

Magento 2 didn't provide the checkout reorder/sort checkout fileds at admin side, you can reorder/sort checkout fields using code.

Try the below solution,

First way:

Override the checkout_index_index.xml file in your custom module or theme, and add the below code.

<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="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/shipping</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="lastname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">20</item>
                                                                </item>
                                                                <item name="firstname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">21</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

You can set the sortOrder as per your requirement for particular fileds.

Second Way:

create a plugin for the function process() of the class LayoutProcessor, which is responsible of bringing the fields in checkout.

declare your plugin in di.xml file

<?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="custom_checkout_address_fields_order" type="Vendor\Module\Plugin\Checkout\Block\LayoutProcessor" />
    </type>
</config>

And the afterProcess() function

<?php

namespace Vendor\Module\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
    ) {

       //Shipping Address
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']
       ['children']['firstname']['sortOrder'] = 100;

      //Billing Address on payment method
       if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['payments-list']['children']
       )) {
           $paymentList = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['payments-list']['children'];

           foreach ($paymentList as $key => $payment) {
               /* firstname */
               $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                   ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                   ['firstname']['sortOrder'] = 100;
               }
       }

       //Billing Address on payment page
       if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['afterMethods']['children']
       )) {
           /* firstname */
           $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
           ['children']['firstname']['sortOrder'] = 100;

       }
    return $jsLayout;
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.