In this blog, I am going to show you the method to display product image in order create page in Magento 2<\/em><\/strong>.<\/p>\n\n\n\n Creating customer orders<\/a> from the backend is an easy-peasy process in Magento 2. The admin can go to Sales > Orders<\/strong>, select the products and create an order with just a few clicks! The product selection grid shows the product name, SKU, Price, etc.<\/p>\n\n\n\n These details are generally enough to add and identify the items you want, but not always when you have hundreds or thousands of products to choose from! Things can get really confusing. Adding the product image to the grid can make it easier to select the correct product.<\/p>\n\n\n Displaying images in the select products grid can make it a bit easier to choose the products.<\/p>\n\n\n\n In this blog post, I will share the entire method to do that!<\/p>\n\n\n\n Let’s see how to<\/em> display product image in order create page in Magento 2<\/strong>.<\/p>\n\n\n\n In order to display product image in order create page in Magento 2, we need to override the default grid.<\/p>\n\n\n\n You can simply follow these steps to do that:<\/strong><\/em><\/p>\n\n\n\n Step 1: <\/strong>Create di.xml<\/strong> at app\\code\\Vendor\\Module\\<\/strong><\/em> <\/strong><\/em>with the following code:<\/p>\n\n\n\n Step 2: <\/strong>Add the following code in the Grid.php<\/strong> file at app\\code\\Vendor\\Module\\Block\\Adminhtml\\OverrideOrder\\Create\\Search\\<\/strong><\/em><\/strong><\/em><\/p>\n\n\n\n Step 3: <\/strong>Lastly, create \\Vendor\\Module\\Block\\Adminhtml\\Product\\Grid\\Renderer\\Image.php<\/strong><\/em> <\/strong><\/em>and add the following code:<\/p>\n\n\n\n That\u2019s it!<\/p>\n\n\n\n Now, the default product grid in the Magento 2 create order page will be overridden. The above code will add a new column for the product image to the grid.<\/p>\n\n\n This is how you can display product image in order create page in Magento 2. You can create order in M2 admin panel<\/a> to assist your customers placing orders when they require.<\/p>\n\n\n\n![\"Product](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/03\/Product-Selection-Grid-in-Magento-2-Order-Create.png\")
<\/figure>\n<\/div>\n\n\nMethod to Display Product Image in Order Create Page in Magento 2<\/h2>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n <preference for=\"\\Magento\\Sales\\Block\\Adminhtml\\Order\\Create\\Search\\Grid\" type=\"Vendor\\Module\\Block\\Adminhtml\\OverrideOrder\\Create\\Search\\Grid\" \/>\n<\/config><\/pre>\n\n\n\n
protected function _prepareColumns()\n {\n $this->addColumn(\n 'thumbnail',\n [\n 'filter' => false,\n 'sortable' => false,\n 'header' => __('Images'),\n 'name' => 'thumbnail',\n 'inline_css' => 'thumbnail',\n 'index' => 'image',\n 'class' => 'image',\n 'renderer' => 'Vendor\\Module\\Block\\Adminhtml\\Product\\Grid\\Renderer\\Image',\n ]\n );\n }<\/pre>\n\n\n\n<?php\nnamespace Vendor\\Module\\Block\\Adminhtml\\Product\\Grid\\Renderer;\n\nuse Magento\\Backend\\Block\\Widget\\Grid\\Column\\Renderer\\AbstractRenderer;\nuse Magento\\Framework\\DataObject;\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Magento\\Framework\\View\\Asset\\Repository;\nuse Magento\\Catalog\\Helper\\ImageFactory;\nuse Magento\\Framework\\Image\\AdapterFactory;\nuse Magento\\Store\\Model\\StoreManager;\nuse Magento\\Store\\Model\\ScopeInterface;\n\nclass Image extends AbstractRenderer\n{\n private $_storeManager;\n private $helperImageFactory;\n private $assetRepos;\n private $adapterFactory;\n private $scopeConfig;\n private $storeManager;\n \/**\n * @param \\Magento\\Backend\\Block\\Context $context\n * @param array $data\n *\/\n public function __construct(\\Magento\\Backend\\Block\\Context $context,\n Repository $assetRepos,\n ImageFactory $helperImageFactory,\n AdapterFactory $adapterFactory,\n StoreManager $storeManager,\n StoreManagerInterface $storemanager, array $data = [])\n {\n $this->_storeManager = $storemanager;\n $this->assetRepos = $assetRepos;\n $this->helperImageFactory = $helperImageFactory;\n $this->adapterFactory = $adapterFactory;\n $this->storeManager = $storeManager;\n $this->scopeConfig = $context->getScopeConfig();\n\n parent::__construct($context, $data);\n $this->_authorization = $context->getAuthorization();\n }\n \/**\n * Renders grid column\n *\n * @param Object $row\n * @return string\n *\/\n public function render(DataObject $row)\n {\n $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(\n \\Magento\\Framework\\UrlInterface::URL_TYPE_MEDIA\n );\n\n if($this->_getValue($row)){\n $imageUrl = $mediaDirectory.'\/catalog\/product'.$this->_getValue($row);\n }else{\n $plUrl = $this->scopeConfig->getValue('catalog\/placeholder\/thumbnail_placeholder',ScopeInterface::SCOPE_STORE,0);\n $imageUrl = $mediaDirectory.'\/catalog\/product\/placeholder\/'.$plUrl;\n }\n return '<img src=\"'.$imageUrl.'\" style=\"width: 5rem;border: 1px solid #d6d6d6;\"\/>';\n\n }\n}<\/pre>\n\n\n\n![\"Display](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/03\/Add-Product-Image-in-Order-Create-Grid.png\")
<\/figure>\n<\/div>\n\n\n