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

Today we learn How to Add Placeholder text in field for checkout page in Magento 2.

At checkout page there are no placeholder text by default in any filed. so when if you want to add placeholder text into checkout page you need to follow below steps. its very use usefull when some time we just need to display placeholder as per client requirement

Here we have one custom module name Dolphin HelloWord

After you need to create one di.xml file as below

app/code/Dolphin/HelloWord/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">
          <pluginname="add_placeholderto_checkout" type="Dolphin\Helloworld\Plugin\Block\Checkout\AttributeMerger" sortOrder="10"/>
     </type>
</config>

app/code/Dolphin/HelloWord/Plugin/Block/Checkout/AttributeMerger.php

<?php
namespace Dolphin\HelloWord\Plugin\Block\Checkout\;

/**
* Class AttributeMerger
* @package Dolphin\HelloWord\Plugin\Block\Checkout\AttributeMerger
*/
class AttributeMerger
{
     /**
     * @param \Magento\Checkout\Block\Checkout\AttributeMerger $subject
     * @param $result
     * @return mixed
     */
     publicfunctionafterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject,$result)
     {
          $result['firstname']['placeholder'] = __('First Name');
          $result['lastname']['placeholder'] = __('Last Name');
          $result['street']['children'][0]['placeholder'] = __('Address 1');
          $result['street']['children'][1]['placeholder'] = __('Address 2');
          $result['city']['placeholder'] = __('Enter City');
          $result['postcode']['placeholder'] = __('Enter Zip/Postal Code');
          $result['telephone']['placeholder'] = __('Enter Phone Number');
          return $result;
      }
}

After that, you just need to clear the cache and you can check on your checkout page. so you can add as you need in any field in checkout page.

Like to read: Custom validation checkout for magento 2

That’s it!

I hope this blog helps you. If you have any further queries regarding this blog write your query in the comment section.

Divyesh Dusara

Author