5

I want to change the ordering of Address fields for both shipping address and billing address on checkout page

I have changed the order of shipping Address and is working fine (thanks to this answer)

The following is the content of My theme's checkout_index_index.xml layout file

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="country_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">85</item>
                                                                </item>
                                                                <item name="region_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">87</item>
                                                                </item>
                                                                <item name="city" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">90</item>
                                                                </item>
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">91</item>
                                                                </item>
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">94</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

But when I tried to update order of Billing address it did not changed. I have also checked the original checkout_index_index.xml layout file in Magento_Checkout module there is not fields in billing-step.

Do anyone know how to do this ?

Improve this question
2
  • Did you found any solution?
    – George George
    Commented Apr 1, 2017 at 18:21
  • No, I did not find solution to it I end up using the default order. but if you do, be kind to share it so it may help others.
    – Arun Karnawat
    Commented Apr 1, 2017 at 19:06

3 Answers 3

Reset to default
11

Here is an example (using Plugin) for changing field order, disabling field or adding missing field to address.

File: etc/di.xml

<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin disabled="false" name="Vendor_Module_Plugin_Block_Checkout_LayoutProcessor" sortOrder="99"
                type="Vendor\Module\Plugin\Block\Checkout\LayoutProcessor"/>
</type>

File: Plugin/Block/Checkout/LayoutProcessor.php

<?php

namespace Vendor\Module\Plugin\Block\Checkout;

use Magento\Checkout\Block\Checkout\LayoutProcessor as MageLayoutProcessor;

class LayoutProcessor
{
    public function afterProcess(MageLayoutProcessor $subject, $jsLayout)
    {

        /* config: checkout/options/display_billing_address_on = payment_method */
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list']['children']
        )) {

            foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['payments-list']['children'] as $key => $payment) {

                /* company */
                if (isset($payment['children']['form-fields']['children']['company'])) {

                    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                    ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                    ['company']['sortOrder'] = 0;
                }

                /* region & region_id */
                if (isset($payment['children']['form-fields']['children']['region'])) {

                    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                    ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                    ['region']['visible'] = false;

                    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                    ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                    ['region']['config']['componentDisabled'] = true;
                }
                if (isset($payment['children']['form-fields']['children']['region_id'])) {

                    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                    ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                    ['region_id']['visible'] = false;

                    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                    ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                    ['region_id']['config']['componentDisabled'] = true;
                }

                $method = substr($key, 0, -5);

                /* vat_id */
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                ['vat_id'] = [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'billingAddress' . $method,
                        'customEntry' => null,
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input',
                        'tooltip' => null,
                    ],
                    'dataScope' => 'billingAddress' . $method . '.vat_id',
                    'dataScopePrefix' => 'billingAddress' . $method,
                    'label' => __('VAT number'),
                    'provider' => 'checkoutProvider',
                    'sortOrder' => 1,
                    'validation' => [],
                    'options' => [],
                    'filterBy' => null,
                    'customEntry' => null,
                    'visible' => true,
                ];
            }
        }

        /* config: checkout/options/display_billing_address_on = payment_page */
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']
        )) {

            /* company */
            if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
                ['children']['company']
            )) {
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
                ['children']['company']['sortOrder'] = 0;
            }

            /* region & region_id */
            if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
                ['children']['region'])) {

                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
                ['children']['region']['visible'] = false;

                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
                ['children']['region']['config']['componentDisabled'] = true;
            }
            if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
                ['children']['region_id'])) {

                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
                ['children']['region_id']['visible'] = false;

                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
                ['children']['region_id']['config']['componentDisabled'] = true;
            }

            $method = 'shared';

            /* vat_id */
            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
            ['children']['vat_id'] = [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'billingAddress' . $method,
                    'customEntry' => null,
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input',
                    'tooltip' => null,
                ],
                'dataScope' => 'billingAddress' . $method . '.vat_id',
                'dataScopePrefix' => 'billingAddress' . $method,
                'label' => __('VAT number'),
                'provider' => 'checkoutProvider',
                'sortOrder' => 1,
                'validation' => [],
                'options' => [],
                'filterBy' => null,
                'customEntry' => null,
                'visible' => true,
            ];
        }

        return $jsLayout;
    }
}
Improve this answer
1
  • how do you save this value to the DB?
    – jibin george
    Commented Oct 15, 2019 at 15:04
3

I know its been a while since the question was asked but I had the same issue and found the solution for doing a field re-order for the billing address forms. In my case I need to move the telephone field above the country field.

Please see below for XML layout update:

<!-- Update field order -->
    <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="billing-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="payment" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="payments-list" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="sagepaysuiteserver-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="form-fields" xsi:type="array">
                                                                        <item name="children" xsi:type="array">
                                                                            <item name="telephone" xsi:type="array">
                                                                                <item name="sortOrder" xsi:type="string">114</item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                            <item name="checkmo-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="form-fields" xsi:type="array">
                                                                        <item name="children" xsi:type="array">
                                                                            <item name="telephone" xsi:type="array">
                                                                                <item name="sortOrder" xsi:type="string">114</item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
Improve this answer
2
  • If you need to debug it, take a look into \Magento\CustomerCustomAttributes\Block\Checkout\renderer::process(()
    – diazwatson
    Commented Jan 15, 2019 at 15:20
  • This solution is slightly less maintainable than the most upvoted answer (i.e. LayoutProcessor plugin) because you need to edit the xml whenever the list of payment methods changes.
    – rmoestl
    Commented Mar 29, 2023 at 8:54
2

Change sort order of billing address field

  • Create a custom module

  • create file etc/di.xml 

    <!-- Billing address form changes plugin -->
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin disabled="false" name="Namespace_Module_Plugin_Block_Checkout_LayoutProcessor" sortOrder="100"
        type="Namespace\Module\Plugin\Block\Checkout\LayoutProcessor"/>
</type>

  • Create layout processor block class

            <?php
        namespace Namespace\Module\Plugin\Block\Checkout;

        use Namespace\Module\Block\Checkout\LayoutProcessor as MagentoLayoutProcessor;


        class LayoutProcessor
        {

            public function afterProcess(MagentoLayoutProcessor $subject, $jsLayout)
            {
            if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children']
            )) {

                foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                     ['payment']['children']['payments-list']['children'] as $key => $payment) {

                /* company */
                if (isset($payment['children']['form-fields']['children']['company'])) {
                    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                    ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                    ['company']['sortOrder'] = 10;
                }


                }

                }

            }
            return $jsLayout;
            }
        }
Improve this answer
1
  • how do you save this value to the DB?
    – jibin george
    Commented Oct 15, 2019 at 15:04

Your Answer

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

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