How to Edit WooCommerce Email Templates

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:

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>
';

});

Posted in

Jordan Schelew

Jordan has been working with computers, security, and network systems since the 90s and is a managing partner at Websavers Inc. As a founder of the company, he's been in the web tech space for over 15 years.
WS-Logo-only-image-large

About Websavers

Websavers provides web services like Canadian WordPress Hosting and VPS Hosting to customers all over the globe, from hometown Halifax, CA to Auckland, NZ.

If this article helped you, our web services surely will as well! We might just be the perfect fit for you.

Leave a Comment