Magento 2: Add Product Name Column in Sales order Grid

Sometimes we need to show “Product Name” in Sales order Grid in admin panel with the order. Magento does not provide to display/show “Product Name” in Sales order Grid page. Today I am going to describe how you can add “Product Name” in Sales order Grid in the admin panel. This is really important and needed aspects of the sales order grid and saves a lot of time of your ’s, Lot of users requested us for this tutorial.

Please follow below steps to achieve this.

Steps 01: Create sales_order_grid.xml at

app/code/Prashant/Custom/view/adminhtml/ui_component/sales_order_grid.xml

Here, “Prashant” is the namespace and “Custom” is the module name and add below 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="products" class="Prashant\Custom\Ui\Component\Listing\Column\Products">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="label" xsi:type="string" translate="true">Products</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Steps 02: Create Products.php at

app/code/Prashant/Custom/Ui/Component/Listing/Column/Products.php

Here, “Prashant” is the namespace and “Custom” is the module name

<?php

namespace Prashant\Custom\Ui\Component\Listing\Column;

use \Magento\Sales\Api\OrderRepositoryInterface;
use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;

class Products extends Column
{
    protected $_orderRepository;
    protected $_searchCriteria;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        OrderRepositoryInterface $orderRepository,
        SearchCriteriaBuilder $criteria,
        array $components = [],
        array $data = [])
    {
        $this->_orderRepository = $orderRepository;
        $this->_searchCriteria  = $criteria;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$items) {
                $productArr = [];
                $order  = $this->_orderRepository->get($items["entity_id"]);

                foreach ($order->getAllVisibleItems() as $item) {
                    $productArr[] = $item->getName(); //to get product name
                }
                $items['products'] = implode(' - ', $productArr);
                unset($productArr);
            }
        }
        return $dataSource;
    }
}

Steps 03: Create registration.php at

app/code/Prashant/Custom/registration.php

Here, “Prashant” is the namespace and “Custom” is the module name and add below code

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

Steps 04: Create module.xml at

app/code/Prashant/Custom/etc/module.xml

Here, “Prashant” is the namespace and “Custom” is the module name and add below code

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Prashant_Custom" setup_version="1.0.0" schema_version="1.0.0">
    </module>
</config>

And after that, run below code

php bin/magento setup:upgrade

and after that run below static content deploy code

php bin/magento setup:static-content:deploy -f

Now remove var/ and you can see the “Products” column and its value added in Sales order Grid in the admin panel.