Easy Digital Downloads Add to Cart Popup Addon
This extension enables a popup window that displays Continue Shopping and Proceed to Checkout buttons after an item is added to the cart. A simple plugin that offers an extremely useful option, letting customers add all the products they want to their cart without being forced to go to the checkout page.
The extension includes options to customize practically every aspect of the popup. You can add any text and images within the popup through the WYSIWYG editor, both for when the customer has single or multiple items in their cart.
You can modify font sizes, colors, borders, shadows, overlaycolors, and much more. You can even set your own popup dimensions, change each button’s styling individually, and we have also implemented a detailed color picker that gives you all the options you can wish for.
Lastly, gone are the days when you need to save the settings and try it out live on your site. One of the best new features is the Preview. You can preview each change live, while you’re modifying the settings, and it will popup over your dashboard.
Creates the perfect bridge between the product page and checkout with Add to Cart Popup.
Add to 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.
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
- 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.
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.
Live Preview
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.
