Magento Expert Forum - Improve your Magento experience

Results 1 to 3 of 3

How to create Custom Field on checkout page in Magento 2

  1. #1
    Junior Member Ecomsolver's Avatar
    Join Date
    Jul 2018
    Location
    Jaipur,India
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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:


  2. #2
    Junior Member
    Join Date
    Nov 2019
    Posts
    1,083
    Thanks
    6
    Thanked 3 Times in 3 Posts

    Default

    Hey there!
    I'd like to suggest a handy tool that helps to add Custom Field not only on the checkout page but also other pages of your Magento 2 store. This module is known as Customer Attributes Magento 2 Extension.

    This extension helps the store owner to manage and add new customer attributes. By using Customer attributes extension, the store owner can create additional fields on the customer account register page, customer account edit page, admin manage customers, and so on.

    Name:  Customer-Attribute-Edit-Account-Information.png
Views: 15
Size:  60.4 KB

    Name:  Customer-Attribute-New-Attribute 2.png
Views: 15
Size:  39.4 KB

    Key Features:
    • Manage All Customer Attributes
    • Easy To Install
    • Fully Responsive
    • Enable/Disable From Backend
    • Create Unlimited Additional Fields
    • Multiple Options For Attribute Display
    • Set Input Validation For Attributes
    • Default Value For The Attributes

    Last edited by Mark Henry; 28-06-2020 at 12:07 PM.

  3. #3
    Junior Member
    Join Date
    Sep 2018
    Location
    Oman, Muscat
    Posts
    2,084
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •