4

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

7

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

  • 2
    But that adds an INPUT element. What if I need a SELECT element? I cannot do it at the moment. – jstuardo Mar 11 '16 at 19:39
  • How about if you need to map that form field (ie checkbox for opt-in) to customer attribute instead of customer address attribute? – diazwatson Jun 1 '17 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 Nov 16 '17 at 11:10
  • i have created an extension for that but not working... can you please help me ? – Sarfaraj Sipai Dec 19 '17 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, privacy policy and cookie policy

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