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.
Add to cart pop-up modal will be displayed only for non-logged in users. For logged in users the email is already captured once they are logged in and therefore the pop-up wont be displayed.
Let’s look at the detailed working of how the guest user’s email address is captured with the Add to Cart modal popup.
We will look into 3 sections for better understanding the popup modal.
- Popup Editor Settings
- Frontend Popup Display
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.
Enable 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. Custom pages to display the popup modal on: This setting allows you to select the pages for displaying Add to cart popup modal. Previously the Add to cart popup modal was visible on just the WooCommerce standard pages like Home, Shop, Categories and Product Pages. With the help of this setting the Add to cart popup modal will now be visible on all the pages.
There will be instances where Add to cart pop-up modal will need to be displayed on other custom pages where products will be displayed with the help of some shortcode or an Add to cart link provided to buttons. For these cases, add the pages to this setting and the pop-up modal shall be displayed.
Note: The buttons used to fulfill Add to cart functionality need to adhere some practices:
a. The add to cart button must have class: `add_to_cart_button` and `ajax_add_to_cart`
b. The button must have `data-product_id` attribute or the link for Add to Cart operation
3. Modal Heading: It will allow you to change the popup heading and color of the heading text.
4. Modal Text: It will allow you tochange the text and color of the description that appears just under the heading.
5. Email placeholder: You can change placeholder text for the email address field which will show in the popup modal.
6. 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.
7. 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.
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.
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.
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 for non-mandatory email
Add to cart popup modal on Shop page when email address capture is mandatory:
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:
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:
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.
Add to cart popup modal
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.
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.
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.
Statistics of Add to cart popup on Dashboard
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.
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.