For adding custom classes to the fieldset in the shipping adding and billing address page we may use the layout processor plugin to execute this.
For installing layoutprocessor plugin we need to create a php file in the following location:
app/code/JJ/Catalog/Plugin/Checkout/Block/LayoutProcessor.php
Here is a example to change the label of the street address to Address
{
/**
* Position the telephone field after address fields
*
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
* @param array $jsLayout
*
* @return array
*/
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
)
{
{
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['street']['label'] = __('Address');
}
return $jsLayout;
}
}
}
Here we can also add custom validation and classes.
Attaching a code with all the mentioned purposes:
<?php
namespace JJ\Catalog\Plugin\Checkout\Block;
class LayoutProcessor
{
/**
* Position the telephone field after address fields
*
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
* @param array $jsLayout
*
* @return array
*/
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
)
{
{
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['region_id']['label'] = __('State');
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['postcode']['label'] = __('Post Code');
}
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children']
)) {
foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'] as $key => $payment) {
if (isset($payment['children']['form-fields']['children']['region_id'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['region_id']['label'] = __('State');
}
if (isset($payment['children']['form-fields']['children']['postcode'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['postcode']['label'] = __('Post Code');
}
if (isset($payment['children']['form-fields']['children']['street'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['street']['label'] = __('Address');
}
}
return $jsLayout;
}
}
}
for each statement is used for the billing address page modifications