How to Optimize Default Checkout Page in Magento 2

Adjusting the Magento Checkout page can present some challenges. As you might know, the default checkout in Magento 2 is constructed from a series of Knockout JS components that are rendered using the Knockout JS templating system. The relationships between these components are defined in a comprehensive XML file, which you can extend or override in your theme or module.

That said, the default checkout might not fully align with your specific requirements, making it important to customize certain elements of your Magento 2 store's checkout page. Since the checkout process is crucial for any online store, it's essential to approach any optimizations with care and precision. If you're looking for effective strategies to manage this complex process, this article will provide you with straightforward and efficient ways to enhance the Magento 2 default checkout page.

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

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

How to Optimize Default Checkout Page in 4 steps

• Solution 1: Remove field from Shipping form
• Solution 2: Relocate Terms and Conditions position on Checkout
• Solution 3: Add custom block in Header
• Solution 4: Add custom footer to checkout

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:

false    

    
        
            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                
                                                                    false
                                                                
                                                            
                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        

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 move Terms and Conditions from its default position, which is under the payment method, to 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:

    ...
    

with the following one:

    true

Step 2: Re-add to desired location

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

    uiComponent
    after-place-agreements
    before-place-order
    checkoutProvider
    
        Magento_Checkout/payment/before-place-order
    
    
        
            Magento_CheckoutAgreements/js/view/checkout-agreements
            100
            after-place-agreements
            checkoutAgreements
            checkoutProvider
        
    

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”

Solution 3: Add custom block in Header

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

    
        
            
                additional-custom-block
            
        
    

Solution 4: Add custom footer to checkout

If you want to highlight specific elements like payment methods, delivery information, or additional coupons, you can enhance your checkout by adding a custom footer. Below is a sample to help you create a custom footer using a CMS block:

    
        
            
                additional-custom-footer
            
        
    

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

Conclusion

In conclusion, I've outlined several solutions to help optimize your Checkout Page. While these may not cover every aspect, they represent valuable improvements to address the limitations of the default functionality. For a comprehensive solution to enhance your Checkout Page, consider exploring our One Step checkout option.