How to Display Product Image in Backend Order Detail Page of Magento 2

By vijayrami23 October 2020Updated 5 October 2022

Magento2Magento2 Extensions

How to Display Product Image in Backend Order Detail Page of Magento 2

to Display Product Image in Frontend Order Detail Page of Magento 2.

We will do it by creating custom module.

You can find complete module on Github.

Create folder in app/code/Magelearn/Salesadminorder

Add registration.php file in it:

<?php
/**
 * Copyright ©  All rights reserved.
 * See COPYING.txt for license details.
 */
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Magelearn_Salesadminorder', __DIR__);

Add composer.json file in it:

{
    "name": "magelearn/module-salesadminorder",
    "description": "Magento2 Display Product images on Sales Order View page at backend",
    "type": "magento2-module",
    "license": "OSL-3.0",
    "authors": [
        {
            "email": "info@mage2gen.com",
            "name": "Mage2Gen"
        },
        {
            "email": "vijaymrami@gmail.com",
            "name": "vijay rami"
        }
    ],
    "minimum-stability": "dev",
    "require": {},
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Magelearn\\Salesadminorder\\": ""
        }
    }
}

Add etc/module.xml file:

<?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="Magelearn_Salesadminorder" setup_version="1.0.0"/>
</config>

Now to add product image in magento backend Sales Order view page, we will modify layout file of sales_order_view.xml file. We will add new column to display product image.And with setTemplate method, we will call our custom template and add code to display product image.

Add view/adminhtml/layout/sales_order_view.xml file:

<?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_items">
         <arguments>
             <argument name="columns" xsi:type="array">
      	          <item name="product-img" xsi:type="string" translate="true">Product Image</item>
             </argument>
         </arguments>
        <referenceBlock name="default_order_items_renderer">
                  <arguments>
                    <argument name="columns" xsi:type="array">
                        <item name="product-img" xsi:type="string" translate="true">col-product-img</item>
                    </argument>
                </arguments>
                <action method="setTemplate">
                 <argument name="template" translate="true" xsi:type="string">Magelearn_Salesadminorder::order/view/items/renderer/default.phtml</argument>
             </action>
        </referenceBlock>
     </referenceBlock>
 </body>
</page>

Add view/adminhtml/templates/order/view/items/renderer/default.phtml file:

<?php /** @var \Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer $block */ ?>
<?php $_item = $block->getItem() ?>
<?php $block->setPriceDataObject($_item) ?>
<tr>
    <?php $i = 0;
    $columns = $block->getColumns();
    $lastItemNumber = count($columns) ?>
    <?php foreach ($columns as $columnName => $columnClass):?>
        <?php $i++; ?>
        <td class="<?= /* @noEscape */ $columnClass ?><?= /* @noEscape */ ($i === $lastItemNumber ? ' last' : '') ?>">
            <?= /* @escapeNotVerified */ $block->getColumnHtml($_item, $columnName) ?>
                <?php if($columnClass == "col-product-img"){  ?>
                <?php 
                $product =  $_item->getProduct();
                $imagewidth=200;
                $imageheight=200;
                $imageHelper = $this->helper('Magento\Catalog\Helper\Image');
                $image_url = $imageHelper->init($product, 'small_image')->setImageFile($product->getSmallImage())->resize($imagewidth, $imageheight)->getUrl();
                ?>
                <img src="<?php echo $image_url;?>" />
                <?php  } ?>
            </td>
    <?php endforeach; ?>
</tr>