Magento Expert Forum - Improve your Magento experience
-
Junior Member
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.
View more threads in the same category:
- buy a USA/UK passport online( https://legitcleandocs.com)visa, SNN, id card
- buy registered drivers license (legitcleandocs.com)IELTS, id
- Modalert 200 - Treat Your Oversleeping Issue
- Buy Passport,Driver License,Age & ID Card,(Whatsapp:.......: +1 (551) 239-2904) Visas
- Buy Passport,Driver License,Age & ID Card,(Whatsapp:.......: +1 (551) 239-2904) Visas
- buy real drivers license(https://legitcleandocs.com)buy Austria id card, passports
- Buy registered passport and driver's license online
- buy real passports online(https://legitcleandocs.com)drivers license, visa, id card
- BUY UNDETECTABLE GRADE A+ COUNTERFEIT BANKNOTE(legitcleandocs.com)
- Connecting the Dots: How to Get Magento 2 API Keys
-
-
-
-
Magento 2 add a custom field to Shipping Method
To include this field, first, you can go to Sales > Custom Checkout Field > Configuration. At that point, pick Yes to empower the expansions. These following advances are so straightforward: Default Lable : In this container, you will type the title of a document.
-
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks