Hello Magento Friends,
In Magento 2, the admin order view page shows all ordered products in a grid. Occasionally, you might need to insert a custom column into this grid—for example, to show extra product attributes, custom order information, or even internal comments.
Here in this blog, we’ll guide you through adding a custom column to the “Items Ordered” area in the order view page of the Magento 2 admin panel.
Steps to Add Custom Column at Admin Order View Item Orders in Magento 2:
Step 1: To start with, we must make a “sales_order_view.xml” file within our extension at the following location
app\code\Vendor\Extension\view\adminhtml\layout\sales_order_view.xml
Now insert the code as follows
<?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_tab_info">
<block class="Magento\Sales\Block\Adminhtml\Order\View\Items" name="order_items" template="Magento_Sales::order/view/items.phtml">
<arguments>
<argument name="columns" xsi:type="array">
<item name="product" xsi:type="string" translate="true">Product</item>
<item name="status" xsi:type="string" translate="true">Item Status</item>
<item name="price-original" xsi:type="string" translate="true">Original Price</item>
<item name="price" xsi:type="string" translate="true">Price</item>
<item name="ordered-qty" xsi:type="string" translate="true">Qty</item>
<item name="custom_column" xsi:type="string" translate="true">Custom Column</item>
<item name="subtotal" xsi:type="string" translate="true">Subtotal</item>
<item name="discont" xsi:type="string" translate="true">Discount Amount</item>
<item name="total" xsi:type="string" translate="true">Row Total</item>
</argument>
</arguments>
<block class="Vendor\Extension\Block\Adminhtml\Sales\Order\View\Items\Renderer\DefaultRenderer" as="default" name="default_order_items_renderer" template="Magento_Sales::order/view/items/renderer/default.phtml">
<arguments>
<argument name="columns" xsi:type="array">
<item name="product" xsi:type="string" translate="false">col-product</item>
<item name="status" xsi:type="string" translate="false">col-status</item>
<item name="price-original" xsi:type="string" translate="false">col-price-original</item>
<item name="price" xsi:type="string" translate="false">col-price</item>
<item name="qty" xsi:type="string" translate="false">col-ordered-qty</item>
<item name="discount_percent" xsi:type="string" translate="false">col-discount_percent</item>
<item name="subtotal" xsi:type="string" translate="false">col-subtotal</item>
<item name="discont" xsi:type="string" translate="false">col-discont</item>
<item name="total" xsi:type="string" translate="false">col-total</item>
</argument>
</arguments>
</block>
<block class="Magento\Sales\Block\Adminhtml\Items\Column\Qty" name="column_qty"
template="items/column/qty.phtml" group="column"/>
<block class="Magento\Sales\Block\Adminhtml\Items\Column\Name" name="column_name"
template="items/column/name.phtml" group="column"/>
<block class="Magento\Framework\View\Element\Text\ListText" name="order_item_extra_info"/>
</block>
</referenceBlock>
</body>
</page>Step 2: Then, we have to add a “DefaultRenderer.php” file to our extension in the below-mentioned path
app\code\Vendor\Extension\Block\Adminhtml\Sales\Order\View\Items\Renderer\DefaultRenderer.php
And include the code as given below
<?php
namespace Vendor\Extension\Block\Adminhtml\Sales\Order\View\Items\Renderer;
use Magento\Framework\DataObject;
use Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer as MagentoDefualtRenderer;
class DefaultRenderer extends MagentoDefualtRenderer
{
public function getColumnHtml(DataObject $item, $column, $field = null)
{
$html = '';
$custom_column = "Custom Column Value";
switch ($column) {
case 'product':
if ($this->canDisplayContainer()) {
$html .= '<div id="' . $this->getHtmlId() . '">';
}
$html .= $this->getColumnHtml($item, 'name');
if ($this->canDisplayContainer()) {
$html .= '</div>';
}
break;
case 'status':
$html = $item->getStatus();
break;
case 'price-original':
$html = $this->displayPriceAttribute('original_price');
break;
case 'discount_percent':
$html = $custom_column;
break;
case 'discont':
$html = $this->displayPriceAttribute('discount_amount');
break;
default:
$html = parent::getColumnHtml($item, $column, $field);
}
return $html;
}
}Conclusion:
Inserting a custom column to the admin order item grid of Magento 2 enables you to present vital details for order handling.
Share it with others and stay tuned for more such fixes.
