Recently, we learned something knew while working on the checkout page for a client’s website. The task was to add placeholder on the billing address fields on the checkout page but this turned out to be not as easy as it sounds.
After digging in deep, we were able to add a placeholder on the form field so without further a do let’s look at the steps to know how to add placeholder on the billing address on checkout page in your Magento 2 website.
Steps to follow
Create your module and add di.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\AttributeMerger">
<plugin name="Company_billingAddress" type="Package\Module\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin"/>
</type>
</config>
Add Plugin.php file under Package\Module\Plugin\Checkout\Block\Checkout\AttributeMerger
<?php
namespace Package\Module \Plugin\Checkout\Block\Checkout\AttributeMerger;
class Plugin
{
public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result)
{
if (array_key_exists('street', $result)) {
$result['street']['children'][0]['placeholder'] = __('Street and number, P.O.box, c/o');
$result['street']['children'][1]['placeholder'] = __('Apartment, suite, unit, building, floor, etc.');
$result['street']['children'][2]['placeholder'] = __('Additional Info');
}
return $result;
}
}
By using the above steps, you can also add placeholders for other fields as well.
For any queries about your website, contact us and we can help you out with our Magento expertise.