5

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

For example:

add select box like "Country" below phone number field

2 Answers 2

9

Create new customer address attribute and map this attribute by xml. So after attribute creation create checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="customer_country" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">400</item>
                                                            </item>
                                                            <item name="custom_field" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">410</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Read more about this from here

You can download example module from Here

4
  • 2
    But that adds an INPUT element. What if I need a SELECT element? I cannot do it at the moment.
    – jstuardo
    Commented Mar 11, 2016 at 19:39
  • 1
    How about if you need to map that form field (ie checkbox for opt-in) to customer attribute instead of customer address attribute?
    – diazwatson
    Commented Jun 1, 2017 at 1:18
  • @sohel-rana I need to add new text field into the default shipping address form. I tried your module and it added 2 fields, but those fields were added at the end of the existing form. How can I put my new field inside the existing form? (Ex: my new field is RefererName and I want to put it after Company and Street Address) , How can I do that? And if I wanted to add more fields, how can I modify LayoutProcessor.php from your module?
    – Joey
    Commented Nov 16, 2017 at 11:10
  • i have created an extension for that but not working... can you please help me ? Commented Dec 19, 2017 at 12:14
0

Check out this tutorial I found for adding delivery date. For other datatypes, like select or test, you can change that in the LayoutProcessorPlugin.

http://oyenetwork.com/articles/magento2-devliery-date-module-creation-from-scratch/

You can also avoid using Observers by hooking into the OrderRepository and writing a beforeSave function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.