We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

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="MagentoCheckoutBlockCheckoutLayoutProcessor">
        <plugin name="move_billing_address_above_payment_method"
                type="MagemonkeysBillingAddressBeforePaymentPluginBlockCheckoutLayoutProcessor"/>
    </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 MagemonkeysBillingAddressBeforePaymentPluginBlockCheckout;

use MagentoCheckoutBlockCheckoutLayoutProcessor 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.

field_5bfb909c5ccae

    Recent Articles
    Get a Free Quote

      Let’s initiate a discussion!!