How to Add Placeholder Text to Fields in Checkout in Magento 2

In this tutorial, Today I will explain to how to add placeholder text to fields in checkout page in Magento 2. In checkout page, There are no placeholder available in text fields. Only labels by default display. Now, If you want to add placeholder text in fields then, you can add using this below ways.

You may also like this :

1) First of all, Let’s assume that you have created simple module. After that, You need to create di.xml for create plugin at app/code/RH/Helloworld/etc/frontend/ and paste the below code :

Copy Code


<?xml version="1.0" ?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<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="add_placeholder_to_checkout"
            type="RH\Helloworld\Plugin\Block\Checkout\AttributeMerger"
            sortOrder="10"/>
    </type>
</config>

2) Then, You need to create AttributeMerger.php file at app/code/RH/Helloworld/Plugin/Block/Checkout/ to add placeholder code and paste the below code :

Copy Code


<?php
/**
 * Created By : Rohan Hapani
 */
namespace RH\Helloworld\Plugin\Block\Checkout;

/**
 * Class AttributeMerger
 * @package RH\Helloworld\Plugin\Block\Checkout\AttributeMerger
 */
class AttributeMerger
{
    /**
     * @param \Magento\Checkout\Block\Checkout\AttributeMerger $subject
     * @param $result
     * @return mixed
     */
    public function afterMerge(
        \Magento\Checkout\Block\Checkout\AttributeMerger $subject,
        $result
    )
    {
        $result['firstname']['placeholder'] = __('Enter First Name');
        $result['lastname']['placeholder'] = __('Enter 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;
    }
}

Now, Just clean cache and check it on your checkout page. I added all text field’s place holder value. You can set value in which fields you want to dispaly.

That’s it !!!

I hope this blog is easy to understand about how to add placeholder text to fields in checkout page in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep liking and sharing !!

Post Views: 4,417