How to Move Billing Address Before the Payment Method in checkout Magento2?

By Default, In Magento2 Billing address is displayed with the Payment method, and the second option to display billing address is on the Payment page.

If you have a custom requirement like, Display the Billing address before all the payment methods you need to do customization for that.

Create a di.xml file at the location,
app/code/Magemonkeys/BillingAddressBeforePayment/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">
    <!-- Set Billing address above the payment method plugin -->
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="move_billing_address_above_payment_method"
                type="Magemonkeys\BillingAddressBeforePayment\Plugin\Block\Checkout\LayoutProcessor"/>
    </type>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<plugin name="move_billing_address_above_payment_method"

type="Magemonkeys\BillingAddressBeforePayment\Plugin\Block\Checkout\LayoutProcessor"/>

</type>

</config>

Based on the XML file, Create a Plugin Class, app/code/Magemonkeys/BillingAddressBeforePayment/Plugin/Block/Checkout/LayoutProcessor.php

<?php declare(strict_types=1);

namespace Magemonkeys\BillingAddressBeforePayment\Plugin\Block\Checkout;

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

/**
 * Move Billing address to top
 */
class LayoutProcessor
{
    /**
     * @param CheckoutLayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        CheckoutLayoutProcessor $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;
    }
}

<?php declare(strict_types=1);

namespace Magemonkeys\BillingAddressBeforePayment\Plugin\Block\Checkout;

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

/**

* Move Billing address to top

class LayoutProcessor

{

/**

* @param CheckoutLayoutProcessor $subject

* @param array $jsLayout

* @return array

public function afterProcess(

CheckoutLayoutProcessor $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;

}

before method is used to display content before the payment methods.

Clear the cache and go to the checkout page to see the billing address. It will be at the top of the payment page.

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-63e0a00cb27aa140644472/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Magento Certified Developer

Hire J. Lakum

Let’s have a call

Fill the form & Get Installation Support