• support@hikmadh.in
  • +91 97885 33992
GET FREE QUOTE

New Step In Magento Checkout Page

Add A New Step In Magento Checkout Page

Add A New Step In Magento Checkout Page

This guide explains how to add a brand-new step to the Magento 2 checkout process, allowing you to collect additional user information or add a custom interaction before the customer completes their purchase.

How to Add a New Step Magento Checkout Page
Step 1: Create A Custom Module

Create the module configuration file module.xml at:
app/code/Hikmadh/Tab/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Hikmadh_Tab" setup_version="1.0.0" />
</config>

Create the registration file registration.php at:
app/code/Hikmadh/Tab/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Hikmadh_Tab',
    __DIR__
);

Enable the module using CLI:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush
Step 2: Add the New Step to Checkout Page Layout

Create the layout file:
Hikmadh/Tab/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>
        <referenceContainer name="checkout.page">
            <block
                template="Hikmadh_Tab::check-login.html"
                name="checkout.login.step"
                after="checkout.shipping">
            </block>
        </referenceContainer>
    </body>
</page>
Step 3: Create Template for the New Step

File: Hikmadh/Tab/view/frontend/web/template/check-login.html

<div class="custom-checkout-step">
    <h3>Custom Checkout Step</h3>
    <p>Your custom content goes here...</p>
</div>
Step 4: Create JS View Model

File: Hikmadh/Tab/view/frontend/web/js/view/checkout-login-step.js

define([
    'uiComponent',
    'Magento_Checkout/js/model/step-navigator'
], function (Component, stepNavigator) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Hikmadh_Tab/check-login'
        },

        initialize: function () {
            this._super();

            stepNavigator.registerStep(
                'check-login',
                null,
                'Custom Step',
                this.isVisible,
                15
            );

            return this;
        },

        isVisible: ko.observable(true)
    });
});
Summary

With this setup, Magento will display a completely new checkout step placed exactly where you choose, enabling deeper customization of the checkout journey.