unity knowledge

Reading time: 3 minutes

Magento 2: how to make Checkout modifications

Checkout is one of the most complex elements of Magento 2 in terms of code and making modifications. Sooner or later any developer working with Magento 2 faces the need to alter this store section. To gain full insight into how Checkout works we need to learn the Knockout.js (especially HTML template processing) and how Magento 2 initialises JS modules.

Checkout rendering in Magento 2

The checkout process page in Magento 2 comprises a range of Knockout.js components, whose configuration and loading methods are defined in a single XML file (depending on how the Magento 2 instance was installed – /app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml or /vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml). The definition included in this file is one abstraction level higher than the standard JS module initialization:

The XML file is converted to JSON and submitted to the core JS module responsible for loading all the components defined in the XML file.

Structure of checkout_index_index.xml 

The Checkout configuration file may seem complicated at first (it has more than 500 lines), but once we recognize its components it becomes much easier to read. The most important node is the one which includes the configuration of all elements:

This section comprises a series of embedded component definitions. The definition of a single component has the following structure:

The name attribute in the containing block includes the section name for the component. The following elements can be found inside:

– the parameter specifying the order of rendering
– the alias or path to the module from Require.js
– the area to render the component
– the list of embedded components
– configuration parameters

 Adding a new element on the checkout process page

 Checkout, like most Magento 2 elements, is a module. According to Magento 2 rules, any module can be extended in two ways: in the template catalogue, or in the catalogue of another module. We can use the example of the module that integrates Poczta Polska services with Magento 2 [INSERT THE STORE LINK] to show how we can add a map with pickup points to the shipping method section in the checkout process.

First look inside the checkout_index_index.xml file to locate the component responsible for displaying shipping options. This location is defined in the following tree path: components > checkout > steps > shipping-step > shippingAddress. After locating it, add our new component in the children section; it will inherit its properties from the default uiComponent:

Besides the map itself, we also need to specify where the selected pickup point will be displayed. This is placed in: components > checkout > sidebar > shipping-information:

Unfortunately, when we add any element to the tree we also need to keep the default embedding scheme, which makes our checkout_index_index.xml file rather bulky. Here is the complete file in the module catalogue:

As a result of these changes, a map of the pickup points will be displayed on the checkout process page:


Understanding the shopping process can take much time for anyone who is not well versed with Magento 2, but this is necessary for our everyday work involving feature extension. Compared to Magento 1, Checkout is much better developed despite its complexity. From the technical point of view, its division into components offers many benefits and enables modifications without breaking the universally accepted patterns.



Let’s build something great together!

Contact Us

I agree to the processing of my personal data on the terms set out in the privacy policy . If you do not agree to the use of cookies for the purposes indicated in it, including profiling, turn off the cookies in your browser or leave the website. more