Customizing the order grid in Magento 2 can significantly enhance the efficiency of your store’s order management process. By adding custom columns, you can display additional information that is crucial for your business operations directly within the order grid. So, how to add custom column to order grid in Magento 2 store?
This step-by-step guide, BSS Commerce will walk you through the process of Magento 2 add custom column to order grid, along with significant benefits when adding custom columns. Now, let’s dive in!
Top Benefits of Adding More Columns to Order Grid in Magento 2
Table of Contents
There are many reasons for eCommerce owners to add columns in the order grid. Let us explore these reasons.
- Seek Additional Details: Presenting a specific information section about client orders can prove useful; unfortunately, the standard grid does not include a column for this. With a little modification, you may add a custom column and seek any relevant data that is necessary for enhancing the business.
- Enhanced Feature: Custom columns let users add additional information within the order grid itself to get a more complete picture of the order without scrolling multiple pages.
- Accurate Calculations: Custom columns can enhance the information due to the inclusion of appropriate data that relates to the order amount. For instance, you can show the total profit made, costs charged for shipping services, and service fees as well as offer different discounts.
- Optimized Operations: Having all relevant information at hand improves functionality/s Pe, reduces chances of making mistakes, and makes sure all members are looking at the same information hence improving their teamwork, and communication.
- Customization: Changing the order grid to include columns tailored to your specific business requirements allows for a more customized and relevant order management experience. This may encompass Magento custom order attributes, payment methods, shipping details, or any other relevant information.
- Better Order Processing: The use of additional columns also helps to create and control the orders according to different parameters. For example, a column can be added that ranks the orders from most important to least important so that timely requests may not wait for too long.
- Better Support of Customers: Custom columns help support operators find the order information more effectively and also edit it which leads to better service to customers.
>>> Explore Now: 10+ Best Magento 2 Order Management Extensions
Magento 2 Add Custom Column to Order Grid: 3 Easy Steps
The default Magento 2 sales order grid has a few columns that enable order processing management. However, as eCommerce continues to develop and the appetite for online shopping rises, these types of grids generate and process a lot of data and the default order grid may be limited.
Order processing system plays a vital role in customer satisfaction. If a store is capable of fulfilling orders quickly and correctly, the clients will come back to make further purchases.
This effectiveness can only be translated if the order data in particular is efficiently controlled by the administrator. It becomes easier to do so when all the needed details are put in one place. Thus, for this purpose, the administrator will be required to extend the order grid of the Magento 2 store by adding a custom column because this option is not available by default.
The next section describes how to add new column in sales order grid Magento store programmatically. Moreover, it is allowed to add the action column to the grid in the Magento 2 admin panel as well for performing the actions related to the records such as implementing edit or delete processes for the records.
Step 1. Create di.xml file at app\code\Vendor\Module\etc
Magento store owners can create di.xml file at app\code\Vendor\Module\etc with the following code:
<?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">Vendor\Module\Model\ResourceModel\Order\Grid\Collection</item> </argument> </arguments> </type> <type name="Vendor\Module\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>
Step 2. Create Collection.php file
Magento store owners can create Collection.php file at app\code\Vendor\Module\Model\ResourceModel\Order\Grid with the following code:
<?php
namespace Vendor\Module\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\Grid\Collection as OriginalCollection;
use Psr\Log\LoggerInterface as Logger;
/**
* Order grid extended collection
*/
class Collection extends OriginalCollection
{
protected $helper;
public function __construct(
EntityFactory $entityFactory,
Logger $logger,
FetchStrategy $fetchStrategy,
EventManager $eventManager,
$mainTable = 'sales_order_grid',
$resourceModel = \Magento\Sales\Model\ResourceModel\Order::class
)
{
parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $mainTable, $resourceModel);
}
protected function _renderFiltersBefore()
{
$joinTable = $this->getTable('sales_order');
$this->getSelect()->joinLeft($joinTable, 'main_table.entity_id = sales_order.entity_id', ['tax_amount', 'discount_amount', 'coupon_code']);
parent::_renderFiltersBefore();
}
}
Step 3. Create sales_order_grid.xml file
Entering the following code to create sales_order_grid.xml file at app\code\Vendor\Module\view\adminhtml\ui_component:
<?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="tax_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">Tax Amount</item>
</item>
</argument>
</column>
<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>
<column name="coupon_code">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Coupon Code</item>
</item>
</argument>
</column>
</columns>
</listing>
Important: You can add a custom column in the CSV export within Magento 2, which will be beneficial when you require a CSV file with tailored modifications. Besides, you have the option to add a custom column for displaying product images on the order creation page, thereby enhancing the efficiency of the order creation process.
>>> SEE NOW: How to Import CSV File to Custom Table in Magento 2
To Sum Up
So, the question “How to add custom columns to order grid in Magento 2 store?” is clearly explained. Should you encounter difficulties in adding a custom column to the Magento 2 order grid, our specialized development team is prepared to assist you. Please provide us with the specifics of your project, and we will work with you to identify the most effective solution. For further information about our custom development services or to submit a request, please do not hesitate to reach out.
FAQs – How to Add Custom Column to Order Grid in Magento 2 Store
1. What are the ways to change the data that is visible in the custom column?
There are 3 main ways the data seen in the custom column can be modified:
- Adopting a custom source model that fetches the data either from within the database or through outside resources.
- Adopting a custom renderer that takes care of the data presentation for the end users on the grid.
- Adopting a custom filter that restricts the user to only the data that is characterized in the custom column on the grid.
2. How do I order the grid with respect to the custom column I added?
In order to order the grid with respect to the custom column definer, you are required to:
- Develop a custom sorter class that would take two orders and check the custom column of these orders to compare their ranges.
- Associate the custom sorter class so created with the grid object.
3. In case I want to add a custom column to a certain order status, how can I achieve that?
Now in case you want to add a custom column to a certain order status, you can:
- Implement a checker plugin that will check the order status before adding the custom column and it should do that only for matched status conditions.
- Inherit the order grid class and implement the _prepareColumns method to add the custom column for a certain order status.
4. What are the steps to overcome challenges faced when deploying a custom column?
If you face any problems while attempting to create a custom column:
- Look for any error messages in the console.
- Use the attached debugger to debug the code.
- Consult the manual provided by Magento concerning the creation of custom columns.
- Consider using the Magento Development Service to get support for all issues.
>>> If you are a beginner to Magento and desire to become a master, check out this blog post: Ultimate Magento 2 Tutorial for Beginners
