How to Add Magento 2 Checkout in Easy Steps

• What is Magento Checkout?

• Why Customize Magento Checkout?

• How to Add a New Magento 2 Checkout Step?

• FAQs

• Summary

What is Magento Checkout?

Checkout, the last step in buying, lets customers review their cart, adjust it, and confirm payment to finish their purchase. 

Here, customers review their order information and select a payment method to complete the purchase. Customers enter their shipping and billing information on this page. They also choose a shipping method and provide payment details.

Why Customize Magento Checkout?

The default Magento 2 checkout is functional but not personalized.  It lacks customization options. It may not match your brand's aesthetic or meet customer preferences. 

Customizing the checkout process lets you offer a more user-friendly and personalized experience. It can make the experience more visually appealing for your customers.

Key reasons to customize Magento 2 checkout:

Reasons	Explanations
Enhanced Customization	Customize Magento checkout to match brand aesthetics and customer preferences. Create a unique, visually appealing experience, boosting satisfaction and loyalty.
Streamlined Purchasing Experience	Simplify checkout, reduce friction, and improve efficiency. Enhance user-friendliness, satisfaction, and conversion rates.
Optimized Conversion Rates	Implement strategies to remove purchase barriers and encourage transactions. Enhance sales, revenue generation, and conversion rates.
Personalized User Journey	Tailor checkout for a personalized experience. Incorporate custom steps, recommendations, or promotions. Foster stronger connections, engagement, and potential repeat purchases.

How to Add a New Magento 2 Checkout Step?

You can add a custom checkout step. It should be implemented as a UI component. For compatibility, upgradability, and easy maintenance, avoid editing the default application code. Add your customizations in a separate module.

1. Create the view part of the new Magento checkout

To customize checkout in Magento, begin by creating a module directory ( learn how to build a module here). Store all custom files in this directory. Make sure they depend on Magento_Checkout.

Avoid using "Ui" in the custom module name to prevent issues. Next, implement the view model in a .js file and create a .html template for the component.

Store the file in the <your_module_dir>/view/frontend/web/js/view directory.

See the sample my-step-view.js with comments below:

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

    /**
     * mystep - is the name of the component's .html template,
     * <Vendor>_<Module>  - is the name of your module directory.
     */
    return Component.extend({
        defaults: {
            template: '<Vendor>_<Module>/mystep'
        },

        // add here your logic to display step,
        isVisible: ko.observable(true),

        /**
         * @returns {*}
         */
        initialize: function () {
            this._super();

            // register your step
            stepNavigator.registerStep(
                // step code will be used as step content id in the component template
                'step_code',
                // step alias
                null,
                // step title value
                'Step Title',
                // observable property with logic when display step or hide step
                this.isVisible,

                _.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
                 */
                15
            );

            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 () {
            this.isVisible(true);
        },

        /**
         * @returns void
         */
        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
});

2. Add .html template

Go to the module directory and add a .html template for the component in <your_module_dir>/view/frontend/web/template.

Here's a sample called mystep.html:

<!--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: 'Step Title'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <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>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

3. Add your step to Magento Checkout page layout

To display the new step on the page, declare it in the Checkout page layout found in checkout_index_index.xml.

You should create an extending checkout_index_index.xml layout file and place it in this directory: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

An example of checkout_index_index.xml is as follows:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <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="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</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-->
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

4. Create Mixins for Magento Payment and Shipping Steps (optional)

If your new step is the first, create mixins for payment and Magento shipping. Otherwise, two steps will be active when the checkout loads.

Construct a mixin in the following manner:

i) Generate a file named Vendor/Module/view/base/requirejs-config.js with the following contents:

var config = {
    'config': {
        'mixins': {
           'Magento_Checkout/js/view/shipping': {
               'Vendor_Module/js/view/shipping-payment-mixin': true
           },
           'Magento_Checkout/js/view/payment': {
               'Vendor_Module/js/view/shipping-payment-mixin': true
           }
       }
    }
}

ii) Create the mixin for both payment and shipping.

define([
    'ko'
], function (ko) {
    'use strict';

    var mixin = {

        initialize: function () {
            // set visible to be initially false to have your step show first
            this.visible = ko.observable(false);
            this._super();

            return this;
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});

FAQs

1. Can Magento checkout extension customize the default Magento checkout?

Yes, the checkout extension is designed for full customization. It updates the default checkout experience in Magento into a one-step checkout. It simplifies the process, making it quicker and more user-friendly.

2. Does the one-step checkout support guest checkout?

Absolutely, the one-step checkout extension supports guest checkout. It allows customers to complete purchases quickly. They can do this without creating an account. It makes the process effortless.

3. How is the checkout implemented using the one-step checkout extension?

The checkout uses a one-step checkout extension. It consolidates the traditional multi-step process into a single page. It includes combining customer information. Information such as shipping address, payment methods, and order review are on one streamlined page.

4. Is it possible to disable certain attributes or fields in the one-step checkout?

Yes, it is possible to disable specific attributes or fields in the one-step checkout. It can be achieved through the extension's configuration settings. It allows you to customize the checkout form to meet your specific needs.

5. Can the one-step checkout extension integrate with my existing shopping cart?

The one-step checkout extension is designed for seamless integration. It works with your existing Magento shopping cart. Dedicated Magento hosting ensures a smooth transition from adding items to the cart to completing the checkout.

6. How can I use a plugin to modify the first step of the checkout process?

To modify the first step of the checkout process, use a Magento 2 plugin. This plugin extends the functionality of the one-step checkout extension. It can be customized to change the appearance, fields, and behavior of the first step. It enhances customers' overall checkout experience.

Summary

Customizing the Magento checkout boosts user experience and increases conversions. It allows customers to complete the purchase funnels with ease. Key benefits of the checkout extension are:

• Customize checkout for brand alignment and customer satisfaction.

• Simplify checkout for improved efficiency and conversions.

• Boost sales and revenue by removing purchase barriers.

• Personalize checkout for stronger connections and repeat purchases.

• Explore our managed Magento hosting for enhanced results.

Opt for managed Magento hosting to get a fast loading site and smooth checkout experiences.