---
title: "Magento 2: How to Add Placeholder Text in Field for Checkout Page"
url: "https://magecomp.com/blog/magento-2-add-placeholder-text-in-field-for-checkout-page/"
date: "2022-10-31T14:47:57+00:00"
modified: "2025-02-14T09:37:05+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "How To"
  - "Magento 2"
word_count: 313
reading_time: "2 min read"
summary: "Hello Magento Friends,"
description: "Add placeholder text in checkout page fields in Magento 2 to show additional descriptions to users. Look at the steps."
keywords: "How To, Magento 2"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Laravel 8: Database Seeder with Example"
    url: "https://magecomp.com/blog/laravel-8-database-seeder/"
  - title: "How to add a Custom Column to the Products Grid of Magento 2?"
    url: "https://magecomp.com/blog/add-custom-column-products-grid-magento-2/"
  - title: "How to Generate and Save Invoice PDF Automatically in Magento 2?"
    url: "https://magecomp.com/blog/generate-and-save-invoice-pdf-automatically-in-magento-2/"
---

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

_Published: October 31, 2022_  
_Author: Dhiren Vasoya_  

![How to Add Placeholder Text in Field for Checkout Page M2](https://magecomp.com/blog/wp-content/uploads/2022/10/How-to-Add-Placeholder-Text-in-Field-for-Checkout-Page-M2-1024x512.webp)

**Hello Magento Friends,**

Today we will learn to Add Placeholder Text in Field for Checkout Page in Magento 2.
[![Hire Magento Programmer](https://magecomp.com/blog/wp-content/uploads/2025/02/Hire-Magento-Programmer-CTA-1.webp)](https://magecomp.com/services/hire-magento-programmer/)

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="MagentoCheckoutBlockCheckoutAttributeMerger">
          <pluginname="add_placeholderto_checkout" type="VendorExtensionPluginBlockCheckoutAttributeMerger" sortOrder="10"/>
     </type>
</config>
```

[![Magento Malware Removal](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-Malware-Removal-CTA-6.webp)](https://magecomp.com/magento-malware-removal.html)

**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 VendorExtensionPluginBlockCheckout;

class AttributeMerger
{
     public function afterMerge(MagentoCheckoutBlockCheckoutAttributeMerger $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**](https://magecomp.com/magento-2-custom-checkout-fields.html).
[![Magento 2 Speed & Performance Optimization Services](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-2-Speed-Performance-Optimization-Services-CTA-2.webp)](https://magecomp.com/magento-performance-optimization.html)

**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/magento-2-add-placeholder-text-in-field-for-checkout-page/](https://magecomp.com/blog/magento-2-add-placeholder-text-in-field-for-checkout-page/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-18 07:12:37 UTC_