Magento 2 – Checkout. Remove “New Address” button from billing/shipping address with module or theme

by

The question:

I want to disable the “new address” button from checkout page in Magento 2.
Will it be easy with the theme or create a new module?

Magento 2 – Checkout. Remove the “New Address” button from billing/shipping address with module or theme.

Please help.

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

1) Override shipping.html

-> With Custom Theme:

Copy shipping.html from vendor/magento/module-checkout/view/frontend/web/template/shipping.html

to app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/template/shipping.html

-> With Custom Module:

Create requirejs-config.js app/code/{Vendor}/{Module}/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
          'Magento_Checkout/template/shipping.html': 
              'Vendor_Module/template/shipping.html'
        }
  }
};

2) Now remove following html from shipping.html

<!-- Address form pop up -->
<if args="!isFormInline">
    <button type="button"
            class="action action-show-popup"
            click="showFormPopUp"
            visible="!isNewAddressAdded()">
        <span translate="'New Address'" />
    </button>
    <div id="opc-new-shipping-address"
         visible="isFormPopUpVisible()"
         render="shippingFormTemplate" />
</if>

3) Now run the following commands:

php bin/magento setup:static-content:deploy

php bin/magento setup:upgrade

Method 2

For hiding “New address” from billing address step in checkout. We need to override the billing-address.js from vendormagentomodule-checkoutviewfrontendwebjsviewbilling-address.js and comment the below code:

addressOptions.push(newAddressOption);

Method 3

Try using these codes in vendormagentomodule-checkoutviewfrontendwebjsviewbilling-address.js:

var lastSelectedBillingAddress = null,

countryData = customerData.get('directory-data'),
addressOptions = addressList().filter(function (address) {
    return address.getType() == 'customer-address';
});

Now, remove pub/static/frontend/*. Finally, clear the cache. You will find that the “New Address” button has been removed.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment