Reading list Switch to dark mode

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

    Updated 16 July 2021

    How To Add Custom Field At Checkout Address Form In Magento 2 : Sometime we need to add some extra fields to show in checkout customer address form.so today i will let you know. how you can add custom address field at checkout address from.

    1 => we need to 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

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

    2 => Create plugin class on this Directory.
    app\code\CompanyName\Module\Model\Plugin\Checkout

    <?php
    namespace CompanyName\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' => 'custom-field'
                ],
                'dataScope' => 'shippingAddress.custom_attributes.custom_field',
                'label' => 'Custom Field',
                'provider' => 'checkoutProvider',
                'visible' => true,
                'validation' => [],
                'sortOrder' => 250,
                'id' => 'custom-field'
            ];
    
    
            return $jsLayout;
        }
    }
    
    

    After these two steps your custom field will be display at checkout address form. check the below screenshot.

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    image

    Hope so it will help you.

    . . .

    Leave a Comment

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


    2 comments

  • Devkaran Patidar
    • Webkul Support
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home