How to Optimize Default Checkout Page in Magento 2

Changing the Magento Checkout page is not always an easy task. This is because, as you might already know, the default checkout in Magento 2 is created from a series of Knockout JS components that are then rendered by using the Knockout JS templating system. These components and their parent/child relationship are defined in a large XML file which you can extend or override in your theme or module.

However, the Default checkout might not be effective and functional as you want, so it’s essential to customize or change something in the your Magento 2 stores’ checkout page. As checkout process plays a vital role in an online store so this optimization need to be done thoughtfully and correctly. If you are looking for ways to deal with this complex process, this article is for you. I will how you how to optimize Magento 2 default checkout page in quick and easy-to-follow ways.

Let’s start!


SVG

One Step Checkout for Magento 2

Cut down 80% of checkout time & increase 30% of conversion rates (Hyva ready)

Check it out!


Before going to optimization steps, you first need to create checkout_index_index.xml file in your theme.

[Magento_Checkout_module_dir]/view/frontend/layout/checkout_index_index.xml

After creating the file you can now start optimizing checkout page:

[Magento_Checkout]/layout/checkout_index_index.xml

How to Optimize Default Checkout Page in 4 steps

Solution 1: Remove field from Shipping form

In this example, the field that I am going to remove is Fax. To remove it, you need to define path to the Fax field, then add the following item as a child:

<item name="visible" xsi:type="boolean">false</item>

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false">
                <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">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="shipping-address-fieldset" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="fax" xsi:type="array">
                                                                        <item name="visible" xsi:type="boolean">false</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        ...

After you have cleaned the cache, all the changes will be visible.

Solution 2: Relocate Terms and Conditions position on Checkout

I will show you the way to more Terms and Conditions from its default position which is under the payment method to the a position, in the end of Checkout.

Step 1: Disable item from default position

Before showing the item in a different position, you first need to disable an item from its original place. To do this, you need to follow XML tree and replace this item:

<item name="before-place-order" xsi:type="array">
    ...
</item>

with the following one:

<item name="before-place-order" xsi:type="array">
    <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

Step 2: Re-add to desired location

Now you will re-add it to the end of the Checkout

<item name="after-place-agreements" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="displayArea" xsi:type="string">after-place-agreements</item>
    <item name="dataScope" xsi:type="string">before-place-order</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="agreementss" xsi:type="array">
            <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
            <item name="sortOrder" xsi:type="string">100</item>
            <item name="displayArea" xsi:type="string">after-place-agreements</item>
            <item name="dataScope" xsi:type="string">checkoutAgreements</item>
            <item name="provider" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
</item>

Step 3: Call template where you need

Because in this example, the Terms and Conditions will be moved to the end of checkout, the template will be called “after-place-agreements”

<!-- ko foreach: getRegion('after-place-agreements') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Solution 3: Add custom block in Header

In order to increase the conversion rate as well as the sites’ security, you probably need to provide more information to customers in the Checkout header. Below are the way to help you do it with ease:

<referenceBlock name="checkout.header.wrapper">
    <container name="additional-custom-block-wrapper" label="additional-custom-block-wrapper" htmlTag="div" htmlClass="additional-custom-block-wrapper">
        <block class="Magento\Cms\Block\Block" name="additional-custom-block">
            <arguments>
                <argument name="block_id" xsi:type="string">additional-custom-block</argument>
            </arguments>
        </block>
    </container>
</referenceBlock>

Solution 4: Add custom footer to checkout

If you want to highlight several specific things such as payment methods, delivery information, or additional coupons, you can add a custom footer to your checkout. Below is a sample which can support you to create a custom footer with CMS block:

<referenceContainer name="page.bottom.container">
    <container name="additional-custom-footer-wrapper" label="additional-custom-footer-wrapper" htmlTag="div" htmlClass="additional-custom-footer-wrapper">
        <block class="Magento\Cms\Block\Block" name="additional-custom-footer">
            <arguments>
                <argument name="block_id" xsi:type="string">additional-custom-footer</argument>
            </arguments>
        </block>
    </container>
</referenceContainer>

And here is how to create a custom footer with template file:

[Magento_Theme]/templates/checkout-footer.phtml

<referenceContainer name="page.bottom.container">
    <container name="additional-custom-footer-wrapper" label="additional-custom-footer-wrapper" htmlTag="div" htmlClass="additional-custom-footer-wrapper">
        <block class="Magento\Framework\View\Element\Template" name="additional-custom-footer" template="Magento_Theme::checkout-footer.phtml" />
    </container>
</referenceContainer>

Conclusion

In conclusion, I have just shown you several solutions to help you to optimize your Checkout Page. Although these are not a complete solution, they are still good improvements to fix the weakness of default functionality. To have the full functions for Checkout Page optimization, you can refer our One Step Checkout.

If you have any questionsThanks for reading!

Previous How to Add, Delete, Re-order Custom Links for My Account Menu / Navigation in Magento 2
Next Magento 2 Cache and Page Cache Overview
One Step Checkout for Magento 2 by Mageplaza
x