How to add a custom checkout field to Magento 2?
It might seem like custom checkout fields are a simple thing, but such a feature of Magento 2 as adding a custom field to checkout can be an important part of your store. For example, sometimes, you need to gather additional customer info to comply with the law. Thus, by adding a custom field, you have an opportunity to collect all the needed data.
How to make Magento 2 checkout page customization?
Magento 2 checkout page customization is a technically complex process that requires knowledge of the code. For example, you can see how to add a checkbox on checkout. With the Custom Checkout Fields extension, you will be able to create new fields without technical knowledge. It provides an opportunity to create a personalized checkout and collect all the necessary user information.
How to add a new field to an address form in Magento 2?
For example, you need to let the customer choose whether they want contactless delivery. Magento add custom field to order process consists of the following steps:
Step 1. Go to Stores > Configuration > Amasty Extensions > Order Attributes to configure the general settings.
Step 2. Then navigate to Sales > Manage Order Attributes. Click the Add New Order Attribute button to create an attribute. Now you can edit Attribute Properties.
Step 3. In the Default Label field, define the attribute label that will be shown on the frontend:
Step 4. The Attribute Code field defines the attribute code that will be applied for internal needs.
Step 5. Then, choose the Store View and Customer Groups for which the attribute will be visible.
Step 6. Choose the appropriate input type for an attribute in the Frontend Input Type field:
In our case, we use the Yes/No type, but it’s possible to choose among various input types depending on your specific needs
REMEMBER that after the attribute code and the catalog input type are specified and saved, they can’t be changed.
Step 7. In the Values Required field, you have to choose whether customers will be able to leave this attribute field blank while getting registered. Preset the Default Value.
Step 8. Next, move to the attribute type settings:
Enable Visible on frontend/backend option to display the attribute on the frontend/backend.
Step 9. In the Display Sorting Order field, you need to set the sorting order for the attribute display on the frontend.
Step 10. Save Entered Value For Future Checkout field has a Yesoption, which means that the registered customers will need to fill in the field only once, after that the field will be automatically filled in (with the possibility to edit).
Step 11. Enable Show on Admin Grids option to display the attribute on the backend grids:
Step 12. Enable the Include Into HTML Print-out, Include Into PDF Documents, Include Into Transactional Emails options, if needed.
Step 13. Then, switch to the Title, Tooltip, Options tab:
Manage Titles field specifies the attribute title for each store view for which it is enabled.
Step 14. Set Manage Tooltip to display near the attribute on the frontend. When done, please, proceed to the Shipping Methods tab.
Step 15. In the Shipping Methods field, you can specify particular shipping methods to show the extra attribute only to those customers who choose the specified methods:
Step 16. Save the attribute.
To learn more about other customization options, you can read the extension's user guide.
In addition, you can define custom relationships between checkout attributes so that the customer sees only the required checkout fields. This improves the overall customer experience.
Also, this extension is well compatible with One Step Checkout. With its help, you can optimize the checkout page and reduce the cart abandonment rate.
What’s the importance of Magento 2 checkout page?
Magento 2 checkout page is the most important page in the entire store. If something goes wrong with it, the order won't be placed, which means that all the efforts to fill the catalog were in vain. That's why it's important to check whether everything is clear to buyers.