How to Display Product Image in Order Creation Page in Magento 2

Creating orders from the backend in Magento 2 is a straight forward process. Administrators can navigate to the Sales > Orders section allowing them to effortlessly create orders with minimal effort. The product selection grid conveniently displays essential information such as the product Id, name, SKU, price, and Qty. While these details are usually sufficient for adding and identifying desired items, they may not be as effective when dealing with a vast inventory of hundreds or even thousands of products. Adding the product image to the grid can make it easier to select the correct product.

To display a product image on the order create page in Magento 2, we need to override the default grid. This form is typically located at Sales > Orders > Create New Order in the Magento admin panel. You can follow these steps to add product images to the order create page:

1. Create a Custom Module:
You should create a custom module if you haven't already. You can create a custom module by following Magento 2 module development guidelines.

2. Create a di.xml file located at app\code\Vendor\Module\ and insert 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">
    <preference for="\Magento\Sales\Block\Adminhtml\Order\Create\Search\Grid" type="Vendor\Module\Block\Adminhtml\OverrideOrder\Create\Search\Grid" />
</config>

3. Add the below provided code into the Grid.php file, which is located at app\code\Vendor\Module\Block\Adminhtml\OverrideOrder\Create\Search.

protected function _prepareColumns()
    {
	  $this->addColumn(
            'thumbnail',
            [
                'filter' => false,
                'sortable' => false,
                'header' => __('Image'),
                'name' => 'thumbnail',
                'inline_css' => 'thumbnail',
                'index' => 'image',
                'class' => 'image',
                'renderer' => 'Vendor\Module\Block\Adminhtml\Product\Grid\Renderer\Image',
            ]
        );
	}

4. Finally, create a file named Image.php at \Vendor\Module\Block\Adminhtml\Product\Grid\Renderer\ and include the following code:

<?php
namespace Vendor\Module\Block\Adminhtml\Product\Grid\Renderer;

use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
use Magento\Framework\DataObject;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Catalog\Helper\ImageFactory;

/**
 * Class Image
 * @package Vendor\Module\Block\Adminhtml\Product\Grid\Renderer
 */
class Image extends AbstractRenderer
{
    /**
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    private $_storeManager;

    /**
     * @var \Magento\Catalog\Helper\ImageFactory
     */
    private $helperImageFactory;

    /**
     * @var \Magento\Store\Model\ScopeInterface
     */
    private $scopeConfig;


    /**
     * @param \Magento\Backend\Block\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Context $context,
        ImageFactory $helperImageFactory,
        StoreManagerInterface $storemanager, array $data = [])
    {
        $this->_storeManager = $storemanager;
        $this->helperImageFactory = $helperImageFactory;
        $this->scopeConfig = $context->getScopeConfig();

        parent::__construct($context, $data);
        $this->_authorization = $context->getAuthorization();
    }

    /**
     * Renders grid column
     *
     * @param Object $row
     * @return  string
     */
    public function render(DataObject $row)
    {
        $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
            \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
        );

        if($this->_getValue($row)){
            $imageUrl = $mediaDirectory.'/catalog/product'.$this->_getValue($row);
        }else{
            $plUrl = $this->scopeConfig->getValue('catalog/placeholder/thumbnail_placeholder',ScopeInterface::SCOPE_STORE,0);
            $imageUrl = $mediaDirectory.'/catalog/product/placeholder/'.$plUrl;
        }
        return '<img src="'.$imageUrl.'" style="width: 100px; border: 1px solid #d6d6d6;"/>';

    }
}

Now, the default product grid on the Magento 2 create order page will be overridden. The provided code will add a new column for the product image to the grid.

Remember to replace [Vendor] and [Module] with your actual vendor and module names, and customize the code to fit your specific requirements for retrieving and displaying product images. Additionally, consider error handling and edge cases when implementing this functionality in a production environment.