The checkout page is where a visitor finally decides to pay. If this step is confusing, you lose the order. That’s why Magento 2 checkout is a powerful area for improvements. If you are unsure how to improve it, you can always hire a Magento developer to optimize the process and boost conversions.
How can store owners use Magento 2 checkout customisation to add meaningful features like gift notes or GST numbers? By introducing custom fields Magento, merchants gather useful details directly at checkout.
So today, we will walk through Magento 2 checkout page customisation. We will also explain the use cases and build a working Magento 2 checkout module with examples. By the end, you’ll know how to handle Magento 2 checkout fields confidently.
Why Add Custom Fields to Magento 2 Checkout?
Let;s consider real shopping scenarios. A customer may want to leave a delivery instruction like “Leave the parcel with the neighbor if I’m not home.” Others may want to include a Purchase Order number for business accounts or a Gift Message for birthdays.
By default, the Magento 2 checkout fields are limited. But with Magento 2 checkout customisation, you can add these needs directly into the process.
For example:
- E-commerce gifts → Add a “Gift Note” custom field.
- Corporate buyers → Add a “PO Number” custom field.
- Delivery-sensitive products → Add a “Preferred Delivery Time” field.
The benefit? Customers get a tailored experience and merchants collect exact data needed to fulfill orders without confusion. Using Magento 2 UI component checkout, such improvements are not only possible but also stable across upgrades. When you add custom fields in Magento 2 checkout, it builds trust and reduces post-order back-and-forth.
How to Add Custom Fields – Step-by-Step Guide
Now let’s build a custom field step by step.
Step 1: Create a Custom Module
Always keep changes inside a module. Suppose you want to add a “Delivery Note” field. Create Vendor_CheckoutFields module.
registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_CheckoutFields',
__DIR__
);module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_CheckoutFields" setup_version="1.0.0"/>
</config>This clean structure makes your Magento 2 checkout module independent from Magento core code.
Step 2: Modify checkout_index_index.xml
Add the field using XML. Example: a “Delivery Note” input box in the shipping step.
<item name="delivery_note" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<item name="customScope" xsi:type="string">shippingAddress.custom_attributes</item>
<item name="template" xsi:type="string">ui/form/field</item>
</item>
<item name="label" xsi:type="string">Delivery Note</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">shippingAddress.custom_attributes.delivery_note</item>
<item name="sortOrder" xsi:type="number">250</item>
<item name="visible" xsi:type="boolean">true</item>
</item>Now the field appears on the Magento 2 checkout page customisation screen.
Step 3: Add Field to JavaScript Component
Magento uses Knockout.js to handle UI. Let’s bind the new custom fields Magento with observables.
define([
'uiComponent',
'ko'
], function(Component, ko) {
return Component.extend({
defaults: {
delivery_note: ko.observable('')
}
});
});This ensures the field value is stored dynamically. In the shipping step, you now see a working text box via checkout/onepage/shipping component.
Step 4: Use Extension Attributes to Save the Custom Field
Merchants need the data saved in order details. Add extension attributes:
extension_attributes.xml
<extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
<attribute code="delivery_note" type="string" />
</extension_attributes>This maps the new field into quote and order tables. When an order is placed, Magento saves the delivery note permanently. That’s why Magento 2 checkout customization with extension attributes is reliable.
Step 5: Retrieve the Field in Admin
Admins can see the customer’s message while processing the order. For example, “Ring the bell twice.” Add it to the admin order view layout. This makes the Magento 2 checkout fields quite useful.
Tips and Best Practices
- Don’t overload checkout with too many custom fields Magento. Only ask what you need.
- Validate data: “PO Number” should allow only alphanumeric characters.
- Use Magento 2 UI component checkout instead of custom HTML, so that upgrades won’t break.
- Test your Magento 2 checkout module in staging before going live.
- Always design the Magento 2 checkout page customisation with the customer in mind: simple, short, fast.
CTA
So, today we saw the step-by-step guide on how to build a clean Magento 2 checkout module, define Magento 2 checkout fields and display them in admin. If you want advanced features like conditional fields, you can use extensions or even hire Magento developer experts., and for that you can always write to us.
