Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin

For the Abandoned Cart plugin, many clients asked us if there is a way to capture the email address before the checkout page. Since this was never in the roadmap of the plugin, we kind of dismissed this feature. Only later we realized that this could prove very effective in curbing cart abandonment rate.

Today, while writing this post we are at a stage where we have finished implementing this feature. We have released the Add to cart popup modal in v6.0 of the plugin.

Let’s look at the detailed working of how the guest user’s email address is captured with the Add to Cart modal popup.

Add to cart popup modal

We will look into 3 sections for better understanding the popup modal.

1. Popup Editor Settings
2. Frontend Popup Display
3. Stats

1. Popup Editor Settings

Popup modal settings allow you to configure the popup for various options like the text to be shown, whether email capture is mandatory or optional, color & so on.

You can find them at: WooCommerce -> Abandoned Carts -> Settings -> Add To Cart Popup Editor Settings page.

Here, you can make changes according to your business requirements. Let’s take a look at the each setting.

1. Enable Add to cart popup modal: This setting allows you to choose whether this popup modal should be displayed on the front end or not. If the toggle button is green then the setting is enabled and Add to Cart popup will be shown to the guest customers on your website.

By default, the popup modal is set to not show when the plugin is installed.

2. Modal Heading: It will allow you to change the popup heading and color of the heading text.

3. Modal Text: It will allow you tochange the text and color of the description that appears just under the heading.

4. Email placeholder: You can change placeholder text for the email address field which will show in the popup modal.

5. Add to cart button text: It will allow you to change the text of the popup modal button which will add the product to the cart. Along with this setting, you can change the button background color as well as the text color.

6. Email address is mandatory?: Using this setting, you can decide that your customer should always provide the email address or not. If the toggle button is green then it is mandatory for the guest customer to provide the email address.

And it will hide the non-mandatory text and the close button at the top right of the popup modal. If the user will close the popup modal then the product will be added to the cart.

If the toggle button is disabled then it will allow you to set the text for not providing the email address. Setting named as Not mandatory text will allow you change the text.

Live popup preview

What is more interesting part of these settings is that you can observe the live changes of the text and the selected color in the right side preview of the modal. As you change the settings on the left side fields, it will show the live preview in the right side.

We have used the 2-way binding from Vue.js for displaying the live preview of the changes.

Once you have done all the changes, you can save the settings by clicking the Save Changes button. Also, if you want to reset to the default configuration of the popup modal settings then you can click on the Reset to default configuration button. It will erase all settings of popup modal and set all fields data with the default values.

2. Frontend Popup Display

This popup modal will be displayed on the shop page or product page when your customer clicks on the Add to cart button. You can check below how the Add to cart popup modal will be represented on your website for the guest users.

Add to cart popup modal on Shop page when email address capture is not mandatory

Add to cart popup modal on Shop page when email address capture is mandatory

Add to cart popup modal on Product page when email address capture is not mandatory

Add to cart popup modal on Product page when email address capture is mandatory

When Guest User clicks on the Add to cart button, it will immediately open above popup to ask for the email address. It will help you to capture the guest user’s email address immediately instead of on the checkout page. This will result in getting a chance to be able to recover the user’s cart should they abandon it later.

When a customer provides the email address in the popup modal, then that email address will be directly populated into the checkout page Email address field.

We have not used the cookie for storing the customer’s email address, instead, we have used the local storage of the browsers. Once the customer has added the product to cart (with or without the email address), the next popup will be displayed after 24 hours after which first popup has been shown.

3. Stats

After you are all set with the popup, how would you determine that it is worth using or not? We have you covered with some handy statistics.

You can check the statistics of the add to cart popup on the Dashboard tab of the plugin.

It will allow you to take a quick glance by looking at the Add to Carts count which let you know how many customers had added the products to carts using the popup. This is same as the number of popup impressions. Technically we are not calling it that way because if a user happened to close the browser as soon as the popup appeared, then it is not incremented here.

The Collected Emails count lets you know how many customers had provided the email address in the popup. If the email capture is mandatory, this count & the Add to Carts count will be same.

Lastly, the Conversion Rate will let you know how much the Add to Cart popup is effective for collecting the email addresses of the guest customer before the checkout page.

If you want to change the setting then you can directly edit the popup modal setting by clicking on the Edit Settings button given at the right side of the report.

The purpose of this popup window is not to act as an annoyance, but to reduce cart abandonment & capture the email address early in the process.

The customer still needs to enter the email address only once during the entire order placement cycle.

Conclusion

The ability to capture the email address early in the order process is very important to reduce cart abandonment by unknown users as well as to be able to recover their carts if they abandon it. This ultimately leads to increase in your store sales.

If this is the one feature you were looking to have on your store, you can purchase the plugin right away.

We look forward to receiving your feedback on this.