Save Abandoned Checkout Email with WooCommerce

After publishing my last post about saving WooCommerce checkout fields, my friend Cory asked about saving the customer email to use in an abandoned cart flow.

The idea is to move the email field to the first position, and as soon as it is filled out, save it. Then if the customer does not complete the checkout, you can send them a follow up email.

There are two parts to this, moving the email field, and then adding the Javascript and API endpoint to capture the email.

I put this all in a plugin if you don’t care how it’s done, you can download it here. This plugin is a continuation of saving checkout fields in browser storage from the last post, so it does that plus it adds a hook to use for abandoned checkout.

The plugin just adds a hook that you can use to add the email to your abandoned checkout flow, it won’t send emails. See the example code below for a functioning example with MailChimp.

Move Email to the First Position at Checkout

This is the easy part, we move the email using a WooCommerce filter.

Adding a priority of 4 makes billing email the first field.

Save Email With Javascript

To save the email before the form is submitted, we can grab it as soon as the email field is filled out, and save it to our database. There may be some privacy concerns with doing this, so use at your own discretion.

Here is an excerpt from the plugin Javascript:

// grab the email after the field is filled out
$('#billing_email').on('blur', function(e) {
  let email = e.target.value;
  if( email && email.indexOf('@') > 0 && email.indexOf('.') > 0 ) {
    // send the email to the REST API
    sbWoo.sendEmail( email );
    return;
  }
});

The email is saved by grabbing the value of the field after it is filled out, and sending it to WordPress through the REST API. Click here to see the Javascript code on Github.

After we grab the email, we send it to a custom REST API endpoint. A hook called sb_woo_checkout_email is fired, which is where you can make the magic happen.

Using this hook, you can add the email to your abandoned checkout flow.

Note that nothing is happening yet, the plugin is not doing anything with the customer email. You need to add your own code for that part, see the example below.

Example Abandoned Checkout Flow

Here’s an example of what it might look like when a customer enters their email into your checkout form, but does not complete checkout.

1. Customer enters email in checkout form.
2. Subscribe customer to an “Abandoned Checkout” email list using the sb_woo_checkout_email action. This list is configured to send an email automatically 24 hours after signup asking if they need help, or maybe sending them a coupon. If you add a link to your cart or checkout page, their cart should still be filled with the same items.
3. If the customer completes checkout at any time, they are unsubscribed from the Abandoned Checkout email list in MailChimp using the woocommerce_new_order action.

Here is some example code for MailChimp you can add to a custom plugin on your site that will handle the flow described above. Make sure to install the dependency, and change your API keys and list ID as described in the code comments.

This code is pretty raw, it’s a proof of concept. To be used in a production environment it would need refinement and testing.

You can of course use any email provider, or even save this information to your database somewhere. If you have any improvements you would make, let me know in the comments.