Magento 2 Set "Billing Same as Shipping" default to unchecked

Question

In the Magento 2 checkout process, the second screen displays your shipping address again with a checkbox that is checked by default.

How do I make that unchecked by default, so the user can enter their billing info?

Answer 1

Disclaimer: I am an author of an article at the end of this answer. The following solution tested on M2.1.4

Magento best practices way.

1. Create a simple Magento 2 extension.

2. Create a file app/code/Vendor/Module/view/frontend/requirejs-config.js with the 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'
     }
   }};
   

3. Copy file 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.

4. Edit file app/code/Vendor/Module/view/frontend/web/js/checkout-data-resolver.js and comment out code 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());
           }*/
       }
   };
   

5. Copy file 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.

6. In app/code/Vendor/Module/view/frontend/web/js/shipping-save-processor/default.js comment out code around line 34:

   saveShippingInformation: function () {
   var payload;
   
   /*if (!quote.billingAddress()) {
       selectBillingAddressAction(quote.shippingAddress());
   }*/
   
   payload = {
   

7. Delete folder pub/static/frontend:

    rm -rf pub/static/frontend
   

8. Regenerate static content:

    php bin/magento setup:static-content:deploy
   

9. Clear magento cache and you are all set.

Dirty way

Instead of steps 1 through 6 simply edit the file vendor/magento/module-checkout/view/frontend/web/js/model/checkout-data-resolver.js and comment out code around line 231 as in step 4 and edit the file vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor/default.js and comment code code around line 34 as in step 6.

Repeat steps 7,8,9.

Originally published as https://www.goivvy.com/blog/magento-2-set-billing-shipping-address-unchecked-default-checkout

Answer 2

Instead of "dirty way" and modyfing js files in vendor folders (which will be discarded as soon as you update the code) you can copy files

vendor/magento/module-checkout/view/frontend/web/js/model/checkout-data-resolver.js to app/design/frontend/Package/Theme/Magento_Checkout/web/js/model/checkout-data-resolver.js

and vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor/default.js to app/design/frontend/Package/Theme/Magento_Checkout/web/js/model/shipping-save-processor/default.js and edit them there.

First solution proposed by Konstantin will override this file in all themes and is better if you need to make it permanent. The above one works only in one theme as is better suited for situation when you need to do this only for specific store views.

Answer 3

I realise this is an old post, although this may be helpful to someone reaching this in the future.

The above answers detailed above suggest to Map a JS file, to a copy of the same JS file with modifications. I'd suggest against this, unless absolutely necessary, as when you upgrade the site to higher Magento 2 versions, things can change in the original JS file, which can cause more hassle with the more JS files (and functions) which get over-written.

Instead, I would suggest using a Javascript Mixin. For reference, you can read Magento's documentation: https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html , although I will also post the full answer below:

In our case, since we are just commenting out some core code, we can simply just over-ride the 1 specific function to remove it (instead of over-riding the entire js file with map).

Magento_Checkout/requirejs-config.js

var config = {
config: {
    mixins: {
        'Magento_Checkout/js/model/checkout-data-resolver': {
            'Magento_Checkout/js/model/checkout-data-resolver-mixin': true
        },
        'Magento_Checkout/js/model/shipping-save-processor/default': {
            'Magento_Checkout/js/model/shipping-save-processor/default-mixin': true
        }
    }
}

};

src/design/frontend/vendor/theme/Magento_Checkout/web/js/model/checkout-data-resolver-mixin.js

    define([
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/select-billing-address',
    'underscore'
], function(
    addressList,
    quote,
    selectBillingAddress,
    _
) {
    'use strict';
    /** Over-ride applyBillingAddress function to
     * comment out un-wanted core code.
     * Makes the 'Billing and shipping address are the same' unticked
     * by default at checkout.
     */
    return function(checkoutDataResolver) {
        /**
         * Apply resolved billing address to quote
         * Uncheck Billing Address same as shipping as default.
         */
        checkoutDataResolver.applyBillingAddress = function() {
            var shippingAddress,
            isBillingAddressInitialized;
            if (quote.billingAddress()) {
                selectBillingAddress(quote.billingAddress());
                return;
            }
            if (quote.isVirtual() || !quote.billingAddress()) {
                isBillingAddressInitialized = addressList.some(function (addrs) {
                    if (addrs.isDefaultBilling()) {
                        selectBillingAddress(addrs);
                        return true;
                    }
                    return false;
                });
            }
            shippingAddress = quote.shippingAddress();
            // if (!isBillingAddressInitialized &&
            //     shippingAddress &&
            //     shippingAddress.canUseForBilling() &&
            //     (shippingAddress.isDefaultShipping() || !quote.isVirtual())
            // ) {
            //     //set billing address same as shipping by default if it is not empty
            //     selectBillingAddress(quote.shippingAddress());
            // }
        };
        return checkoutDataResolver;
    };
});

src/design/frontend/vendor/theme/Magento_Checkout/web/js/model/shipping-save-processor/default-mixin.js

    define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/resource-url-manager',
    'mage/storage',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function(
    ko,
    quote,
    resourceUrlManager,
    storage,
    paymentService,
    methodConverter,
    errorProcessor,
    fullScreenLoader,
    selectBillingAddressAction,
    payloadExtender
) {
    'use strict';
    /** Over-ride saveShippingInformation function to
     * comment out un-wanted core code.
     * Makes the 'Billing and shipping address are the same' unticked
     * by default at checkout.
     */
    return function(shippingSaveProcessorDefault) {
        /**
         * @return {jQuery.Deferred}
         */
         shippingSaveProcessorDefault.saveShippingInformation = function() {
            var payload;
            // if (!quote.billingAddress() && quote.shippingAddress().canUseForBilling()) {
            //     selectBillingAddressAction(quote.shippingAddress());
            // }
            payload = {
                addressInformation: {
                    'shipping_address': quote.shippingAddress(),
                    'billing_address': quote.billingAddress(),
                    'shipping_method_code': quote.shippingMethod().method_code,
                    'shipping_carrier_code': quote.shippingMethod().carrier_code
                }
            };
            payloadExtender(payload);
            fullScreenLoader.startLoader();
            return storage.post(
                resourceUrlManager.getUrlForSetShippingInformation(quote),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                    fullScreenLoader.stopLoader();
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                    fullScreenLoader.stopLoader();
                }
            );
        };
        return shippingSaveProcessorDefault;
    };
});

Hope this helps.