{"id":1807,"date":"2021-06-18T13:08:50","date_gmt":"2021-06-18T13:08:50","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-label-on-all-lines-in-street-address-in-magento-2-checkout-page\/"},"modified":"2025-07-16T17:40:38","modified_gmt":"2025-07-16T12:10:38","slug":"add-label-on-all-lines-in-street-address-in-magento-2-checkout-page","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-label-on-all-lines-in-street-address-in-magento-2-checkout-page\/","title":{"rendered":"How to Add Label on all Lines in Street Address in Magento 2 Checkout Page"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

One such example is to add label on all lines in street address in Magento 2 checkout page<\/em><\/strong>.<\/p>\n\n\n\n

The default\u00a0Magento 2\u00a0offers three textboxes under one label of a street address as shown below:<\/p>\n\n\n

\n
\"How<\/figure>\n<\/div>\n\n\n

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\u2019s checkout experience.<\/p>\n\n\n\n

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 \u201cShipping Address 1\u201d or \u201cShipping Address 2\u201d for customers who utilize multiple shipping addresses<\/a>.<\/p>\n\n\n\n

Use the below code in such a scenario.<\/p>\n\n\n\n

You may also need to add a custom field in the checkout page below the payment method list in Magento 2<\/a> to make the seamless checkout process, and I\u2019ve posted the solution for the same.<\/p>\n\n\n\n

Method to Add Label on all Lines in Street Address in Magento 2 Checkout Page<\/h2>\n\n\n\n

1. Create di.xml<\/strong> file in app\/code\/Vendor\/Module\/etc\/frontend\/<\/strong> or Add the below code in your custom module\u2019s existing di.xml.<\/strong><\/p>\n\n\n\n

<type name=\"Magento\\Checkout\\Block\\Checkout\\LayoutProcessor\">\n    <plugin name=\"rewrite-street-address\" type=\"Vendor\\ModuleName\\Plugin\\Checkout\\LayoutProcessorPlugin\"\n            sortOrder=\"10\"\/>\n<\/type><\/pre>\n\n\n\n
2. Add or create a LayoutProcessorPlugin.php<\/strong> file at app\/code\/Vendor\/ModuleName\/Plugin\/Checkout\/<\/strong><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\ModuleName\\Plugin\\Checkout;\n\nclass LayoutProcessorPlugin\n{\n    public function afterProcess(\n        \\Magento\\Checkout\\Block\\Checkout\\LayoutProcessor $subject,\n        array $jsLayout\n    )\n    {\n        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']\n        ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [\n            'component' => 'Magento_Ui\/js\/form\/components\/group',\n            'label' => __('Address Label'), \/\/sreet address main label\n            'required' => false, \/\/ set false if removed sreet address label\n            'dataScope' => 'shippingAddress.street',\n            'provider' => 'checkoutProvider',\n            'sortOrder' => 0,\n            'type' => 'group',\n            'additionalClasses' => 'street',\n            'children' => [   \/\/ here add children as per your requirement\n                [\n                    'label' => __('Address Label 1'),\n                    'component' => 'Magento_Ui\/js\/form\/element\/abstract',\n                    'config' => [\n                        'customScope' => 'shippingAddress',\n                        'template' => 'ui\/form\/field',\n                        'elementTmpl' => 'ui\/form\/element\/input'\n                    ],\n                    'dataScope' => '0',\n                    'provider' => 'checkoutProvider',\n                    'validation' => ['required-entry' => true, \"min_text_len\u200c\u200bgth\" => 1, \"max_text_length\" => 255],\n                ],\n                [\n                    'label' => __('Address Label 2'),\n                    'component' => 'Magento_Ui\/js\/form\/element\/abstract',\n                    'config' => [\n                        'customScope' => 'shippingAddress',\n                        'template' => 'ui\/form\/field',\n                        'elementTmpl' => 'ui\/form\/element\/input'\n                    ],\n                    'dataScope' => '1',\n                    'provider' => 'checkoutProvider',\n                    'validation' => ['required-entry' => true, \"min_text_len\u200c\u200bgth\" => 1, \"max_text_length\" => 255],\n                ],\n                [\n                    'label' => __('Address Label 3'),\n                    'component' => 'Magento_Ui\/js\/form\/element\/abstract',\n                    'config' => [\n                        'customScope' => 'shippingAddress',\n                        'template' => 'ui\/form\/field',\n                        'elementTmpl' => 'ui\/form\/element\/input'\n                    ],\n                    'dataScope' => '2',\n                    'provider' => 'checkoutProvider',\n                    'validation' => ['required-entry' => true, \"min_text_len\u200c\u200bgth\" => 1, \"max_text_length\" => 255],\n                ],\n            ]\n        ];\n        return $jsLayout;\n    }\n}<\/pre>\n\n\n\n
Once implemented, it displays the output as shown below:<\/p>\n\n\n
\n
\"How<\/figure>\n<\/div>\n\n\n
That\u2019s it!<\/p>\n\n\n\n
Also, do share the post with Magento Community via social media.<\/p>\n\n\n\n
Thank you.<\/p>\n\n\n\n
Also Read:<\/strong><\/p>\n\n\n\n