How to add placeholder text for checkout fields in Magento 2

How to add placeholder text for checkout fields in Magento 2 – Today we will discuss a common Magento developing customization for many developers. Customizing checkout is a kind of pretty challenging task commonly. I am writing today about adding a placeholder text to checkout fields.

We can achieve by a plugin using a custom module.Lets create our custom module as usual.

Create the registration.php file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Ayakil_AddPlaceholderText',
    __DIR__
);

Create the module.xml file

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
	<module name="Ayakil_AddPlaceholderText" setup_version="1.0.0"/>
</config>

Next step we need to define the di.xml in Ayakil/AddPlaceholderText/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\AttributeMerger">
    <plugin name="shippingAddress" type="Ayakil\AddPlaceholderText\Plugin\Block\Checkout\AttributeMerger"/>
  </type>
</config>

Next, we want to create the AttributeMerger.php file in Ayakil\AddPlaceholderText\Plugin\Block\Checkout\

<?php
namespace Ayakil\AddPlaceholderText\Plugin\Block\Checkout;
class AttributeMerger
{
  public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result)
  {
      if(array_key_exists('telephone', $result)){
        $result['telephone']['placeholder'] = __('(eg: 0712345678)');
      }
    return $result;
  }
}

That’s it.The placeholder text for the phone number in the checkout field is successfully added.