How to Customize WooCommerce Email Templates: A Step-by-Step Guide with Code Samples

WooCommerce is one of the most popular eCommerce platforms for WordPress, offering robust features and extensive customization options. One of the most critical aspects of any eCommerce store is the emails sent to customers, such as order confirmations, shipping notifications, and more. WooCommerce provides default email templates, but these may not always align with your brand or meet your specific needs. Customizing these email templates can enhance your customer experience and reinforce your brand identity.

In this blog post, we’ll walk you through the process of customizing WooCommerce email templates with code samples and best practices to make the process smoother.

1. Understanding WooCommerce Email Templates

WooCommerce email templates are located in the WooCommerce plugin directory. The path to the email templates is:

wp-content/plugins/woocommerce/templates/emails/

Here, you’ll find a range of PHP files corresponding to different types of emails, such as:

• customer-processing-order.php
• customer-completed-order.php
• customer-refunded-order.php
• admin-new-order.php

These templates control the content and structure of the emails sent to your customers.

2. Creating a Custom Email Template

Step 1: Copy the Template to Your Theme

To customize an email template, you shouldn’t modify the core WooCommerce files directly. Instead, you should copy the template you want to customize into your theme or child theme. This ensures that your changes won’t be lost during WooCommerce updates.

1. Create a new directory in your theme (or child theme) called woocommerce/emails.
2. Copy the template file you want to customize from wp-content/plugins/woocommerce/templates/emails/ to wp-content/themes/your-theme/woocommerce/emails/.

For example, if you want to customize the customer-completed-order.php template, you would copy:

wp-content/plugins/woocommerce/templates/emails/customer-completed-order.php

to

wp-content/themes/your-theme/woocommerce/emails/customer-completed-order.php

Step 2: Customize the Template

Once the template is in your theme directory, you can open it in your code editor and start making changes.

For example, let’s say you want to add a custom message to the completed order email. Open the customer-completed-order.php file and locate the area where you want to add the message. You might find a section like this:

<?php
/**
 * Customer completed order email
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/emails/customer-completed-order.php.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates/Emails
 * @version 3.7.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

echo $email_heading . "\n\n";

echo __( 'Thanks for shopping with us. We hope you enjoy your purchase!', 'woocommerce' ) . "\n\n";

do_action( 'woocommerce_email_before_order_table', $order, $sent_to_admin, $plain_text, $email );

// Add your custom message here
echo __( 'Here is a special message from our team: Thank you for being a valued customer!', 'your-textdomain' ) . "\n\n";

do_action( 'woocommerce_email_order_meta', $order, $sent_to_admin, $plain_text, $email );

echo "\n****************************************************\n\n";

In this example, the custom message “Here is a special message from our team: Thank you for being a valued customer!” has been added just before the order details.

3. Customizing Email Styles

WooCommerce emails use a base template (email-styles.php) for styling, located in the same emails directory. To customize the styles, follow the same process of copying the email-styles.php file to your theme’s woocommerce/emails/ directory.

After copying, open the file and customize the CSS to match your branding. For example, you can change the primary color, font size, or add custom fonts:

body {
    background-color: #f5f5f5;
    color: #333;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

#body_content {
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
}

#header_wrapper {
    background-color: #000;
    border-radius: 3px 3px 0 0;
}

h1 {
    color: #ffffff;
}

4. Using WooCommerce Hooks for Dynamic Content

WooCommerce provides various hooks that you can use to inject dynamic content into your email templates. Here’s an example of how to use a hook to add custom content to the email:

add_action( 'woocommerce_email_before_order_table', 'add_custom_email_content', 20, 4 );

function add_custom_email_content( $order, $sent_to_admin, $plain_text, $email ) {
    if ( $email->id == 'customer_completed_order' ) {
        echo '<p style="color:#333;">Thank you for your purchase! As a token of our appreciation, use the code THANKYOU10 for 10% off your next order.</p>';
    }
}

In this example, the woocommerce_email_before_order_table hook is used to add a promotional message in the completed order email. This is a powerful way to tailor emails to specific customers or orders without hardcoding content.

5. Testing Your Custom Emails

After making changes, it’s crucial to test the emails to ensure they appear correctly across different email clients. WooCommerce has built-in testing features, or you can use third-party plugins like Email Template Customizer for WooCommerce to preview and test your emails.

6. Best Practices for Email Customization

• Backup Your Site: Before making any changes, always back up your WordPress site to avoid losing data.
• Use a Child Theme: If you’re customizing templates in your theme, ensure you’re using a child theme to prevent losing changes during theme updates.
• Test on Multiple Clients: Email clients like Gmail, Outlook, and Apple Mail all render HTML differently. Test your emails on multiple platforms to ensure consistency.
• Keep Content Dynamic: Use WooCommerce hooks to keep content dynamic and relevant to each customer, which can enhance engagement.

Conclusion

Customizing WooCommerce email templates allows you to deliver a branded, personalized experience that resonates with your customers. By following the steps outlined in this post, you can easily modify email templates, add custom messages, and adjust the styling to align with your brand identity.

Whether you’re adding a simple thank-you note or redesigning the entire email layout, the flexibility of WooCommerce ensures that you can create emails that not only look great but also drive customer loyalty and repeat business.

If you need help to customise your WooCommerce emails you can hire me to do it for you.

Photo by Thanhy Nguyen on Unsplash