10

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:

enter image description here

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: enter image description here

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

3
  • 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
    Dec 3, 2019 at 6:17
  • I created a module for this issue, if anyone have interest. packagist.org/packages/i9/streetlabel 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? Nov 11, 2020 at 22:42

8 Answers 8

18

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;
    }
}
7
  • 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
    Dec 6, 2018 at 9:57
  • Did you tried to change the dataScope or add sortOrder on children fields?
    – Eduardo
    Dec 6, 2018 at 17:36
  • Sorry for a late reply, sorting worked, at first I was giving irrelevant sorting orders, my bad :(
    – Nausif
    Dec 20, 2018 at 12:00
  • 1
    How can I apply the same for billing address form?
    – Nausif
    Dec 26, 2018 at 7:37
  • @Nausif here's an example: github.com/eduardoddias/…
    – Eduardo
    Dec 26, 2018 at 9:59
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;
2
  • 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 Apr 5, 2018 at 11:45
  • where i need to insert this rows? Oct 14, 2020 at 13:41
3

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;
        }
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'); 
0

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',
0

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>
0

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;
          }
}
0

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;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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