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

Written by Divyesh Dusara

Oct 13, 2021

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


<?xml version="1.0" ?>
<config xmlns:xsi="" 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"/>


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


We can help you with

  • Dedicated Team
  • Setup Extended Team
  • Product Development
  • Custom App Development

Schedule a Developer Interview And Get 7 Days Risk-Free Trial

Fill out This Form and one of Our Technical Experts will Contact you Within 12 Hours.

    Copyright © 2023 DOLPHIN WEB SOLUTION. All rights reserved.

    TO TOP