1

I am trying to remove the "New Address" option in the billing address select. (I don't want customers to be able to add a new billing address).

enter image description here

I have tried hiding it via css: select[name="billing_address_id"]:last-child { display:none; } and also by jQuery: $("select[name=billing_address_id] option:last").remove();

I have also tried removing it from vendor\magento\module-checkout\view\frontend\web\js\view\billing-address.js:

        var lastSelectedBillingAddress = null,
        //newAddressOption = {
            /**
             * Get new address label
             * @returns {String}
             */
        //    getAddressInline: function () {
        //        return $t('New Address');
        //    },
        //    customerAddressId: null
        //},
        countryData = customerData.get('directory-data'),
        addressOptions = addressList().filter(function (address) {
            return address.getType() == 'customer-address';
        });

    addressOptions.push(newAddressOption);

But all 3 solutions have failed.

(of course I have refreshed the cache, deployed static content, deleted pub/static/frontend/*)

Anyone have a clue?

Thanks

Improve this question
1
  • Do you want to change this in inside theme or module?
    – Sohel Rana
    Sep 12, 2017 at 15:02

5 Answers 5

Reset to default
3

Your following solution must be work: I have also tried removing it from vendor\magento\module-checkout\view\frontend\web\js\view\billing-address.js:

Replace following code:


var lastSelectedBillingAddress = null,

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

//addressOptions.push(newAddressOption);

Also remove pub/static/frontend/* and clear cache.

NB: Don't modify core code directly.

Improve this answer
5
  • Thank you. Doesn't work though. No change.
    – sulman
    Sep 12, 2017 at 16:02
  • 1
    Did you disabled your browser cache? Try to hard refresh or disable js cache.
    – Sohel Rana
    Sep 12, 2017 at 16:06
  • Ahh that could be it :) Running tests now. Thanks!
    – sulman
    Sep 12, 2017 at 16:30
  • @SohelRana, above code removed New address option from drop down, but when i click checkbox, a form appears to edit address, can we avoid it?
    – Jafar Pinjar
    Mar 27, 2019 at 11:27
  • @SohelRana,I want to add please select option in drop down,can you please suggest how can do?
    – akgola
    Jun 18, 2020 at 11:06
1

The above solution is little old as code has been moved from billing-address.js to billing-adress/list.js. Please follow below steps to remove Add New Address from Billing Address dropdown.

Create Mixin:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/billing-address/list': {
                '<ventor_module>/js/view/billing-address-list-mixin': true
            }
        }
    }
};

Then JS file:

define([
    'uiComponent',
    'Magento_Customer/js/model/address-list',
    'mage/translate',
    'Magento_Customer/js/model/customer'
], function (Component, addressList, $t, customer) {
    'use strict';

    return function (Component) {
        return Component.extend({
            /**
             * @returns {Object} Chainable.
             */
            initConfig: function () {
                this._super();
                //Below code will pop Add New Address option from Array
                this.addressOptions.pop();
                return this;
            },
        });
    }
});
Improve this answer
0

We had a requirement to remove the New Address button from the shipping address and billing address from shipping and Payment steps respectfully based on a flag that was set in the customerData. To achieve this, we followed the given approach:

Override the JS and template files from vendor/magento/module-checkout/ module to your theme folder and follow the steps given below:

app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/js/view/shipping.js [around Line no. 75]

Add new line at: Line no. 30

'Magento_Customer/js/customer-data'

Add new line at: Line no. 53

shippingRateService,
customerData

Now customerData is accessible.

Add new line at: Line No. 68

displayNewAddressPopup: customerData.get('restrict_addr'),

after addition of this line, the code should look like:

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/shipping-rates-validator',
    'Magento_Checkout/js/model/shipping-address/form-popup-state',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/checkout-data',
    'uiRegistry',
    'mage/translate',
    'Magento_Checkout/js/model/shipping-rate-service',
    'Magento_Customer/js/customer-data'
], function (
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    shippingRatesValidator,
    formPopUpState,
    shippingService,
    selectShippingMethodAction,
    rateRegistry,
    setShippingInformationAction,
    stepNavigator,
    modal,
    checkoutDataResolver,
    checkoutData,
    registry,
    $t,
    shippingRateService,
    customerData
) {
    'use strict';

    var popUp = null;

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/shipping',
            shippingFormTemplate: 'Magento_Checkout/shipping-address/form',
            shippingMethodListTemplate: 'Magento_Checkout/shipping-address/shipping-method-list',
            shippingMethodItemTemplate: 'Magento_Checkout/shipping-address/shipping-method-item'
        },
        visible: ko.observable(!quote.isVirtual()),
        errorValidationMessage: ko.observable(false),
        isCustomerLoggedIn: customer.isLoggedIn,
        isFormPopUpVisible: formPopUpState.isVisible,
        isFormInline: addressList().length === 0,
        isNewAddressAdded: ko.observable(false),
        saveInAddressBook: 1,
        quoteIsVirtual: quote.isVirtual(),
        displayNewAddressPopup: customerData.get('zonal_prices')().win_id,

app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/template/shipping.html [around Line no. 18]

Replace:

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

With:

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

app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/js/view/billing-address.js

Add new line at: Line No. 68

hideBillingAddressSwitcher: customerData.get('restrict_addr'),

after addition of this line, the code should look like:

return Component.extend({
    defaults: {
        template: 'Magento_Checkout/billing-address'
    },
    currentBillingAddress: quote.billingAddress,
    addressOptions: addressOptions,
    customerHasAddresses: addressOptions.length > 1,
    hideBillingAddressSwitcher: customerData.get('restrict_addr'),

app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/template/billing-address.html

Replace:

<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>

With:

<if args="!hideBillingAddressSwitcher">
        <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>
</if>

This is how, based on the value restrict_addr stored in the customerData, we were able to hide the add new address buttons.

Note: To set the custom variable in the customerData, please refer this link: Customer Data Management in Magento 2

Improve this answer
0

Faced with this issue. Here is my working solution based on mixin:

  1. Add mixin to "app/code/Vendor/Module/view/frontend/requirejs-config.js" file:
    var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/billing-address': {
                'Vendor_Module/js/checkout/view/billing-address-mixin': true
            }
        }
    };
  1. Add "app/code/Vendor/Module/view/frontend/web/js/checkout/view/billing-address-mixin.js" file:
    define(
    [
        'jquery',
        'Magento_Customer/js/model/address-list',
        'mage/translate'
    ],
    function ($, addressList, $t) {
        'use strict';
        return function (Component) {
            return Component.extend({
                // your condition if need to add "New Address" option
                canManageAddresses: window.checkoutConfig.canManageAddresses,

                initialize: function () {
                    this.addressOptions = this.getAddressOptions();
                    return this._super();
                },

                /**
                 * Add "New Address" option only if allowed
                 * @returns {array}
                 */
                getAddressOptions: function () {
                    let newAddressOption = {
                        /**
                         * Get new address label
                         * @returns {String}
                         */
                        getAddressInline: function () {
                            return $t('New Address');
                        },
                    },
                    addressOptions = addressList().filter(function (address) {
                        return address.getType() === 'customer-address';
                    });

                    // add "New Address" option only if need !!!
                    if (this.canManageAddresses) {
                        addressOptions.push(newAddressOption);
                    }
                    return addressOptions;
                }
            });
        }
    }
);
Improve this answer
0

Magento 2.4.2

All you need to do is create an override for:

view/frontend/web/template/shipping.html

in:

app/design/frontend/<Custom_Theme>/Magento_Checkout/web/template/shipping.html

And then remove:

           `<button type="button"
                    class="action action-show-popup"
                    click="showFormPopUp"
                    visible="!isNewAddressAdded()">
                <span translate="'New Address'" />
            </button>`

Create an override for this:

Vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/list.js

Add it here:

app/design/frontend/<Custom_Theme>/Magento_Checkout/web/js/shipping-address/list.js

Change initChildren: function () {

add this:

if(addressList().length > 0){
    this.createRendererComponent(addressList()[0],this); */
}
else{
    _.each(addressList(), this.createRendererComponent, this);
}
return this;

},

Create an override for:

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

In your custom theme directory

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

Remove

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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