How to create Custom Field on checkout page in Magento 2
User experience plays an important role in any online store. If you provide a rich user experience to your visitor then in exchange you will get an increase in your revenue. You can do this with personalized content, improve conversion with fast checkout, and provide seamless shopper experiences across multiple devices at anywhere, anytime. Every e-commerce store has unique checkout page because they address a variety of requirements. Not all store owners or customers would require the same set of field that Magento offers. Then here comes the role of adding custom fields in the online store. By creating custom fields an owner can provide the fields that are required by the business or its customers.
This blog is about creating custom fields on checkout page in Magento 2. By adding these fields owner can know more about customers, their requests and feedbacks. Once the owner gets the more customer data then the better marketing strategy can be planned. The easiest way to obtain the customer data is to ask customers through custom fields at checkout page.
The coding starts here…
Create a new module with this folder structure. For instance, I have created a module with Ecomsolver as Vendor name and Customcheck as the module name.
1. The path will be as follows app/code/Ecomsolver/Customcheck
2. In this create a file registration.php with the following code –
\Magento\Framework\Component\ComponentRegistrar::r egister(
\Magento\Framework\Component\ComponentRegistrar::M ODULE,
'Ecomsolver_Customcheck',
__DIR__
);
3. Now create a folder with name “etc” in Customcheck. Then create XML file in this. Path of XML file will be app/code/Ecomsolver/Customcheck/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framewo rk:Module/etc/module.xsd">
<module name="Ecomsolver_Customcheck" setup_version="1.0.0">
<!-- <sequence>
<module name="Magento_Backend"/>
</sequence> -->
</module>
</config>
4. Now create a folder with name “frontend”. Place a XML file in it. Path of XML file will be app/code/Ecomsolver/Customcheck/etc/frontend/di.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framewo rk:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\LayoutProces sor">
<plugin name="add_custom_field_checkout_form" type="Ecomsolver\Customcheck\Model\Plugin\Checkout \LayoutProcessor" sortOrder="100"/>
</type>
</config>
5. Create a folder with name “Model”. Again create folder in it Plugin -> Checkout. In this create a file. The path of a file will be model/Plugin/Checkout/LayoutProcessor.php
namespace Ecomsolver\Customcheck\Model\Plugin\Checkout;
class LayoutProcessor
{
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' => 'Password',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => [],
'sortOrder' => 250,
'id' => 'custom-field'
];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field2'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress.custom_attributes',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'options' => [],
'id' => 'custom-field2'
],
'dataScope' => 'shippingAddress.custom_attributes.custom_field2',
'label' => 'Confirm Password',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => [],
'sortOrder' => 260,
'id' => 'custom-field2'
];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field3'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress.custom_attributes',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/checkbox',
'options' => [],
'id' => 'custom-field3'
],
'dataScope' => 'shippingAddress.custom_attributes.custom_field3',
'label' => 'Create Account',
'provider' => 'checkoutProvider',
'visible' => true,
'checked' => false,
'validation' => [],
'sortOrder' => 250,
'id' => 'custom-field3'
];
return $jsLayout;
}
}
Using this you can create custom field on the checkout page. Hope this script turned out to be useful in creating custom fields providing more options for your customer. If you have any queries or feedback, then feel free to drop us a line. Ecomsolver is a company promoted by a group of highly experienced professionals. Specialize in providing top-notch web solutions through innovation and use of latest technology.
