How to add custom checkout steps to Magento 2?

Understanding customer decision making is half the battle. Checkout is what can make your prospects abandon their carts. Placing an order, your buyers will have to go through several checkout steps. Fewer steps are better for your conversions rate. For this Q&A, we’ll tell you about vanilla Magento 2 checkout steps and how to add custom ones.

Magento 2 native checkout steps

Shipping

During the first step of the checkout process, the buyer needs to fill in the shipping address information and select a shipping method. If the client is authorized on the site, then the information is entered automatically. If necessary, the user can change this information in his personal account.

A dedicated Progress Bar at the top of the page follows each step of the checkout process. Moreover, the order summary displays the information currently entered.

Sending the order to a different address

Shoppers can choose to send their order to a different address by selecting it from those that they added earlier.

To select the shipping address, click Ship Here.

Adding a new address

Follow these steps below to add a new address:

Step 1

At the bottom of the section, select Delivery address and click + New address.

Step 2

Next, you need to fill out the delivery address form.

By default, the form initially displays the customer's first and last name.

Step 3

Check the box at the bottom of the form to save the new address.

Step 4

Click Save Address.

After these steps, the new address will be selected as the shipping address.

The saved address is automatically selected on the shipping page.

Select delivery method

Customers choose the shipping method that suits them.

The shipping page will display shipping options.

Click Next to continue.

You can use Custom Checkout Fields to gather comprehensive order data in a convenient way.

Order Summary & Payments - Regular Order

At this stage of the checkout, the buyer is asked to choose a payment method and is allowed to apply coupons with promotional codes. A buyer can view all the entered information again and, if necessary, edit. If enabled, the buyer will be required to agree to the terms of sale before placing an order.

Order Summary & Payments - Purchase Order

If the company associated with the customer has included purchase orders, then all orders will be processed as purchase orders. Payment methods are determined by the company account.

Step 1

The buyer chooses a payment method.

Step 2

The customer clicks Place Purchase Order.

Step 3

A purchase order has been placed.

If the company has additionally set up Approval Rules, then the order will go through the approval process. If there are no such rules, then the order is processed instantly.

Confirmation

After placing an order, a customer must go through the last step - order confirmation. For registered customers, the page will display the order number with an account link and a receipt link. Additionally, registered users receive a message. This message informs that order confirmation and tracking information will be sent to them by email. Unregistered users are encouraged to create an account to track the order. Registered customers can generate a receipt by clicking the link.

The order confirmation page is also used by analytics programs to track conversions.

You can install One Step Checkout For Magento 2 to speed up the whole shopping process and heavily enhance customer satisfaction. You will be able to create a converting checkout just in a few clicks to boost store revenue.

How to add a custom checkout step to Magento 2?

You can add a custom checkout step, it should be implemented as a UI component. For the sake of compatibility, upgradability, and easy maintenance, do not edit the default Magento code, add your customizations in a separate module. 

How to make Magento 2 checkout process more user-friendly?

A well-designed Magento 2 checkout process is a balance between convenience, functionality, security, and design. High conversion rates are possible only when the checkout page is understandable and not annoying. You can make it more user-friendly by adding custom steps.

Add A new checkout step

Originally, the default Magento 2 checkout process includes two steps:

• Shipping Information
• Review and Payment Information

You can add a custom step; note that it should be implemented as a UI component. The customizations should be happening in a separate module to ensure the page’s compatibility, upgradability, and maintenance.

The steps to add a new checkout step should be the following:

1. Create the view part of the checkout step component.
2. Add your step to the Checkout page layout.
3. Create mixins for payment and shipping steps (optional).

Here is a whole list of possible customizations for your checkout. And here you can find how to implement the changes.