Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

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

Preview of the Add too Cart popup modal

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.

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Add to cart popup modal setting

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.

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Email address field is mandatory

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.

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Email address field is not mandatory

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.

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
2-way binding from Vue.js

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

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Add to cart popup modal on Shop page for non-mandatory email

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

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Add to cart popup modal on Shop page for mandatory email

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

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Add to cart popup modal on Product page non-mandatory email

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

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Add to cart popup modal on Product page mandatory email

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.

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Add to cart Modal popup

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.

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Email address field populated with popup modal email

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.

Capture Visitor Email Address before Checkout page with WooCommerce Abandoned Cart Pro plugin - Tyche Softwares
Add to cart popup modal stats

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.

Browse more in: Abandoned Cart Pro Plugin for WooCommerce, WooCommerce

Share It:

Subscribe
Notify of
11 Comments
Newest
Oldest
Inline Feedbacks
View all comments
5 years ago

In my store, when adding the cart the customer is already sent directly to the checkout, so I prefer being a single product, even then I can use the popup? and after the popup the client is still directed to the checkout?

5 years ago
Reply to  Dauglis

Hi Dauglis,

if you have set up such as redirect the customer directly on the Checkout page from the product page then the page will be redirected to the checkout page when the product is added to cart from the Add to Cart popup modal.

Please let me know if you have any further questions or if I misunderstood your query.

5 years ago

Hello,
We love the plugin. However, we are having an issue with the Add to Cart Popup popping up for every item that the customer tries to add to their cart even though they have already filled in their email address in the first item’s popup. How do we stop the popup from appearing after the customer has already added their email address in the first item’s popup?
Many Thanks!
Kimberly

5 years ago

Hi Kimberly,

We have replied to you via our Ticketing system where you have created a ticket for the same query. Can you please check your email and reply on the same? We will continue our further communication on that ticket itself.

Marc
5 years ago

I need to capture the email address before checkout but in a page, not a pop-up. Does this plugin allow me to do that, either through settings or custom code?

Marc
5 years ago
Reply to  Vishal Kothari

A code change that I can make or a code change to the plugin? If I purchase the plugin, could I get help to make that change?

6 years ago

Hallo, good job!
I’d like to know if this popup is GDPR compatible.
Thanks
LFK

Admin
6 years ago
Reply to  Luca

Hello,

We have made every efforts to make the plugin and the pop-up GDPR compliant with the latest version and as a part of that we have made some provisions to display messages above the Email Address fields here: https://prnt.sc/jmgb10
The users can anyways not allow sharing their email address by clicking on “No Thanks”

Also you can read about the detailed features here: https://www.tychesoftwares.com/upcoming-release-7-8-0-of-abandoned-cart-pro-for-woocommerce/

Please drop us an email at @Vishal Kothari.freshdesk.com">support@Vishal Kothari.freshdesk.com if you have any further queries related to GDPR and our plugin. We shall be glad to help you out.

Best Regards,
Dhruvin

6 years ago
Reply to  Dhruvin Shah

Thanks!!!

11
0
Would love your thoughts, please comment.x
()
x