Adding custom classes to Magento shipping page address fields

Create plugin after Attribute merge Plugin to add custom classes to shipping address page

In your module create MODULE/NAME/etc/di.xml

<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="\MODULE\NAME\Model\Plugin\AttributeMergerPlugin"/>
    </type>
</config>

Then in \MODULE\NAME\Model\Plugin create a php file AttributeMergerPlugin.php

<?php

namespace MODULE\NAME\Model\Plugin;

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

        return $result;
    }
}

Example:

<?php

namespace JJ\Catalog\Plugin\Checkout\Block;

class AttributeMergerPlugina
{
    public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result)
    {
        if (array_key_exists('checkout-step-shipping', $result)) {
            $result['checkout-step-shipping']['additionalClasses'] = 'checkout-shipping-address';
        }
        if (array_key_exists('telephone', $result)) {
            $result['telephone']['additionalClasses'] = 'mobile-number-validation';
];
return $result;
}
}
}

Leave a comment

Your email address will not be published. Required fields are marked *