transactional email totals

Question

Can any tell me how to format the totals at the bottom of the transactional emails... I want them to be to the far right. If I view the mail in the browser the totals are to the left.

Thanks Tony

Answer 1

Since you're currently using the RWD Magento theme, I would suggest making a minor theme override with a couple changes. This involves both an update to the rwd sales.xml layout for <sales_email_order_items> (and potentially any other transactional email you wish to change). It also involves a small CSS update.

If you look at <root>/app/design/frontend/rwd/default/layout/sales.xml, you can find several XML section related to the email order totals. sales_email_order_items, sales_email_order_invoice_items, and so on.

<!--
Email layouts section
-->
<sales_email_order_items>
    <block type="sales/order_email_items" name="items" template="email/order/items.phtml">
        <action method="addItemRender"><type>default</type><block>sales/order_email_items_order_default</block><template>email/order/items/order/default.phtml</template></action>
        <action method="addItemRender"><type>grouped</type><block>sales/order_email_items_order_grouped</block><template>email/order/items/order/default.phtml</template></action>
        <block type="core/template" name="order_totals_wrapper" as="order_totals" template="email/order/totals/wrapper.phtml">
            <block type="sales/order_totals" name="order_totals" template="sales/order/totals.phtml">
                <action method="setLabelProperties"><value>colspan="3" align="right" style="padding:3px 9px"</value></action>
                <action method="setValueProperties"><value>align="right" style="padding:3px 9px"</value></action>
                <block type="tax/sales_order_tax" name="tax" template="tax/order/tax.phtml">
                    <action method="setIsPlaneMode"><value>1</value></action>
                </block>
            </block>
        </block>
    </block>
    <block type="core/text_list" name="additional.product.info" />
</sales_email_order_items>

Note these lines:

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

These are setting the text alignments of the various totals segments.

As you also identified, the order_totals_wrapper block also has a style applied which right justifies the totals table. The source SCSS files are located at <root>/skin/frontend/rwd/default/scss/email-inline.scss via the .padding-totals class. However, this file is ultimately inherited from the core theme at <root>/skin/frontend/base/default/css/email-inline.css.

---

Now for the fix. We need to create a new theme which inherits from rwd. This will allow us to create targeted overrides but use the rwd theme at the core.

Create a new directory under <core>/app/design/frontend/<uniquename>. "uniquename" will be your new theme. Create the file <core>/app/design/frontend/<uniquename>/default/etc/theme.xml.

<?xml version="1.0"?>
<theme>
    <parent>rwd/default</parent>
</theme>

This file tells the theme to inherit directly from the rwd/default theme. (You might want to change this to rwd/enterprise if you are using Enterprise Magento.)

Now create <root>/app/design/frontend/<uniquename>/default/layout/local.xml:

<?xml version="1.0"?>

<layout version="0.1.0">
    <sales_email_order_items>
        <reference name="order_totals">
            <action method="setLabelProperties"><value>colspan="3" align="left" style="padding:3px 9px"</value></action>
            <action method="setValueProperties"><value>align="left" style="padding:3px 9px"</value></action>
        </reference>
    </sales_email_order_items>
</layout>

These directive will reset the value and label css values to align="left".

Copy the above email-inline.css file to:

<root>/skin/frontend/<uniquename>/default/css/email-inline.css

In this file, locate the .padding-totals directive and update it to:

.padding-totals {
  padding: 20px 15px;
  text-align: left;
  line-height: 20px;
}

Finally, you will need to apply your new theme to Magento. Within the Admin > System > Configuration > Design > Package change the "Current Package Name" to <uniquename>, save, and flush the cache. Your theme overrides should now take over and the email css changes should be live.