Create Branded WooCommerce Emails With an Email Customizer Plugin

What We Will Be Building 

The transactional email that we will be building will be for our music production website, SoundShock. The SoundShock website sells music samples to producers and WooCommerce sends out a transactional email when a purchase is completed called the “completed order” email. 

We want to customize the completed order email that is sent to our customers to let them know that we appreciate their business and to display our business theme and logo. 

The transactional email that we will create will contain our company’s logo, changes in the email font colors, and additional text.

The company logo will help create a strong sense of branding for SoundShock, the font colors help connect our email with the SoundShock color palette, and the added text makes sure that the customer feels appreciated and encourages them to stay in contact with the company. 

Below is an image of the completed order transactional email that we created to give our business a more professional look.

Creating the Completed Order Transactional Email

To create the completed order transactional email we are going to head on over to our WordPress dashboard and click WooCommerce > Email Customizer (after you have installed the plugin.) You will then be redirected to the email customizer editor. 

To begin editing the completed order transactional email, we are first going to change the Email Theme to show setting. This will allow us to choose which theme we would like to customize. Once we click the drop-down menu, you can see there are a few options for us to choose from. The default WooCommerce email template has the most eye-catching design out of the four themes available, so we are going to choose this one to edit. Click the WooCommerce (copy, editable) option from the drop-down menu. 

Next, we need to choose the type of transactional email. Right below the theme drop-down menu is the Email Type to show option. Click this and choose the Completed Order option. This will pull up the completed order transactional email in the right-hand side of your screen in the email preview section. 

We will now begin the editing of the email. Click the Customize button below the Email Type to show option. An editor will now pop up to the right of the email customizer menu. As mentioned, we would like to change the company’s logo, change the font colors, and add in additional text.

First, we will edit the text. Click the text drop-down menu and a text field to change the heading and the main text will appear. 

Right now, the text in the header just says, “Your order is complete.” To make this more personalized and inviting, we are going to change the text to say “Thank you for your order [ec_firstname]! It is now complete!” You will notice that we have the shortcode [ec_firstname] in this text. In order to display the specific customer’s name, you will need to add this shortcode in to tell the email customizer what name to include. 

Next, we are going to change the main text. To show our gratitude to the customer, we are going to type in, “Thank you again for placing your order [ec_firstname]! Your recent order on SoundShock has been completed. The order details are shown below for your reference:” into the main text field.

Next up on our list of changes to be made are the font and background colors. The SoundShock website has an orange color as its base color and we would like to have this be our base color to ensure brand congruity across all communication platforms. Currently, the base color is blue. We are going to click on the base color hex code and type in, #FB663D. You will instantly see these color changes reflected in the email preview. 

Finally, we are going to change our company logo to the header of the email. Click on the Header menu item and then click the Upload button. This will open up the WordPress media library. From there we are going to choose the SoundShock logo and click the Choose Image button on the bottom right of the media library. The logo will now be present on top of the email header. 

Now that we have implemented all the customization we want for our completed order email, we are going to click the Save & Publish button at the top right-hand corner of the top of the customized email editor.

Watch the video below to see the email customization process in action!