Magento 2How To GuideMay 2, 2024Simon Walker

How to Add Custom Field to Checkout in Magento 2?

How to Add Custom Field to Checkout in Magento 2?

In online shopping, the checkout stage is undoubtedly the most important one. This is where a user decides whether they wish to go through with the purchase or abandon their cart altogether. One might think that if a user reaches this stage, they’ll likely complete their purchase. However, it is not the case as evident by the below statistic.


Source: Statista

The above statistic shows the average cart abandonment rate from 2006 to 2023. As you can see, the rate is still quite high. The below figure highlights the cart abandonment rate for specific categories and device type.


Source: Statista

What do these figures indicate? They confirm a need to focus on the checkout stage and refine it to meet the customer expectations. One option is to keep the default Magento checkout fields. The second option is to replace the default fields with Magento 2 custom checkout fields.

Reasons for Cart Abandonment

The figure below highlights the top reasons for cart abandonment.


Source: Statista

The above figure provides valuable insights into why your eCommerce store might be experiencing a high cart abandonment rate. However, not all these reasons are applicable to your store. Remember, cart abandonment reasons vary across niche and every store.

Why Focus on Magento 2 Add Custom Field to Checkout

The reason you for adding a custom field to checkout in Magento 2 is because it allows you to personalise the stage according to your store and target audience. 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.


Custom Checkout Fields

Magento 2 Custom Checkout Fields Extension: Easily add extra fields to checkout for gathering customer information.

Solution to Magento 2 Add Custom Field to Checkout

Magento 2 custom checkout fields extension by FME Extensions 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. You may be wondering why you need an extension, right?

Magento 2 does not allow you to customise the checkout field. Therefore, you have no option but to use an extension if you wish to add a custom field to checkout in Magento 2. 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?

If you are searching for ‘Magento 2 add custom field to shipping address’, keep reading. 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.

Magento 2 add custom field to checkout

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.

Magento 2 Checkout Field Validation

Final Words on Magento 2 Add Custom Field to Checkout

Magento 2 custom checkout fields extension by FME is a feature-rich and easy to use high quality extension which makes adding custom fields to checkout hassle-free. 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 Extensions: