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
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