Reading list Switch to dark mode

    How to Add Custom Checkout Steps in Magento 2?

    Updated 9 April 2024


    This topic will cover how to add a custom checkout step in Magento 2. Also, learn about Magento 2 B2B multi-step checkout process to how it is useful for business buyers.


    1> Create a checkout step component.

    2> Add our custom step into the checkout step Layout.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Step1: Create a checkout step component.

    A> For creating a custom checkout step, first we have to create a (.js) file that implements the new step.

    The JS file must be stored under the <your_module_dir>/view/frontend/web/js/view directory.

    Check the following code with comments (custom-step.js)

    ], function (ko, Component, _, stepNavigator) {
        'use strict';
         * mystep - is the name of the component's .html template,
         * Webkul_CheckoutCustomSteps  - is the name of your module directory.
        return Component.extend({
            defaults: {
                template: 'Webkul_CheckoutCustomSteps/mystep'
            // add here your logic to display step,
            isVisible: ko.observable(true),
             * @returns {*}
            initialize: function () {
                // register your step
                    // step code will be used as step content id in the component template
                    // step alias
                    // step title value
                    'Custom Step',
                    // 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 steps
             * during checkout. You can add custom logic, for example some conditions
             * for switching to your custom step
             * When the user navigates to the custom step via url anchor or back button we_must show step manually here
            navigate: function () {
             * @returns void
            navigateToNextStep: function () {

    B> Add a HTML template

    Create a .html (mystep.html) template under the <your_module_dir>/view/frontend/web/template directory.

    <!--The 'step_code' value from the .js file should be used-->
    <li id="step_code" data-bind="fadeVisible: isVisible">
        <div class="step-title" data-bind="i18n: 'Custom Step'" data-role="title"></div>
        <div id="checkout-step-title"
            <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
                <div class="actions-toolbar">
                    <div class="primary">
                        <input type="text" placeholder="Custom Field" class="form-control"/>
                        <button data-role="opc-continue" type="submit" class="button action continue primary">
                            <span><!-- ko i18n: 'Next'--><!-- /ko --></span>

    Step2: Add our custom step into the checkout step Layout.

    The new step to be displayed on the page, we need to declare it in the Checkout page layout, which is defined in checkout_index_index.xml.

    <?xml version="1.0"?>
    <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 for last step -->
                                        <item name="reviewstep" xsi:type="array">
                                            <item name="component" xsi:type="string">Webkul_CheckoutCustomSteps/js/view/custom-step</item>
                                            <item name="sortOrder" xsi:type="string">1</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->

    That’s it, Now we can check after cache: flush.


    custom checkout step magento2

    We have created a textbox and a next button on the custom steps.

    custom checkout step magento2

    This is the easiest way to create a custom step in checkout in the Magento2.

    Happy Coding !!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home