Add placeholder and remove all labels in Magento 2 Checkout

Question

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"

https://i.sstatic.net/ACVIF.jpg

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

Answer 1

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

vendor/magento/module-ui/view/base/web/templates/form/element/input.html

On this files, you need to changes

placeholder: placeholder to placeholder: label

So, first copy this html to your frontend theme folder

app/design/frontend/{Vendor}/{Themename}/Magento_Ui/web/templates/form/element/

On this input.html add this code:

<input class="admin__control-text" type="text"
    data-bind="
        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

app/design/frontend/{Vendor}/{Themename}/Magento_Theme/web/css/source/_extend.less

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

Answer 2

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

https://github.com/mediarox/module-checkout-placeholder

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":

https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_custom_checkbox.html

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.

Answer 3

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

Vender\Theme\Magento_Ui\web\js\form\element\abstract.js

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?