How to add custom field to Shipping Address form in Magento 2 Onepage Checkout

Magento2 checkout is much improvement than magento 1. It’s complex too. So adding new field is not same as magento 1, but in magento 2 it’s simple. So we go with much explanation for adding custom input field.

Suppose vendor name SR and Module name is CheckoutAdditionalField

Step 1: Create module.xml

app/code/SR/CheckoutAdditionalField/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="SR_CheckoutAdditionalField" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Step 2: Create composer.json

app/code/SR/CheckoutAdditionalField/composer.json
{
    "name": "sr/module-checkoutadditionalfield",
    "description": "Checkout Additional Field",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/framework": "100.0.*",
        "magento/module-ui": "100.0.*",
        "magento/module-config": "100.0.*",
        "magento/module-checkout": "100.0.*"
    },
    "type": "magento2-module",
    "version": "100.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [ "registration.php" ],
        "psr-4": {
            "SR\\CheckoutAdditionalField\\": ""
        }
    }
}

Step 3: Create registration.php

app/code/SR/CheckoutAdditionalField/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'SR_CheckoutAdditionalField',
    __DIR__
);

Step 4: Now need to overwrite Magento\Checkout\Block\Checkout\LayoutProcessor process method. So create a plugin,

SR/CheckoutAdditionalField/Plugin/Checkout/Model/Checkout/LayoutProcessor.php
namespace SR\CheckoutAdditionalField\Plugin\Checkout\Model\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']['delivery_date'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/date',
                'options' => [],
                'id' => 'delivery-date'
            ],
            'dataScope' => 'shippingAddress.delivery_date',
            'label' => 'Delivery Date',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 250,
            'id' => 'delivery-date'
        ];

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['drop_down'] = [
            'component' => 'Magento_Ui/js/form/element/select',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/select',
                'id' => 'drop-down',
            ],
            'dataScope' => 'shippingAddress.drop_down',
            'label' => 'Drop Down',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 251,
            'id' => 'drop-down',
            'options' => [
                [
                    'value' => '',
                    'label' => 'Please Select',
                ],
                [
                    'value' => '1',
                    'label' => 'First Option',
                ]
            ]
        ];

        return $jsLayout;
    }
}

You can download this sample module from here

41 thoughts on “How to add custom field to Shipping Address form in Magento 2 Onepage Checkout

  1. Thank you @sohelrana09 for posting this useful article. How about if I need to add “date of birth” to the check out page. Could you please provide some examples? Thank you.

  2. Hi Sohel,
    Very Nice articles, thanks for posting.
    I have added custom field called Favorate address which is a drop down field, should appear on shipping address page. I need to populate values of this custom field from the database.
    On selecting this field it should save as default shipping address. Could you please explain me how to do that and where to make changes? Thank you.

    1. Hi,

      Please read this post very carefully then you can display your custom dropdown. And this post do not cover save part. So in future I will add this too.

      Thanks!

  3. Hello sohelrana,

    i add your module, then i got adding custom fields for you specified in your code. after i remove you module in app/code folder. then upgrade my magento (bin/magento setup:upgrade) now also show added custom field , how to remove this custom fields.

    Thanks!

  4. Hello Sohelrana09,

    I added your module, then I got custom module in my checkout page, after I remove your module, then upgrade my magento (bin/magento setup:upgrade), now also show added custom field in checkout page how to remove this?

    Thanks!

      1. Hi,
        I am beginner of magento so, I searched about uninstall field , but i don’t know how to do this, send me any suggestion to this..

        Thanks!

  5. is that possible to change street[0] input field,iwant to do because i want to add onchange event for street[0] input butproblem is my js is load first so i cannot get street[0] field

  6. Hi, i follow this to create two custom inputs and everything was ok, but I need to hide those inputs in shipping address and show them just in each payment billing address.

    I am using the visible parameter in the xml under each item under the shipping-address-fieldset declaration.

    Could you please say me how to hide them?

    Tahnks!

  7. Hello sohelrana09.
    I reccomend you to rewrite Step 4. You can just add your own Layout Processor and dont need to Plugin it. For adding your own LayoutProcessor for checkout, you need to create SR/CheckoutAdditionalField/etc/frontend/di.xml
    with content some like this:

    SR\CheckoutAdditionalField\Block\Checkout\LayoutProcessor

  8. How can I convert city field to drop-down in checkout step in Magento2?
    Also if I am making the changes in core files for city input field to dropdown, it is not reflecting on frontend. Below is the file where I have made change.
    magento2\vendor\magento\module-checkout\Block\Cart\LayoutProcessor.php

  9. Hi,

    I follow this to create custom fields for shipping address, it works well! However, custom fields does’t appear on billing address form (when i chose “no” at checkbox “My billing & shipping address are not the same”).

    How can i add custom fields to billing address?

    Thanks.

  10. Hi Sohel,

    Can you tell me how to add a custom checkbox in both shipping and billing address forms in checkout page.

    Thanks,

  11. Thank you very much for this article.

    I am creating a custom shipping module, and I would like to have these custom fields visible only when my custom shipping method is selected ; could you help me understand how to do this please ?

    Thanks a lot !

  12. Thank you very much for this article.

    I am creating a custom shipping module, and I would like to have these custom fields visible only when my custom shipping method is selected ; could you help me understand how to do this please ?

    Thanks a lot !

  13. Hello Sohel!

    How can I put a label on the other 3 lines of the address in the checkout and in the form of the customer?

    Thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s