Magento – How to move the phone number field from checkout page magento 2

checkoutfieldlayoutmagento2shipping-address

I want to move to the phone field. My XML

<?xml version="1.0"?>


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="checkout_cart_item_renderers"/>
<head>
    <css src="css/order-confirmation.css"/>
    <css src="css/login-register.css"/>
</head>
<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="telephone" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">90</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>

                                    <item name="email-step" xsi:type="array">
                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/user-login</item>
                                        <item name="sortOrder" xsi:type="string">0</item>
                                        <item name="children" xsi:type="array">
                                            <item name="customer-email" xsi:type="array">
                                                <item name="sortOrder" xsi:type="string">50</item>
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
                                                <item name="template" xsi:type="string">Magento_Checkout/form/element/email</item>
                                                <item name="displayArea" xsi:type="string">login-methods</item>
                                                <item name="tooltip" xsi:type="array">
                                                    <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
                                                </item>
                                                <item name="children" xsi:type="array">
                                                    <item name="before-login-form" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="displayArea" xsi:type="string">before-login-form</item>
                                                        <item name="children" xsi:type="array">
                                                            <!-- before login form fields -->
                                                        </item>
                                                    </item>
                                                    <item name="additional-login-form-fields" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="displayArea" xsi:type="string">additional-login-form-fields</item>
                                                        <item name="children" xsi:type="array">
                                                            <!-- additional login form fields -->
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>

                                    <!-- start of summary section -->
                                <item name="summary" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
                                    <item name="displayArea" xsi:type="string">before-login-form</item>
                                    <item name="sortOrder" xsi:type="string">100</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Magento_Checkout/summary</item>
                                    </item>
                                    <item name="children" xsi:type="array">
                                        <item name="totals" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item>
                                            <item name="displayArea" xsi:type="string">totals</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">Magento_Checkout/summary/totals</item>
                                            </item>
                                            <item name="children" xsi:type="array">
                                                <!-- sort order for this totals is configured on admin panel-->
                                                <!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order -->
                                                <item name="subtotal" xsi:type="array">
                                                    <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="title" xsi:type="string" translate="true">Cart Subtotal</item>
                                                    </item>
                                                </item>
                                                <item name="shipping" xsi:type="array">
                                                    <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="title" xsi:type="string" translate="true">Shipping</item>
                                                        <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
                                                    </item>
                                                </item>
                                                <item name="grand-total" xsi:type="array">
                                                    <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="title" xsi:type="string" translate="true">Order Total</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                        <item name="itemsBefore" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <!-- merge your components here -->
                                            </item>
                                        </item>
                                        <item name="cart_items" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
                                            <item name="children" xsi:type="array">
                                                <item name="details" xsi:type="array">
                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="thumbnail" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                                            <item name="displayArea" xsi:type="string">before_details</item>
                                                        </item>
                                                        <item name="subtotal" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                                            <item name="displayArea" xsi:type="string">after_details</item>
                                                        </item>
                                                    </item>
                                                </item>

                                            </item>
                                        </item>
                                        <item name="itemsAfter" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <!-- merge your components here -->
                                            </item>
                                        </item>
                                    </item>
                                </item>

                                <!-- end of summary -->
                                </item>
                                <!-- end of step One -->
                            </item>                                
                                <item name="sidebar" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="componentDisabled" xsi:type="boolean">true</item>
                                    </item>
                                </item>

                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

but this code is not working for me. I removed pub/static and deployed new content but no result.

Best Answer

You need create plugin for move the phone number field from checkout page. I have created plugin for move telephone in checkout page for shipping and billing address.

You can change sortOrder as per your requirement. follow below file path to create custom module and mange sortorder.

File path: magento/app/code/Vendor/CheckoutAddress/registration.php

<?php

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

File path: magento/app/code/Vendor/CheckoutAddress/etc/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="Vendor_CheckoutAddress" >
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

File path: magento/app/code/Vendor/CheckoutAddress/etc/frontend/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="vendor_checkoutAddress_plugin_checkout_layoutProcessor" type="Vendor\CheckoutAddress\Plugin\Block\Checkout\LayoutProcessor" sortOrder="50"/>
    </type>
</config>

File path: magento/app/code/Vendor/CheckoutAddress/Plugin/Block/Checkout/LayoutProcessor.php

<?php
namespace Vendor\CheckoutAddress\Plugin\Block\Checkout;

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

class LayoutProcessor {
  /**
   * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
   * @param array $jsLayout
   *
   * @return array
   */
   public function afterProcess(CheckoutLayoutProcessor $subject, $jsLayout) {

       /* For Shipping Address */
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']
       ['children']['telephone']['sortOrder'] = 70;

       /* For 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) {
               /* telephone */
               $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                   ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                   ['telephone']['sortOrder'] = 70;
               }
       }

       /* For Billing Address on payment page */
       if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['afterMethods']['children']
       )) {
           /* telephone */
           $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
           ['children']['telephone']['sortOrder'] = 70;
       }
    return $jsLayout;
  }
}
Related Topic