How to customize Magento 2 shipping and billing steps on checkout?

  • Post author:
  • Post category:Magento 2

If you want to change the view of Magento 2 checkout you need to modify current components or add new ones to shipping or billing steps.
To do that you can follow 2 different approaches.

First you can modify checkout by adding custom checkout_index_index.xml layout to YourModule/view/frontend/layout/. You can read about this approach here:

Or you can customize Magento 2 checkout by implementing you own \Magento\Checkout\Block\Checkout\LayoutProcessorInterface To do that you need to:

  1. Create your own module if you do not have created it yet.
  2. Implement \Magento\Checkout\Block\Checkout\LayoutProcessorInterface::process in your module through YourModule/etc/frontend/di.xml. Check implementation in \Magento\Checkout\Block\Checkout\LayoutProcessor::process as a reference.
  3. In your new implementation of LayoutProcessorInterface::process method you can modify, delete js layout configuration of shipping and billing steps and return modified js layout to frontend. You layout processor will be added to the pool of other layout processors that will be called in \Magento\Checkout\Block\Onepage::getJsLayout. By changing sequence in YourModule/etc/module.xml you can call your layout processor after all shipping or billing layout processors in Magento in your desirable order.

Usage of LayoutProcessorInterface gives you ability to handle dynamic attributes. For example, you need to customize billing step on checkout and display custom component on all payment methods. In your implementation of LayoutProcessorInterface you can get all payment methods and build layout configuration with your custom component for all of them dynamically.

Or in your implementation of LayoutProcessorInterface you can dynamically add or not add your custom components to the js block layout depending on configuration. That gives you flexibility.

To customize Magento 2 checkout you can definitely create a plugin for the \Magento\Checkout\Block\Checkout\LayoutProcessor::process method as it is described here but “Customizations implemented through plugins SHOULD be adjusted respectively” according to Magento 2 Technical Guidelines:

The problem with plugins is that they influence the performance. Plugins SHOULD NOT be used within own module. Besides plugins can impact the sort order and your plugin can be called before necessary layout processor.