Monday, October 14, 2019

Create Branded WooCommerce Emails With an Email Customizer Plugin

Create Branded WooCommerce Emails With an Email Customizer Plugin

If you have ever placed an order online, then you have probably received a transactional email. Transactional emails are emails that are sent to you and your customers after a transaction has occurred on your website. 

These transactional emails are not to be confused with promotional emails that are sent to a list of recipients who have opted-in for promotional content from your website. Instead, transactional emails include information about a completed order, processing order, refunded order, or a new order. 

These emails contain pertinent information on the transaction that just occurred and this information must be presented in a professional manner. This means that the email should be presented in a clear and friendly manner and that the design of the email should fit your company or website's theme. If the email is not presented in this way, you run the risk of making your business seem unreliable, inconsistent, or disorganized.

Unfortunately, the WooCommerce shopping platform does not allow you to fully customize your transactional emails unless you have experience with web development and coding. 

That's where the Email Customizer plugin comes in. Thankfully, this plugin allows you to fully customize your transactional emails and give your customers a professional-looking email. 

In this article, I am going to show you how to create a transactional email for your WordPress website using the handy 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.

Completed Order Transactional Email


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. 

Email Customizer Completed Order Email

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.

Customizing Text

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!

 

To double-check and make sure this email looks the way we want it to when it is sent to a customer, you can enter in your email address in the Send a Test field and click the email icon. An example email will then be sent to your email address and you can confirm that the changes you made to the email are correct.

There you have it! Now every order that is completed, the customer will receive our custom email that has a professional look and sound to it!

Getting the Most Out of the Plugin

While the email customizer plugin is very straight forward, there are a few ways that you can take the customization of your email a step further:

Adding Custom Links and Social Media Links 

The text editor in the email customizer allows you to add custom links. This allows you to direct the customer to any place on the web. Adding in your social media links here allows your customers to continue connecting with your brand and for this reason, it is highly recommended to include in these emails. 

Using Shortcodes

The shortcodes listed on the bottom of the customize menu are only a few of the possible shortcodes that you can add. In addition, you can also modify the shortcodes to display other text that could be helpful to connect with your customers. You can view the complete list and customization options for the shortcodes in the official documentation. For example. Let's say you want to send your customer their order number. Not only do you want to show them their order number, but you also want to show the date of the order. By looking at the shortcodes reference webpage ere, you can see that you to accomplish this, you will need to use the shortcode, [ec_order show="date"]

Updating All Transactional Emails 

While this may seem rather time-consuming, it is well worth the effor. Email Customizer allows you to customize all the WooCommerce transactional emails. If you change one email template, then it is advisable to change all of them to present your customers with a consistent brand identity. 

Conclusion 

When communicating with your customers, it is necessary to ensure that your brand identity is consistent and that you are communicating in a positive and welcoming manner. By default, the transactional emails that are sent through WooCommerce are not editable —unless you create custom code. 

By using the Email Customizer WordPress plugin, you can easily customize all of your WooCommerce transaction emails and give your emails that professional touch that is needed to run a successful business. To give this plugin a try, head over to CodeCanyon and check out the Email Customizer WordPress plugin. And while you're here, check out some of the other great WordPress plugins available from CodeCanyon.


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)