How to Add Custom Fields in Magento 2 Checkout Page?

The average Magento 2 checkout form has 23.48 form elements by default, nearly double the optimal range identified by Baymard Institute research: 12 to 14 fields. That gap is not just a UX inconvenience. It is a direct conversion problem. Baymard's study of checkout behavior found that more than 18% of shoppers abandon their cart specifically because the checkout process felt too long or too complicated. On mobile, where abandonment already sits at 80%, every unnecessary field makes the problem worse.

The solution is not always to remove fields. Sometimes you need to add them: a delivery date picker, a PO number field for B2B accounts, a gift message box, or a special delivery instructions input. The challenge is that Magento 2's native admin gives you limited control. You can make a handful of address fields optional or required, but you cannot reorder them, set their widths, add entirely new field types, or configure them differently per customer group.

This guide covers both approaches. First, we walk through the native Magento admin settings for managing existing address fields, including the original content from this page that has helped store owners for years. Then we cover what the MageDelight One Step Checkout Extension adds on top: visual drag-and-drop field management, width control, billing field configuration, and the ability to add entirely new custom fields without writing a single line of code. Finally, we address the question that every developer and merchant asks after adding a custom field: where does that data actually go once an order is placed?

Why Does Checkout Field Management Matter?

Checkout field decisions affect two seemingly contradictory things: data quality and conversion rate. Add too few fields, and you may ship orders to the wrong addresses or miss the B2B account information your team needs. Add too many and customers abandon before they pay.

The practical answer is to show only the fields that are necessary for the order to be fulfilled correctly, with optional fields available but not required, and completely irrelevant fields hidden by default. For a B2C store shipping physical goods to consumers, that usually means hiding the Company field, making State/Region optional for countries that do not use it, and pre-filling Country where possible. For a B2B store serving wholesale accounts, the calculus flips: Company becomes required, VAT/Tax ID is essential, and PO number fields earn their place on the form.

Custom fields serve the gap in between. Order notes, delivery date preferences, gift message fields, and special instructions are fields that Magento does not include by default but that many stores genuinely need. Managing these without custom development used to require a developer, module creation, and layout XML edits. With the right extension, it takes minutes in the admin.

What Are Custom Checkout Fields in Magento 2?

In Magento 2, the checkout form ships with a fixed set of address and contact fields: First Name, Last Name, Company, Street Address (multiple lines), City, State/Province, Postcode, Country, Phone Number, and Email. These are the "native" fields. You can change some of their visibility rules through the Magento admin, but you cannot reorder them, change their display widths, or add new field types.

Custom checkout fields are any fields added to the checkout form that do not exist in Magento by default. Common examples include:

• Delivery date pickers (for stores that offer scheduled delivery)
• Order notes or special instructions
• PO number fields (for B2B stores)
• Gift message inputs
• VAT registration numbers (for EU merchants)
• Promotional code or referral fields
• Custom dropdowns (e.g., "How did you hear about us?")

Managing these fields, whether native or custom, is what this guide covers.

Method 1: Managing Fields via Native Magento Admin

This is the original approach, available since Magento 2 launched. It does not require any extension and covers the most common field visibility scenarios. The settings are limited, but for stores that only need to toggle a handful of address fields, they do the job.

Name and Address Options

1. First of all, open the admin panel and navigate to Stores > Configuration.

2. After that, expand the CUSTOMERS tab from left side panel and click on the “Customer Configuration”.

3. Each field in this section has three visibility options

• No: The field is hidden from the checkout form entirely
• Optional: The field appears but customers are not required to fill it in
• Required: The field must be completed before the customer can proceed

The fields you can control here include: Number of Lines in Street Address, Show Prefix, Show Middle Name (initial), Show Suffix, Show Date of Birth, Show Tax/VAT Number, Show Gender, and Show Telephone.

A practical note on Telephone: most stores benefit from keeping this Required, as it is used by shipping carriers for delivery notification. Making it Optional tends to result in incomplete order records for carriers that require a contact number.

Making Postal/Zip Code Optional

This one comes up often for stores selling internationally. Some countries do not use postcodes, and a required Postcode field will frustrate customers checking out from those regions.

To adjust this: Still in Stores > Configuration, navigate to General > General > Countries Options. The "Postal Code is Optional for the Following Countries" setting allows you to list country codes where Postcode will not be required, regardless of the field-level setting above.

Removing the State/Province Field

Similarly, many countries do not use the term "State" or "Province" in their addresses. Forcing those customers to select from a dropdown of US states creates confusion and unnecessary friction.

In Stores > Configuration > General > General > States Options, you can configure which countries require a state/region selection. For countries not in that list, the State field will not appear during checkout, even if it is otherwise set to Required.

And there you have it!

Method 2: Visual Field Management with the One Step Checkout Extension

The native Magento admin options cover basic visibility but stop well short of what most stores actually need. The MageDelight One Step Checkout Extension includes a dedicated field management system accessible via a visual admin panel. No code, no XML, no developer required.

The extension adds two dedicated configuration panels: Shipping Fields and Billing Fields. Each mirrors the fields in that section of the checkout form, and each field row has controls for visibility, required status, display width, default value, and custom CSS class.

Managing Shipping Fields

The Shipping Fields panel shows every field that appears in the shipping address section. For each field you can:

• Toggle visibility on or off with a single checkbox
• Set the field as Required or Optional
• Set the display width to 50% or 100% of the form column
• Assign a default value (useful for Country, where most of your customers come from one market)
• Add a custom CSS class for store-specific styling

The 50%/100% width control is one of the more underused settings. Placing First Name and Last Name side by side at 50% each reduces the form's visual height and makes a multi-field checkout feel less intimidating at a glance, without removing any fields.

Managing Billing Fields

The Billing Fields panel works identically to the Shipping Fields panel but controls the billing address section. The most important setting here is the default behavior for "Billing same as Shipping": when enabled, the billing section is collapsed by default, and customers only see it if their billing address differs.

For B2B stores, it is worth enabling the Company and VAT fields in the billing section, even if you hide them in shipping, as tax documentation requirements often apply to the billing address rather than the delivery address.

Drag-and-Drop Field Reordering

Every field row in both panels has a drag handle on the left side. You can reorder fields by dragging them up or down. The order in the admin panel is the order customers see on the checkout form.

The most common reordering decision is moving Email to the top of the form. Email-first checkout reduces the cost of abandonment: even if a customer does not complete the purchase, you have their email address for a recovery sequence. Some stores also move the phone down the form to reduce visible friction in the first few fields a customer encounters.

Field Width and Layout Settings

Field width affects how many fields appear on each visible row. At 100% width, each field takes its own row. At 50%, two adjacent 50% fields share a row. This matters for perceived form length.

A common pattern that reduces abandonment without hiding any information:

• First Name: 50% | Last Name: 50%
• Street Address: 100%
• City: 50% | Postcode: 50%
• Country: 100%
• Phone: 100%

That configuration puts nine fields in five visible rows. On a default Magento layout, those same fields would span nine rows.

Method 3: Adding Entirely New Custom Fields

Native Magento has no admin interface for adding new fields, so delivery date pickers, order note boxes, PO number inputs, and custom dropdowns require either a developer or an extension. With the One Step Checkout Extension, new custom fields are added through the same admin panel with no development work needed.

To add a new custom field:

1. In the Magento admin, go to MageDelight > One Step Checkout > Field Management
2. Click "Add New Field" in the Custom Fields section
3. Select the field type: Text Input, Text Area, Date Picker, Dropdown, Checkbox, or Radio Button
4. Set the label (visible to the customer), the internal attribute code, and the placement (Shipping section, Billing section, or below the order summary)
5. Configure visibility, required status, and width as with standard fields
6. Save and clear cache

That is the complete setup. The field appears immediately on the checkout form in the position and section you specified.

A few field types worth highlighting:

• Date Picker: The most requested custom field type. Lets customers select a preferred delivery date. The selected date is stored with the order and visible in the admin order view.
• Dropdown: Useful for "How did you hear about us?" attribution tracking, or for selecting a specific service option (e.g., installation required: Yes/No).
• Text Area: The standard solution for order notes, special delivery instructions, or gift messages.

Field-by-Field Recommendations: What to Show, Hide, and Make Optional

The table below is a practical starting point for common store configurations. Treat it as a starting point rather than a rigid specification, since your specific product categories, customer geography, and fulfillment requirements will affect the right answer for your store.

A few notes on the table above:

• State/Region marked as Optional for B2C assumes you are using the Countries Options setting to define which countries actually require it. Do not simply hide it globally or you will get incomplete addresses for US and AU customers.
• Order Notes and Delivery Date are custom fields not present in native Magento. They are included here because they are among the most commonly added fields.
• VAT/Tax Number is handled through native Magento's Customer Configuration settings. The extension can also surface it in the billing section with custom styling.

For B2C Stores

The default goal for a B2C checkout is the shortest path to payment. Hide Company, make Phone Optional if your shipping carriers do not require it, and pre-fill Country to your primary market. If your store ships only within one country, consider hiding the Country dropdown entirely and hard-coding it on the backend.

The biggest B2C mistake is keeping all fields required by default. Magento ships that way, and most stores never change it. The phone number alone creates meaningful friction for customers checking out on mobile who have to switch to a numeric keyboard.

For B2B Stores

B2B checkouts legitimately need more information. Company name, VAT number, PO number, and billing address details are often required for accounts payable processing on the buyer's side. Hiding those fields to "simplify" the checkout actually creates downstream friction for procurement teams who need them for expense reporting.

The B2B optimization is different: it is about making required fields clear (good validation messages, sensible tab order) rather than removing them. Adding a PO Number custom field and surfacing VAT in the billing section are both high-value additions for B2B.

Where Does Custom Field Data Go After Checkout?

This is the question that almost every developer asks after adding a custom field: Where do I actually see the value that the customer entered? The answer depends on how the field was configured.

In the Admin Order View

Custom fields added through the One Step Checkout Extension are stored with the order and appear in the order details panel in the Magento admin (Sales > Orders > [Order] > Additional Information). You do not need to write a custom module or add a UI component to surface them there.

In Order Confirmation Emails

By default, custom field data does not appear in Magento's native order confirmation email templates. To include it, you need to either: (a) customize the email template to reference the custom field attribute code, or (b) use the extension's built-in email inclusion setting if it supports it. Check the extension documentation at docs.magedelight.com for the current template variables.

In the Order Grid

Custom fields are not visible in the Sales > Orders grid by default. Adding them as columns requires a small admin grid configuration. Most stores add Delivery Date and PO Number as grid columns when those fields are in use, as they are the fields most likely to be used for filtering and sorting.

In Invoices, Shipments, and Credit Memos

Address-level fields (standard and custom) are copied to the order's billing and shipping address records when the order is placed. They will appear in invoice and shipment PDFs wherever the address block is rendered. Standalone custom fields (order notes, delivery date) require template customization to appear in those documents.

Mobile Checkout Considerations

Mobile checkout abandonment is 80.02%, compared to 66.41% on desktop, according to the Baymard Institute's analysis of 49 studies. Field configuration choices have an outsized effect on mobile because typing is slower, error recovery is more frustrating, and form length feels longer on a small screen.

Three field decisions that specifically affect mobile:

• Field width: On mobile, 50%/50% field pairs collapse to full-width anyway on narrow viewports, so the layout benefit you get on desktop does not always carry over. Test your checkout on an actual mobile device after changing width settings.
• Input types: A Date Picker field renders a native date picker on iOS and Android, which is far faster than typing a date manually. For delivery date fields, always use the Date Picker type rather than a text input with date validation.
• Required field count: Every required field on mobile is a typed input. Each one adds time and potential for validation errors. Mobile abandonment is disproportionately driven by form friction, so be more conservative about marking fields required on stores with a high mobile traffic share.

The One Step Checkout Extension is fully compatible with Hyvä Theme at no extra cost, which means the checkout itself renders as a single step on mobile without the accordion-step behavior of Magento's native checkout. The field management settings described above apply identically to both Luma and Hyvä storefronts.

Troubleshooting Common Field Issues

Here are the fixes for the some common field issues you migh face.

Field Not Appearing on the Checkout Form

If a field is not appearing after you have enabled it in the admin:

• Clear the Magento cache (System > Cache Management > Flush Cache Storage)
• Clear any full-page cache (Varnish or built-in Magento FPC)
• Check that the field is enabled for the correct store view if you are running a multi-store setup
• Confirm that the customer group in use is not excluded from the field's visibility rules
• If using a custom theme, check whether the checkout layout XML in your theme is overriding the extension's layout file

Required Field Validation Not Triggering

A required custom field that does not prevent form submission is usually a JavaScript issue:

• Check the browser console for JS errors on the checkout page
• Ensure Magento's RequireJS bundles are up to date (run bin/magento setup:static-content:deploy)
• If you are using a third-party payment method that submits the form via its own JS, the custom field validation may not be in its submit chain. This requires a patch or custom JS listener.

Field Data Not Saving to the Order

If customers can see and fill the field but the value is not stored with the order:

• Verify that the field's database column was created correctly during extension install (run bin/magento setup:upgrade)
• Check that the observer or plugin that saves the field data is not disabled or conflicting with another extension
• Review the Magento system log (var/log/system.log) for errors at the time of order placement

Custom Field Not Appearing in Order Emails

As noted in the data flow section above, this requires template customisation. The field value is available as an order attribute, but the email templates do not include it by default. Add the attribute code to the relevant email template block and redeploy static content.

Frequently Asked Questions

Check out these FAQs.

1. How Do I Remove the Company Field From Magento 2 Checkout?

Navigate to Stores > Configuration > Customers > Customer Configuration > Name and Address Options and set Show Company to "No". This removes it from checkout entirely. If you are using the One Step Checkout Extension, you can also toggle it off in the Shipping Fields panel without touching the global configuration.

2. How Do I Make the Phone Number Optional in Magento 2?

In Stores > Configuration > Customers > Customer Configuration > Name and Address Options, set Show Telephone to "Optional". The field will still appear on the form but customers will not be blocked from completing checkout if they leave it blank.

3. Can I Add a Custom Field to the Magento 2 Checkout Without Coding?

Yes, if you are using the MageDelight One Step Checkout Extension. The extension's Custom Fields panel allows you to add text inputs, text areas, date pickers, dropdowns, checkboxes, and radio buttons through the admin interface. Without an extension, adding a custom field requires creating a custom Magento module.

4. How Do I Reorder Checkout Fields in Magento 2 Without Coding?

The native Magento admin does not support reordering checkout fields. Reordering requires either a custom module or an extension. The One Step Checkout Extension includes drag-and-drop reordering in its Shipping Fields and Billing Fields panels.

5. Where Does Custom Checkout Field Data Appear in the Magento Admin?

Custom fields added through an extension typically appear in the order's Additional Information section under Sales > Orders > [Order]. They are stored with the order record and accessible programmatically through the order object. Appearance in the order grid, invoices, and emails usually requires additional template configuration.

6. Does Field Management Work on Hyva Theme Based Stores?

The MageDelight One Step Checkout Extension is fully compatible with Hyvä Theme, including Hyvä Checkout, at no extra cost. The field management settings apply to both Luma and Hyvä storefronts without separate configuration.

For extension documentation, configuration guides, and demos, visit docs.magedelight.com. For checkout-specific support, the MageDelight One Step Checkout page includes a live demo and a full feature list.