I have a magento store on magento version 2.1.7.
I want to show product image for ordered items on order view page admin panel.
Please help me to achieve this as I am new on magento 2.x developing..
Solved! Go to Solution.
Hello @santoshcbonline
you need to edit below file
/vendor/magento/module-sales/view/adminhtml/templates/order/view/items/renderer/defult.phtml ( you need to copy into your theme or module)
replace file code with below code
<?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) ?> <td> <?php $product = $_item->getProduct();?> <?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance();?> <?php $imagewidth=200; $imageheight=200; $imageHelper = $objectManager->get('\Magento\Catalog\Helper\Image'); $image_url = $imageHelper->init($product, 'small_image')->setImageFile($product->getSmallImage())->resize($imagewidth, $imageheight)->getUrl(); ?> <img src="<?php echo $image_url;?>" /> </td> <?php foreach ($columns as $columnName => $columnClass):?> <?php $i++; ?> <td class="<?= /* @noEscape */ $columnClass ?><?= /* @noEscape */ ($i === $lastItemNumber ? ' last' : '') ?>"><?= /* @escapeNotVerified */ $block->getColumnHtml($_item, $columnName) ?></td> <?php endforeach; ?> </tr>
Hope it will help you.
If it will work then give kudos or mark as solution
Hi @santoshcbonline,
I didn't tried this module but it seems can be useful for you: https://marketplace.magento.com/vsourz-order-success.html
You can always can perform a search at the marketplace: https://marketplace.magento.com/
Before installing a 3rd-party module remember to backup your database to be able to restore your store in case of troubles.
I do not want product image to show on order success page on frontend.
Rather I want to show product images for ordered items on admin panel when admin view the order.
I want product images of ordered items along with product name and sku on order view page on admin panel.
Currently it only shows the product name and sku.
Some one on stack exchange already tried this kind of solution !!
here if the link - https://magento.stackexchange.com/questions/106556/how-to-display-product-image-in-sales-order-view-...
This might help you
Hello @santoshcbonline
you need to edit below file
/vendor/magento/module-sales/view/adminhtml/templates/order/view/items/renderer/defult.phtml ( you need to copy into your theme or module)
replace file code with below code
<?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) ?> <td> <?php $product = $_item->getProduct();?> <?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance();?> <?php $imagewidth=200; $imageheight=200; $imageHelper = $objectManager->get('\Magento\Catalog\Helper\Image'); $image_url = $imageHelper->init($product, 'small_image')->setImageFile($product->getSmallImage())->resize($imagewidth, $imageheight)->getUrl(); ?> <img src="<?php echo $image_url;?>" /> </td> <?php foreach ($columns as $columnName => $columnClass):?> <?php $i++; ?> <td class="<?= /* @noEscape */ $columnClass ?><?= /* @noEscape */ ($i === $lastItemNumber ? ' last' : '') ?>"><?= /* @escapeNotVerified */ $block->getColumnHtml($_item, $columnName) ?></td> <?php endforeach; ?> </tr>
Hope it will help you.
If it will work then give kudos or mark as solution
this solution not worked for me (magento 2.2.6)
This line gives error.
$image_url = $imageHelper->init($product, 'small_image')->setImageFile($product->getSmallImage())->resize($imagewidth, $imageheight)->getUrl();
Thanks for the solution. It worked perfectly fine with my 2.2.6 version. The only thing is that the order of the titles are not correct because the new image column in the table does not have a title.
Can you please tell me how to add the title for the image in the new table?
The way to do this, using Magento best practices is:
1. Create a new module and in your module.xml add
<!-- Ensures this module runs after Magento_Sales module is loaded by Di -->
<sequence> <module name="Magento_Sales" /> </sequence>
2. create a Vendor/Module/view/adminhtml/layout/sales_order_view.xml file with the below
<?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">
<!-- This is for your new column heading in <thead> --> <item name="image" xsi:type="string" translate="true">Product Image</item> <item name="product" xsi:type="string" translate="true">Product</item> <item name="status" xsi:type="string" translate="true">Item Status</item> <item name="price-original" xsi:type="string" translate="true">Original Price</item> <item name="price" xsi:type="string" translate="true">Price</item> <item name="ordered-qty" xsi:type="string" translate="true">Qty</item> <item name="subtotal" xsi:type="string" translate="true">Subtotal</item> <item name="tax-amount" xsi:type="string" translate="true">Tax Amount</item> <item name="tax-percent" xsi:type="string" translate="true">Tax Percent</item> <item name="discont" xsi:type="string" translate="true">Discount Amount</item> <item name="total" xsi:type="string" translate="true">Row Total</item> </argument> </arguments> <referenceBlock name="default_order_items_renderer"> <arguments> <argument name="columns" xsi:type="array">
<!-- This is for your new column data in <tbody> --> <item name="image" xsi:type="string" translate="false">col-image</item> <item name="product" xsi:type="string" translate="false">col-product</item> <item name="status" xsi:type="string" translate="false">col-status</item> <item name="price-original" xsi:type="string" translate="false">col-price-original</item> <item name="price" xsi:type="string" translate="false">col-price</item> <item name="qty" xsi:type="string" translate="false">col-ordered-qty</item> <item name="subtotal" xsi:type="string" translate="false">col-subtotal</item> <item name="tax-amount" xsi:type="string" translate="false">col-tax-amount</item> <item name="tax-percent" xsi:type="string" translate="false">col-tax-percent</item> <item name="discont" xsi:type="string" translate="false">col-discont</item> <item name="total" xsi:type="string" translate="false">col-total</item> </argument> </arguments> </referenceBlock> </referenceBlock> </body> </page>
3. Create an etc/di.xml file with the following to override the DefaultRenderer block for the item columns.
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer"> <plugin name="order-view-image" type="Vendor\Module\Plugin\DefaultRendererPlugin" sortOrder="1" /> </type> </config>
4. Create your plugin at Vendor/Module/Plugin/DefaultRendererPlugin.php with the following contents
<?php namespace Vendor\Module\Plugin; use \Magento\Catalog\Helper\Image as ImageHelper; class DefaultRendererPlugin { /** * @var \Magento\Catalog\Helper\Image $imageHelper */ protected $imageHelper; /** * @param ImageHelper $imageHelper */ public function __construct ( ImageHelper $imageHelper ) { $this->imageHelper = $imageHelper; } public function aroundGetColumnHtml(\Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer $defaultRenderer, \Closure $proceed,\Magento\Framework\DataObject $item, $column, $field=null) { // $column will equal the name value from sales_order_view.xml that was added
if($column === 'image') { $img = $this->imageHelper->init($item->getProduct(), 'small_image')->setImageFile($item->getProduct()->getImage())->resize(200)->getUrl(); $result = '<img src="'.$img.'" alt="'.$item->getName().'" />'; } else { if($field) { $result = $proceed($item,$column,$field); } else { $result = $proceed($item,$column); } } return $result; } }
5. Recompile (Showing full compilation just in case all is needed)
bin/magento module:enable vendor/module bin/magento setup:upgrade bin/magento s:d:c bin/magento s:s:d -f
N.B Please never edit core files e.g. in vendor/ always override them and never use the objectManager, always make proper use of the dependency injection system
If anybody needs a plug and play extension to show product images at all the placed where order is viewed, like
- Admin order view
- Admin new order creation
- Storefront order view
- Order email to customer
Then you may use below extension
https://redchamps.com/product-images-in-sales-order-magento-2-extension.html
Also, if you like to link/hyperlink to product name at all those places then you can use below extension as well
https://redchamps.com/product-links-in-sales-order-magento-2-extension.html
It's working, but the thing is that if I delete a product which was inside the order, I am getting the following error:
Information Changes have been made to this section that have not been saved. This tab contains invalid data. Please resolve this before saving.