How to Customize WooCommerce Emails

Every order sends your customer an email. And out of the box, it looks like everyone else's. In this tutorial, we'll customize the WooCommerce emails, step by step. The sender, the logo, the colors, and the wording. Then we'll turn emails on and off, and send ourselves a test. After that, we'll see what settings can't change, and the mistakes that catch people out. It's all stock WooCommerce, so there's nothing extra to install.

First, where the line is. Most of what you want to change is a setting. Settings cover the sender, the logo, the colors, the footer, and the subject and heading of each email. The wording inside an email, and its layout, come from a template file. Changing those means a template override, which is a copy of the file in your theme. We'll do both, on the Ridgeline Coffee Roasters demo shop.

Open WooCommerce, then Settings, and click the Emails tab. This is every email your store can send. Each row shows its content type, and who receives it. Some go to your customers. New order goes to you, and tells you about a sale. Below the list are two sections that apply to all of them. Email sender options, and Email template.

Start with the sender. The From name is what customers see in their inbox. Then the From address. Use an address on your own domain, like orders@ridgeline.example. The note at the top of the page says the same. Connect your email address to your domain, and set up a dedicated SMTP server, so your emails reach the inbox. Tick Add a Reply-to email, and enter a name and an address. Replies from customers go there. The preview already shows the new sender. Click Save changes.

Now the logo. Click the Logo box, and choose an image from your media library. With no logo, WooCommerce shows your site title instead. Set the logo width in pixels, then the header alignment. Left, center, or right. The preview updates as you go.

Next, the font family. The list has ten fonts. A font from Google Fonts isn't one of them. Then the footer text. It appears at the bottom of every email. You can use placeholders there: site title, site URL, store address, and store email. Each is replaced when the email is sent. The default footer has two lines. Add a third, with your own line.

Now the colors. While Auto-sync with theme changes is on, WooCommerce keeps the palette in step with your theme. Type a color of your own, and it switches itself off. There are five colors. Accent is for buttons and links. Email background is the outside. Content background is the page the message sits on. Heading and text is the main text. Secondary text is used for the footer. Type a color code for each. Here, the Ridgeline brown and cream. Then click Save changes.

Now, which emails get sent. A blue tick means the email is on. A grey cross means it's off. And an arrow means manual. Manual emails are ones you send yourself, from the order screen. The customer Cancelled order email is off to start with. Open it, tick Enable this email notification, and save. Now, when an order is cancelled, the customer is told. To turn an email off, untick the same box. We'll switch off Payment gateway enabled, which only matters when you switch on a new gateway. New order has a Recipient box. That's the address that gets the sale emails, and several can be separated by commas.

Now the words. Open Processing order, the email customers get after they pay. Subject is the line in the inbox. Leave it empty, and WooCommerce uses the default, shown in grey. Type your own. Placeholders such as order number are replaced when the email is sent. Hover the question mark, and it lists them all. Email heading is the big title inside the email. Additional content is the text below the order details. Email type can be HTML, plain text, or multipart. And Cc and Bcc send a copy to someone else. The preview changes when you click out of a box. Click Save changes.

Now check how it looks. The preview can show any of the emails. Pick one from the list, and the preview changes. Switch to the phone view, to see it on a small screen. Click Send a test email, type your address, and send. Our demo shop catches its mail in a mail catcher. On your shop, it arrives in your own inbox. Here's the test. The sender, the Reply-to, the subject, the logo, and the colors are all ours. The preview and the test use sample data. That's a customer called John, and a dummy product.

So place a real order, at least once. This is a normal checkout on the shop. Two emails go out. One to the customer, and one to you. The customer's email has the real order, with our subject, our logo, and our colors. Now the New order email. Its Reply-to is the customer, so you can answer them straight away.

Now, what settings can't change. This sentence under the heading is part of the template file. Open Processing order, and scroll to HTML template. Click Copy file to theme. The page now says the template is overridden by your theme, and shows where it lives: your theme, then woocommerce, then emails. WooCommerce uses your copy instead of its own. Open it in the theme file editor, and change the sentence. WordPress warns about editing a theme directly, and suggests a child theme. Click Update File. Back on the Emails tab, the preview has the new sentence. So do the test and the real emails.

Mistake one. Forgetting to save. Change the subject, and click out of the box. The preview updates, and so does a test email. But the shop still sends the old one. Reload the page, and the change is gone. Always click Save changes, then send a real order to check.

Mistake two. An old template copy. A copy in your theme doesn't update itself. It keeps working, even after WooCommerce changes the original. WooCommerce, Status, has a Templates section. It lists every override, and flags the ones that are out of date. The path shows which theme the copy belongs to. Switch theme, and the email goes back to the default.

Mistake three. A placeholder that isn't on the list. Type something like customer name, in curly brackets. It isn't a placeholder, so the email shows it exactly as you typed it. Only the ones in the question mark list are replaced. A customer's name in the subject needs code.

Mistake four. A no-reply address. The default additional content says to contact us at store email. That placeholder is your From address. So if the sender address is no-reply, the email tells customers to write to it. Use an address that somebody reads.

That's the WooCommerce emails. Set the sender, the look, and the wording, then choose which emails are on. When something looks wrong, check three things. Did you save? Is the email on? And does it need a template override? That's all for now. Come back to plugincity.net, for more WooCommerce tutorials.