1

I am working on magento 2.1.3. I want to uncheck My billing and shipping address are the same checkbox in checkout payment page based on shipping method.

If shipping method is Store Pickup i want to uncheck checkbox by default.

4
  • Did you find a solution for this? I also want the same, the checkbox to be unchecked on page load. Mar 10, 2017 at 4:19
  • not yet .... :( Mar 12, 2017 at 7:42
  • I am also facing same issue. Is there anyone who found the solution for same.
    – Bharat
    Apr 1, 2017 at 7:18
  • @SudheeshKSurendran, found any solution? May 30, 2019 at 12:02

2 Answers 2

10

Disclaimer: I am an author of an article at the end of this answer.

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

4
  • Unable to make it work in 2.2.3. Anyway you can look in to it? Thank you Mar 25, 2018 at 12:14
  • Does not work on 2.1.12
    – gabehou
    Apr 21, 2018 at 2:51
  • the question is need to uncheck based on the shipping method May 30, 2019 at 11:58
  • How Can we get Shipping Method using this? Jul 19 at 5:52
6

Just copy this file in your theme : vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js

Checkbox on the payment section depends on this js variable 'isAddressSameAsShipping' which is define in above file.

  this._super()
                .observe({
                    selectedAddress: null,
                    isAddressDetailsVisible: quote.billingAddress() != null,
                    isAddressFormVisible: !customer.isLoggedIn() || addressOptions.length === 1,
                    isAddressSameAsShipping: false,
                    saveInAddressBook: 1
                });

By default, the variable is false, but this function change the value of this variable from false to true, if quote is not Virtual:

  quote.billingAddress.subscribe(function (newAddress) {
            if (quote.isVirtual()) {
                this.isAddressSameAsShipping(false);
            } else {
                this.isAddressSameAsShipping(
                    newAddress != null &&
                    newAddress.getCacheKey() == quote.shippingAddress().getCacheKey()  //return true
                );
            }

            if (newAddress != null && newAddress.saveInAddressBook !== undefined) {
                this.saveInAddressBook(newAddress.saveInAddressBook);
            } else {
                this.saveInAddressBook(1);
            }
            this.isAddressDetailsVisible(true);
        }, this);

Just change above 'initObservable' function like following:

    initObservable: function () {
        this._super()
            .observe({
                selectedAddress: null,
                isAddressDetailsVisible: quote.billingAddress() != null,
                isAddressFormVisible: !customer.isLoggedIn() || addressOptions.length === 1,
                isAddressSameAsShipping: false,
                saveInAddressBook: 1
            });
        quote.billingAddress.subscribe(function (newAddress) {
            if (quote.isVirtual()) {
                this.isAddressSameAsShipping(false);
            } 
            if (newAddress != null && newAddress.saveInAddressBook !== undefined) {
                this.saveInAddressBook(newAddress.saveInAddressBook);
            } else {
                this.saveInAddressBook(1);
            }
            this.isAddressDetailsVisible(true);
        }, this);
        return this;
    },
7
  • Can you please explain this code , how it is different then default code ? Apr 8, 2020 at 8:28
  • 1
    You need to add this just start of function: this._super() .observe({ selectedAddress: null, isAddressDetailsVisible: quote.billingAddress() != null, isAddressFormVisible: !customer.isLoggedIn() || addressOptions.length === 1, isAddressSameAsShipping: false, saveInAddressBook: 1 });
    – D Singh
    Apr 8, 2020 at 8:31
  • do i need to add this "this._super() .observe({ selectedAddress: null, isAddressDetailsVisible: quote.billingAddress() != null, isAddressFormVisible: !customer.isLoggedIn() || addressOptions.length === 1, isAddressSameAsShipping: false, saveInAddressBook: 1 });" code seperately in "initialize: function " function? Apr 8, 2020 at 8:56
  • Yes add this in initObservable/ initialize function
    – D Singh
    Apr 8, 2020 at 9:41
  • While changing shipping address, the checkbox "billing address same as shipping" gets ticked , how to fix that ? Any thoughts ? Apr 17, 2020 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.