• woocommerce-ipad-bikestore
  • ipad-sunglasses
  • ipad-fashion

Customize WooCommerce Email Content & Design

Easily create email templates for woocommerce

Drag & Drop Email builder

No Coding required

Ready to use templates

WooCommerce default customer notification

Let’s create an order to see the default message template.

It doesn’t look like a professional store notification at all so let’s start customizing the message template for all our outgoing emails.

Basic Email template settings

We install WP HTML Mail and the WP HTML Mail WooCommerce extension and start with our basic template configuration:

Navigate to [Settings] -> [Email template]

Use the color picker to change your email background color

Change header background and choose your Logo or header image from media library.

Align your header and set fallback font settings (just in case your images are blocked by your customers mail client)

Proceed to the Tab “Content” and set content background and font settings.

We skip the tab “WooCommerce” and change our email footer first. This footer is shown in all your emails, if you need some legal informations only for customer notifications you can also add them later.

Our basic email template is customized

We keep it as simple as possible to fit our clean and simple corporate design for our demo bike store.

Great thanks for the logo to the creators of the Hipster Logo Generator. A great tool for creating logos for demo content.

WooCommerce Email Settings

We go to the WooCommerce tab in our email settings.

From previous versions of WP HTML Mail we still can create a template for all WooCommerce notifications at once, but the great new feature we want to show here is the Drag & Drop Mail Builder.

So we choose the option “Customize each email individually”

You can see a list of all WooCommerce emails to edit each one individually.

Below is a preview area. You can choose some of your orders and the type of notification you want to test.

If you want to see the results in your email client navigate to [WooCommerce] -> [Orders] edit an order and select the email from the “actions” dropdown on the right

All templates are ready to use

Most of the texts are already translated by WooCommerce.

We could already stop here, but we have so much more features to show, so let’s continue.

Change Content of a WooCommerce email notification

We’re back on the WooCommerce tab of WP HTML Mail settings.

Click the edit icon next to one of the email templates.

All emails consist of multiple elements: text blocks, products table, two column container

Click on any content to edit. Change texts, formatting or just rearrange elements by dragging on the dark title bar.

Everywhere we can enter texts we can also add placeholders for any WooCommerce fields. Also custom checkout fields from WooCommerce Checkout Field Editor are supported.

As soon as you click “apply” your placeholders are filled with real content from one of your latest orders.

If you need more or just different content elements just click the button on the bottom of the page.

The WooCommerce products table

Move your cursor to any cell of the products table to view the panel to edit or delete the cell or duplicate the column.

Click the edit icon to modify the cell content, borders, padding and font formatting. Of course you can use placeholders again.

Our final WooCommerce Email Template

Our WooCommerce notification email is complete. Now repeat the customization for all remaining emails.

Hannes EtzelstorferWooCommerce Email Customizer