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.
Hope so it will help you.
https://uploads.disquscdn.com/images/f47b19a15466bf99d6ecbec1a404d3e24f08ad1303423633ae02b7680204b5df.png