Creating Email Templates for WooCommerce Orders

Overview

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

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 two helpful tools for creating email templates:

  1. Responsive Design Builder - 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. HTML/Simple Text Editor - Paste your own HTML or use a simple text WYSIWYG (What-you-see-is-what-you-get) editor to design your email. 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:

 

Billing details Shipping details Order details Miscalleneous
{BILLING_FIRST_NAME} {SHIPPING_FIRST_NAME} {ORDER_ID}  {CART_DISCOUNT}
{BILLING_LAST_NAME} {SHIPPING_LAST_NAME} {ORDER_KEY}  {CART_DISCOUNT_TAX}
{BILLING_COMPANY} {SHIPPING_COMPANY} {ORDER_DISCOUNT}  {CUSTOMER_USER}
{BILLING_ADDRESS_1} {SHIPPING_ADDRESS_1} {ORDER_TAX}  {PAYMENT_METHOD}
{BILLING_ADDRESS_2} {SHIPPING_ADDRESS_2} {ORDER_SHIPPING_TAX}  {PAYMENT_METHOD_TITLE}
{BILLING_CITY} {SHIPPING_CITY} {ORDER_SHIPPING}  {CUSTOMER_IP_ADDRESS}
{BILLING_STATE} {SHIPPING_STATE} {ORDER_PRICE}  {CUSTOMER_USER_AGENT}
{BILLING_POSTCODE} {SHIPPING_POSTCODE} {ORDER_DATE}  {USER_LOGIN}
{BILLING_COUNTRY} {SHIPPING_COUNTRY} {ORDER_SUBTOTAL}  {USER_PASSWORD} 
{BILLING_PHONE} {SHIPPING_METHOD_TITLE} {ORDER_DOWNLOAD_LINK}  {REFUNDED_AMOUNT}
{BILLING_EMAIL}   {ORDER_PRODUCTS}*  

*{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.

Next, click “Campaigns”(1) in the top navigation, and then choose “SMTP Templates”(2) from the dropdown menu. Then click “Create a New Template”(3).

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

woo-commerce-templates_3bis_EN

  • 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 Responsive Design Builder? Review these tips before you get started to explore the most important features in this design tool).

woo-commerce-templates_4_EN

 

The Responsive Design Builder will open to a blank email template. You can customize the layout by dragging and dropping new design blocks into your design, or by selecting a template using the green “Templates” button. In this example, we will choose a template.

 

woo-commerce-templates_4bis_EN

 

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}. 

woo-commerce-templates_5bis_EN

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.  

woo-commerce-templates_6bis_EN

 

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!

woo-commerce-templates_7_EN

 

woo-commerce-templates_12_EN

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 blue “Save & Quit” button to move to Step 3.

woo-commerce-templates_8_EN

Step 3: Activate

  woo-commerce-templates_3_EN

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

woo-commerce-templates_4_EN

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

woo-commerce-templates_6_EN