0

I have the address field in Magento 2 Onepage Checkout changed to two lines.
By default only the first line of this group has a label ("address")
Now I want the first field to have the label "street" and the second field to have a label "house number"
I added a plugin via di.xml

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

For first test I used this simple code which is based on a solution I found here:

namespace Vendor\Module\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;
    }
}

for my understanding, checking with the debugger, this is being called and changes the values as intended.
The only effect on the frontend however is, that the label gets removed, no new labels are being shown.
What am I missing?

1 Answer 1

0

My code above changes the labels as intended.
They're not showing on the frontend because they're apparently set to position: absolute by Magento2 default.

This fixed my problem:

.field.street > legend.label {
    display: none;
}

.field.street .control .field label {
    font-weight: 600;
    position: relative;
}

.field.street .control .field._required label:after {
    content: '*';
    color: #e02b27;
    font-size: 1.2rem;
    margin: 0 0 0 5px;
}

Result:

enter image description here

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.