Add a New Step in Checkout Page in Magento 2

How to Add a New Step in Checkout Page in Magento 2?

Today, we’re going to teach you guys how to add a new step in Magento 2 checkout pages.

The default Magento 2 checkout page consists of two steps – Shipping and Payment & Review.

But, many Magento 2 stores require to add some additional logic like separating Payment & Review, displaying checkout summary, or simply create a brand new step for customization.

Although, Magento 2 checkout page customization is bit difficult as developers are required to put in more effort to customize knockout js and other js stuff.

But, we’ve put together an easy-to-follow tutorial that will help you to quickly learn how to add a new step in checkout page in your Magento 2 store.

Step-By-Step Process to Add a New Step in Checkout Pages in Magento 2

In this tutorial, we’ve shared how to add a new step in checkout page that displays logging status in your Magento 2 store.

Step – 1

First of all, you need to create a checkout-login-step.js file in the MageDelight/HelloWorld/view/frontend/web/js/view folder & paste the following code to implement the view model.









    function (






    ) {

        'use strict';


        * check-login - is the name of the component's .html template


        return Component.extend({

            defaults: {

                template: 'MageDelight_HelloWorld/check-login'


            //add here your logic to display step,

            isVisible: ko.observable(true),

            isLogedIn: customer.isLoggedIn(),

            //step code will be used as step content id in the component template

            stepCode: 'isLogedCheck',

            //step title value

            stepTitle: 'Logging Status',



            * @returns {*}


            initialize: function () {


                // register your step



                    //step alias



                    //observable property with logic when display step or hide step


                    _.bind(this.navigate, this),


                    * sort order value

                    * 'sort order value' < 10: step displays before shipping step;

                    * 10 < 'sort order value' < 20 : step displays between shipping and payment step

                    * 'sort order value' > 20 : step displays after payment step




                return this;



            * The navigate() method is responsible for navigation between checkout step

            * during checkout. You can add custom logic, for example some conditions

            * for switching to your custom step


            navigate: function () {



            * @returns void


            navigateToNextStep: function () {






Step – 2

After that, you need to create a check-login.html file in the MageDelight/HelloWorld/view/frontend/web/template folder & paste the following code.

<!--Use 'stepCode' as id attribute-->

<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">

<div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>

    <div id="checkout-step-title"



         <p>The customer is <span data-bind="if: !isLogedIn">not</span> Logged-in</p>

        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">

            <div class="actions-toolbar">

                <div class="primary">

                    <button data-role="opc-continue" type="submit" class="button action continue primary">

                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>







Step – 3

Lastly, you need to create a checkout_idex_index.xml file in the MageDelight/HelloWorld/view/frontend/layout/ folder & paste the following code to extend the checkout page’s layout to display the new step.

<page xmlns:xsi="" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">


        <referenceBlock name="checkout.root">


                    <argument name="jsLayout" xsi:type="array">

                        <item name="components" xsi:type="array">

                            <item name="checkout" xsi:type="array">

                                <item name="children" xsi:type="array">

                                    <item name="steps" xsi:type="array">

                                        <item name="children" xsi:type="array">

                                            <!-- The new step you add -->

                                            <item name="check-login-step" xsi:type="array">

                                                <item name="component" xsi:type="string">MageDelight_HelloWorld/js/view/checkout-login-step</item>

                                                    <!--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 -->

                                                <item name="sortOrder" xsi:type="string">2</item>

                                                <item name="children" xsi:type="array">

                                                    <!--add here child component declaration for your step-->














Step – 4

Finally, clean the cache and check the output.

Ending Note

So, these are the steps you can follow to create a new step in the checkout page of your Magento 2 store.

And if you need our professional assistance, feel free to contact us at any time.