Magento 2: How To Add a New Field On a Checkout Page. Part 2

Jan 10, 20171805
Magento 2: How To Add a New Field On a Checkout Page. Part 2

In the first part of this article we explained how to add a new field on a checkout page by plugins, that were embedded in Magento 2. So in this part we are going to describe more in details some specific moments of adding a new field on a checkout page.

Let’s start with checkout page description. The description of the page structure is located in vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml  file. In the current layout we can see that checkout page is being output by Magento\Checkout\Block\Onepage block.

Also we can notice in checkout_index_index.xml file, that jsLayout parameter is transferred in Magento\Checkout\Block\Onepage block.

jsLayout – it’s an array that contains the entire structure of the checkout page.

The initialization of jsLayout property in Magento\Checkout\Block\Onepage block occurs in constructor (vendor/magento/module-checkout/Block/Onepage.php file).

Also there is a getJsLayout method in Magento\Checkout\Block\Onepage block, that processes jsLayout array and returns it as a json-string.

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

In the previous article we were using a plugin that is called after process method in LayoutProcessor class:

In the current plugin $jsLayout array serves as a jsLayout argument, which is defined in checkout_index_index.xml file. Each index of $jsLayout array defines child element from jsLayout argument in checkout_index_index.xml file. For example,  $jsLayout[‘components’][‘checkout’] index accesses the next element from checkout_index_index.xml file.

The No PO Box at Checkout extension allows improving the functionality of Magento based stores by stopping customers from using PO Boxes as shipping address right on the checkout page.


One Page Checkout with Cart

Take your online store to the next level with BelVG module

Download here

Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey


  1. Hi. Do you know how can add manufacurer to chceckout page? Above the product name for example.

  2. I want to show on cart page custom dropdown with list of products. customer will select three option max and these 3 options (values coming from my custom table). the selected options show show on orders, then admin orders, invoice and even should go in email. i want to know what templates layouts should i put this into. Please help. You can email me on As this will simply grow as separate thread.

  3. Hi, Amol
    Unfortunately, your issue will require a separate module, developed particularly for this purpose.

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *