Magento How to add unit price and product image in new order email template

In new order confirmation email template product unit price does not show by default. Sometimes we need customization in order email template as per our client requirements. In this post, I will guide you to customize order email template in easy steps.

The output of the customization will look like as follows:

Here we will change 3 files, you have to copy these files into the folder of your current theme in same folder structure.

1) app/design/frontend/base/default/template/email/order/items.phtml

See line 32, find the following code (it might be different if you already customized it):

    <tr>
    <th align="left" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Item') ?></th>
    <th align="left" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Sku') ?></th>
    <th align="center" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Qty') ?></th>
    <th align="right" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Subtotal') ?></th>
    </tr>

And replace with following code

    <thead>
    <tr>
<th align="left" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px">&nbsp;</th>
    <th align="left" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Item') ?></th>
    <th align="left" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Sku') ?></th>
    <th align="left" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Unit Price') ?></th>
    <th align="center" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Qty') ?></th>
    <th align="right" bgcolor="#EAEAEA" style="font-size:13px; padding:3px 9px"><?php echo $this->__('Subtotal') ?></th>
    </tr>
    </thead>

2. app/design/frontend/base/default/template/email/order/items/order/default.phtml

See line 28, below this line of code (it might be different if you already customized it):

<?php $_order = $this->getItem()->getOrder() ?>

Add the following code

<!-- Show product image -->
<?php
$productid = $_item->getProductId();
$product_id = $productid;
$parentIds = Mage::getModel('catalog/product_type_grouped')->getParentIdsByChild($_item->getProductId()); // check for grouped product
if(count($parentIds)>0 && isset($parentIds[0]))
{
$product_id = isset($parentIds[0])?$parentIds[0]:$productid;
}
        $_product = Mage::getModel('catalog/product')
        ->setStoreId($_item->getOrder()->getStoreId())
        ->load($product_id);
?>
<!-- End Show product image -->

See line 30, above this line of code (it might be different if you already customized it):

<td align="left" valign="top" style="font-size:11px; padding:3px 9px; border-bottom:1px dotted #CCCCCC;">
        <strong style="font-size:11px;"><?php echo $this->escapeHtml($_item->getName()) ?></strong>

Add the following code

<!-- Show product image -->
<td style="vertical-align: middle;">
<a href="<?php echo $_product->getProductUrl(); ?>" ><img src="<?php echo Mage::helper('catalog/image')->init($_product, 'image')->resize(80); ?>" height="80" alt="" /></a>
</td>
<!-- End Show product image -->


See line 48, below this line of code (it might be different if you already customized it):

    <td align="left" valign="top" style="font-size:11px; padding:3px 9px; border-bottom:1px dotted #CCCCCC;"><?php echo $this->htmlEscape($this->getSku($_item)) ?></td>

Add the following code

    <td align="center" valign="top" style="font-size:11px; padding:3px 9px; border-bottom:1px dotted #CCCCCC;">
    <!-- Show Unit Price -->
    <?php
    if ($this->helper('tax')->displaySalesPriceInclTax($_order->getStore())) {
    $itemprice = $this->helper('checkout')->getPriceInclTax($_item) ;
    echo $this->helper('checkout')->formatPrice($itemprice);
    } else {
    echo $this->helper('checkout')->formatPrice($_item->getPrice()) ;
    }
    ?>
    <!-- END Unit Price -->
    </td>

3. app/design/frontend/base/default/layout/sales.xml

Open the above file and find for "sales_email_order_items".

    <action method="setLabelProperties"><value>colspan="3" align="right" style="padding:3px 9px"</value></action>

and replaced with following or just change colspan as per your extra columns added.

    <action method="setLabelProperties"><value>colspan="5" align="right" style="padding:3px 9px"</value></action>

Upload all files, clear cache and get expected output! :)