Before we start, you’ll need a couple of things:
- Sendinblue account (free)
- Sendinblue API key (free)
- A WooCommerce store (DUH)
- Some knowledge of PHP and CSS
Also, a note. As I use a namespacing convention in all my WordPress themes, I need to add __NAMESPACE__ prefix to all my function callbacks. So, that’s what that is, in case you’ll wonder later on.
Let’s dive right in.
First thing we need to do, is render our newsletter opt-in field on the checkout. Why? Because we need to ask our customers whether they want to sign up for our newsletter before adding them to our list. You don’t want to add a bunch of people to your list that never signed up, right?
Hook and render the opt-in field
So, we’ll hook this field to an appropriate WooCommerce action hook and render the field on the checkout. The hook we are using here is:
'woocommerce_checkout_before_order_review_heading'Here’s how that’s done:
add_action('woocommerce_checkout_before_order_review_heading', __NAMESPACE__ . '\\codeart_add_newsletter_optin');
function codeart_add_newsletter_optin() {
$html = "<div class='form-row codeartNewsletter'>";
$html .= '<div class="innerWrap">';
$html .= '<span class="woocommerce-input-wrapper">';
$html .= '<input type="checkbox" name="codeartNewsletter" />';
$html .= '<label for="codeartNewsletter">';
$html .= 'Subscribe to our newsletter and get our discount coupon!';
$html .= '</label>';
$html .= '</span>';
$html .= '</div><!--/.innerWrap-->';
$html .= '</div><!--/.form-row-->';
echo $html;
}Ok, so now we have a working opt-in field on our checkout. Our field name is codeartNewsletter, so this will be the name of the variable we are going to check for when posting the checkout form, because we only want to go through with the API call if our customer has marked the checkbox for the newsletter opt in.
Next step is to hook into the checkout process at the moment our buyer hits the submit button and tries to send the order.
The hook we’re going to be using here is:
'woocommerce_checkout_process'So, I’m going to break this process down into couple of steps so you can better understand what’s going on:
add_action('woocommerce_checkout_process', __NAMESPACE__ . '\\codeart_add_new_subscriber_to_list');
function codeart_add_new_subscriber_to_list() {
if($_POST['codeartNewsletter']) :
$firstname = $_POST['billing_first_name'];
$lastname = $_POST['billing_last_name'];
$email = $_POST['billing_email'];
$phone = $_POST['billing_phone'];
$curl = curl_init();So, the first step is to check whether we’re posting our ‘codeartNewsletter‘ field – simply put, this is how we’re checking if the buyer has checked this field on the checkout page. If the buyer has checked our newsletter field, we prepare our variables (first and last name, email, phone, and we initalize ‘curl‘ which we’ll be using to connect to Sendinblue API.
Do come cURL magic and connect to Sendinblue API
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.sendinblue.com/v3/contacts",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => "{\"attributes\":{\"FIRSTNAME\":\"$firstname\",\"LASTNAME\":\"$lastname\",\"PHONE\":\"$phone\"},\"listIds\":[yourlistid],\"updateEnabled\":true,\"email\":\"$email\"}",
CURLOPT_HTTPHEADER => [
"accept: application/json",
"api-key: {yourapikeygoeshere}",
"content-type: application/json"
],
]);So, a couple of things are going on here. API endpoint we are using is ‘https://api.sendinblue.com/v3/contacts‘ – this is the endpoint through which we can store our contact.
In the ‘CURLOPT_POSTFIELDS‘ request we’re storing the values of our fields – first and last name, phone number, list ID (get this from your Sendinblue account) and our email address. If you want to be able to update existing contact information (perhaps the email is already in your Sendinblue list and you wish to make a change to some of the fields for this contact), make sure you set ‘updateEnabled‘ to ‘true‘ in the request. Otherwise, subscribing an already existing email to your list won’t do anything – no information will get updated for that particular contact in your Sendinblue list.
Send our request and process the response
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}So, this last step is quite simple – we send our request, and process our response. If the response is successful, our contact will be stored in our Sendinblue newsletter list.
The entire code for the checkout process looks like this:
add_action('woocommerce_checkout_process', __NAMESPACE__ . '\\codeart_add_new_subscriber_to_list');
function codeart_add_new_subscriber_to_list() {
if($_POST['codeartNewsletter']) :
$firstname = $_POST['billing_first_name'];
$lastname = $_POST['billing_last_name'];
$email = $_POST['billing_email'];
$phone = $_POST['billing_phone'];
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.sendinblue.com/v3/contacts",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => "{\"attributes\":{\"FIRSTNAME\":\"$firstname\",\"LASTNAME\":\"$lastname\",\"PHONE\":\"$phone\"},\"listIds\":[yourlistid],\"updateEnabled\":true,\"email\":\"$email\"}",
CURLOPT_HTTPHEADER => [
"accept: application/json",
"api-key: {yourapikeygoeshere}",
"content-type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
endif;
}And that’s it. You can put all of the code on this page inside your functions.php file, and it’ll work out of the box. Just make sure you’re using the right field names, meaning the field names that correspond to the field names you are using for your contacts in your Sendinblue list. Also, make sure you replace ‘yourapikeygoeshere‘ with your actual Sendinblue API key in the cURL header.
