Add Custom Class on Checkout Form Field in Magento 2

When we work on the checkout page of Magento 2 sometimes we need to add custom class on checkout form field.

The checkout page gets a bit complicated as it is made of Knockout js.

We can implement a plugin to add custom classes to any field in the customer shipping form on the checkout page in an easy way.

Through custom plugins, customers can add class to any field of the form.

Add Custom Class on Checkout Form Fields

In order to add a custom class on the checkout customer shipping form field, we will develop a custom plugin and through that will inject a class into any form field.

 

Step 1: Add Custom Class on Checkout Form Field Module Registration

For this first, we have to create a registration file so that we can register our custom plugin.

Wishusucess/CustomClass/registration.php
<?php 
/*
* Developer: Hemant Singh Magento 2 Professional
* Website: http://www.wishusucess.com/
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_CustomClass',
__DIR__
);

 

Read more: How to Earn Money Digitally By Blog Writing And Other Way

 

Step 2: Module File for Custom Class Plugin

In this step, we have to create a model file.

As we all know that this is a basic file that holds the basic information details of any model or plugin.

Wishusucess/CustomClass/etc/module.xml
<?xml version="1.0"?>
<!--
/**
* Developer: Hemant Kumar Singh Magento Developer
* Website: http://www.wishusucess.com/
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_CustomClass" setup_version="1.0.0" active="true"></module>
</config>

 

Step 3: Add Dependency Injection File for Custom Class

Here we will tell Magento through a dependency injection file that we are going to make changes to its core functionality through the plugin.

That's why both the file type and name of that plugin will be mentioned in this file.

Wishusucess/CustomClass/etc/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/ObjectManager/etc/config.xsd"> 
<type name="\Magento\Checkout\Block\Checkout\AttributeMerger">
<plugin name="customAttributeMerger" type="\Wishusucess\CustomClass\Model\Plugin\AttributeMergerPlugin"/>
</type>
</config>

 

Step 4: Plugin to Add Custom Class in Form Field

Via this plugin class, we will do some merge in behavior in the checkout form field.

As the checkout form field is loaded, a class will be automatically added.

Through this class, you can decide in which field you have to add the class name.

Wishusucess/CustomClass/Model/Plugin/AttributeMergerPlugin

<?php
/**
* Developer: Hemant Kumar Singh Magento Developer
* Website: http://www.wishusucess.com/
*/
namespace Wishusucess\CustomClass\Model\Plugin;

class AttributeMergerPlugin
{
public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result)
{
if (array_key_exists('telephone', $result)) {
$result['telephone']['additionalClasses'] = 'teliphone_number';
}

return $result;
}
}

Here is an example, I have added a custom class in the Magento default telephone number form field named telephone_number.

You can make any changes you want by using this class.

Because of creating a plugin, you will not need to add anything to any other file.

 

Step 5: Run Below Command

Now you have to run the command given below, then clear the cache, now you will see the class name.

php bin/magento setup:upgrade

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

php bin/magento c:c

Custom Class on Customer Field

Here you can see that the custom class telephone number has been added.

In this way, you can add a custom class to any of the customer form fields as per your wish.

The easiest way to add a class is through a plugin

 

Download This Plugin

 

Similar Posts:

Configure PayPal in Magento 2 : How to Integrate PayPal

PayPal Account: How to Create New PayPal Account, Transfer