Magento 2: How to Move Billing Address before Payment Methods in Checkout Page

Hello Magento Friends,

Today I will provide a solution on How to Move Billing Address before Payment Methods on Magento 2 Checkout Page.

In default Magento 2, the billing address is displayed after the payment methods at the checkout page. Check the default checkout page in Magento 2.

If you have a custom requirement to display the billing address before the payment methods, you can use the below method.

Steps to Move Billing Address before Payment Methods in Checkout Page in Magento 2:

Step 1: Create a di.xml file in the below path.

{{magento_root}}/app/code/Vendor/Extension/etc/di.xml

Now add the below code snippet

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

Step 2: Create the plugin file LayoutProcessor.php as the following path.

{{magento_root}}/app/code/Vendor/Extension/Plugin/Block/Checkout/LayoutProcessor.php

Then include the below-mentioned code

<?php 

namespace Vendor\Extension\Plugin\Block\Checkout;

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

class LayoutProcessor
{
    public function afterProcess(
        Checkout $subject,
        array $jsLayout
    ): array {
        $paymentLayout = $jsLayout['components']['checkout']['children']['steps']
        ['children']['billing-step']['children']['payment']['children'];

        if (isset($paymentLayout['afterMethods']['children']['billing-address-form'])) {
            $jsLayout['components']['checkout']['children']['steps']
            ['children']['billing-step']['children']['payment']['children']
            ['beforeMethods']['children']['billing-address-form']
                = $paymentLayout['afterMethods']['children']['billing-address-form'];

            unset($jsLayout['components']['checkout']['children']['steps']
            ['children']['billing-step']['children']['payment']
            ['children']['afterMethods']['children']['billing-address-form']);
        }
        return $jsLayout;
    }
}

After implementing the above steps, you can go to the checkout page and see that the billing address is displayed before the payment methods.

Conclusion:

Hence, this way, you can Move the Billing Address before Payment Methods on Magento 2 Checkout Page. Using Magento 2 Custom Checkout Fields Extension, you can customize the checkout page by adding custom fields.

Share the tutorial with your friends and stay in touch with us for more solutions.

Happy Coding!