WooCommerce SMS notifications with Twilio

In this tutorial we’ll show you how to create customised SMS notifications from WooCommerce that fit your exact needs. To do this, we’ll be using WunderAutomation, a free WordPress plugin for automations together with Twilio SMS service. To follow this tutorial, you need to have a WordPress site with WooCommerce and a Twilio account.

NOTE: Since this post was published, we also released the Twilio for WunderAutomation plugin that makes Twilio integration just a tad bit easier to set up.

Requirements for WooCommerce SMS solution

• WordPress 4.7 or later with WooCommerce
• A Twilio account with a working number for sending SMS
• WunderAutomation plugin, download from the WordPress repository

WooCommerce SMS – overview

For this tutorial, we’re going to imagine that we’re running a WooCommerce store that sells t-shirts. We’re using a delivery service that provides us (the vendor) with a unique tracking link for each package we send out. We want to send this link to our customer in an SMS so they can easily track their delivery on the phone web browser.

Our solution is to create a workflow in WunderAutomation that will run everytime WooCommerce saves an order to the database. The workflow will then check that the “shipping_link” field is not blank and that if there is a “shipping_link_sent” field, it’s doen’t have the value “Yes”. If both things are true, we’ll be using a the Twilio API to send an SMS notification to our customers phone. We’ll also update the “shipping_link_sent” field to make sure we don’t send out the SMS more than once.

Installing WunderAutomation

We’re assuming you already have a working WooCommerce installation up and running and are somewhat familiar with installing plugins. Adding WunderAutomation is as easy as installing any other WordPress plugin:

Once you have installed WunderAutomation, you will see a new menu option appear on the dashboard:

Setting up Twilio

This tutorial assumes you already have a Twilio account to send SMS from. If you need to create a new account, click here to set up a free test account with $15 of SMS credits. Next follow this link to create your first Twilio number to use for sending SMS. When you have finished setting up, go to the Twilio dashboard:

Your are going to need the trial phone number, the account SID and account token later in this tutorial.

Creating the WooCommerce SMS workflow

Creating workflows in WunderAutomation looks very much like creating any other type of object in WordPress. Click the “Automation” link in the admin dashboard menu to get the list of all existing workflows. Click “Add Workflow” at the top of the screen to create a new one.

Name and defining the trigger

All WunderAutomation workflows needs to have a name. We’ll name this: WooCommerce SMS. The workflow also needs to have a trigger, for this tutorial we’re going to use “Order saved” as the trigger:

selecting the “Order saved” trigger will pop up some useful information about the trigger:

This tells us that by using this trigger, we’ll have access to an “order” object representing the saved order that triggered this workflow. We can use properties from the order object for filters as well as parameters later.

Defining filters

Filters are an essential part of most workflows. We need to make sure the workflow only runs its actions when we really want it to. For our WooCommerce SMS workflow, we’re going to define two filters:

1. We want to make sure there is shipping information stored on the object. Otherwise there will not be anything to send to the customer. We will store this information in a specific custom field named “shipping_link”
2. We want to make sure we only send this information once. So we’re going to use a specific custom field “shipping_details_sent” to keep track of this

Filter groups

First, we’ll create a filter group. Each individual filter we create is a separate condition that will evaluate to either true or false. When all filters in a filter group evaluates to true, the entire group will be true (logical AND). Most workflows will only use one filter group.

If you need to use a logical OR, you can create additional filter groups. A workflow will continue to run if at least one filter group passes as true. By combining individual filters in multiple groups, it’s possible to create complex logic to ensure the workflow actions are executed exactly when we want it to.

The two filters we’re using both needs to be true in order for the workflow to execute its actions. In this case, both our filters are based on using custom fields. Note that when selecting “Custom field” as a filter, we also need to state the name of the custom field in the separate text box.

Defining actions

The last step is to define the actions. We’ll be using two actions in our WooCommerce SMS workflow:

1. An action to send the SMS via Twilio using a webhook call.
2. A separate action to update the “shipping_details_sent” field to “Yes” so that once this workflow as run once, we don’t send the SMS again if we for any reason save the same order again.

First action: Webhook

To set up the webhook, we need to supply a number of parameters.

• Method: POST – this means we’re posting (sending) data to the Twilio servers which we will be doing in this case.
• URL: https://api.twilio.com/2010-04-01/Accounts/[SID]/SMS/Messages.json – The URL that we’re sending data to. Note that this URL contains your account SID so it’s unique for your Twilio account. The easiest way to find this URL is to navigate to https://www.twilio.com/console/sms/getting-started/build where you will see your unique URL on the right hand side:

Click the Add Action button

• Basic authentication – needs to be checked so that the username and password fields becomes visible.
• Username – this is where you fill in your account SID, fetched from the Twilio dashboard earlier
• Password – this is where you fill in your account TOKEN, also fetched from the Twilio dashboard.

Webhook parameters, keys and values

We also need to specify three variables to send to the Twilio API. To add then, click the “Add key/value pair” button three times to make the three rows of input fields visible:

• From – Since Twilio supports multiple SMS numbers in your account, we need to specify from which number this SMS will be sent. We’ve typed in the trial phone number we created at the start of this tutorlal.
• To – The recipient of the SMS. We want this to be the phone number that our WooCommerce customer provided at checkout. We can use this number via a parameter in WunderAutomation:

WunderAutomation comes with a parameter editor that helps you compose these codes, it’s in the right sidebar and looks like this:

Clicking the billing.phone field will bring up an editor where you can specify what we described above:

The resulting parameter string is shown at the bottom. The editor is closed by clicking “Copy to clipboard”. Now you have the parameter definition string in your computer clipboard, ready to be pasted wherever you need it. We paste it into the “To” field of our webhook key/value paris.

• Body – Lastly we will send the actual body of the SMS. As you can see from the screenshot above, WunderAutomation uses normal textboxes for inputting these values, so it’s a little bit inconvenient to type in. We’re going to use the parameter editor to create a custom field paramter:

The complete text we type in to the Body field is:

This is your tracking link: {{ customfield | field: 'shipping_link' , urlenc: 'yes' }}

Second action: updating the “shipping_details_sent” field

The second action is much easier to define. Click “Add action” again to add a second action and make it “Change custom field”:

• Object type: In this case, we can only select “WooCommerce order”. But it’s worth noting that with other triggers, you may have more object types to select from.
• Custom field identifier: This is the id of the custom field we want to change. In this case we’ll use a field called “shipping_details_sent”. If this field doesn’t already exist, WunderAutomation will create it for us.
• New value: We’ll just type in Yes here. The next time this workflow runs on the same order, the filter we created above will protect us from sending out the SMS a second time. We could use any value, but since the filter above is explicitly checking if the field contains “Yes”, this is what we’ll use.
• Data type: We’re going to use the value “Standard” here which means WunderAutomation won’t attempt to manipulate the value before storing it.

That’s it. We’re done setting up the first workflow. Let’s move on to testing.

Testing the workflow

Now we’re eager to see this how this workflow works out in the real world. To do this, we need to find an order, add the “shipping_link” field to it and save it. Here’s how:

Open the order and first make sure your screen options are showing custom fields:

Scroll down to the custom fields section and add our custom field. Click “Enter new” and type the field name shipping_link and whatever value you want, ie. http://example.com/ and then click “Add custom field”.

Scroll back up again and click “Update” to save the changes to the order.

Wait for it….

….and pick up your phone to see something like this:

Final step – verify the order

As a last step, we’ll go back to the order to verify that the “shipping_details_sent” field is added to the order:

Conclusion

NOTE: Since this post was published, we also released the Twilio for WunderAutomation plugin that makes Twilio integration just a tad bit easier to set up. Go check it out.

This is a long tutorial that covers a lot of ground. It’s the first one we’ve published since the release of WunderAutomation on the WordPress plugin repository. Even if you’re not explicitly interested in sending SMS messages from WooCommerce, we hope we have provided a little understanding of how WunderAutomation can be the automation engine on your WordPress site. Without writing code.

We’re constantly working to improve WunderAutomation. If you have question about this tutorial, WunderAutomation or any of the premium plugins we’re offering, feel free to contact us via the comments section or the contact form below.