1
   Magento 1.9.1

I am trying to make the Order Confirmation Email a bit shorter (we actually print each and every one of those and we have a few lines on page 3 which wastes a lot of paper). I modified the new_order template in System -> Configuration -> Sales Emails -> Order -> New Order Confirmation Template.

What I did was decrease the size of the font by using h5 and h6 tags there.

What happens now is - the text has decreased but there are many spaces between paragraphs (please see enclosed screenshots) so in the end - we still have a 3rd page when printing out and it's even gotten a bit longer. I understand one would have to edit the CSS to change this....Where can the CSS file be found and what modifications would you do to it exactly?

This is how it looks like:

Here is the new_order file:

{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="email-heading">
                        <h3>Thank you for your order from {{var store.getFrontendName()}}.</h3>
                        <p><h5>Your order will go through the following steps. Unfortunately, we do not offer real time updates at the moment. </h5><br/>


<strong><h5>1. Pending.</h5> </strong><h5>Your order has been received by us, and will be charged and we will verify if it is a valid order. This step can take up to 24 hours. </h5><br/>
<strong><h5>2. Processing. </h5></strong><h5>Your order has been successfully charged and verified as a valid order. Your order will remain “processing” until delivery has occurred.</h5> <br/>
<strong><h5>3. Hold.</h5> </strong><h5>There is a problem with your order, and we have sent out a request for more information. Please contact the store. </h5><br/>
<strong><h5>4. Complete. </h5></strong><h5>Your order has been delivered. </h5><br/>
<strong><h5>5. Cancelled.</h5> </strong><h5>Your order has been Cancelled. </h5><br/>
<br/>

<h5>Please note the following. We need at least 2-4 hours to process an order and there are no Sunday deliveries. Your order summary is below.</h5></p>
                    </td>
                    <td class="store-info">
                        <h4>Order Questions?</h4>
                        <p>
                            {{depend store_phone}}
                            <b>Call Us:</b>
                            <a href="tel:{{var phone}}">{{var store_phone}}</a><br>
                            {{/depend}}
                            {{depend store_hours}}
                            <span class="no-link">{{var store_hours}}</span><br>
                            {{/depend}}
                            {{depend store_email}}
                            <b>Email:</b> <a href="mailto:{{var store_email}}">{{var store_email}}</a>
                            {{/depend}}
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="order-details">
            <h3>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
            <p>Placed on {{var order.getCreatedAtFormated('long')}}</p>
        </td>
    </tr>
    <tr class="order-information">
        <td>
            {{if order.getEmailCustomerNote()}}
            <table cellspacing="0" cellpadding="0" class="message-container">
                <tr>
                    <td>{{var order.getEmailCustomerNote()}}</td>
                </tr>
            </table>
            {{/if}}
            {{layout handle="sales_email_order_items" order=$order}}
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="address-details">
                        <h6>Bill to:</h6>
                        <p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>


<h6>Shipping Arrival Date::</h6>
                        <p><span class="no-link">{{var deliverydate_arrival_date}}</span></p>

<h6>Shipping Arrival Comment::</h6>
                        <p><span class="no-link">{{var deliverydate_comment}}</span></p>



                    </td>
                    {{depend order.getIsNotVirtual()}}
                    <td class="address-details">
                        <h6>Ship to:</h6>
                        <p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="method-info">
                        <h6>Shipping method:</h6>
                        <p>{{var order.shipping_description}}</p>
                    </td>
                    {{/depend}}
                    <td class="method-info">
                        <h6>Payment method:</h6>
                        {{var payment_html}}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

{{template config_path="design/email/footer"}}
  • add you template code here that will be more helpful. – Qaisar Satti Oct 19 '17 at 14:57
  • @Qaisar Satti - I just did. Thank you for looking at that... – Allysin Oct 19 '17 at 15:09
1

There are two ways you can do this add the css inline. via html

<h6 style="padding:0px;margin:0px">Shipping Arrival Comment::</h6>

Or you can find css file in following location.

skin/frontend/YOURPACKAGE/YOURTHEME/css/email-inline.css

  • Thank you for the suggestion - that makes a difference. One thing that seems odd though is how narrow the order Confirmation is within the Email. Any way to make it wider? – Allysin Oct 19 '17 at 22:47
  • @Allysin you mean you want responsive email? that can adjust any width? – Qaisar Satti Oct 20 '17 at 9:19
  • @ Qaisar Satti - responsive would be nice but I bet would be hard to implement? I always try to look for simple solutions....what it seems is that when you open the Order Confirmation Email in a web-based Email program - it doesn't use the full width of the screen - instead just a narrow column in the middle...Would there be a way to widen that? – Allysin Oct 20 '17 at 14:40

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.