Magento 2 Add Custom Field to Checkout Address Form • Devhooks

While development website on Magento 2 developers want to add custom filed on checkout address form just because lot’s of customer want to add custom field on checkout from in Magento 2.

So, In this post we will let you know. how to add custom field on checkour address form. In Magento 2 it’s easy to add custom field on checkout address form using plugin. In Magento 2 ‘Interception’ design pattern used in Plugins. Interception is inserting code dynamically without changing the original class behaviour. In this process code is dynamically inserted between the calling code and the target object

In Magento 2 we can create and use three types of Plugin.

Before listener Plugin
After listener Plugin
Around listener Plugin

Please follow the simple steps to add Custom Field At Checkout Address Form.

Let’s Start

Step 1: Create a plugin for the \Magento\Checkout\Block\Checkout\LayoutProcessor::process method. because billing and shipping address forms are generated dynamically.

So we need create a plugin on process method LayoutProcessor class. First we have to make an entry in di.xml on this path app/code/CompanyName/Module/etc/frontend/di.xml

saveCopyzoom_out_map<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" type="VendorName\Module\Model\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

Step 2: Create plugin class on this Directory. app\code\VendorName\Module\Model\Plugin\Checkout

Here we used After listener Plugin.

saveCopyzoom_out_map<?php
namespace VendorName\Module\Model\Plugin\Checkout;
class LayoutProcessor
{
    /**
     * @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']['custom_field'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'add-custom-field'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.custom_field',
            'label' => 'Custom Field',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 250,
            'id' => 'add-custom-field'
        ];


        return $jsLayout;
    }
}

After followed these two simple steps your custom field will be display at checkout address form. If incase it’s not display then check then try to flush Magento cache and refresh the page again and check. If you want to flush cache usgin CLI the reffer our another post which magento 2 useful commands.

We hope this simple post is helped you to Add Custom Field At Checkout Address Form. Do comment below in case if you need any help on this. Don’t forget to bookmarke this for you feature refrence.

P.S. share this post with other developer.

Review other articles maybe it'll help you too.

How To Add Custom Field At Checkout Address Form – Magento 2