Search

Step-by-Step Guide to Customizing WooCommerce Emails

    Aparna Gawade
Listen to this article
An image depicting a customised order email along with the logo of Wisdm Labs.
Step-by-Step Guide to Customizing WooCommerce Emails 1

Have you ever received an order confirmation email from Apple? Sleek, well-designed, and professional, right? Every detail makes you feel valued as a customer.

Now, think about the generic, plain-text order emails you’ve gotten from other stores. No logo, no personal touch—just plain text. Not quite the same impact, is it?

I realized I wanted my WooCommerce emails to be just as impressive as Apple’s. I wanted them to reflect the same level of care, engage my customers, and reinforce my brand identity.

In this blog, I’ll show you how I personalized my WooCommerce email templates to achieve a polished, professional look. By the end, you’ll learn how to customize emails in WooCommerce, write compelling copy, and add personal touches that leave a lasting impression.

Is coding not your forte? 

Don’t worry. Schedule a free consultation with our WooCommerce customisation experts to get personalized guidance on customizing your WooCommerce emails effortlessly.

Table of Contents

  1. No Code Needed: Simple WooCommerce Emails Customization
  2. Preparing for Advanced Customization
  3. When Do You Need Advanced Customization
  4. Steps to Create Custom Email Templates
  5. Steps to Customise Specific Parts of the Email
  6. Steps to Add Custom Content with Hooks and Filters
  7. Wrapping Up

No Code Needed: Simple WooCommerce Emails Customization

When I started customizing my order emails in WooCommerce, I was daunted by the idea that a lot of coding might be involved. But I was in luck—WooCommerce offers some basic customization options that don’t require any coding. Let me walk you through those.

Navigating to Email Settings

First, navigate to WooCommerce -> Settings -> Emails. Here, you’ll see a list of all the email types WooCommerce sends. Click on the email type you want to customize, like “New Order” or “Completed Order.”

Email Template Settings WooCommerce

Adding Your Logo

One of the easiest changes is adding your logo to the email header. Simply upload your logo under Email Options. This small change instantly makes your emails look more professional and branded.

Adjusting Colors

Next, adjust the colors to match your brand. Under the same Email Options, you can change the header text color, body background color, and footer text color. Pick colors that align with your brand’s palette for a consistent look.

Editing the Footer Text

Lastly, you can edit the footer text. Scroll down to the Email Options section and add your custom message. This could be a thank you note, customer support contact, or social media links.

These basic changes help your emails stand out and provide a cohesive brand experience without any coding required.

Preparing for Advanced Customization

While the basic customization options are great for adding a personal touch, sometimes you need to go a step further.

Say someone places an order for a new iPhone, and Apple sends out a highly personalized email. This email doesn’t just have the logo and colors; it includes specific layout changes, detailed order information, and promotional content related to their purchase. To achieve this level of customization, you’ll need to get handy with advanced customization.

Tools You’ll Need

To get started with advanced customization, you’ll need a few tools:

  • Text Editor: A good text editor like Sublime Text or Visual Studio Code.
  • FTP Client: An FTP client like FileZilla to access your site’s files.
  • WooCommerce Documentation: Keep the WooCommerce documentation handy for reference.

Creating a Child Theme

To ensure your changes aren’t lost during updates, you’ll need to create a child theme. This allows you to override the parent theme’s files with your custom templates.

Steps to Create a Child Theme:

  1. Create a New Folder: In your WordPress themes directory, create a new folder for your child theme. Name it something like your-theme-child.
  2. Create a Stylesheet: Inside your new folder, create a style.css file. Add the necessary header information, linking it to your parent theme.
  3. Create a Functions File: Create a functions.php file in the same folder. Use this file to enqueue the parent and child theme styles.
  4. Activate the Child Theme: Go to your WordPress dashboard and activate your new child theme.

Note: Activating a child theme may change your site’s styling, menu, and some other segments like sidebars and widgets. These elements can be adjusted in your theme settings to match your desired layout and design. For more detailed instructions on creating a child theme, check out our blog on The Ultimate Guide to WordPress Child Themes.

When do you need advanced customization?

When you want to take your WooCommerce email customizations to the next level, there are several key use cases to consider. Each of these use cases involves different steps and techniques. We’ll cover them one by one, step by step.

Creating Custom Email Templates

Do you need to change the header or add personalized elements like your logo? Then you’ll need to create custom email templates. This involves overriding and editing the default WooCommerce email templates.

Customizing Specific Parts of the Email

Need to add custom text to the footer or modify other specific components of the email layout? You can customize specific parts of the email, such as the header, footer, and body, by editing the appropriate template files.

Adding Custom Content with Hooks and Filters

Want to insert additional content like custom order notes or promotional banners? You can use WooCommerce hooks and filters to add or modify content without changing the core files.

Steps to Create Custom WooCommerce Email Templates

I wanted to make my WooCommerce email templates look more professional by adding my logo and changing the header text. Here’s how I went about it.

Step 1: Identify the Email Template to Override 

WooCommerce sends out various emails such as order creation, completion, payment invoices, and order updates. I started by going to WooCommerce -> Settings -> Emails and selecting the “Processing Order” email to customize.

Step 2: Locate the Template File 

Each email type has a specific template file. For the “Processing Order” email, the template used is customer-processing-order.php. I found the template files in the WooCommerce plugin directory:

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

Step 3: Copy the Template to My Theme 

To customize the template, I needed to copy it to my theme’s directory. This allows me to override the template without modifying the core WooCommerce files.

  1. Create Directory Structure: I created the necessary directories in my theme:
    wp-content/themes/your-theme/woocommerce/emails/
  2. Copy the File: I then copied the template file from the WooCommerce plugin directory to my theme’s directory:

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

to

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

Step 4: Edit the Template File 

Now that the template file was in my theme’s directory, I could edit it to make the desired changes.

  1. Adding My Logo and Changing the Header Text:
    • I opened email-header.php in my text editor. This header template is located at:

      wp-content/themes/your-theme/woocommerce/emails/email-header.php
  • To add my logo, I located the HTML <img> tag in email-header.php and replaced it with my logo URL:
<img src="<?php echo esc_url( get_template_directory_uri() . '/images/your-logo.png' ); ?>" alt="Your Logo">
  • I then changed the header text to include a personalized greeting by editing the following line:
<h1><?php _e( 'Thank you for your order!', 'woocommerce' ); ?></h1>

Step 5: Save and Test the Changes 

After making these changes, I saved the modified template file back to my theme’s directory. To ensure everything looked right, I placed a test order to see the changes in action. The new order email now included my logo and a custom header, making it look much more professional and aligned with my brand.

Steps to Customize Specific Parts of the Email

I wanted to add custom text to the footer and include order notes in my WooCommerce order emails. Let me take you through the steps.

Step 1: Identify the Email Template to Customize 

WooCommerce sends out emails for various actions, like order creation, completion, payment invoices, and updates. I decided to customize the “Completed Order” email.

Step 2: Locate the Template Files 

Every part of the email is managed by a different template file. For example, the footer is managed by email-footer.php, and the body content for the completed order is managed by customer-completed-order.php. I found these template files in the WooCommerce plugin directory:

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

Step 3: Copy the Template Files to My Theme 

To customize specific parts of the email, I needed to copy the relevant template files to my theme’s directory. This allows me to make changes without affecting the core WooCommerce files.

  • Create Directory Structure: I created the necessary directories in my theme:

    wp-content/themes/your-theme/woocommerce/emails/

Since these directories did not exist, I created them.

  • Copy the Files: I then copied the template files from the WooCommerce plugin directory to my theme’s directory. For example:

    wp-content/plugins/woocommerce/templates/emails/email-footer.php

to

wp-content/themes/your-theme/woocommerce/emails/email-footer.php

Similarly, for the body content:

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

to

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

Step 4: Edit the Template Files

With the template files in my theme’s directory, I could now edit them to make the desired changes.

  1. Customizing the Footer

I opened email-footer.php in my text editor. This footer template is located at:

wp-content/themes/your-theme/woocommerce/emails/email-footer.php

To change the footer text color and add a personal message, I edited the following

$credit = "
    border: 0;
    color: black;
    font-family: Arial;
    font-size: 12px;
    line-height: 125%;
    text-align: center;
";

2. Adding Order Notes

I opened customer-completed-order.php in my text editor. This file is located at:

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

To add order notes to the completed order email, I added the following code:

<h2><?php _e( 'Order Notes', 'woocommerce' ); ?></h2>
<?php
$args = array(
    'status' => 'approve',
    'post_id' => $order->id
);
$comments = get_comments($args);
foreach($comments as $comment) :
    echo $comment->comment_content . '<br />';
endforeach;
?>

I placed this code where I wanted the order notes to appear, after the order details and before customer details.

Step 5: Save and Test the Changes 

After making these changes, I saved the modified template files back to my theme’s directory. To ensure everything looked right, I placed a test order to see the changes in action.

Steps to Add Custom Content with Hooks and Filters

I wanted to have more control over the content sent in my WooCommerce order emails by adding additional details like the shipping method chosen by the customer. To do this, I used WooCommerce hooks and filters. Here’s how I went about it.

Step 1: Understand the Need for Hooks and Filters 

For more control over the content in the email, you need to delve into actions and filters provided by WooCommerce. These hooks allow you to add custom content at specific points in the email.

Step 2: Choose the Appropriate Hook

In my case, I wanted to add the shipping method chosen by the customer. WooCommerce provides hooks like woocommerce_email_after_order_table and woocommerce_email_before_order_table to add content around the order table in the email.

Step 3: Add Custom Function Using the Hook

I decided to use the woocommerce_email_after_order_table hook to add the shipping method details. Here’s the custom function I added:

  • Open Your Theme’s Functions File: I opened the functions.php file in my theme’s directory:

    wp-content/themes/your-theme/functions.php
  • Add the Custom Function: I added the following code to the functions.php file:
add_action( 'woocommerce_email_after_order_table', 
'wdm_add_shipping_method_to_order_email', 10, 2 );

function wdm_add_shipping_method_to_order_email( $order, $is_admin_email ) {
    echo '<p><h4>Shipping:</h4> ' . $order->get_shipping_method() . '</p>';
}

Step 4: Save and Test the Changes

After adding the custom function, I saved the functions.php file. To ensure the new content appeared correctly, I placed a test order and checked the order email.

Wrapping Up

Customizing your WooCommerce order emails can make a huge difference in how your customers perceive your brand. From creating custom templates and tweaking specific parts to adding personalized content with hooks and filters, these steps make your emails look professional and engaging.

Need some help? 

Schedule a free consultation with our WooCommerce customization experts to get personalized guidance on making your WooCommerce emails stand out.

Picture of Aparna Gawade

Aparna Gawade

19 Responses

  1. Hi —

    I was able to change the email template thanks to your explanation. Really clear. Thanks!

    However, I wonder if you know what it would take to add in a 2nd email template for admin-new-order that gets used only when a customer orders Product “Hair On Fire” rather than “Product “Relax, dude”. This would be to put in some sort of condition of

    If x = HOF then template 2. If x = RD then template 1. But where would all that go?

    Also — you state this:

    Remember, these methods are tightly linked to the theme you choose. Hence when you change your theme, you will have to move your modified template files, or the added actions, to the new theme as well.

    If I merely update the theme that I’m using, will I also have to update the mod template files?

    Thanks!

    1. Hi Sheila,
      Thank-you for your comment. You can set two different email templates for the two products. You will have to make the changes in admin-new-order.php. Since you have access to $order, you can use this to check which product is being purchased (assuming of course that customer can purchase either of the products and not both).

      $items = $order->get_items();
      foreach ( $items as $item ) {
      $product_name = $item[‘name’];
      // check for your product and apply a different style
      }

      For any changes you want to make in a theme, (even the addition of these template files), the best way to do this, is to create a child theme and make any changes there. So that your changes do not get overridden when you update your theme.

      Hope this helps.

  2. We have launched a plugin called Email Control for WooCommerce (on CodeCanyon) that does what some of you are discussing in this thread – it allows you to customize the styling, colors, logo, and what the text says in the emails sent from your WooCommerce store, using the familiar WordPress Customizer interface. We created the plugin for our store as we needed more control over what the text in our emails said and wanted their design to look more professional and unique. We think the plugin could be a solution for some of you here.

  3. Hi,

    If someone is interested, here is a link to my latest work on CodeCanyon :
    http:// codecanyon.net /item / woocommerce-pretty-emails /9005845

    Should respond to all basic needs regarding email customization.

    Have a good day.

  4. Hi,
    I also want to change the email templates but my problem is the following:
    I have two payment options, Paypal and cash in advance. The default email text content for “processing order” and “order completed” can stay the way they are for when a customer is paying via Paypal, but when someone chooses to pay cash in advance, I need the “processing order” email to have a completely differnt content. It should just say “Thank you for your order, with this email we are confirming to have received it.” There should NOT be any details about the purchased item. Then, the second email should basically have the content that is usually in the “processing order” email (product details, we are processing your order, please pay the amount to the following account). How can I achieve this? I am very new to WordPress but have installed a child theme.

    Thank you for your help!

    1. Hi Andrea,

      I’ve understood your requirement, I think the $order->payment_method_title attribute can help you verify the payment method used. I haven’t tried out a solution, but here’s what I think can help you. You will have to customize the customer-processing-order.php template. Copy woocommerce/templates/emails/customer-processing-order.php to /your-child-theme/woocommerce/emails/customer-processing-order.php

      In that file, add a condition to check the payment method using $order->payment_method_title attribute before Order Details are displayed (i.e., after do_action(‘woocommerce_email_header’, $email_heading);). So here if payment method is PayPal, you can print order details as usual, else if payment method is Cash in Advance, you can send across the text you need.

      Regarding the second e-mail, I’m not very sure when you would want that e-mail sent. Should it be sent immediately after the first e-mail?

  5. Hi, great article! Could you help me figure out why WooCommerce is sending only plain text emails – I have only plain email option – i.e., under WooCommerce -> Settings -> Emails-> New Order –> Email Type – “Plain text ” option ONLY!

  6. This is so helpful! Thank you! I’m wondering if it’s possible to send a custom email based on product category. For instance, for products in digital downloads category, customer get Email A and for products in physical product category, customer gets Email B. My developer says this isn’t possible, but it seems like it shouldn’t be so hard. Is he right? Is this impossible to do? Thank you in advance!

    1. Hi Davina,

      Your requirement is definitely doable. The customization will require approximately 50 hrs of customization effort.

  7. Hi i want to change the text “date” to “starting date” in email (ie conformed, processing order )..how can i do that..and i want to show booking id instead of order id in the email …pls help me out

  8. Thank you so much for the detailed tutorial! It’s not easy finding out how to customize emails without being an experienced coder. I was able to add in the order notes, but I was thinking this option would only add the most recent manual note, not all the order notes woocommerce adds such “Order status changed from Pending Payment to Processing” and “Processing order email notification manually sent”. Is it possible to only add the latest note? My guess is this line would have to be changed > “foreach($comments as $comment) :”

    Appreciate your assistance!

  9. Hi there. I was able to add the Shipping Method to the Order Email… but I can’t seem to add the Shipping Zone to the Order Email, which I need to do. Can you help me out with this please?

  10. HI Aparna

    I am trying to add a column in my New Order email so that it shows the ID in the first column after the product name. I did manage to add a column but could not then get the data to be included. Can you help guide me?

  11. Hi Aparna

    Thank you for the great post. We tried the steps and most part, it worked. However, our day to day staff are finding it difficult if they want to add any up-sell products in the transactions emails.

    So we have used this plugin which allows you to edit the WooCommerce emails using a drag and drop builder and customize it totally – WooCommerce Email Customizer with Drag and Drop page builder

    Hope this helps someone 🙂

  12. Hi, this is great code, I used hooks. But does anyone know, how I can set certain changes for specific email typesa, e.g. for only the new order email? Thanks for help.

  13. Hello,

    Do you know of a way to delete or edit the “view your product” link that is present when a customer receives an order. I have a completely customized product, so when you click on that, it takes you to the base product, not the customized one, so it’s actually not reflecting the actual product that the customer designed.

    Thank you!

    Karina

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads