I'm trying to add a custom field in between the shipping address and shipping method sections. And I want values of this field to be stored in both quote and sales_order tables ultimately. This is something similar to adding an "order comment" field but this field should appear right after the shipping address section and before the shipping method section.

I went through Magento dev guides on how to add a custom field and a custom form to the checkout and implemented a solution to a certain extent.

What I have done so far:

  1. Updated the checkout_index_index.xml layout, added a new uiComponent (a container) under the item "shippingAddress".
  2. Added the element (field) I require inside the container.
  3. Override the /js/view/shipping.js and shipping.phtmlin my custom module.
  4. Invoked the above made container inside shipping.phtml in between checkout shipping address and shipping method (something similar to adding a new static form)

Now the field I want is being rendered on the onepage checkout exactly where I want. But I have met with below problems.

  1. How to access the value of the custom field I have added above? I'm trying to save the value to a shippingAddress extension attribute. I added a mixin to setShippingInformationAction inside that try to do the below

    shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];

But above code actually fails since the element is not in the shipping-address-fieldset. I might be able to get the value through the window element. But is there a way to access this through Magento?

  1. Is there a way to save the value of this element in local cache storage (Magento_Checkout/js/checkout-data) so the value will persist even after a page refresh?

2 Answers 2


Based on your question I'm under the assumption you already have your extension attributes set up. I have carried out a similar modification and hopefully my answer helps.

In your Custom module create a requirejs-config file to extend the default shipping processor/default

var config = {
    "map": {
        "*": {
            'Magento_Checkout/js/model/shipping-save-processor/default': 'Namespace_CustomModule/js/model/shipping-save-processor/default'

Add your extension attribute to the payload.

/*global define,alert*/
    function (
    ) {
        'use strict';

        return {
            saveShippingInformation: function () {
                var payload;

                if (!quote.billingAddress()) {
                //Adding the extension attributes to your shipping address
                payload = {
                    addressInformation: {
                        shipping_address: quote.shippingAddress(),
                        billing_address: quote.billingAddress(),
                        shipping_method_code: quote.shippingMethod().method_code,
                        shipping_carrier_code: quote.shippingMethod().carrier_code,
                            custom_field: $('#custom_field').val(), 


                return storage.post(
                    function (response) {
                    function (response) {

Save the Attribute to your Quote with a plugin (Not sure if you could use an observer here I have not checked).


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="Namespace_CustomModule_save_delivery_date_in_quote" type="Namespace\CustomModule\Plugin\Checkout\SaveAddressInformation" />



class SaveAddressInformation
    protected $quoteRepository;
    public function __construct(
        \Magento\Quote\Model\QuoteRepository $quoteRepository
    ) {
        $this->quoteRepository = $quoteRepository;
     * @param \Magento\Checkout\Model\ShippingInformationManagement $subject
     * @param $cartId
     * @param \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
    public function beforeSaveAddressInformation(
        \Magento\Checkout\Model\ShippingInformationManagement $subject,
        \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
    ) {
        $extensionAttributes = $addressInformation->getExtensionAttributes();
        $customField = $extensionAttributes->getCustomField();
        $quote = $this->quoteRepository->getActive($cartId);


Save the Attribute to your order with an Observer events.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="sales_model_service_quote_submit_before">
        <observer name="unique_observer_name" instance="Namespace\CustomModule\Observer\SaveCustomFieldToOrder"/>


class SaveCustomFieldToOrder implements ObserverInterface
     * @var \Magento\Framework\ObjectManagerInterface
    protected $_objectManager;

     * @param \Magento\Framework\ObjectManagerInterface $objectmanager
    public function __construct(\Magento\Framework\ObjectManagerInterface $objectmanager)
        $this->_objectManager = $objectmanager;

    public function execute(EventObserver $observer)
        $order = $observer->getOrder();
        $quoteRepository = $this->_objectManager->create('Magento\Quote\Model\QuoteRepository');
        /** @var \Magento\Quote\Model\Quote $quote */
        $quote = $quoteRepository->get($order->getQuoteId());
        $order->setCustomField( $quote->getCustomField() );

        return $this;

  • Overriding core methods is not too lucky. What if another module override yours? magento.stackexchange.com/questions/135969/…
    – vaso123
    Mar 27, 2018 at 20:21
  • good point, was not aware of the alternate method. thanks for pointing it out.
    – NathanielR
    Apr 11, 2018 at 16:45
  • @vaso123 It looks like I am also not aware of something because here Nathaniel has created a plugin and one event-observer so which core function is overriden here. Could you please explain it little more, it would be really helpful ... Thanks
    – Sarvagya
    Apr 25, 2018 at 14:27
  • @Sarvagya When you use require js, do not use map *, use mixin instead.
    – vaso123
    Apr 25, 2018 at 21:45
  • @vaso123 I believe he is referring to Magento_Checkout/js/model/shipping-save-processor/default': 'Namespace_CustomModule/js/model/shipping-save-processor/default' which as Ii understand replaces Magento_Checkout/js/model/shipping-save-processor/default. } its been a while since I wrote this so Sarvagya please correct me if I'm wrong.
    – NathanielR
    Apr 27, 2018 at 11:05

Create a plugin for this \Magento\Checkout\Block\Checkout\LayoutProcessor::process method.

Make an entry in di.xml on this path


Create plugin class on this Directory.


2 => Create plugin class on this Directory. app/code/CompanyName\Module\Model\Plugin\Checkout

    ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAddress.custom_attributes',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/input',
            'options' => [],
            'id' => 'custom-field'
        'dataScope' => 'shippingAddress.custom_attributes.custom_field',
        'label' => 'Custom Field',
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [],
        'sortOrder' => 250,
        'id' => 'custom-field'

    return $jsLayout;


Once this is done, check the checkout page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.