Override Checkout Street Address Placeholder in Magento 2

In this article, I am going to explain how we can override checkout street address placeholder of customer address at checkout.

Wishusucess_StreetAddressPlaceholder is a Magento 2 plugin which has developed by a Wishusucess Magento 2 expert developer to override the Magento 2 customer street address at the checkout.

By installing this plugin you simply can get change the placeholder of the checkout street address.

 

Override Checkout Street Address Placeholder

When we override Magento 2 customer checkout address placeholder then we need to create only four files to create get hose facilities.

app/code/Wishusucess/StreetAddressPlaceholder/registration.php

app/code/Wishusucess/StreetAddressPlaceholder/etc/module.xml

app/code/Wishusucess/StreetAddressPlaceholder/etc/di.xml

app/code/Wishusucess/StreetAddressPlaceholder/Plugin/Checkout/Block/Checkout/AttributeMerger/Plugin.php

 

Register Your Module StreetAddressPlaceholder

We have to register our Magento 2 plugin first through the registration.php file so we need to create this file.

app/code/Wishusucess/StreetAddressPlaceholder/registration.php

<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_StreetAddressPlaceholder
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_StreetAddressPlaceholder',
__DIR__
);

 

Give Override Plugin Basic Information

This file basically consists of the basic information about your plugin and module so here we have to give the plugin name and schema version so when we run Magento setup: upgrade command then this information will store in the setup_version DB table.

app/code/Wishusucess/StreetAddressPlaceholder/etc/module.xml

<?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="Wishusucess_StreetAddressPlaceholder" setup_version="2.0.0" />
</config>

 

Create Dependency Injection File For Plugin

When we develop a plugin to like StreetAddressPlaceholder then the di.xml file consists of the design pattern which means Dependency Injection will allow the object

Magento\Checkout\Block\Checkout\AttributeMerger

to declare its dependencies to an external object

Wishusucess\StreetAddressPlaceholder\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin

that supplies those dependencies.

So here plugin class

(Wishusucess\StreetAddressPlaceholder\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin) concrete implementations for

Magento\Checkout\Block\Checkout\AttributeMerger interfaces.

app/code/Wishusucess/StreetAddressPlaceholder/etc/di.xml

<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="Wishusucess\StreetAddressPlaceholder\Plugin\Checkout\Block\Checkout\AttributeMerger\Plugin"/>

</type>
</config>

 

Create Plugin Class For Override Checkout Street Address

This class will allow you to change the behavior of the core Magento class. Here you can give your desire placeholder for the customer street address input field.

app/code/Wishusucess/StreetAddressPlaceholder/Plugin/Checkout/Block/Checkout/AttributeMerger/Plugin.php

<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_StreetAddressPlaceholder
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
namespace Wishusucess\StreetAddressPlaceholder\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'] = __('Address Line 1');
$result['street']['children'][1]['placeholder'] = __('(Optional: Apt, Building, etc.)');
$result['street']['children'][2]['placeholder'] = __('Landmark');
}

if (array_key_exists('prefix', $result)) {
$result['prefix']['placeholder'] = __('Title');
}

if (array_key_exists('firstname', $result)) {
$result['firstname']['placeholder'] = __('First Name');
}

if (array_key_exists('lastname', $result)) {
$result['lastname']['placeholder'] = __('Last Name');
}

if (array_key_exists('telephone', $result)) {
$result['telephone']['placeholder'] = __('Phone Number');
}

if (array_key_exists('region_id', $result)) {
$result['region_id']['placeholder'] = __('State/Province');
}

if (array_key_exists('city', $result)) {
$result['city']['placeholder'] = __('City');
}

if (array_key_exists('postcode', $result)) {
$result['postcode']['placeholder'] = __('Zip/Postal Code');
}

return $result;

}

}

 

Now, Run Following Command:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deplpy -f

php bin/magento cache:clean

 

Override Checkout Street Address Placeholder-min

Download Link:

Wishusucess Checkout Street Address Placeholder Plugin in Magento 2

 

Hire Magento 2 Expert Developer to Develop Your Store

 

Related Post:

Custom Shipping Text Filed: Show Custom Text Magento 2

Search AutoComplete: Magento 2 Module Add All Category for Search

Sort By Price: Add Sort By Price High to Low & Low To High in Magento 2

 

Recommended Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2

Magento Store: Best 36 Magento Websites Example in The World

SEO Packages: How Much Do SEO Packages Cost in India, SEO Pricing