Shopping cart

How to Add Custom Field to Checkout Page in Magento 2

How to Add Custom Field to Checkout Page in Magento 2

Table of contents

A good checkout page can be an important factor contributing to the success of online businesses. There are some ways to perfect the checkout page and one of those is to add more custom fields in this page. Hence, in this article, we will learn why adding those fields to the checkout page is so essential for your site as well as the way to add them successfully for your site.

What is the checkout fields?

Checkout fields are fields which are displayed on the checkout page. Shoppers have to fill those required fields in order to finish the checkout process. Some examples of checkout fields are Name, email address, payment methods, etc.

Why do stores need to add custom fields?

In Default, in addition to some checkout fields as mentioned above, there are only a few fields which are delivery address or shipping methods. However, in business reality, store owners need to collect more custom information which is more specific and personalized. From the collected information, stores will find a way to serve their clients best.

For instance, when store owners would like to know about another address that customers can receive the items, they only need to add the attribute: “What another address will you receive this item. Then, stores can send the product to this address in case shoppers cannot receive at the provided shipping address.

In addition, stores can choose to add more fields to ask customers about their opinion of the store such as the product they buy from the store which they like the most.

Benefits of adding Custom Checkout Fields

Today, there is an increasing number of store owners who would like to find a tool allowing them to add more custom checkout fields. This trend can be well explained because having more additional fields is really beneficial for stores.

Benefits of adding Custom Checkout Fields

First, stores owners will have more information that they want about customers. If you want information about your clients to do a business strategy or to serve a specific target, adding custom fields in the checkout page is an easy way to collect that information.

Second, additional custom checkout fields will help you satisfy your clients. It is undeniable that when you know what your shoppers need in detail, you will have more chance to please them. For instance, you can send items to another address for customers when shoppers cannot receive at the provided address. It helps reduce wasting time dramatically. And when shoppers are satisfied with the store’s service, they will be more likely to make a purchase next time and become a loyal shopper.

Third, the image of the stores will be improved significantly. By adding more fields to the checkout page, store owners can have a deeper understanding of customers’ demand and have a solution to meet their expectation. As a result, store owners can perfect the image of stores.

Necessary fields to add to the checkout page

There are some fields that admins should add to the checkout page which are:

  • Another address that customers would like to receive items
  • The time that clients would like to receive the item
  • Customers’ opinion about their favorite items
  • Whether they would like to use gift wrapping or not
  • Choose favored gift wrap paper
  • Client’s favored gift pattern paper
  • Customers’ notice before shipping
  • Shoppes’ feedback of your store

Besides those suggestions, store owners are allowed to add attributes limitlessly if you think that they are necessary for your purpose.

Magento 2 Add custom fields in the checkout page

In order to be able to add custom fields in the checkout page, stores owners can consider Magento 2 Custom Checkout Fields extension by Mageplaza(This extension also compatible with Mageplaza One Step Checkout and PDF Invoice). When this module is installed to your stores, admins are now enabled to add additional fields to the checkout page as much as they want easily and quickly than ever. After you install Mageplaza Custom Checkout Fields, we will show you how to add custom fields in the checkout page.

The first thing you need to do is to go to Sales on the backend. Then, select Custom Checkout Fields. Before starting, remember to choose Yes to enable this extension.

How to add custom fields in the checkout page

Next steps are so simple. Following below instruction, store owners can put on additional custom fields with ease.

Default Label: This label will be shown on the frontend. This label will help viewers know what is this attribute. For instance, you can choose the label: “How did you hear about us”.

Input Types: In this box, admins can select from 11 choices of types. Let’s take a look at the photo to learn more:

Magento 2 add custom fields in the checkout page

Depending on the specific attribute, admins can select a suitable input type. We will show you how those 11 input types activate in detail.

  • Text field: In this field, users are only allowed to text in a line and not allowed to type in various lines. When admins choose this type, from the frontend, customers will see a box which is enough for 1 line text only.
  • Text area: If you would like to let shoppers type more, you can choose this type. There will be a wider space and shoppers can type in many lines they want.
  • Date: You can select this type when you need to add Date. The format of this field is Date and is automatically set as the current date.
  • Yes/No: When you want your customers to answer Yes or No only, let’s choose this type. For example, when admins choose to add custom fields which ask customers to know whether they would like to gift wrapping or not, customers can answer Yes or No. Therefore, admins will select “Yes/No” input type.
  • Dropdown: Choosing this field when you configure choices from the backend and you want that shoppers select among those choices.
  • Multi-select: This field is useful when you would like to allow clients to select more than one options.
  • Single-select with image: Shoppers are allowed to select one photo or color from colors and photos which admins configure from the backend
  • Multi-select with image: Different from Single-select with image, in this field, shoppers can select more than one photo (or color)
  • Media Image: This field is really convenient for users when they are enabled to upload a file of photos.
  • Single File Attachment: Users are enabled to upload an attachment
  • Content: This configuration allows clients to add photo or text and edit easily.

There are 6 positions for admins to place fields which are Shipping Address, Shipping Method Top, Shipping Method Bottom, Shipping Method Top, Payment Method Top, Payment Method Bottom, and Order Summary. In this article, we will instruct you how to add custom fields to the Shipping Method and Payment method.

Magento 2 add a custom field to Shipping Method

You would like to add a custom filed which is “Recommendation for our Checkout page” to Shipping Method, how can you do that? To add this field, first, you can go to Sales > Custom Checkout Field > Configuration. Then, choose Yes to enable the extensions. These following steps are so simple:

  • Default Lable: In this box, you will type the title of a file. To be particular, you will fill: “Recommendation for our Checkout page”
  • Attribute Code: You enter attribute code in this field otherwise it will be the same as the Default Label field.
  • Input type: As you would like to let your customers to text more than one line, choose the Text Area
  • Default Value: This value will be shown in the Frontend of your site and only with the Input Types which are: Text Field, Text Area, Date, Yes/No, Content. As you choose the input type which is Text Area, then this Default Value will be displayed on the Frontend.
  • Values Required: If you would like to force your shoppers to enter this filed, then choose Yes.
  • Input Validation: This attribute is only displayed when you select Text Fields as the Input Type. As you chose Input Type which is Text Area, you can leave this box blank.
  • Input/Output Filter: As your Input Type is text area, this Input/Output Filter attribute will be displayed. The role of this filter is to allow users to enter HTML value to the filed. You can choose from 3 selections which are: None: Selecting this choice means that you don’t need HTML checking and let HTML tag work Strip HTML Tags: When you choose this option, you will delete HTML tags in the field Escape HTML Entities: This choice means encoding HTML tags in the field
  • Add to Sales Order Grid: In case you want to display the attribute in the grid at Sale > Orders, then select Yes.

Magento 2 add a custom field to Shipping Method

Magento 2 add custom fields to Shipping Address

In case you would like to add an attribute Shipping Address, for instant “Do you demand an advanced notice for shipping” attribute.

  • Default Label, type: Do you demand an advanced notice for shipping.
  • Attribute Code, Values Required, Add to Sales Order Grid : Configure the same with the custom field “Recommendation for our Checkout page” above.
  • Input type: In case you would like to allow your users to choose 1 among selections, then, on the Input Type, choose Dropdown.

Other attributes can be easily applied the same.

Magento 2 add custom fields to Shipping Address

When you finish adding custom fields, you can manage those attributes on “Manage Attribute”. Let’s take a look at the photo below for more details:

finish adding custom fields

Conclusion

In conclusion, adding custom fields to checkout is a wonderful method to content your clients best and increase sales significantly. We hope that, after reading this article, you have a better understanding of custom fields in the checkout page and know how to add them successfully to your stores.

Explore Mageplaza Custom Checkout Field!

Posted by Daniel in Customize Checkout Page. May 15, 2019

Related Topics

Comments for How to Add Custom Field to Checkout Page in Magento 2

Please leave comments if you have any questions, feedbacks.