Magento 2.1 Checkout – How to Display Company Name on Checkout Page

checkoutmagento-2.1magento2shipping-address

I want to display the company name from customer address on checkout page in Magento2.1

It should be visible in shipping address section as well as side bar.

How can I do it?Screen1

enter image description here

Best Answer

To add company name or any other address field in

For add new field in shipping adress section, override vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

For add new field in sidebar ship to section, override vendor/magento/module-checkout/view/frontend/web/template/shipping-information/address-renderer/default.html

For override create requirejs-config.js at

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

var config = {
    map: {
        '*': {
            'Magento_Checkout/template/shipping-address/address-renderer/default.html':
                'Vendor_Module/template/shipping-address/address-renderer/default.html',

            'Magento_Checkout/template/shipping-information/address-renderer/default.html':
                'Vendor_Module/template/shipping-information/address-renderer/default.html'
        }
    }
};

Now add <!-- ko text: address().company --><!-- /ko --> in overrided file where you want to display company field.

like in

app/code/Vendor/Module/view/frontend/web/template/shipping-information/address-renderer/default.html

<div class="shipping-address-item" data-bind="css: isSelected() ? 'selected-item' : 'not-selected-item'">
    <!-- ko text: address().prefix --><!-- /ko --> <!-- ko text: address().firstname --><!-- /ko -->
    <!-- ko text: address().lastname --><!-- /ko --> <!-- ko text: address().suffix --><!-- /ko --><br/>
    <!-- ko text: address().street --><!-- /ko --><br/>
    <!-- ko text: address().company -->
    <!-- ko text: address().city --><!-- /ko -->, <!-- ko text: address().region --><!-- /ko --> <!-- ko text: address().postcode --><!-- /ko --><br/>
    <!-- ko text: getCountryName(address().countryId) --><!-- /ko --><br/>
    <!-- ko text: address().telephone --><!-- /ko --><br/>
    <!-- ko foreach: { data: address().customAttributes, as: 'element' } -->
        <!-- ko foreach: { data: Object.keys(element), as: 'attribute' } -->
            <!-- ko text: element[attribute].value --><!-- /ko -->
         <!-- /ko -->
    <!-- /ko -->
    <!-- ko if: (address().isEditable()) -->
    <button type="button"
            class="action edit-address-link"
            data-bind="click: editAddress, visible: address().isEditable()">
        <span data-bind="i18n: 'Edit'"></span>
    </button>
    <!-- /ko -->
    <button type="button" data-bind="click: selectAddress" class="action action-select-shipping-item">
        <span data-bind="i18n: 'Ship Here'"></span>
    </button>
</div>
Related Topic