Add labels of street fields in checkout shipping address also make it required fields

Magento has a feature to define between 1 and 4 fields, how much do you want to use in the street field?

I’ve activated 2 fields and would like to add a label for 1 field. I have done this on the checkout shipping address page which you can see in the image below:

I just do rewriting checkout layout on di.xml :

<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin name="rewrite-street" type="Vendor\ModuelName\Model\Checkout\LayoutProcessorPlugin"/>
</type>

</type>

And create a new LayoutProcessorPlugin.php file at Vendor\ModuelName\Model\Checkout\LayoutProcessorPlugin.php path:

<?php
namespace Vendor\ModuleName\Model\Checkout;

class LayoutProcessorPlugin
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */

    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' => __('Street Address'), // You can change main label from here
            'required' => true, //turn false if you can removed main label
            'dataScope' => 'shippingAddress.street',
            'provider' => 'checkoutProvider',
            'sortOrder' => 30, // You can set short order of street fields from other checkout fields
            'type' => 'group',
            'additionalClasses' => 'street',
            'children' => [
                [
                    'label' => __('Label 1'), // Here I can set Label "Adresa" as per above image
                    '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], // You can also set "max_text_length"=> 255 in validation
                ],
                [
                    'label' => __('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' => false, "min_text_len‌gth" => 1],
                ],
            ]
        ];
        return $jsLayout;
    }
}

<?php

namespace Vendor\ModuleName\Model\Checkout;

class LayoutProcessorPlugin

{

/**

* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject

* @param array $jsLayout

* @return array

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' => __('Street Address'), // You can change main label from here

'required' => true, //turn false if you can removed main label

'dataScope' => 'shippingAddress.street',

'provider' => 'checkoutProvider',

'sortOrder' => 30, // You can set short order of street fields from other checkout fields

'type' => 'group',

'additionalClasses' => 'street',

'children' => [

[

'label' => __('Label 1'), // Here I can set Label "Adresa" as per above image

'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], // You can also set "max_text_length"=> 255 in validation

[

'label' => __('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' => false, "min_text_len‌gth" => 1],

]

];

return $jsLayout;

}

You can do this in any existing module.

Are you having any query with your Magento store?
Fill the form below to hire Magento expert(s).

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-63d3d74f260d6142684896/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire B. Darji

Let’s have a call

Fill the form & Get Installation Support