Pro Added To Cart Popup

The Added To Cart Popup module allows you to display an attractive popup with a product summary and call-to-action buttons whenever a customer adds an item to the cart.

You can use the Added To Cart Popup module together with the Recently Viewed Products, Frequently Bought Together, and Buy X, Get Y modules to add relevant product suggestions to the popup.

As the module lets you exclude any of your products or product categories, you don’t have to show the popup for all of your products if you don’t want to. You can also configure which elements you want to show inside the popup.

In the screenshot below, you can see an example of an Added To Cart popup on a WooCommerce product page:

Below, we’ll see how to set up Merchant Pro’s Added To Cart Popup module.

1. Open the Added To Cart Popup Module

First, open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.

Find the Boost Revenue section, and click the Added To Cart Popup module to open its settings page:

2. Find the Module’s Settings

Like all Merchant modules, the Added To Cart Popup module comes pre-configured with sensible defaults that work and look good right out of the box — however, it also allows you to change any of the settings.

On the module’s admin page, you’ll find two groups of settings:

• Popup Settings – These options let you configure the module’s behavior and the layout of the Added To Cart popup.
• Look and Feel – Here, you can customize the design settings of the popup.

While configuring the settings, you’ll also be able to follow the changes in real time in the Preview section next to the settings:

3. Configure the Popup Settings

In the Popup Settings section, you get access to the following options:

• Select layout – Here, you can choose from three different popup layouts.
• Popup size – This option lets you set the width of the popup.
• Popup message – This is the title shown at the top of the popup area (default value: ‘Added to cart’).
• Show product info – Here, you can select whether you want to show the product thumbnail, product title and price, and product description in the popup.
• Maximum product description length – Here, you can set the number of words you want to show from the product description (default value: 15).
• Show cart details – Here, you can show or hide three details related to the price calculation. The available options are Cart total, Shipping cost, and Tax amount.
• Show view cart button – This option lets you show or hide the View Cart button in the popup. You can also change the label of the button (default value: ‘View Cart’).
• Show continue shopping button – This option lets you show or hide the Continue Shopping button in the popup. You can also change the label of the button (default value: ‘Continue Shopping’).
• Show checkout button – This option lets you show or hide the Checkout button in the popup.
• Show suggested products – Here, you can toggle the suggested products section on and off. When the option is toggled on, you can choose from four types of suggested products:
  1. Related Products – These are automatically generated product recommendations based on your product tags and categories.
  2. Recently Viewed Products – These product recommendations come from Merchant Pro’s Recently Viewed Products module. It only works if the module is enabled on your site.
  3. Frequently Bought Together – You can display a Frequently Bought Together offer from Merchant Pro’s Frequently Bought Together module. For the offer to display, the module must be active, plus the product added to the cart must be part of a Frequently Bought Together offer you’ve created.
  4. Buy X Get Y – You can display a Buy X, Get Y offer from Merchant Pro’s Buy X, Get Y module. For the offer to display, the module must be active, plus the product added to the cart must be part of a Buy X, Get Y offer you’ve created.
• Exclusion List – This option allows you to exclude specific products or product categories so that the Added To Cart popup won’t appear when a customer adds them to the cart. To add the excluded products, start typing the name of the product, and the relevant products will show up in the dropdown.
• Show on pages – Here, you can select the page types on which the Added To Cart popup functionality will be active. The available options are Homepage, Product Single (includes the individual product pages), and Product Archive (includes the Shop, product category, and product tag pages).
• Show on devices – Here, you can enable or disable the module for desktop and mobile devices.

If you’ve changed any of the default settings, click the Save button in the top-right corner of the page:

4. Customize the Look and Feel of the Popup

You can find the Look and Feel section below the Popup Settings section on the module’s admin page.

Here, you can customize the following design settings:

• Popup background color – You can use a color picker to configure the background color of the popup area (default value: #fff).
• Popup corner radius – You can use a range slider to change the corner radius of the popup area (default value: 0px).
• Popup overlay color – This is the background color of the transparent overlay that covers the rest of the page while the Added To Cart popup is open (default value: rgba(0,0,0,0.5)).
• Borders colors – This is the color of the border of the popup area (default value: #d9d9d9).
• Close button color – This is the color of the close icon (default value: #000).
• Message text color – Here, you can change the text color of the popup title (e.g. ‘Added to cart’) that shows up at the top of the popup area (default value: #000).
• Product name color – This is the text color of the product’s name (default value: #000).
• Product description color – This is the text color of the product’s description (default value: #000).
• Product price color – This is the text color of the product’s price tag (default value: #000).
• Product price font size – Here, you can configure the font size of the price tag (default value: 18px).
• Cart details color – This is the text color of the cart details section that, depending on your Popup Settings, can include the shipping cost, tax amount, and cart total (default value: #000).
• Buttons corner radius – Here, you can change the corner radius of your call-to-action buttons that, depending on your Popup Settings, can include the View Cart, Continue Shopping, and Checkout buttons (default value: 25px).
• Buttons main color – This is the background color of your View Cart button and the border and text colors of your other call-to-action buttons in the popup (default value: #3858e9).
• Buttons alternate color – This is the text color of your View Cart button and the background color of your other call-to-action buttons in the popup (default value: #fff).
• Suggested products section title color – This is the text color of the title of the suggested products section (default value: #000).
• Suggested products name color – This is the text color of the product names in the suggested products section (default value: #000).
• Suggested products price color – Here, you can change the text color of the price tags in the suggested products section (default value: #8e8e8e).

If you’ve made any changes, click the Save button in the top-right corner of the page.

5. Enable the Added To Cart Popup Module

To activate the module, click the Enable button at the top of the page:

Video Walkthrough

Check out the video below for a live demo of the Added to Cart Popup module: