Looking to Increase Revenue From Your Website?

Schedule a FREE 30-minute power consultation now.

Magento Order Confirmation Email Template

Not liking Magento's new order confirmation email layout?

With the introduction of the Magento RWD theme, I've found myself using that theme and modifying it for my Magento client's custom designs. The theme itself is pretty strong in most areas, but the order confirmation email template is very bad, in my opinion.

Not only is the design sub-par, but the layout is quite confusing and not at all intuitive.

Here's how to revert back to the older-style Magento order confirmation email template

If you'd like to use a similar order confirmation email from older Magento versions, I've created one for you to freely use. Just copy the code below into a new template by going to System > Transactional Emails and click Add New Template. Enjoy!

{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td>
<h3>Hi {{htmlescape var=$order.getCustomerName()}},</h3>
<p>Thank you for your order from {{var store.getFrontendName()}}. Once your package ships we will send an email with a link to track your order. If you have any questions about your order please contact us at {{depend store_email}}<a href="mailto:{{var store_email}}">{{var store_email}}{{/depend}}</a> or call us at {{depend store_phone}} <a href="tel:{{var phone}}">{{var store_phone}}</a>{{/depend}} {{depend store_hours}} {{var store_hours}}{{/depend}}
<p>Your order confirmation is below. Thank you again for your business.</p>
<h3>Your Order #{{var order.increment_id}} (placed on {{var order.getCreatedAtFormated('long')}})</h3>
</td>
</tr>
</tbody>
</table>
{{depend order.getIsNotVirtual()}} {{/depend}} {{depend order.getIsNotVirtual()}} {{/depend}}
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="address-details" valign="top" width="50%">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
<td class="address-details" valign="top" width="50%">
<h6>Ship to:</h6>
<p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p>
</td>
</tr>
<tr>
<td class="method-info" valign="top" width="50%">
<h6>Shipping method:</h6>
{{var order.shipping_description}}
</td>
<td class="method-info" valign="top" width="50%">
<h6>Payment method:</h6>
{{var payment_html}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="order-information">
<td>{{if order.getEmailCustomerNote()}}
<table class="message-container" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</tbody>
</table>
{{/if}} {{layout handle="sales_email_order_items" order=$order}}</td>
</tr>
</tbody>
</table>
</div>
{{template config_path="design/email/footer"}}

To edit the CSS to style to your liking, copy /skin/frontend/base/default/css/email-inline.css to /skin/frontend/[your_package]/[your_theme]/css/email-inline.css and edit as needed.

Looking to Increase Revenue From Your Website?

Schedule a FREE 30-minute power consultation now.