How to Edit WooCommerce Email Templates

WooCommerce is a powerful eCommerce platform that offers a lot of flexibility when it comes to customizing your online store. One question we’re asked fairly frequently is how to modify the email templates that are sent to customers when they make a purchase. In this article, we’ll explore the two options for editing WooCommerce email templates.

Option 1: Use an Extension to Get a Visual Editor

By far the simplest option for editing WooCommerce email templates is to use an extension that provides a visual editor. This option is best for those who prefer a more user-friendly interface and do not want to deal with HTML and CSS coding. Here’s how to do it:

• Login to the WordPress admin and install and activate an extension that provides a visual email template editor. Here’s a few you can check out and compare:
  • Email Customizer Pro by StoreApps – $79 / yr
  • Email Customizer for WooCommerce by YayCommerce – $59 / yr
  • Email Template Customizer for WooCommerce By VillaTheme – Free but has Pro version ($32) you might need, depending on functionality you require.
• Navigate to the plugin’s settings in your WordPress dashboard.
• Select the email template you want to edit and use the visual editor to make changes.
• Save the changes and preview the email template to see the updates.

Option 2: Copy Templates to Child Theme and Edit HTML Directly [Advanced]

Another option for editing WooCommerce email templates is to copy the templates to your theme and edit the HTML directly (WooCommerce Guide here). This option is more advanced (requiring HTML and CSS coding knowledge), but also costs nothing extra to utilize. Here’s how:

• Login to the WordPress admin
• Navigate to WooCommerce > Settings > Email (tab)
• Select Manage beside whichever template you wish to adjust
• If the parts you wish to change are not immediately present on this page as a field to update, click the “Copy file to theme” button
• It will now exist under yourchildtheme/woocommerce/emails/<matching_filename>
• Edit that file using the Plesk File Manager or by going to Appearance > Edit Theme and then navigating to that folder (note that not all themes support this).
• Save the changes and refresh your website to see the updated email template.

Option 3: Only Edit the Styles / CSS

If you only need to adjust some colours and styles and not the content / text of the message, this is for you!

In your theme functions.php file or using the Code Snippets plugin for WordPress, use the hook ‘woocommerce_email_header‘ which will insert anything in the hook in the header of the email. Example:

add_action('woocommerce_email_header', function(){

echo '
<style type="text/css">
/* Put your CSS here */
</style>
';

});