Search
×
Log in or create an account
If you have an account with us, please log in.

You have no items in your shopping cart.

Frequently Asked Questions

How can we help you?

banner image

How to add a custom column to the order grid in Magento 2?

Sometimes you may need to add a new column to the Magento 2 order grid for the better workflow of your admins. In this article, we’ll show you how to add field to order in Magento 2 in 2 ways. 

Let’s start.

Warning: all the code pieces presented in this article are simple examples that you need to customize according to your business needs.

Method 1. Add a column programmatically

For this, create a custom plugin following this step-by-step guide. 

Step 1. Register the module by creating the registration.php file in the app/code/Amasty/Testgrid/ with the following code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Amasty_Testgrid',
    __DIR__
);

Step 2. Next, create the app/code/Amasty/Testgrid/etc/module.xml file. It controls the module installation and updates.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Amasty_Testgrid" setup_version="1.0.0">
    </module>
</config>

Step 3. Then, what you need to do to add a column to the Magento 2 order grid is the Resource Model creation. For this, create Collection.php in the app/code/Amasty/Testgrid/Model/ResourceModel/Order/Grid/ folder. It may look like this:

<?php
namespace Amasty\Testgrid\Model\ResourceModel\Order\Grid;
use Magento\Framework\Data\Collection\Db\FetchStrategyInterface as FetchStrategy;
use Magento\Framework\Data\Collection\EntityFactoryInterface as EntityFactory;
use Magento\Framework\Event\ManagerInterface as EventManager;
use Magento\Sales\Model\ResourceModel\Order;
use Magento\Sales\Model\ResourceModel\Order\Grid\Collection as OrderGridCollection;
use Psr\Log\LoggerInterface as Logger;


class Collection extends OrderGridCollection
{
    public function __construct(
        EntityFactory $entityFactory,
        Logger $logger,
        FetchStrategy $fetchStrategy,
        EventManager $eventManager,
        $mainTable = 'sales_order_grid',
        $resourceModel = Order::class
    ) {
        parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $mainTable, $resourceModel);
    }
    protected function _renderFiltersBefore() {
        $joinTable = $this->getTable('sales_order');
        $this->getSelect()->joinLeft(
            ['sales_order_table' => $joinTable],
            'main_table.entity_id = sales_order_table.entity_id',
            ['discount_amount'] // you can add other attributes here
        );
        parent::_renderFiltersBefore();
    }
}

In the  _renderFiltersBefore method, you can add the columns that you want, for example, we’ve used the discount_amount column. In this array, you can pass as many parameters from the sales_order table as you like. Also, here you can join the other one or several tables to use the needed parameters for the order.

Step 4. Then we need to create a UI component file app/code/Amasty/Testgrid/view/adminhtml/ui_component/sales_order_grid.xml with the following code:

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <column name="discount_amount" class="Magento\Sales\Ui\Component\Listing\Column\PurchasedPrice">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="label" xsi:type="string" translate="true">Discount Amount</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

This file is responsible for columns on the grid. You can add other column elements, but don’t forget to use the resource model.

Step 5. As a final step adding a custom column to Magento 2 order grid, create app/code/Amasty/Testgrid/etc/di.xml:

<?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\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="sales_order_grid_data_source" 
xsi:type="string">Amasty\Testgrid\Model\ResourceModel\Order\Grid\Collection</item>
            </argument>
        </arguments>
    </type>
    <type name="Amasty\Testgrid\Model\ResourceModel\Order\Grid\Collection">
        <arguments>
            <argument name="mainTable" xsi:type="string">sales_order_grid</argument>
            <argument name="resourceModel" xsi:type="string">Magento\Sales\Model\ResourceModel\Order</argument>
        </arguments>
    </type>
</config>

In this file, we define where we want to apply our changed collection. In the same way, you can add a column to any grid in your Magento 2, say, to the customer grid. 

Method 2. Add a column to Magento 2 sales order grid without coding

If you want to customize your order grid without writing a line of code, try this Extended Order Grid extension. It allows adding, hiding, and renaming columns with a customer, product, shipping or billing attributes to see only relevant order info. Filter orders by weight, subtotal, discount amount. You can save the custom view of the grid to get quick access to it when needed. The mass actions let you manage orders even faster. Optimize your managers' work in the most efficient way.

magento-2-add-column-to-sales-order-grid

According to the statistics, you may find helpfull the following question about custom filters.

Rate the answer?

Total rating: 5.0

If you didn’t find the answer on your question, please, ask here:

Back to top