How to Add Label on all Lines in Street Address in Magento 2 Checkout Page

The modern business requirement can easily be fulfilled with the extensive functionality of customizable CMS and Magento 2 is the preferred one that is flexible to allow customization in the backend as well as frontend.

One such example is to add label on all lines in street address in Magento 2 checkout page.

The default Magento 2 offers three textboxes under one label of a street address as shown below:

However, the need may vary from business to business. A store owner may require to add the native words for address to enhance the customer’s checkout experience.

What if you need to add a different label on each textbox to make it user-friendly? Or you may want to change the default label to more convenient ones for the targeted users, such as “Shipping Address 1” or “Shipping Address 2” for customers who utilize multiple shipping addresses.

Use the below code in such a scenario.

You may also need to add a custom field in the checkout page below the payment method list in Magento 2 to make the seamless checkout process, and I’ve posted the solution for the same.

Method to Add Label on all Lines in Street Address in Magento 2 Checkout Page

1. Create di.xml file in app/code/Vendor/Module/etc/frontend/ or Add the below code in your custom module’s existing di.xml.
   
   
   <type name="Magento\Checkout\Block\Checkout\LayoutProcessor"> <plugin name="rewrite-street-address" type="Vendor\ModuleName\Plugin\Checkout\LayoutProcessorPlugin" sortOrder="10"/> </type>

   1 2 3 4

   <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">     <plugin name="rewrite-street-address" type="Vendor\ModuleName\Plugin\Checkout\LayoutProcessorPlugin"             sortOrder="10"/> </type>

2. Add or create a LayoutProcessorPlugin.php file at app/code/Vendor/ModuleName/Plugin/Checkout/
   
   
   <?php namespace Vendor\ModuleName\Plugin\Checkout; class LayoutProcessorPlugin { public function afterProcess( \Magento\Checkout\Block\Checkout\LayoutProcessor $subject, array $jsLayout ) { $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children'] ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [ 'component' => 'Magento_Ui/js/form/components/group', 'label' => __('Address Label'), //sreet address main label 'required' => false, // set false if removed sreet address label 'dataScope' => 'shippingAddress.street', 'provider' => 'checkoutProvider', 'sortOrder' => 0, 'type' => 'group', 'additionalClasses' => 'street', 'children' => [ // here add children as per your requirement [ 'label' => __('Address Label 1'), 'component' => 'Magento_Ui/js/form/element/abstract', 'config' => [ 'customScope' => 'shippingAddress', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input' ], 'dataScope' => '0', 'provider' => 'checkoutProvider', 'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255], ], [ 'label' => __('Address Label 2'), 'component' => 'Magento_Ui/js/form/element/abstract', 'config' => [ 'customScope' => 'shippingAddress', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input' ], 'dataScope' => '1', 'provider' => 'checkoutProvider', 'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255], ], [ 'label' => __('Address Label 3'), 'component' => 'Magento_Ui/js/form/element/abstract', 'config' => [ 'customScope' => 'shippingAddress', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input' ], 'dataScope' => '2', 'provider' => 'checkoutProvider', 'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255], ], ] ]; return $jsLayout; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

   <?php   namespace Vendor\ModuleName\Plugin\Checkout;   class LayoutProcessorPlugin {     public function afterProcess(         \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,         array $jsLayout     )     {         $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']         ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [             'component' => 'Magento_Ui/js/form/components/group',             'label' => __('Address Label'), //sreet address main label             'required' => false, // set false if removed sreet address label             'dataScope' => 'shippingAddress.street',             'provider' => 'checkoutProvider',             'sortOrder' => 0,             'type' => 'group',             'additionalClasses' => 'street',             'children' => [   // here add children as per your requirement                 [                     'label' => __('Address Label 1'),                     'component' => 'Magento_Ui/js/form/element/abstract',                     'config' => [                         'customScope' => 'shippingAddress',                         'template' => 'ui/form/field',                         'elementTmpl' => 'ui/form/element/input'                     ],                     'dataScope' => '0',                     'provider' => 'checkoutProvider',                     'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255],                 ],                 [                     'label' => __('Address Label 2'),                     'component' => 'Magento_Ui/js/form/element/abstract',                     'config' => [                         'customScope' => 'shippingAddress',                         'template' => 'ui/form/field',                         'elementTmpl' => 'ui/form/element/input'                     ],                     'dataScope' => '1',                     'provider' => 'checkoutProvider',                     'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255],                 ],                 [                     'label' => __('Address Label 3'),                     'component' => 'Magento_Ui/js/form/element/abstract',                     'config' => [                         'customScope' => 'shippingAddress',                         'template' => 'ui/form/field',                         'elementTmpl' => 'ui/form/element/input'                     ],                     'dataScope' => '2',                     'provider' => 'checkoutProvider',                     'validation' => ['required-entry' => true, "min_text_len‌​gth" => 1, "max_text_length" => 255],                 ],             ]         ];         return $jsLayout;     } }

Once implemented, it displays the output as shown below:

That’s it!

Any doubts about this solution can be mentioned in the Comments section below.

I’d be happy to help.

Also, do share the post with Magento Community via social media.

Thank you.

Also Read:

• How to Change Number of Lines in Street Address in Magento 2