---
title: "Magento 2: How to Move Billing Address before Payment Methods in Checkout Page"
url: "https://magecomp.com/blog/magento-2-move-billing-address-before-payment-methods-in-checkout-page/"
date: "2023-03-27T16:29:53+00:00"
modified: "2025-02-13T12:33:18+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "How To"
  - "Magento 2"
word_count: 332
reading_time: "2 min read"
summary: "Hello Magento Friends,
Today I will provide a solution on How to Move Billing Address before Payment Methods on Magento 2 Checkout Page."
description: "Default Magento display billing address after payment method Learn to Move Billing Address before Payment Methods in Magento 2 Checkout Page."
keywords: "How To, Magento 2"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Magento 2: How to Get Custom Attribute Value of Shipment Using REST API"
    url: "https://magecomp.com/blog/magento-2-get-custom-attribute-value-of-shipment-using-rest-api/"
  - title: "How to Clear Cache For Specific CMS Page Programmatically in Magento 2?"
    url: "https://magecomp.com/blog/clear-cache-for-specific-cms-page-programmatically-in-magento-2/"
  - title: "How to Change Cross-Sell Product Limit in Magento 2?"
    url: "https://magecomp.com/blog/change-cross-sell-product-limit-magento-2/"
---

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

_Published: March 27, 2023_  
_Author: Dhiren Vasoya_  

![How to Move Billing Address before Payment Methods in Checkout Page in M2](https://magecomp.com/blog/wp-content/uploads/2023/03/How-to-Move-Billing-Address-before-Payment-Methods-in-Checkout-Page-in-M2-1024x512.webp)

**Hello Magento Friends,**

Today I will provide a solution on How to Move Billing Address before Payment Methods on Magento 2 Checkout Page.
[![Hire Magento Programmer](https://magecomp.com/blog/wp-content/uploads/2025/02/Hire-Magento-Programmer-CTA-2.webp)](https://magecomp.com/services/hire-magento-programmer/)

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.
[![billing address after payment method magento 2](https://magecomp.com/blog/wp-content/uploads/2023/03/billing-address-after-payment-method-magento-2.png)](https://magecomp.com/blog/wp-content/uploads/2023/03/billing-address-after-payment-method-magento-2.png)

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="MagentoCheckoutBlockCheckoutLayoutProcessor">
        <plugin name="Checkout_ICustom"
                type="VendorExtensionPluginBlockCheckoutLayoutProcessor"/>
    </type>

</config>
```

[![Magento version upgrade](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-2-Version-Upgrade-CTA-2.webp)](https://magecomp.com/services/magento-upgrade-services/)

**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 VendorExtensionPluginBlockCheckout;

use MagentoCheckoutBlockCheckoutLayoutProcessor 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.
[![billing address before payment method magento 2](https://magecomp.com/blog/wp-content/uploads/2023/03/billing-address-before-payment-method-magento-2.png)](https://magecomp.com/blog/wp-content/uploads/2023/03/billing-address-before-payment-method-magento-2.png)

## Conclusion:
Hence, this way, you can Move the Billing Address before Payment Methods on Magento 2 Checkout Page. Using [**Magento 2 Custom Checkout Fields**](https://magecomp.com/magento-2-custom-checkout-fields.html) 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.
[![Magento Malware Removal](https://magecomp.com/blog/wp-content/uploads/2023/04/Magento-Malware-Removal-CTA-1.webp)](https://magecomp.com/magento-malware-removal.html)

**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/magento-2-move-billing-address-before-payment-methods-in-checkout-page/](https://magecomp.com/blog/magento-2-move-billing-address-before-payment-methods-in-checkout-page/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-10-08 07:33:17 UTC_