How to Override order_new.html Email Template in Custom Module in Magento 2

Hey Magento devs,

Are you looking for a way to tweak the new order email template in a custom module in Magento 2? In this post, I will guide you to override order_new.html email template in custom module in Magento 2.

Magento 2 offers built-in functionality to the admin to change or customize the email templates from the backend. Yet, we, Magento developers, sometimes want to customize the email templates, such as new_order.html in Magento 2, through a custom module to offer extended features to the store owners.

Recently, I was developing a custom module for Magento 2 that included sending different order emails for specific conditions. That, in turn, created the need to override the default order email template in Magento 2 rather than tweaking the core one.

Let’s see how I did that.

Method to Override order_new.html Email Template in Custom Module in Magento 2

Step 1: Create app/code/Vendor/Module/etc/email_templates.xml with the following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Email:etc/email_templates.xsd">
    <template id="sales_email_order_template" label="New Order" file="custom_order_new.html" type="html" module="Vendor_Module" area="frontend"/>
</config>

Step 2: Please create the file custom_order_new.html under the path Vendor/Module/view/frontend/email/ and add the following code:

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!--@subject {{trans "Your %store_name order confirmation" store_name=$store.frontend_name}} @-->
<!--@vars {
"var formattedBillingAddress|raw":"Billing Address",
"var order_data.email_customer_note|escape|nl2br":"Email Order Note",
"var order.increment_id":"Order Id",
"layout handle=\"sales_email_order_items\" order=$order area=\"frontend\"":"Order Items Grid",
"var payment_html|raw":"Payment Details",
"var formattedShippingAddress|raw":"Shipping Address",
"var order.shipping_description":"Shipping Description",
"var shipping_msg":"Shipping message",
"var created_at_formatted":"Order Created At (datetime)",
"var store.frontend_name":"Store Frontend Name",
"var store_phone":"Store Phone",
"var store_email":"Store Email",
"var store_hours":"Store Hours",
"var this.getUrl($store,'customer/account/',[_nosid:1])":"Customer Account URL",
"var order_data.is_not_virtual":"Order Type",
"var order":"Order",
"var order_id": "Order DB Id",
"var order_data.customer_name":"Customer Name"
} @-->

{{template config_path="design/email/header_template"}}

<table>
    <tr class="email-intro">
        <td>
            <p class="greeting">{{trans "%customer_name," customer_name=$order_data.customer_name}}</p>
            <p>
                {{trans "Thank you for your order from %store_name." store_name=$store.frontend_name}}
                {{trans "Once your package ships we will send you a tracking number."}}
                {{trans 'You can check the status of your order by <a href="%account_url">logging into your account</a>.' account_url=$this.getUrl($store,'customer/account/',[_nosid:1]) |raw}}
            </p>
            <p>
                {{trans 'If you have questions about your order, you can email us at <a href="mailto:%store_email">%store_email</a>' store_email=$store_email |raw}}{{depend store_phone}} {{trans 'or call us at <a href="tel:%store_phone">%store_phone</a>' store_phone=$store_phone |raw}}{{/depend}}.
                {{depend store_hours}}
                    {{trans 'Our hours are <span class="no-link">%store_hours</span>.' store_hours=$store_hours |raw}}
                {{/depend}}
            </p>
        </td>
    </tr>
    <tr class="email-summary">
        <td>
            <h1>{{trans 'Your Order <span class="no-link">#%increment_id</span>' increment_id=$order.increment_id |raw}}</h1>
            <p>{{trans 'Placed on <span class="no-link">%created_at</span>' created_at=$created_at_formatted |raw}}</p>
        </td>
    </tr>
    <tr class="email-information">
        <td>
            {{depend order_data.email_customer_note}}
            <table class="message-info">
                <tr>
                    <td>
                        {{var order_data.email_customer_note|escape|nl2br}}
                    </td>
                </tr>
            </table>
            {{/depend}}
            <table class="order-details">
                <tr>
                    <td class="address-details">
                        <h3>{{trans "Billing Info"}}</h3>
                        <p>{{var formattedBillingAddress|raw}}</p>
                    </td>
                    {{depend order_data.is_not_virtual}}
                    <td class="address-details">
                        <h3>{{trans "Shipping Info"}}</h3>
                        <p>{{var formattedShippingAddress|raw}}</p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    <td class="method-info">
                        <h3>{{trans "Payment Method"}}</h3>
                        {{var payment_html|raw}}
                    </td>
                    {{depend order_data.is_not_virtual}}
                    <td class="method-info">
                        <h3>{{trans "Shipping Method"}}</h3>
                        <p>{{var order.shipping_description}}</p>
                        {{if shipping_msg}}
                        <p>{{var shipping_msg}}</p>
                        {{/if}}
                    </td>
                    {{/depend}}
                </tr>
            </table>
            {{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}
        </td>
    </tr>
</table>

{{template config_path="design/email/footer_template"}}

You can tweak the above code as per your requirement to customize the email template.

That’s it!

If you have any doubts or queries, please feel free to comment. I’d be happy to help. 😇

Also, I’d be grateful if you could share the solution with the Magento community via social media. 😊

Thank you. 🍀