When it comes to buying in an E-commerce store, checkout page is the most important one. The purpose of the checkout page is to collect all the details from customers as to how they would like to make payment, how and where to ship the purchased item. A typical checkout page asks for customer’s name, billing & shipping address, shipping method and payment information.
The default Magento 2 platform offers a set of checkout fields, however not all merchants/customers would need the same fields all the time. They may in certain situations need to add custom fields to checkout to enrich their checkout page. This is where Magento 2 custom checkout fields come in handy. Store owners also may need to add custom fields according to their business model and customer’s expectations.
Solution to Magento 2 Add Custom Field to Checkout
Magento 2 custom checkout fields extension by FMEextensions offers an easy solution to design a Magento 2 custom checkout page. It allows store owners to add variety of unlimited custom fields to any checkout step effortlessly. The frontend demo below displays checkout fields including custom checkout fields after adding an item to cart and proceeding to checkout.
How to Use the Extension to Add Custom Field to Checkout?
- When you login to the Admin Panel, click FME Extensions -> Manage Fields
- Click Add New Attribute to add a new custom field to any checkout step.
- Under ‘Properties’ tab, provide custom field’s properties such as field type, default value etc. as shown below.
- Click Labels tab to manage custom fields Labels
- Under ‘Storefront Properties’ tab, you can enable or disable the custom field
- Choose the checkout step where you want to display the field
- Sort the field and use tooltip to provide more information about the field.
How to Add New Field in Magento 2 Shipping Address?
As mentioned above, the extension lets merchants add custom fields to any checkout step. The following demo image shows how to do this. Just select ‘Shipping Address’ in the 'Checkout Step' dropdown and the field will be displayed in the shipping address form.
Example of custom field added at the 'Shipping Address' form
The following example shows the added custom checkout fields:
- Checkout field added at the ‘Shipping Address’ step.
How to Add Custom Field to Magento 2 Billing Address?
To add custom field to the billing address form, select 'Billing Address' in the 'Checkout Step' dropdown.
Example of custom field added at the 'Shipping Address' form
How to Setup Magento 2 Checkout Field Validation?
In order to get data in the correct form, it is important that text fields be validated for specific form of data. The extension lets you validate text fields for Email, URL, Date, Decimal number, Integer number, Letters & Alphanumeric values. It is shown in the demo image below.
Final Words:
Magento 2 custom checkout fields & order attributes extension by FME is a feature-rich and easy to use high quality extension which makes adding custom fields to checkout ridiculously easy. FME also offers 45 days money back guarantee, free lifetime support & free lifetime upgrades. If you have any question regarding the extension, please contact support team by submitting a ticket here.
Related Articles: