How to Customize Checkout Fields in Magento 2

Checkout is an utterly important step in purchasing process, so making checkout step as simple and effective as possible is what online stores aim to. This blog will show you how to remove some unnecessary fields and add the important ones.

Drawbacks of Magento 2 Checkout Page

The checkout procedure has 2 main sections: Shipping and Review & Payments. Customers need to fill in required fields such as name, address, phone number, email…and may leave out the optional fields during checkout process.

However, the checkout pages lack fields such as delivery date field to specify which day customer want to receive order, or comment field to leave comments for shipper to handle the package carefully. On the other side, the checkout page that contains such unnecessary fields like middle name, tax, company, postal code…may discourage them from finishing checkout.

How to Remove Unnecessary Fields in Magento 2 Checkout Page

(Simple - NO extension needed - NO coding).

1. Remove Middle Name, Prefix, and Suffix fields in Magento checkout

Store > Configuration > Customers > Customer Configuration > Name and Address Options.

Remove Middle Name, Prefix, and Suffix fields in Magento checkout

Show Prefix: Choose No to leave out this field.

Show Middle Name (initial): Choose No to leave out this field.

Show Suffix: Choose No to leave out this field.

2. Change number of Street Address lines in Magento checkout

Store > Configuration > Customers > Customer Configuration > Name and Address Options.

Number of Lines in a Street Address: The default value is 2 lines but you can set from 1 to 4 lines.

3. Make Zip/Postal Code field optional in Magento checkout

Store > Configuration > General > General > Country Options.

Make Zip/Postal Code field optional in Magento checkout

Zip/Postal Code is Optional for: Choose one or multiple countries that is not required to enter postal code.

4. Remove State field from shipping in Magento checkout

Store > Configuration > General > General > State Options.

Remove State field from shipping in Magento checkout

Allow to Choose State if It is Optional for Country: Choose No to remove State field for all the countries which are not required to specify state information.

How to Add Fields to Magento 2 Checkout Page

If you only need to include one additional field to checkout and prefer to do this programmatically, follow this tutorial. However, the tutorial is quite long since many files are required, aims for people who have a good knowledge of Magento module development and only instructs to add a single field.

If you prefer a quick and simple solution to add unlimited fields of different types to checkout, we offer Checkout Custom Field for Magento 2 Extension (Well-made module - NO conflict with core code - Work with multiple store view - Compatible with checkout page of all product types).

This extension works like order attribute and follows the standard of Magento attribute. It allows admin to add custom field to any step of checkout page. Admin can create different types of fields, add them to Order Grid, Order Detail, PDF invoice and email.

If you got a question on how to create new fields on Customer Registration Form, BSSCommerce has got a solution for you: Customer Attributes for Magento 2 extension. This function is only supported in Enterprise Edition, read here to find out. Thus, we have newly developed this extension for Community user to enjoy this function at a reasonable price.

Here is how it works:

Step 1: Create new custom field (order attribute).

magento 2 checkout custom field backend demo

+ Specify attribute properties.

magento 2 checkout custom field Specify attribute properties

Easily choose input type (Text Field, Text Area, Date, Yes/No, Radio Button, and Checkbox) and manage attribute value.  

+ Enter advanced attribute properties.

magento 2 checkout custom field Enter advanced attribute properties

Specify which checkout step to place new field, enable adding new attribute in Order Grid, Order Detail, PDF invoice and email.

DOWNLOAD THE EXTENSION

Step 2: Save configuration and place a test order in the frontend.

magento 2 checkout custom field frontend demo

Step 3: Go to backend Order Grid, Order Detail to check the new order attribute.

magento 2 add custom field to order grid

Step 4: Go to Manage Checkout Custom Fields to create new field or make any adjustment.

magento 2 manage checkout custom field

GET THE EXTENSION NOW

Final Words

Customizing the checkout page makes big influences for both customers and store owners. Customers can have quicker and simpler shopping experience while store can provide better service for them. Higher customer satisfaction means higher profits so don’t hesitate to implement your store.

magento 2 checkout custom field add field to magento checkout

Magento extensions to improve checkout page you may like:

  1. Checkout Custom Field
  2. One Step Checkout
  3. Checkout Success Page
Leave a Reply