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
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityCan 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
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.