Change position of Billing address in Magento 2

Question

I want to change default billing address position which is coming under the payment information, I need it before shipping address(same as magento 1).

Anyone have any idea to achieve it, Please help?

Answer 1

We need to modify applyBillingAddress function in vendor/magento/module-checkout/view/frontend/web/js/model/checkout-data-resolver.js around line 231:

And comment out this part:

/*                if (shippingAddress &&
                    shippingAddress.canUseForBilling() &&
                    (shippingAddress.isDefaultShipping() || !quote.isVirtual())
                ) {
                    selectBillingAddress(quote.shippingAddress());
                }  
*/
And commend out code around line 34:

/*
           if (!quote.billingAddress()) {
               selectBillingAddressAction(quote.shippingAddress());
           }  
*/

But we can't modify the core javascript files itself (Magento 2 best practices!).

Instead we will create a simple Magento 2 module and will create a file app/code/Vendor/Module/view/frontend/requirejs-config.js with the following content:

var config = {
map: {
'*': {
'Magento_Checkout/js/model/checkout-data-resolver':
     'Vendor_Module/js/checkout-data-resolver'
,'Magento_Checkout/js/model/shipping-save-processor/default':
     'Vendor_Module/js/shipping-save-processor/default'
 }
}};

Then copy vendor/magento/module-checkout/view/frontend/web/js/model/checkout-data-resolver.js to app/code/Vendor/Module/view/frontend/web/js/checkout-data-resolver.js and comment out in app/code/Vendor/Module/view/frontend/web/js/checkout-data-resolver.js around line 231:

applyBillingAddress: function () { var shippingAddress;

if (quote.billingAddress()) {
    selectBillingAddress(quote.billingAddress());

    return;
}  
shippingAddress = quote.shippingAddress();

/*if (shippingAddress &&
    shippingAddress.canUseForBilling() &&
    (shippingAddress.isDefaultShipping() || !quote.isVirtual())
) {
    selectBillingAddress(quote.shippingAddress());
}*/

And copy vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor/default.js to app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor/default.js and in app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor/default.js comment out code around line 34:

'use strict';

return {
    saveShippingInformation: function () {
        var payload;

        /*if (!quote.billingAddress()) {
            selectBillingAddressAction(quote.shippingAddress());
        }*/

        payload = {
            addressInformation: {
                shipping_address: quote.shippingAddress(),
                billing_address: quote.billingAddress(),

After that delete pub/static/frontend folder regenerate your static content:

php bin/magento setup:static-content:deploy

Clear magento cache and you should be all set.