1

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.

email

Thanks Tony

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.

  • Hi Jeremy, thanks for the answer but I can't find the .LESS files. I should have stated I am using Magento CE 1.9.3.3 – tonylees Jul 6 '17 at 17:24
  • Ah - well that changes things a bit. Let me rewrite the answer. Are you using a custom theme? – Jeremy Rimpo Jul 6 '17 at 18:24
  • I think i have just found it... I am using rwd. I have just found /home/reecesafetyco/public_html/app/design/frontend/rwd/default/template/email/order/totals/wrapper.phtm and added style="float:right; to the td – tonylees Jul 6 '17 at 18:43
  • I wouldn't recommend editing core template files directly. I'm about to update my answer. – Jeremy Rimpo Jul 6 '17 at 20:20
  • Hi Jeremy, Sorry for the delay. I have just applied your fix and it worked like a charm. Well describe and easy to follow instructions. A great help. Thank you so much. – tonylees Jul 13 '17 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.