Magento 2: How to Add Placeholder Text in Field for Checkout Page

Hello Magento Friends,

Today we will learn to Add Placeholder Text in Field for Checkout Page in Magento 2.

If you want to display a hint or example of the input required in a particular field, you can add placeholder text. With default Magento 2, there is no placeholder text in fields at the checkout page. To add placeholder text in the field for the checkout page in Magento 2, use the below steps.

Steps to Add Placeholder Text in Field for Checkout Page in Magento 2:

Step 1: First create di.xml file at the given below path

app/code/Vendor/Extension/etc/frontend/di.xml

Now add the code as follows

<?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\AttributeMerger">
          <pluginname="add_placeholderto_checkout" type="Vendor\Extension\Plugin\Block\Checkout\AttributeMerger" sortOrder="10"/>
     </type>
</config>

Step 2: Now create a Plugin File at the following path

app/code/Vendor/Extension/Plugin/ Block/ Checkout/ AttributeMerger.php

Then add the following code

<?php
namespace Vendor\Extension\Plugin\Block\Checkout;

class AttributeMerger
{
     public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject,$result)
     {
          $result['firstname']['placeholder'] = __('First Name');
          $result['lastname']['placeholder'] = __('Last Name');
          $result['street']['children'][0]['placeholder'] = __('Line no 1');
          $result['street']['children'][1]['placeholder'] = __('Line no 2');
          $result['city']['placeholder'] = __('Enter City');
          $result['postcode']['placeholder'] = __('Enter Zip/Postal Code');
          $result['telephone']['placeholder'] = __('Enter Phone Number');
          return $result;
      }
}

At last, clear the cache and check the output on your checkout page.

Conclusion:

This way you can easily add placeholder text in various fields of the Magento 2 checkout page. If you are unable to get the desired results, share them with me and I will quickly solve your problem. Share the tutorial with your friends to let them customize the checkout page.

Happy Coding!