If you are looking for a simple solution to modify your Email template in WooCommerce then I would simply recommend using one of those email template plugins that allows you to change the design. Kadence WooCommerce Email Designer plugin is one recommended by me as it’s free and does the job pretty well. It even lets you send out test emails with mockup order so that you don’t have to carry out test purchases just to test how the emails sent from your store will look.

If you just wanted to change the design of your plain looking WooCommerce Email template, this plugin is enough but in case you need to do some serious modifications in your email templates like change some content or add or remove something in it then you need to get your hands dirty with PHP and CSS codes as plugins will not help here. Let’s discuss how you can begin modifying your WooCommerce email templates step by step.

Step 1: Locate the Template Files used by WooCommerce to send emails. These files can be found in “wp-content/plugins/woocommerce/templates/emails”.

Step 2: Understand which template files do what. The template files you have just seen in “wp-content/plugins/woocommerce/templates/emails” are those files which will be used to send HTML emails and there are same set of files in sub folder named ‘plain’ that will be used to send plain text emails. You can totally ignore the files inside this plain folder found here: “wp-content/plugins/woocommerce/templates/emails/plain” if you are not going to send plain text emails. (default is HTML anyway and it’s the best option).
WooCommerce sends an email for each event, there is an email for New Order, Cancelled Order and Failed Order which are sent to the admin by default. The files that are responsible to send these emails are: admin-new-order.php, admin-cancelled-order.php and admin-failed-order.php respectively. So you see that names of these files are self-explanatory to what they do. The content inside these mails are managed by some other files found in this folder, for example order details are managed by: email-order-details.php and this file is shared by every email file which will have order details in it. That means if you modify “email-order-details.php”, its effect will be reflected in both New order, cancelled order, failed order, Order processing email which is sent to customer and so on. So when modifying these core template files you have to keep this in mind.

Step 3: Copy the files that you intend to modify in “wp-content/themes//woocommerce/emails”. If your theme does not have woocommerce and email folder then go ahead and create it yourself. We do this step for two reasons, first we want to keep the original unmodified template files intact to WooCommerce folder and keep modified files in our template folder. WooCommerce will give priority to template files you just copied in your theme folder. Second and the most important reason is that in an event of automatic WooCommerce plugin update, all your changes in the template files will be lost and your modified file will be overwritten by updated file which you strictly do not want!

Step 4: Modify the email template by modifying the required php file. Suppose you want edit New Order email that is sent to admin. To modify this email you need to modify ‘admin-new-order.php’ file and based on your modification requirements, you might also need to modify other files. Say for example you need to remove the price and address from this email and keep your admin notification mail uncluttered and strictly for notification only. For removing address all you have to do is find this line of code:

do_action( ‘woocommerce_email_customer_details’, $order, $sent_to_admin, $plain_text, $email );

and change it to:

//do_action( ‘woocommerce_email_customer_details’, $order, $sent_to_admin, $plain_text, $email );

The double slash ‘//’ in php means you have commented the code and it will no longer work.
To remove the price you will have to remove codes from ‘email-order-details.php’ file but remember that this file is shared with other email templates as well. So if you remove price in this file, price will be gone from customer’s order email as well which is something we do not want here. We take help of some CSS knowledge, Kadence WooCommerce Email Designer plugin and “Inspect” function of Chrome browser here to deal with such situations.

In the screenshot above of a test mail, the highlighted text with red and blue is what we want to remove. The red highlighted text is a static content which is inside a th and td tag while the blue highlighted text is the price which is dynamic and is based on the actual price of the item. The red highlighted text can be removed by CSS by adding an ID to the th and td tag (we are not adding class here because it already has got one) and then giving that ID value of display:none!important;. Lets see how we do this in code:

In email-order-details.php file on line no. 44, 71 and 72, we add id to the th and td tags. This id can be any name of your choice, I have used word ‘noprice’ here, but it can be anything you like. This id will not affect normal functioning of this file for other template files where it is linked. However in our admin-new-order.php file we will add a CSS code at the top which will stop price from displaying.

Now coming to the items marked with blue border which are prices of items, they are dynamically created and hence not present in the form of table cells. We will remove this price by knowing its class. To know its class you need to open up the email template of new order using Kadence WooCommerce Email Designer plugin and check for its class. At this point make sure you are using Google Chrome as your browser. To check the class of price (or any element in that email) right click anywhere and click on ‘Inspect’ option. Using the inspect tool in Chrome you can see the class and then use CSS to stop that class from displaying.

As you can see in the screenshot above, we have found the class to be “span.woocommerce-Price-amount.amount”. So finally we have our id = noprice and a class to disable. We will disable them for admin email by adding the following CSS code at the top of ‘admin-new-order.php’ file:

Since we have added our CSS code in admin-new-order.php file only, it will work for admin new order email only and not affect any other emails sent out to customer which also has price information.

The purpose of this article was to educate the beginners who have just started working with WordPress and WooCommerce about modifying email templates. I hope you enjoyed reading and if any part was not clear enough then let me know in the comments and I will be glad to explain it further.