WooCommerce SMS notifications with Twilio

WooCommerce SMS notifications with Twilio and WunderAutomation
Spread the love

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. We’re also going to use Postman to test the Twilio API and help creating the API requests, but it’s not strictly necessary to follow this tutorial.

Requirements for WooCommerce SMS solution

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:

WunderAutomation in the plugin search screen

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

WunderAutomation menu items in the admin dashboard menu

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:

Twilio dashboard

Your are going to need both the account SID and account token later in this tutorial.

Creating the WooCommerce SMS workflow

Creating our 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:

Our WooCommerce SMS workflow - step 1

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

WooCommerce SMS - selecting 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.

Adding the first filter group to WooCommerce SMS

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.

Filters for two different custom fields

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
  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: REST API call

To set up the REST API call to Twilio, we need to supply a number of parameters:

WooCommerce SMS - first action
  • 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:
Finding the API URL in the Twillo console

Click the Add Action button

  • 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.
  • Request body – we’ll discuss this in detail below. This is the actual data sent to Twilio. The Twilio API expects to receive the data in x-www-form-urlencoded format. If you have no idea what this means, don’t panic and just keep reading.

The trick to this entire exercise is that we want to send a custom link to our customers phone number. To accomplish this, we’ll create a request body that consists of three parameters. From, To and Message. And they need to be passed to Twilio in a specific format, copy and paste the following into the Request body field:

To={{ billing.phone | format:  'e.164' , urlenc:  'yes' }}&From=%2BNNNNNNNNNNN&Body=Tracking%20link:%20{{ customfield | field:  'shipping_link' , urlenc:  'yes' }}

Next: replace the NNNNNNNNNNN with your configured Twilio number WITHOUT the leading + sign (yes, we know this is slightly daunting, but You’ll manage).

The hidden details

When you pasted the above text into the request body field, you actually provided three pieces of information:

  1. A “To” field with the value “{{ billing.phone | format: ‘e.164’ , urlenc: ‘yes’ }}” – this instructs WunderAutomation to replace everything between and including the curly braces by picking up the parameter “billing.phone” from the order object, format it using the e.164 rule and URL encoding the result.
  2. A “From” field. If you successfully replaced the NNNNNNNNNNN with your Twilio number (again, without the leading + sign), this is a hard coded variable that will be exactly the same every time this action is executed.
  3. A “Body” field that besides some text contains “{{ customfield | field: ‘shipping_link’ , urlenc: ‘yes’ }}”. Similar to the To field, this instructs WunderAutomation to replace everything between and including the curly braces by picking up the custom field “shipping_link” and URL encode it.

Super complicated!! How would I ever come up with that myself?

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

Opening the parameter editor

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

WooCommerce SMS - Editing the billing.phone parameter

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.

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”:

WooCommerce SMS - second action
  • 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”.

Adding a custom field to a WooCommerce order
Saving the custom field to the WooCommerce order

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:

WooCommerce SMS - the resulting SMS message

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:

WooCommerce SMS - verifying that the workflow updated the custom field

Conclusion

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.


Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *