Table of Contents
Putting in a little more effort into your appearance can go a long way. Now imagine marketing your product to a customer in your nightwear. Although it might sound funny, I think we can all agree that the chances of that customer buying your product might be very less. Think of your email design templates as the outfit – your brand’s appearance to the whole world. Jazzing it up a bit will not only make your brand stand out but will also catch the reader’s attention. You might already be aware of how our plugin Order Delivery Pro for Woocommerce offers a way to send delivery reminder emails. With the help of the WooCommerce email template customization and preview plugin Yaymail, you will be able to customize Order Delivery Date Pro for WooCommerce email templates.
Introducing Yaymail – A WooCommerce Customization and Preview Plugin
Most often, WooCommerce users are stuck with the boring default email templates that are used by each and every WooCommerce store. Enters Yaymail, a WooCommerce email template customization and email preview plugin that will help you take care of this. If you’re willing a spend a little extra to make your brand stand out and ensure that your customers take notice of it, you can use this plugin to “beautify your emails, preview changes you made in the email template, and make customers come back for more.”
Some of Yaymail’s features are:
- Easily adding columns & element blocks
- Editing content and media in a single window
- Customizing font, color, background, padding, and so on in the email templates
- Live preview of your email template
- Saving and sending a test email
- 20+ elements
With the WooCommerce email template customization Yaymail plugin, you can easily drag and drop elements to your email templates. Even a novice can easily figure out how to use this plugin.
Order Delivery Date Pro & WooCommerce Email Template Customization and Preview Plugin – Yaymail
In order to redesign your Order Delivery Dat Pro’s email templates, you will require:
- Order Delivery Date Pro for WooCommerce plugin ($99)
- Yaymail plugin (Free)
- Yaymail Premium Addon for Order Delivery Date Pro ($39)
After adding these to your WooCommerce store, you can access your Order Delivery Date Pro for WooCommerce plugin’s email templates from WooCommerce >Settings > Emails as shown below:
Once you reach here, you can scroll down to find the Order Delivery Date Pro Templates like this:
Click on the ‘Customize with YayMail’ option of the email template you choose to re-design.
Email Template 1: Delivery Date & Time Updated
Let’s say that you wish to customize the Delivery Date & Time Updated email template. Once, you have clicked on ‘Customize with YayMail’ here’s how the template will appear:
On the topmost part of the template, you will find the following details:
The WooCommerce Email Customizer will help you pick and choose different elements or blocks, and their various designs that you can add to your template.
With the help of the setting that is beside the customizer, you can choose the email templates such as the ‘Delivery Date & Time Updated‘ template from the dropdown option. Right next to it, you will find the dropdown to choose a specific Order’s email template. For example, 325- TanishaMehta. Then you have various other options such as Shortcodes, Send Test Email, Blank Template, Copy Template, Reset Template options.
Next, if you wish to switch on the template after creating it you can do so by enabling the template. You can even preview how the template will appear on desktop devices or mobile devices by clicking on the ‘Preview’ option. Lastly, you can ‘Save’ the designed email template once you are done making the changes. Let’s start by customizing the Delivery Date & Time Updated email template.
Firstly, we’ll change the logo of this email template. Find the WooCommerce logo in the email template and click on it. On the left-hand side, you will find the option to edit the logo where you can change the image, its alignment, its padding, and so on. Here’s how it will appear:
Next, we will upload our own logo instead after clicking on the ‘Change Image’ option. Along with this we will add a URL for the logo, change its background color to a shade of blue, change its width to 150 pixels. The changes will appear directly in the template as you can see below:
Following this, we will now change the Email Heading by clicking on it. We’ll change the background color from purple to white, and the text font color to our previous shade of blue. We will also change the Font itself. Here, we have decided to go with “Arial Black”, Gadget, sans-serif font:
Now we shall edit the text element which states “The Delivery Date & Time has been updated by the customer. The details of the order and the updated delivery details are as follows”. Following our previous font family, we will apply the same over here as well. We have also made some changes to the Padding of the text as you can see below:
Similarly, we also made the changes to the table of the email template in terms of color, padding font, etc.
Now, we wish to add our social media icons to the email template. For this, we will go to WooCommerce Email Customizer > Elements > Social Icon and then drag that element in the email template.
After dragging it, we will delete the social icons that we don’t need and add the ones that we will require. For example, we will keep the Facebook icon and we will also add the Twitter icon. We will add the URL link that will be opened once a person clicks on the social media icon.
Here, we can make changes to the icon’s size, its spacing, the background color and so much more. Here’s how it will appear after making those changes:
Lastly, we’ve also made the following changes to the our Footer:
After making all of these changes, you can click on the ‘Save’ button located on the extreme right-hand-side top corner of the page. When we click on the ‘Preview’ option, here’s how our newly designed template will appear:
Let’s see how the template will appear in the inbox:
Email Template 2: Delivery Reminder
Let’s customize the ‘Delivery Reminder’ email template. For this, we’ve taken Order number 143. Here’s what the default email template looks like:
We’ll first start off by first replacing the logo just as we did previously for Delivery Date & Time Updated email template.
This time we will go for a darker shade of grey for our background color as well as our email template. Continuing further, we will make changes to the Email Heading. We’ll personalize the text by adding ‘Hey there!’ before ‘This is your Delivery Rerminder’.
We will then shift it to the centre and even change the background color to something darker. We’ll keep our font color as white and change to text font to Tahoma, Geneva, sans-serif as you can see below:
Next we will change the text that addresses our customer with the following edits:
We will then proceed with the text that will display the order details. For this, we would like to bold it so that the customer can understand from where exactly they can start reading to know about their order details.
We, then proceed to edit the Order Item design with our previously chosen colors for background color, title color, border color, and text color as shown below:
Let’s also change the View Order text by shifting it to the center and changing its background color to a darker blue which attracts the customer towards it.
Now we wish to separate the Order details section of the email so we will go to Elements > General > Divider and drag that element to the template.
We’ve made the necessary changes such as the line height, width, color, etc to the divider and after doing so, they will appear like this:
Just like our first email template, let’s add our social media icons so that our customers can follow us and be updated with our latest products. We’ll go to Elements > Social Icons.
Once we drag it, here’s how it will appear:
We will discard the Youtube and Linkedin icons first by clicking on the trash icon.
Then, we will add the Twitter icon and make changes to Icon spacing, Width, and even its Style Theme.
Now, we don’t wish to show the text that says that our site has been built with WooCommerce. So we will delete it by clicking on the three dots and then clicking on the ‘Remove’ option.
Instead, let’s add a few images of our products for the customer. Go to Elements and choose the ‘Image List’ element and drag it to the template just below ‘View Order’.
Here, we will go with three images to attach, so we will choose 3 columns. After adding images to each of the columns, we’ll make changes to the alignment, background color, etc.
Don’t forget to add the URL link of the product to the image so that when the customer clicks on the image they will be directed to the product page of that item.
Above it, let us add a text that says ‘Some other products that you may like’ just like this:
Lastly, let’s add our brand’s logo at the end of the template by choosing the ‘Logo’ element from WooCommerce Email Customizer.
After adding our logo, URL, and other specifics, our Delivery Reminder email template is ready. We will ‘Save’ it and here’s how it will look:
Now, let’s send a test email. Here’s how the test email will look like in your customer’s inbox:
Email Template 3: Admin Delivery Reminder
Finally, let’s re-design the ‘Admin Delivery Reminder’ email template. Here’s what the default email template will look like:
Let’s start by inserting our Logo and making it smaller compared to before.
Next, we will change the email heading to suit our blue aesthetic color scheme.
Next, we will change the default text to ‘Here is the reminder for your delivery tomorrow’. We’ll make it bold and increase its font size as well:
Next, we wish to show the Shipping and Billing address to the admin. So we will add the ‘Billing Shiping Address’ element by dragging it putting it just below the ‘Here is the reminder for your delivery tomorrow’ text element.
We’ll also change its color to something like this:
Next, we also wish to show the Order Item list to the admin, so we will select the ‘Order Item’ element.
After dragging the element to the email template, our order details will appear directly on it. We can make changes to its background and color as shown below:
We don’t wish to have the default text element that says made with WooCommerce, so we will ‘Remove’ it out like this:
Lastly, to make the template appear uniform and on-brand, we will add our brand’s logo at the end in the following manner:
Here’s how our Admin Delivery Reminder email template will appear after making these changes:
We can also send this template as a test email. Here’s how the Admin Delivery Reminder will appear in your admin’s inbox:
Conclusion
In this post, we covered how you can re-design our Order Delivery Date Pro plugin’s three different email templates using the WooCommerce email template customization plugin Yaymail. Although we were able to cover just a few of Yaymail’s features we’re sure that designing experts can use other elements such as attaching videos or even buttons to their email templates.
Keep exploring & let us know in the comments below how you were able to customize your Order Delivery Date Pro emails with Yaymail!
