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
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Ayakil_AddPlaceholderText', __DIR__ ); |
Create the module.xml file
1 2 3 4 |
<?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
1 2 3 4 5 6 |
<?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\
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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.