Magento 2 Checkout – Remove New Address Button from Billing/Shipping Address

billing-addresscheckoutmagento2magento2.3shipping-address

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.

Best Answer

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

Related Solutions

Magento2 – Update Customer Billing Address on Place Order Button

Solved the above issue. If you want to avoid the update and cancel button under the billing address and implement the update functionality when click on place order button, no need to go through the above way.

File path: _vendor/magento/module-checkout/view/frontend/web/js/view/payment/default.js

First copy this file and place in your theme folder. Then, just replace this below code with the placeOrder function and hide the update and cancel button using css- display:none;

        placeOrder: function (data, event)
        {
            if($('.billing-address-form:visible').length == 0)
            {
                $('.action-update').click();
                var self = this;
                if (event) {
                    event.preventDefault();
                }
                if (this.validate() && additionalValidators.validate()) {
                    this.isPlaceOrderActionAllowed(false);

                    this.getPlaceOrderDeferredObject()
                        .fail(
                            function () {
                                self.isPlaceOrderActionAllowed(true);
                            }
                        ).done(
                            function () {
                                self.afterPlaceOrder();

                                if (self.redirectAfterPlaceOrder) {
                                    redirectOnSuccessAction.execute();
                                }
                            }
                        );

                    return true;
                }

                return false;
            }
            else
            {
                var firstname = $("input[name=firstname]").val();
                var lastname = $("input[name=lastname]").val();
                var street = $("input[name='street[0]']").val();
                var city = $("input[name=city]").val();
                var regionid = $("input[name=region_id]").val();
                var postcode = $("input[name=postcode]").val();
                var countryid = $("input[name=country_id]").val();
                var telephone = $("input[name=telephone]").val();

                if((firstname == '') || (lastname == '') || (street = '') || (city == '') || (regionid = '') || (postcode = '') || (countryid == '') || (telephone = ''))
                {
                    $('.action-update').click();
                }
            }

        },

Magento2 Checkout – Remove ‘My Billing and Shipping Address Are the Same’

Overwrite:

vendor/magento/module-checkout/view/frontend/web/template/billing-address.html

in your custom theme:

app/design/frontend/<customTheme>/<customTheme>/Magento_Checkout/web/template/billing-address.html

And remove:

<div class="billing-address-same-as-shipping-block field choice" data-bind="visible: canUseShippingAddress()">
    <input type="checkbox" name="billing-address-same-as-shipping"
           data-bind="checked: isAddressSameAsShipping, click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-' + getCode($parent)}"/>
    <label data-bind="attr: {for: 'billing-address-same-as-shipping-' + getCode($parent)}"><span
            data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
</div>

So the overwritten file should be like this:

<div class="checkout-billing-address">

<!-- ko template: 'Magento_Checkout/billing-address/details' --><!-- /ko -->
<fieldset class="fieldset" data-bind="visible: !isAddressDetailsVisible()">
    <!-- ko template: 'Magento_Checkout/billing-address/list' --><!-- /ko -->
    <!-- ko template: 'Magento_Checkout/billing-address/form' --><!-- /ko -->
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action action-update" type="button" data-bind="click: updateAddress">
                <span data-bind="i18n: 'Update'"></span>
            </button>
            <button class="action action-cancel" type="button" data-bind="click: cancelAddressEdit">
                <span data-bind="i18n: 'Cancel'"></span>
            </button>
        </div>
    </div>
</fieldset>

UPDATE:

In later versions of Magento, keeping line

<render args="detailsTemplate"/>

prior to

<fieldset class="fieldset" data-bind="visible: !isAddressDetailsVisible()">

is important to retain the functionality.

Best Answer

Related Solutions

Magento2 – Update Customer Billing Address on Place Order Button

Magento2 Checkout – Remove ‘My Billing and Shipping Address Are the Same’

Related Topic