Magento: Showing product images on the order overview in the Admin Panel

Find out instantly which product has been ordered by looking at the product images.

Find out instantly which product has been ordered by looking at the product images.

Often times customers request to display the product images on the order overview page as well. This helps the customers recognize the products quicker than by looking at the name or SKU. This saves time especially when many orders have to be processed each day. As you can see on the screenshot on the left hand-side, these images help recognize the products quicker.

To display the product images as shown on the screenshot, open app/design/adminhtml/default/default/template/sales/order/view/items/renderer/default.phtml and insert the following code after line 33:

// Load the product object
if($_item->getProductType() == 'configurable') {
    $_product = $_item->getProduct();
} else {
    $_product = Mage::getModel('catalog/product')->load($_item->getId());
}

// If no valid product could be loaded, use the default placeholder image for the product
$imgUrl = '/skin/frontend/default/default/images/catalog/product/placeholder/small_image.jpg';

// If a valid product has been loaded, use that product's image
if($_product->getId() && $_product->getSmallImage() && $_product->getSmallImage() !== 'no_selection') {
    $imgUrl = Mage::helper('catalog/image')->init($_product, 'small_image')->resize(135,135);
} ?>
<img src="<?php echo $imgUrl; ?>" width="135" height="135" alt="" style="float:left;margin-right:2px" />

First we are loading the Product object and then we check if there has been an image assigned to this specific product. If not, the placeholder image is loaded instead.

PS: Do you need help implementing this solution or with another problem? Feel free to Contact us and we will gladly help you with anything Magento-related.

Other interesting articles:

Back to the blog overview