Creating Email Templates for WooCommerce Orders

This article reviews the design tools available for creating email templates that connect to your WooCommerce with SendinBlue. You’ll also learn what WooCommerce order variables are compatible with the SendinBlue platform and how to activate new templates for use within the SendinBlue for WooCommerce Add-On.

Before getting started

• If you don’t already have a SendinBlue account, create one here.
• Locate your WordPress site and WooCommerce account information.
• Follow these steps to install the WooCommerce SendinBlue Add-On.

Good to know: Email templates sent by the SendinBlue for WooCommerce Add-On are not yet compatible with the new email template language (available in a future update). Please format WooCommerce emails using the instructions in this guide. Do not modify the variables from the format shown below.  

Creating WooCommerce email templates with SendinBlue

When using the WooCommerce SendinBlue Add-On, you have the option to use templates created with your SendinBlue account as your default template for:

• New orders
• Processing orders
• Refunded orders
• Cancelled orders
• Completed orders
• New accounts

Note: If you do not activate a SendinBlue template within the Add-On settings, your customers will continue receiving your default WooCommerce notification templates.

Choosing a design tool

SendinBlue offers three helpful tools for creating email templates:

1. Drag & Drop Editor - Create mobile-friendly, responsive templates by dragging and dropping text blocks, images, buttons and other design elements to create a beautiful email. SendinBlue recommends this option for most users.
2. Rich Text Editor - Use a simple text WYSIWYG (What-you-see-is-what-you-get) editor to design your email. 
3. Paste Your Code Editor - Paste your own HTML code. Only users with a strong understanding of HTML and email design best practices should select this option.

Compatible order variables

The following variables may be included directly within your SendinBlue template content: 

*{ORDER_PRODUCTS} will be displayed as an array

Building your first WooCommerce email template

To create your first template, login to SendinBlue and navigate to the Campaigns dashboard and then select "Templates" from the 'Email' dropdown menu located on the left side tab.  

Next, click the green “New Templates” button option located on the top right of that page. 

Creating a template within SendinBlue is done in three easy steps. We will demonstrate by creating an order confirmation for “Test Store”.

Step 1: Setup

• Name your template. This will not be visible to your recipients and is used only to help identify and organize your templates.
• Assign a subject line. Choose a subject that clearly explains the contents of your message. (Tip: You can include WooCommerce order variables in this field, such as {ORDER_ID} to insert the order number.)
• Select the address and name that you email will be “from”. This will also be visible to your recipients and will help them identify your organization.

Step 2: Build

Select your desired tool for creating your template. (Tip: Using the Drag & Drop Builder? Review these tips before you get started to explore the most important features in this design tool).

The Drag & Drop Builder will open to a blank email template. From here, you can either (1.) create and customize a layout by dragging and dropping new design blocks into your design, or (2.) by selecting a template from the "Templates Gallery" tab. These actions do not have to be completed in any order and the "Templates Gallery" tab can be selected directly from the Design tab on the "design Tools" tab. 

You can personalize email templates with the contact attributes saved in your SendinBlue contact database and with your WooCommerce order variables. Here we have included Test Store’s personalization attributes for first name {NAME} and last name {SURNAME}. 

View the personalizations that can be populated from your SendinBlue contact list by clicking the “Personalize” button. This button is available in the menu for any design block that contains a text box.  

Integrating order variables into template content

Place order variables directly into any live text area within your email template. Once the template is activated and connected to the Add-On, the variables will be replaced with customer data when sent to your WooCommerce customers!

Formatting notes

When adding WooCommerce order variables into your SendinBlue email templates, ensure they are:

• Enclosed in curly braces, as shown above
• In upper case formatting, as shown above

This is the proper way to format the order_ID variable within your SendinBlue template: {ORDER_ID}

Saving your template:

Once your design is complete, click the green “Save & Quit” button to move to Step 3.

Step 3: Activate 

It is good practice to send a test email to yourself to ensure all of the personalization elements in the template are populating correctly.

Good to know: Be sure that whatever email address is used to test is a contact on the account with the attributes being used for personalization already populated on the account in that contact, otherwise the personalization will not appear. We generally advise using a test list. 

Use the “Save & Activate” button to save the template and make it accessible from the Add-On settings area.

Connecting email templates to the WooCommerce plugin

After activating your template(s) within SendinBlue, login to your Wordpress site and navigate to the WooCommerce plugin. Click on the “SendinBlue” tab, and then navigate to the “Email Options” tab. Here you can:

• Enable SendinBlue to send your WooCommerce emails
• Select which WooCommerce notification emails SendinBlue should send
• Enable SendinBlue templates to replace some or all of your WooCommerce templates