Magento 2 Blog • May 10, 2022

Magento 2 How to Add Custom Field to Shipping Address Section on The Checkout page

Hello Guys! 👋

In this blog, we learn how to add a custom field to the shipping address section on the checkout page.

Sometimes store owners need to add a custom field to get additional data from customer from checkout shipping address, so this blog is helpful.

Please follow the below step to add this functionality.

STEP 1: Add di.xml in following path

app\code\Vendor\Extension\etc\frontend

<?xml version="1.0"?>
<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\LayoutProcessor">
        <plugin name="add_custom_field_checkout" type="Vendor\Extension\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

STEP 2: Add LayoutProcessor.php in following path

app\code\Vendor\Extension\Plugin\Checkout

<?php

namespace Vendor\Extension\Plugin\Checkout;

class LayoutProcessor
{
    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']['gst_number_field'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'gst-number-field'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.gst_number_field',
            'label' => 'GST Number',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 250,
            'id' => 'gst-number-field'
        ];
        return $jsLayout;
    }
}

Hope! It will help you

Thank you 😊