Most of the store owners are worried about look & feel of the store frontend and they forget about the most important area which is checkout because it is a route for turning your store visitor into a customer. But as business varies the required customer information is also vary depending on the business type at that time using the default checkout process will not help you out. Also, Cart abandonment is one of the largest problems facing by the store owners. In fact, it costs merchants roughly 2-4 trillion dollars per year. So, you need to optimize your store checkout process by removing the unnecessary field and adding required fields.
Using the most powerful CMS Magento 2, it allows you to customize your checkout process and add your own step between the shipping and review payment part. Let’s do this using one example, here we have added one instruction step before placing an order and forwarding the customer further the payment section in Magento 2 store. Also, install Custom Checkout Fields which helps the store admin customize the checkout page by adding extra fields.

Firstly, we need create “checkout_index_index.xml” for adding custom checkout step at this path.

In above code, we have added one step in checkout after Shipping Step. Here are some scenarios if you want to change your step position in checkout process.
To display step content before shipping step “sortOrder” value should be < 1
To display step content between shipping step and payment step 1 < “sortOrder” < 2
To display step content after payment step “sortOrder” > 2
In next step, we need to create one Js file inside our Frontend Web Folder.

Now in this last Step, we need to create one more html file at this path.

Tadaa! You have successfully added your custom step in Magento 2 checkout process. If you found this blog helpful, don’t forget to share it with your colleagues and Magento Friends.
And, Let us know if you are facing an issue while implementing this code.

Happy Coding!

Advanced Extra Fee M2

Click to rate this post!
[Total: 12 Average: 4.7]