I need to add a new fied "Full Name" to checkout billing address form. I have already added this to shipping address by following this: Use new field "Full Name" to replace "First Name" and "Last Name" in Checkout

I am trying to add the new field by following this but it is not working: https://webkul.com/blog/add-custom-field-billing-address-form-magento-2/

The full name field is not rendering in the checkout billing address form.

1 Answer 1


I added a field in the button.html of billing address form


 <div class="billing-address-form">
    <!-- ko foreach: getRegion('before-fields') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <form id="new-billing-address" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset class="fieldset address" data-form="billing-new-address">
            <div class="field _required full_name">
                <label class="label">
                    <span data-bind="i18n: 'Full Name'"></span>
                <div class="control">
                    <input type="text" class="input-text required" id="full_name_text" data-bind="event:{ keyup: fullNameChanged }" />
            <!-- ko foreach: getRegion('additional-fieldsets') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- ko if: (isCustomerLoggedIn && customerHasAddresses) -->
            <div class="choice field">
                <input type="checkbox" class="checkbox"  data-bind="checked: saveInAddressBook, attr: {id: 'billing-save-in-address-book-' + getCode($parent)}" />
                <label class="label" data-bind="attr: {for: 'billing-save-in-address-book-' + getCode($parent)}" >
                    <span data-bind="i18n: 'Save in address book'"></span>
            <!-- /ko -->

Copied vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js and placed it in app/design/frontend/Theme/default/Magento_Checkout/web/js/view/billing-address.js And then added the binded function to the billing-address.js

fullNameChanged: function() {
            var fullNameValue = $('#full_name_text').val();
            var firstSpacePos = fullNameValue.indexOf(' ');
            if (firstSpacePos!=-1) {
                //this means user has entered a space
                var first_name = fullNameValue.substring(0, firstSpacePos).trim();
                var last_name = fullNameValue.substring(firstSpacePos).trim();
                $('div[name="billingAddressshared.firstname"] .input-text').val(first_name);
                $('div[name="billingAddressshared.lastname"] .input-text').val(last_name);
                //this means user has entered a single word
                $('div[name="billingAddressshared.firstname"] .input-text').val(fullNameValue);
                $('div[name="billingAddressshared.lastname"] .input-text').val(fullNameValue);
            $('div[name="billingAddressshared.firstname"] .input-text').keyup();
            $('div[name="billingAddressshared.lastname"] .input-text').keyup();

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.