Searched a lot but didn't found anything removing the

Lables like "First Name, Last Name, City, Address, Email, Phone etc"

Add Placeholders in all "shipping fields" and "sign In" places. After Login Placeholders in "new add address popup"


Please help me struggling from so many days didn't found any exact thing.

  • I've tried this and it's not working. Has anything been changed in recent Magento code? Commented May 4, 2020 at 4:50

3 Answers 3


I don't find any proper solution but give you quick and good solution.

Magento checkout's input fields are render by Magento_Ul module component's file


On this files, you need to changes

placeholder: placeholder to placeholder: label

So, first copy this html to your frontend theme folder


On this input.html add this code:

<input class="admin__control-text" type="text"
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: label,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled

Then, you need to add _extend.less at your theme folder


add this code for hidden the label css:

.checkout-index-index label{display:none}

Then You must flush cache by run

php bin/magento cache:flush

Or delete all files from view_procecced, cache,page_cache.

Then you should static content deploy

php bin/magento setup:static-content:deploy

  • This Solution is working but partially. Some Placeholders are not coming and some Lables (Street Address) is not hidden via the above solution. Screenshot After the solution imgur.com/iuzL93e
    – Vinay
    Commented Oct 18, 2017 at 18:25

We have already solved this problem/feature in several projects with the following module:


It uses a so called "LayoutProcessor" to change the address fields on PHP side.

The principle can be seen in the documentation in the chapter "Add custom fields that influence other Checkout fields":


The "LayoutProcessor" copies the label string into the placeholder variable ("placeholder" property of the field). So you don't need to customize the input template as Amit mentioned.

  • Great extension implementation, Thank you so much
    – AboElnouR
    Commented Aug 27, 2022 at 11:44

Rather than changing in every input type template the most common and effective way is to change in abstract.js and make every template to take placeholder


Line no 30 as of now, change placeholder: false to placeholder: '${ $.label }'.

Of-course override in custom theme or even better to make js mixin to replace property of ui-component is much more preferred.

Original answer at - Magento2 - How to add placeholder to knockoutjs field?

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.