Customize WooCommerce email templates: The easy way for beginners

Hello WordPress lovers! If you are a WooCommerce user as I am, you know that we all want to have better transactional email templates. In my DiviSpark shop which I sell Child themes, I wanted to have better-looking, branded WooCommerce email templates. There are many ways to make them look better and professional but require more advanced knowledge in PHP, HTML, and CSS. So I decided to come up with a tutorial to show how to customize the WooCommerce email template without any advanced skills. So you can start sending emails that’ll delight your customers.

Lets dive in and see how we can do it.

Here we are using a plugin called Kadence WooCommerce Email Designer which you can download from the plugin repository for free. Go to the Dashboard > Plugins > Add New and search for it.

Once found click on ‘Install Now‘ and activate it.

After activating you will get a new sub-menu item in the WooCommerce menu. Go to WooCommerce > Email Customizer to start designing our email template.

So, below is the settings page.

Prebuilt Woocommerce Email Templates

Kadence WooCommerce Email Designer offers some great pre-built designs which you can use as a starting point. Go to Prebuilt Templates and pick the one you like, scroll to the bottom and click on the Load Templates button. It will add the styling to all WooCommerce transactional email templates which we can edit separately later.

• New Order
• Canceled Order
• Customer Processing Order
• Customer Completed Order
• Customer Refunded Order
• Customer On Hold Order
• Customer Invoice
• Failed Order
• Customer new Account
• Customer Note
• Customer Reset Password

Here is what it will look like after I load the Prebuilt design. Getting better, Right?

Email Type and Text

Next, go to the Email Type and Text settings page. You can select the email template you want to design/customize here. In each email that WooCommerce sent, there is a heading and description text which is related to the specific email template. Scroll down on this setting page and you will see we can change those text content in each WooCommerce email template. Just pick the template from the dropdown menu which you want to edit and change the text content.

Another important thing is you can add dynamic content to those text messages. Like the customer’s first name in the greeting. Instead of ‘Hello There’ you can say ‘Hello {customer_firs_name}’ at the beginning. There are a few other placeholders you can use.

Container

The next setting page is ‘Container‘ which you can adjust the container background color, email container width, top, bottom padding sizes, etc. Try those yourself to make it looks clean and clear ;).

Header

The next thing is Header settings. Here we can add our logo to the mail header. You will find more settings to set the brand colors to the header background, change header padding like things.

Content

This is the setting page for email body area styling. When you go inside the setting page you will notice there are a few more inner setting pages there which we can handle almost every part of the body.

Footer

In the footer setting page you will see another 3 subsetting pages in which you can style the footer, and add social media icons, and change and style the footer credit information.

You can add almost any social media link here. Just click Add New Field button and you can set the icon and the link.

The nice thing with Kadence WooCommerce Email Designer is you can always see your editing live on the right side of the settings page and can check in your inbox by sending a preview email. Just save what you did and click the Send Email button. You will get a preview mail to your email address.

Below is what I did to my website’s WooCommerce email templates. Looks better and nice. right?

This is the best free WooCommerce email customizer I found. No need to have any advanced knowledge. Just simple and easy which anyone can use to customize the mail templates. Great for beginners.