Capture WooCommerce Abandoned Carts in Mautic

How to find abandoned WooCommerce carts and send information to Mautic? If its your returning customer and you have him/her email in your database, it shouldnt be hard - you just have to create a simple rule:

Visited Checkout Page AND Did Not Visit Order Confirmation Page

But if it’s first time visitor, we have no email or any contact information except of remarketing which has much lower success rate than abandoned cart emails. Here I will show you free, quick and easy solution to capture customer emails in the same way paid WooCommerce plugins work and I will send this data straight to Mautic.

I assume you are using jQuery library, as most themes do. We will be using JavaScript instead of WooCommerce and Mautic APIs - this way Mautic is able to capture valuable web analytics data together with email.

First of all, you have to create separate Mautic form with email field and no redirect after submit. Do not set up anything else as its not necessary - this form will be hidden from users eyes anyway.

WooCommerce checkout

Now edit your checkout page in WordPress. Checkout page in WooCommerce consists only of one shortcode: [woocommerce_checkout], which generates form, payment methods and everything else.

Choose Text tab, so you can work on raw HTML. Paste this code below [woocommerce_checkout] shortcode:

<div style="display: none;">
  <script type="text/javascript" src="//your.mautic.domain/form/generate.js?id=1"></script>
</div>

<script>
  jQuery("input#billing_email").change(function() {
    var customer_email = jQuery("input#billing_email").val();
    jQuery("input#mauticform_input_yourformname_email").val(customer_email)
    jQuery("form#mauticform_yourformname").submit();
  })
</script>

You have to customize this code for your Mautic settings. Second line is just a form automatic HTML to share form outside of Mautic - you can find it in your Mautic form editor.

Second script listens to WooCommerce email field changes. If change is detected, it is pasted into hidden Mautic form and automatically submitted.

Notice input#mauticform_input_yourformname_email and form#mauticform_yourformname jQuery selectors. You must replace yourformname with your Mautic form name in lowercase letters without spaces. For example, Your Form Name would display as yourformname.

Thats all! From now on, everytime somebody fills the email field, this email is instantly saved as contact in your Mautic instance. You can detect if cart has been abandoned by creating a rule:

Capture Email Form Submitted AND Did Not Visit Order Confirmation Page

Unfortunately, this solution is not providing product data inside the cart. More advanced integration requires modifications in WooCommerce templates and should be done using WordPress plugin.