How to add label on all lines of street fields in checkout and turn then required?

Question

Magento has a feature to define between 1 and 4 fields, how much we will want to use in the street field. I've activated 4 lines and would like to add labels line by line. I did this on the user registration and address in my account as you can see in the image below:

I do it just editing phtml and layout (XML) files. And I extend \Magento\Customer\Model\ResourceModel\AddressRepository\AddressRepository to turn required lines 2 and 3.

But on checkout I have it:

How can I add labels and turn lines 2 and 3 required on checkout?

Hi @Eduardo Could you please tell me which files you have edited to add the labels to all lines of street fields? I am trying to add labels to the street field but I am unable to find the file. Please see this link- [magento.stackexchange.com/questions/297425/… — SharmaV, Commented Dec 3, 2019 at 6:17
I created a module for this issue, if anyone have interest. packagist.org/packages/i9/streetlabel — Douglas Ianitsky, Commented Jun 30, 2020 at 14:23
I would like to put addtional street labels ABOVE street additional fields Tried to do it by CSS but I just manage to put it below, not above. How to do it? — Luiz Santos, Commented Nov 11, 2020 at 22:42

Rafael Corrêa Gomes · Accepted Answer · 2019-01-29 13:39:09Z

I solved rewriting street on di.xml:

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

And my LayoutProcessorPlugin.php:

<?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'), I removed main label
            'required' => false, //turn false because I removed main label
            'dataScope' => 'shippingAddress.street',
            'provider' => 'checkoutProvider',
            'sortOrder' => 0,
            'type' => 'group',
            'additionalClasses' => 'street',
            'children' => [
                [
                    'label' => __('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' => __('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' => __('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],
                ],
                [
                    'label' => __('Label 4'),
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input'
                    ],
                    'dataScope' => '3',
                    'provider' => 'checkoutProvider',
                    'validation' => ['required-entry' => false, "min_text_len‌gth" => 1, "max_text_length" => 255],
                ],
            ]
        ];
        return $jsLayout;
    }
}

This works as expected, but it comes first in order, I tried changing the sort order but didnt work, is there any way to change the order of this street address? — Nausif, Commented Dec 6, 2018 at 9:57
Did you tried to change the dataScope or add sortOrder on children fields? — Eduardo, Commented Dec 6, 2018 at 17:36
Sorry for a late reply, sorting worked, at first I was giving irrelevant sorting orders, my bad :( — Nausif, Commented Dec 20, 2018 at 12:00

Marcus · Accepted Answer · 2018-03-23 09:34:09Z

3

you can also use magento's array manager:

    $streetPaths = $this->arrayManager->findPaths('street', $jsLayout);
    foreach ($streetPaths as $streetPath)
    {
        $jsLayout = $this->arrayManager->remove($streetPath . '/label', $jsLayout);
        $jsLayout = $this->arrayManager->set($streetPath . '/children/0/label', $jsLayout, __('Street'));
        $jsLayout = $this->arrayManager->set($streetPath . '/children/1/label', $jsLayout, __('Street Number'));
    }

    return $jsLayout;

answered Mar 23, 2018 at 9:34

Marcus

511 bronze badge

Your solution is good it worked for me But, first time i thought it is notworking but when i printed $jsLayout array I found that lable is updated, but it was not showing because of Position:absolute css applied on lable. I removed that and worked fine for me
– Dhaval Solanki
Commented Apr 5, 2018 at 11:45
where i need to insert this rows?
– Alessandro Gnola
Commented Oct 14, 2020 at 13:41

Add a comment |

Sanne · Accepted Answer · 2020-05-19 16:05:07Z

All these answers above seem to mis the changing of the billing fields. So i decided to add my answer as well.

Add the class to your di like this. Or create one in etc/frontend/di.xml.

<?xml version="1.0"?>

<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin name="street_labels" type="Vendor\YourModuleName\Plugin\Block\LayoutProcessor" sortOrder="1"/>
</type>

Then add the file which contains your php class:

Vendor\YourModuleName\Plugin\Block\LayoutProcessor.php

<?php

namespace Vendor\YourModuleName\Plugin\Block;

class LayoutProcessor
{
    public function aroundProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        \Closure $proceed,
        array $jsLayout
    )
    {
        $jsLayoutResult = $proceed($jsLayout);

        $shippingAddress = &$jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

        unset($shippingAddress['street']['label']);

        // Shipping fields street labels
        $shippingAddress['street']['children']['0']['label'] = __('Street name');
        $shippingAddress['street']['children']['1']['label'] = __('House number');
        $shippingAddress['street']['children']['2']['label'] = __('Addition');

        return $jsLayoutResult;
    }

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

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    )
    {

        // Change billing field labels for every payment method
        $paymentForms = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];

        foreach ($paymentForms as $paymentMethodForm => $paymentMethodValue) {

            $paymentMethodCode = str_replace('-form', '', $paymentMethodForm);

            $billingAddress = &$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'][$paymentMethodCode . '-form']['children']['form-fields']['children'];

            if (!isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentMethodCode . '-form'])) {
                continue;
            }

            $billingAddress['street']['children'][0]['label'] = __('Street name');
            $billingAddress['street']['children'][1]['label'] = __('House number');
            $billingAddress['street']['children'][2]['label'] = __('Addition');
        }

        return $jsLayout;
    }
}

Replace Vendor\YourModuleName with your module ofcourse. The billing address field labels can only be changed in the 'after' plugin.

If the label for the second street field is there after this but hiding behind the other input field then you might want to add the following css:

   #checkout .field.street .field.additional .label {
            position: static;
        }

Pradeep Kumar · Accepted Answer · 2017-11-09 07:37:56Z

1

in below plugin no need to write all set of array for label change

you can do

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['firstname']['label'] = __('TEST');

answered Nov 9, 2017 at 7:37

Pradeep Kumar

8,75112 gold badges62 silver badges86 bronze badges

Add a comment |

Diego Matias · Accepted Answer · 2018-08-27 15:31:29Z

One little thing that may help someone in the future, the Eduardo's answer it's the one that worked for me but to change the template on street fields I haved to add a field fieldTemplate on the parent element that point to my template, only this worked for change the field template on the street fields the field template on the children does not seem to affect at all.

the father element that worked for change the field template:

'component' => 'Magento_Ui/js/form/components/group',
        //'label' => __('Street Address'), I removed main label
        'required' => false, //turn false because I removed main label
        'dataScope' => 'shippingAddress.street',
        'provider' => 'checkoutProvider',
        'fieldTemplate'=>'Vendor_ModuleName/template'//<-this is the fild to change the field template
        'sortOrder' => 0,
        'type' => 'group',
        'additionalClasses' => 'street',

magento · Accepted Answer · 2022-03-02 22:13:37Z

Keep in mind that if you change the labels using Layout Processor on the shipping page, that only will not change the label on the payment page for all the payment/billing forms (moneris, stripe, braintree etc.).

I'm posting an example of how to change street field labels on the payment page.

Please, if this is not the best practice let me know. I didn't manage to find many examples or documentation about this, so I kind of did this myself.

app/code/Vendor/Checkout/Plugin/LayoutProccessorPluginPayment.php

<?php
namespace Vendor\Checkout\Plugin;

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

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array                                            $jsLayout
    ) {
        $paymentForms = $jsLayout['components']['checkout']['children']['steps']['children']
                        ['billing-step']['children']['payment']['children']
                        ['payments-list']['children'];

        // Change billing field labels for every payment method
        foreach ($paymentForms as $paymentMethodForm => $paymentMethodValue) {

            $paymentMethodCode = str_replace('-form', '', $paymentMethodForm);

            //Checks if billing step available.
            if (!isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'][$paymentMethodCode . '-form'])) {
                continue;
            }
            $jsLayout['components']['checkout']['children']['steps']['children']
            ['billing-step']['children']['payment']['children']
            ['payments-list']['children'][$paymentMethodCode . '-form']['children']['form-fields']['children']['street'] = [
                'component'         => 'Magento_Ui/js/form/components/group',
                'label'             => __('Street Address'),
                'required'          => false,
                'dataScope'         => 'billingAddress.street',
                'provider'          => 'checkoutProvider',
                'sortOrder'         => 50,
                'type'              => 'group',
                'additionalClasses' => 'street',
                'children'          => [
                    [
                        'label'      => __('Label1'),
                        'component'  => 'Magento_Ui/js/form/element/abstract',
                        'config'     => [
                            'customScope' => 'billingAddress',
                            'template'    => 'ui/form/field',
                            'elementTmpl' => 'ui/form/element/input',
                        ],
                        'dataScope'  => '0',
                        'provider'   => 'checkoutProvider',
                        'validation' => ['required-entry' => true, "min_text_length" => 1],
                    ],
                    [
                        'label'      => __('Label2'),
                        'component'  => 'Magento_Ui/js/form/element/abstract',
                        'config'     => [
                            'customScope' => 'billingAddress',
                            'template'    => 'ui/form/field',
                            'elementTmpl' => 'ui/form/element/input',
                        ],
                        'dataScope'  => '1',
                        'provider'   => 'checkoutProvider',
                        'validation' => ['required-entry' => false, "min_text_length" => 1],
                    ],
                ],
            ];
        }

        return $jsLayout;
    }
}

And then add the plugin in app/code/Vendor/Checkout/etc/di.xml

    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="billing-street-labels" type="Vendor\Checkout\Plugin\LayoutProccessorPluginPayment" sortOrder="10"/>
    </type>

user3512810 · Accepted Answer · 2022-07-05 07:18:03Z

Just in case if anyone wants to update shipping address street mutiple fields and billing address street field labels please check below Note - tested on Magento 2.



<?php

namespace Vendor\Module\Plugin\Block;

/**
 * This is plugin which returns collection
 *
 * @author    Tanveer Mohammad <[email protected]>
 * @since     1.0 First time this was introduced.
 * @copyright 1948-2020 akhil
 **/
class LayoutProcessor
{
  /**
   * Get checkout layout content
   *
   * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
   * @param \Closure $proceed
   * @param array $jsLayout
   */
    public function aroundProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        \Closure $proceed,
        array $jsLayout
    ) {
        $jsLayoutResult = $proceed($jsLayout);

        $shippingAddress = &$jsLayoutResult['components']['checkout']
        ['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']
        ['shipping-address-fieldset']['children'];

        unset($shippingAddress['street']['label']);

        // Shipping fields street labels
        $shippingAddress['street']['children']['0']['label'] = __('Address (street and number)');
        $shippingAddress['street']['children']['1']['label'] = __('Floor, door or other');
        $shippingAddress['street']['children']['2']['label'] = __('Address street 3');

        return $jsLayoutResult;
    }

        public function afterProcess(  \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
          array $jsLayout)
          {
              if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
              ['payment']['children']['payments-list']['children']))
              {

                $billingAddress = &$jsLayout['components']['checkout']['children']['steps']
                ['children']['billing-step']['children']['payment']['children']
                ['afterMethods']['children']['billing-address-form']['children']
                ['form-fields']
                ['children'];
                unset($billingAddress['street']['children']['0']['label']);
                unset($billingAddress['street']['children']['1']['label']);
                unset($billingAddress['street']['children']['2']['label']);

                $billingAddress['street']['children']['0']['label']['0'] = __('Address (street and number)');
                $billingAddress['street']['children']['1']['label']['0'] = __('Floor, door or other');
                $billingAddress['street']['children']['2']['label']['0'] = __('Address street 3');

              }

              return $jsLayout;
          }
}

Vikas kalal · Accepted Answer · 2023-12-12 12:39:25Z

This solution will work in billing and shipping addresses dynamically change the label of checkout address line field as enabled from admin configuration 2 line or 3 line. if you want a specific label for the particular address line then need to update your logic in this code.

Create plugin in your existing custom module.

app/code/[Custom_Vendor]/[Module_Name]/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="add-street-address-label" type="[Custom_Vendor]\[Module_Name]\Plugin\Checkout\LayoutProcessorPlugin"
                sortOrder="10"/>
    </type>
</config>

Now need to create a plugin to achieve this things.

app/code/[Custom_Vendor]/[Module_Name]/Plugin/Checkout/LayoutProcessorPlugin.php

<?php

namespace [Custom_Vendor]\[Module_Name]\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']['telephone']['validation']['validate-number'] = true;
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['street']['children'])
        ) {
            $streetLines = $jsLayout['components']['checkout']['children']
            ['steps']['children']['shipping-step']['children']
            ['shippingAddress']['children']['shipping-address-fieldset']
            ['children']['street']['children'];
            if (count($streetLines)){
                foreach ($streetLines as $key => $streetLine) {
                    $streetLines[$key]['label']= __('Address Line %1',$key+1);
                }
                $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
                ['shippingAddress']['children']['shipping-address-fieldset']['children']['street']['children'] =$streetLines;
            }
        }
        if (isset($jsLayout['components']['checkout']['children']['steps']['children']
            ['billing-step']['children']['payment']['children']
            ['payments-list']['children'])
        ){
            $paymentForms = $jsLayout['components']['checkout']['children']['steps']['children']
            ['billing-step']['children']['payment']['children']
            ['payments-list']['children'];
            // Change billing field labels for every payment method
            foreach ($paymentForms as $paymentMethodForm => $paymentMethodValue) {
                $paymentMethodCode = str_replace('-form', '', $paymentMethodForm);
                if (!isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'][$paymentMethodCode . '-form'])) {
                    continue;
                }
                if (isset($jsLayout['components']['checkout']['children']['steps']['children']
                    ['billing-step']['children']['payment']['children']
                    ['payments-list']['children'][$paymentMethodCode . '-form']['children']['form-fields']['children']['street']['children'])
                ){
                    $billingStreetLines = $jsLayout['components']['checkout']['children']['steps']['children']
                    ['billing-step']['children']['payment']['children']
                    ['payments-list']['children'][$paymentMethodCode . '-form']['children']['form-fields']['children']['street']['children'];
                    if (count($billingStreetLines)){
                        foreach ($billingStreetLines as $key => $streetLine) {
                            $billingStreetLines[$key]['label']= __('Address Line %1',$key+1);
                        }
                        $jsLayout['components']['checkout']['children']['steps']['children']
                        ['billing-step']['children']['payment']['children']
                        ['payments-list']['children'][$paymentMethodCode . '-form']['children']['form-fields']['children']['street']['children'] = $billingStreetLines;
                    }
                }
            }
        }

        return $jsLayout;
    }
}

Stack Exchange Network

How to add label on all lines of street fields in checkout and turn then required?

8 Answers 8

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2
onepage-checkout
address
or ask your own question.

Linked

Hot Network Questions

How to add label on all lines of street fields in checkout and turn then required?

8 Answers 8

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento2onepage-checkoutaddress or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2
onepage-checkout
address
or ask your own question.