---
title: "Magento 2: How to Add Editable Field in Admin Order View Page"
url: "https://magecomp.com/blog/magento-2-add-editable-field-in-admin-order-view-page/"
date: "2022-09-16T12:34:48+00:00"
modified: "2025-02-13T11:53:33+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "How To"
  - "Magento 2"
word_count: 779
reading_time: "4 min read"
summary: "Hello Magento Friends,"
description: "Allow admin to edit custom checkout fields from the backend order view page. Learn How to Add Editable Field in Admin Order View Page in Magento 2."
keywords: "How To, Magento 2"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Display Minimum Order Amount Message on Minicart in Magento 2?"
    url: "https://magecomp.com/blog/display-minimum-order-amount-message-on-minicart-magento-2/"
  - title: "Top Benefits an E-commerce Store Will Avail from Magento 1 to Magento 2 Migration"
    url: "https://magecomp.com/blog/top-benefits-ecommerce-store-will-avail-from-magento2-migration/"
  - title: "How to Create Admin User via Command Line in Magento 2?"
    url: "https://magecomp.com/blog/create-admin-user-via-command-line-magento-2/"
---

# Magento 2: How to Add Editable Field in Admin Order View Page

_Published: September 16, 2022_  
_Author: Dhiren Vasoya_  

![How to Add Editable Field in Admin Order View Page in M2](https://magecomp.com/blog/wp-content/uploads/2022/09/How-to-Add-Editable-Field-in-Admin-Order-View-Page-in-M2-1024x512.webp)

**Hello Magento Friends,**

In this Magento 2 tutorial, I will explain How to Add Editable Field in the Admin Order View Page in Magento 2.
The checkout page is the final stage for order placement. Magento 2 merchants customize the checkout page to provide a better user experience. The store owners can [**determine checkout options**](https://magecomp.com/blog/configure-checkout-options-magento-2/) for a quick checkout procedure. Admin can [**add custom checkout fields**](https://magecomp.com/magento-2-custom-checkout-fields.html) for a smooth order fulfillment process.
[![hyva theme development](https://magecomp.com/blog/wp-content/uploads/2025/02/hyva-theme-development-CTA-6.webp)](https://magecomp.com/services/hyva-theme-development/)

When you have added custom fields at the checkout page and now the admin needs to edit the custom checkout fields value from the backend order view page. You can accomplish it using the below steps.
## Steps to Add Editable Field in Admin Order View Page in Magento 2:
**Step 1:** Go to the below file path
**app\code\Vendor\Extension\view\adminhtml\layout\sales_order_view.xml**

Then add the below code
```
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="order_additional_info">
            <block class="VendorExtensionBlockAdminhtmlOrderCheckoutcustomformedit" name="admin.chekoutcustomfield" template="Vendor_Extension::checkoutcustomformedit.phtml" />
        </referenceBlock>
    </body>
</page>
```

**Step 2:** Next, move to the following file path
**app\code\Vendor\Extension\Block\Adminhtml\Order\Checkoutcustomformedit.php**

Now add the below-mentioned code snippet
```
<?php
namespace VendorExtensionBlockAdminhtmlOrder;

use MagentoBackendBlockTemplate;
use MagentoBackendBlockTemplateContext;
use MagentoSalesModelOrder;

class Checkoutcustomformedit extends Template
{
	protected $order;

	public function __construct(
        		Context $context,
        		Order $order,
        		array $data = [])
	{
    	        $this->order = $order;
        	parent::__construct($context, $data);
	}

	public function getOrderId()
        {
		$orderId = $this->getRequest()->getParam('order_id');
		return $orderId;
	}

	public function getCustomfieldvalue()
       {
		$orderId = $this->getOrderId();
		$customfieldvalue = $this->order->load($orderId)->getData('customfield1');
		return $customfieldvalue;
	}
}
```

**Step 3:** Now navigate to the below file path
**app\code\Vendor\Extension\view\adminhtml\templates\Checkoutcustomformedit.phtml**

Now add the code as follows
```
                          <?php /* @escapeNotVerified */ echo __('Buyer Order Information') ?>
                                        <a href="#" id="edit-checkoutfield-info">
                            <?= $block->escapeHtml(__('Edit')); ?>
                        </a>
                                                                                    <?php echo $block->getCustomfield1(); ?>

            <fieldset class="admin__fieldset">
                <input type="hidden" id="orderid" value="<?php
                $objectManager = MagentoFrameworkAppObjectManager::getInstance();
                $request = $objectManager->get('MagentoFrameworkAppRequestHttp');
                echo $param = $request->getParam('order_id');?>"/>
                <input type="text" id="customfield1" class="customfield1" value="<?php echo $block->getCustomfield1(); ?>">
            </fieldset>
            <button id="customfield-submit">Submit</button>
    <script type="text/javascript">
                require([
                    'jquery',
                    'mage/validation',
                    'mage/translate',
                    'jquery/ui'
                ], function ($) {

                    document.getElementById('edit-checkoutfield-info').addEventListener('click', function (e, t) {
                        e.preventDefault();
                        $('#edit-checkoutfield-info-form').toggle();
                    });
                    $("#customfield-submit").click(function() {
                        var orderid = $('#orderid').val();

                        if($('#customfield1').length){
                           var customfield1 = $('#customfield1').val();
                        }
                        var url = '<?= /** @noEscape */ $block->getUrl("groupproduct/queue/update")?>';
                            jQuery.ajax({
                            url: url,
                            data: {orderid: orderid,customfield1value: customfield1},
                            type: "POST",
                            async: false,
                        }).done(function (response) {
                        $("#textfiedcustomfield").load(location.href + " #textfiedcustomfield");
                        });

                    });
                });
</script>
```

[![Hire Magento Programmer](https://magecomp.com/blog/wp-content/uploads/2025/02/Hire-Magento-Programmer-CTA-5.webp)](https://magecomp.com/services/hire-magento-programmer/)

**Step 4:** At last, move to the following file path
**app\code\Vendor\Extension\Controller\Adminhtml\Queue\Update.php**

And add the code mentioned below
```
 <?php

namespace VendorExtensionControllerAdminhtmlQueue;

use MagentoFrameworkAppResponseInterface;
use MagentoFrameworkExceptionLocalizedException;
use MagentoBackendAppAction;
use MagentoSalesApiOrderRepositoryInterface;

class Update extends Action
{
    protected $quoteFactory
    protected $orderinterface;
    protected $request;

    public function __construct(
        ActionContext $context,
        MagentoQuoteModelQuoteFactory $quoteFactory,
        MagentoSalesApiDataOrderInterface $orderinterface,
        MagentoFrameworkAppRequestHttp $request)
    {
        parent::__construct($context);
        $this->orderinterface = $orderinterface;
        $this->request = $request;
        $this->quoteFactory = $quoteFactory;
    }

    public function execute()
    {
        $customfield1value = $this->getRequest()->getPostValue('customfield1value');
        $orderid = $this->getRequest()->getPostValue('orderid');
        $order = $this->orderinterface->load($orderid);
        $order->setData('customfield1', $customfield1value);
        $order->save();
    }
}
```

## Conclusion:
This way you can Add an editable field in the admin order view page in Magento 2. If you face any difficulty, share it with me through the comment section. Stay updated with us for more Magento solutions.
[![Magento version upgrade](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-2-Version-Upgrade-CTA-3.webp)](https://magecomp.com/services/magento-upgrade-services/)

**Happy Coding!**

</body>


---

_View the original post at: [https://magecomp.com/blog/magento-2-add-editable-field-in-admin-order-view-page/](https://magecomp.com/blog/magento-2-add-editable-field-in-admin-order-view-page/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-05-20 13:07:56 UTC_