How to customize WooCommerce emails

The so-called "transactional" emails are those that keep our customers up to date on the status of each operation carried out in our Store. While a common marketing email is barely seen 20% of the time, transactional emails are opened up to 85% of the time. For this reason, not personalizing them is turning your back on an impressive sales (and loyalty) opportunity.

Bring WooCommerce emails to life with colors, fonts and messages not only strengthen our brand, but also adds weight, consistency, and helps our store to be remembered (and again to be chosen). Include related products and/or services, including discount codes, It is the way to generate new purchases in the future. Therefore, in this note we want to guide and recommend them to achieve this task with simplicity and effectiveness. Let's start.

How to edit our 'transactional' emails

In our WooCommerce dashboard, we will look for the option Settings and then we will click on the tab Post. It is clear in the screenshot below:

We find a series of specific mail templates:

New order: the email that we receive notifying us about a new order in our Store.
canceled order: the email that reaches us notifying us of the cancellation of an order.
Failed order: ditto but about an order that failed for some reason.
pending order: mail sent to customers with details when an order has been placed on hold.
Processing your order: mail sent to customers after a payment completed; contains all the details of the order.
completed order: The email sent to customers when their orders are marked as completed; indicates that the order has already been shipped.
refunded order: the mail sent to the clients when refund an order.
Customer receipt / order details: email sent to customers with order information and links to make the payment.
Note to customer: Mail sent when a customer note is added to the panel.
Restore password: Mail sent to a customer after they requested to reset their password.
New account: mail sent to the client when he has created his account.

To edit a particular template, we must click on the button Manage next to the email in question.

For example, here we see how we can customize the subject, header, content and type of the email for the “New order” template (see screenshot below).

Note that it is also possible to use template variables to fill in information quickly and automatically; eg: {site_title}, {customer_name}, {order_shipping_address} or {item_names}. These variables allow us to customize emails for each individual customer. WooCommerce will replace these variables with the corresponding information dynamically.

Field additional content It is practical to add messages to our clients. For example, we can include a special thank you note, and being original is not bad at all. This will help us generate empathy with our buyers, in addition to adding our own personality to our brand.

Factors to consider are also the inclusion of additional data. Warranty details, return policies, certificates, awards our product has received, unpacking/assembly instructions, and any other documentation that applies to our products should be listed here. The idea is that our customers have easy access to all useful details after receiving their purchase.

global settings

Let's take a look at the final portion we found after scrolling down the email templates window.

Any field we modify here it will be reflected in all existing mail templates.

In this section we can globally modify:

header image: allows us to select an image that we want to display at the top of all emails. The typical case is our brand same.
Footer text: we can enter the information to be displayed at the bottom of each email. We recommend in this field to include a link to our site, in addition to typical contact information (WhatsApp, telephone numbers, emails). This makes it easy for our customers to contact us with any questions, and in fact they will intuitively always look for the contact information at the end of the email.
basic color: is the color used for the headers, links and the background of the title of the emails. By default it will be the violet of the WooCommerce brand, so we must enter a color according to our brand.
Background color: is the color used for the background of the email. By default it is almost pure white, but we encourage you to use a tone related to your own brand.
Body background color: is the background color of the email content. It fits the same recommendation that we used in the previous item. If we use a very dark or saturated color, it is best to change the text color to white.
Body text color: is the color of all the written content of the email. As we said, it will be dark for backgrounds with light tones, but white or a very light color if our background color is dark or saturated.

To get a preview of our emails, we can click on the following link:

Personalizing our emails is not merely an aesthetic issue: if our site uses a color scheme with the presence of greens and oranges, when a client of ours receives an email with the presence of violets, it is likely that they will not immediately recognize our Store. Inversely, when all our communication and marketing coincide, the security in our business grows, and the loyalty of our buyers also.

Incorporating specific information about our products

If we wish to include specific information in each of the emails to our clients, we must go to the section Products and then click on Edit under the product we want to change.

Once this is done, we will scroll down looking for the section Product dates to click on the blue link Advanced. Here we see a free field that allows us to add a purchase note.

Exactly, these Purchase notes allow us to expand product information in many ways. For example, we can provide a link to a PDF with instructions/warranty/user manual/etc. This field is also useful for entering a discount code for a future purchase. Our goal as sellers is to provide as much valuable information as possible so that our customers feel "pampered", important, and become loyal to our Store.

Leveraging the benefits of MailPoet

MailPoet is a WooCommerce extension that allows us to get more out of marketing concepts by customizing our transactional emails with ease. To use it, simply install it as we would any other WordPress plugin.

Once this step is done, and after activating said component, we will go to MailPoet → Settings and we'll go through a few steps that will get you set up.

Once this is done, the section that interests us is this:

After clicking on it, a small introductory video shows us the method of Drag and drop.

We will close the video with a click on the upper right X.

As we can see in the screenshot below, choose the template and edit it is extremely easy thanks to the MailPoet extension.

As soon as we slide the mouse cursor over the sections, what we can do in each of them is in sight. In addition, the drag and drop function allows us to edit smoothly.

If we want the complete detailed instructions of MailPoet, it is convenient to follow this official link.

Editing the emails with the WooCommerce Customizer

Another extension, called WooCommerce Email Customizer, allows us to have even more control over the design and content of our emails. In this case, using the WordPress customizer, it is possible to change the image and colors of the headers, body and footer of all our transactional emails via the conventional Appearance customizer. It's another convenient way to make basic changes without resorting to HTML code.

It is possible to preview all the changes in the live editor, but remember that this extension customizes the layout of the emails, not their text/content.

Customizing with MailChimp

If we become more demanding and wish to carry out deeper changes, the extension Mailchimp for WooCommerce is an excellent alternative. It allows us to modify our transactional emails without having to write a single line of code. But, in addition, its editing window allows us to manage everything from a single place.

To install the MailChimp extension for WooCommerce, we go to the Extensions link within the WooCommerce Section. In the screenshot below it is clearly shown.

Following the link "See the details" we will arrive at the page of information and download. After downloading a ZIP file, we proceed to the section of Plugins → Add new and we will click on the top button upload plugin. We select our ZIP file and after uploading we can activate the new plugin.

We will immediately be redirected to the page of initial setup. There we can synchronize our Store with the MailChimp service and choose our preferences. There is an excellent tutorial that will help us to leave everything as we like.

Advantage

• We are allowed to customize order notifications to fit your needs. colors, fonts and other aspects of our brand.

• We can add recommended products to transactional emails.

• It's easy to set up emails for customers. abandoned carts.

• We will have the ability to track and segment customers based on their history and frequency of your purchases.

• We can add promotional codes to encourage future purchases.

In fact, Mailchimp's audience segmentation is one of the most precious tools when it comes to sending personalized emails. We can segment our audience based on order total, historical amount spent, purchase date, and much more. it's easier that way detect opportunities based on the exact products our customers have already purchased (including other actions taken within our site).

As we can see, MailChimp has many aces up its sleeve and it is not for nothing that it is a popular component in the WooCommerce universe.

If we know how to write code

Those of us who understand a bit of HTML/PHP language have provided everything for us (and we already knew it). Just go back to the section WooCommerce → Settings, flap Emails, Click on Manage next to the mail template to modify. At the end of everything, on the button save changes, we will see the precise link of the template associated with that email.

Each transactional email is made up of a combination of templates. This allows for more control over customization compared to the other methods mentioned. Eg: if we need to edit the header of an email, just edit the file email-header.php. For footer changes, we will deal with email-footer.php. Yes instead we want to edit a specific email template (such as customer's invoice), we will modify customer-invoice.php (according to the case).

Add content via 'Hooks'

The hooks are a beautiful way for WordPress to allow us incorporate content on demand. The case of transactional emails is not an exception. The only thing we need to remember is that hooks allow to be overridden by specific content, but this does not modify the rest of the mail.

Through the following code snippets, which we will add to our functions.php, we can use hooks depending on where we want to incorporate extra content.

under the header

To add content below the header, we'll use the hook woocommerce_email_header( $email_heading, $email):

<?php
add_action( 'woocommerce_email_header', 'mm_email_header', 10, 2 );
function mm_email_header( $email_heading, $email ) { 
	echo "<p> Thanks for trusting us. You are important to our Store and we want to offer you more and better!</p>";
}

after table

To add content below the table order, we will use the hook woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email):

<?php
add_action( 'woocommerce_email_after_order_table', 'mm_email_after_order_table', 10, 4 );
function mm_email_after_order_table( $order, $sent_to_admin, $plain_text, $email ) { 
       echo "<p>Thank you for making your purchase. As a gesture of gratitude, here we give you a discount code for your next purchase: SOLEADO2022</p>";
}

top of footer

In this case the hook is woocommerce_email_footer($email):

<?php
add_action( 'woocommerce_email_footer', 'mm_email_footer', 10, 1 );
function mm_email_footer( $email ) { ?>
	<p><?php printf( __( 'Gracias por tu compra con nosotros! Puedes encontrar artículos relacionados siguiente este enlace: %s', 'woocommerce' ), '<a href="' . get_permalink( wc_get_page_id( 'shop' ) ) . '">' . __( 'Shop', 'woocommerce' ) . '</a>' ); ?></p>

<?php
}

Conclusions

Customizing the design and content of our emails is not an aesthetic issue or merely an objective of cordiality: strengthens our brand, trust, identity and communication in order to grow our business.

Well-designed transactional emails maintain communication with buyers more effectively. Regardless of our level of experience in programming or marketing, it is a mandatory task to improve these emails using any of the alternatives provided in this note.

Tell us about your experiences and, as always, you can also ask questions in the comments section. We read and reply to all messages.

Good luck and thanks for reading.