Log In
Sign Up

How to set up the Add-to-Cart popup

This guide explains how to set up and manage the WooDonkey Add-to-Cart Popup for your WooCommerce store. The popup is configured within the WooDonkey platform at app.woodonkey.com and displayed on your storefront to shoppers, helping you present additional product recommendations and incentives immediately after an item is added to their cart.

What it is

The Add-to-Cart Popup is a feature within your WooDonkey dashboard, accessible via the sidebar under Advanced Tools, then Add-to-Cart Popup. This page, titled Add-to-Cart Popup, is a single screen where you manage all settings.

When a shopper adds a product to their cart on your WooCommerce store, this popup automatically appears. It runs through the WooDonkey Companion plugin installed on your store and does not require any shortcodes to function.

How it helps you

The Add-to-Cart Popup helps merchants increase average order value by presenting relevant upsell and cross-sell products at a critical moment in the shopper’s journey. For shoppers, it provides a convenient way to discover complementary items or qualify for free shipping, without leaving the current page.

What is included

Add-to-Cart Popup includes these capabilities:

  • Popup active: Controls whether the add-to-cart popup is visible to all visitors on your store.
  • Test mode: Allows only logged-in store administrators to see the popup for testing purposes.
  • Recommended products source: Defines whether upsell products, cross-sell products, or both are displayed in the popup.
  • Popup title: Sets the main heading text displayed at the top of the popup.
  • Recommendations heading: Customizes the heading text for the recommended products section within the popup.
  • Add to cart button: Defines the text for the button used to add simple recommended products from the popup.
  • View cart button: Sets the text for the button that directs shoppers to their cart page.
  • Checkout button: Customizes the text for the button that directs shoppers to the checkout page.
  • View product button (variations): Defines the text for the button that opens variable recommended products on their respective product pages.
  • Text while adding: Sets the message displayed when a product is being added to the cart from the popup.
  • Text after adding: Customizes the message shown once a product has been successfully added to the cart.
  • Error text: Defines the message displayed if an error occurs during the add-to-cart process within the popup.
  • Loading text: Sets the message shown while recommended products are loading in the popup.
  • Enable discount: Activates a percentage discount on recommended products added via the popup.
  • Discount percent: Specifies the integer percentage discount applied to recommended products.
  • Promotion label: Customizes the badge text displayed on discounted recommended items and on the cart line.
  • Show free shipping bar: Toggles the visibility of a progress bar indicating eligibility for free shipping.
  • Eligibility amount: Sets the target cart subtotal required for free shipping to be offered within the popup.
  • Text when eligible: Defines the message displayed when the shopper’s cart qualifies for free shipping.
  • Text when short: Customizes the message shown when the shopper needs to add more items to qualify for free shipping, using ‘{remaining}’ as a placeholder.
  • Shipping classes that hide the bar: Allows selection of shipping classes that, when present in the added product, will hide the free shipping bar.
  • Opening animation: Selects the visual effect for how the popup appears on screen.
  • Title icon: Allows customization of the icon displayed next to the popup title, using emoji/text or an uploaded image.
  • Shipping icon: Allows customization of the icon displayed next to the shipping bar, using emoji/text or an uploaded image.
  • Popup colors: Provides controls to customize the backdrop, background, title, close icon, and recommendations heading colors of the popup.
  • Shipping bar colors: Offers options to customize the background, text, and progress bar colors of the free shipping bar.
  • Product card colors: Enables customization of the background, product name, price, promotion label, and add button colors for recommended product cards.
  • Navigation buttons colors: Allows customization of the background, text, and hover states for the View cart button and Checkout button.

How to turn on and manage each capability

Open Add-to-Cart Popup

  1. Log in to your WooDonkey dashboard at app.woodonkey.com.
  2. From the sidebar, navigate to Advanced Tools.
  3. Click on Add-to-Cart Popup.

Companion plugin

  1. Install and activate the WooDonkey Companion plugin on the WooCommerce store. See The WooDonkey companion plugin.

Popup active and Test mode

  1. To enable the popup for all visitors, ensure the Popup active switch is toggled on. (Default: on)
  2. To test the popup without showing it to customers, toggle the Test mode switch on. Only logged-in WordPress users who can manage WooCommerce will see the popup. (Default: off)
  3. When testing is complete and you want all visitors to see the popup, toggle Test mode off.

Recommended products source

  1. Under General, locate Recommended products source.
  2. Select your preferred source from the dropdown: Upsell + Cross-sell (default), Upsell only, or Cross-sell only.
  3. WooCommerce’s native upsell and cross-sell product links are used for recommendations.

Texts

  1. Under Texts, customize the messages shoppers see in the popup.
  2. Enter your desired text for Popup title (default: Product added to cart).
  3. Enter your desired text for Recommendations heading (default: You might also like…).
  4. Enter your desired text for Add to cart button (default: Add to Cart).
  5. Enter your desired text for View cart button (default: View Cart).
  6. Enter your desired text for Checkout button (default: Proceed to Checkout).
  7. Enter your desired text for View product button (variations) (default: View Product).
  8. Enter your desired text for Text while adding (default: Adding…).
  9. Enter your desired text for Text after adding (default: Added!).
  10. Enter your desired text for Error text (default: Error, please try again).
  11. Enter your desired text for Loading text (default: Loading products…).

Discount on recommended products

  1. Under Discount on recommended products, toggle Enable discount on to offer a discount. (Default: off)
  2. Enter an integer between 1 and 99 in the Discount percent field. (Default: 10)
  3. Customize the Promotion label text, which appears as a badge on discounted items and on the cart line. (Default: Special Offer!)

Free shipping

  1. Under Free shipping, toggle Show free shipping bar on to display a progress bar. (Default: on)
  2. Set the Eligibility amount in your store’s currency. This is the target amount for free shipping within the popup. (Default: 299)
  3. Customize the Text when eligible (default: Your order qualifies for free shipping!).
  4. Customize the Text when short, using ‘{remaining}’ as a placeholder for the amount still needed (default: Add {remaining} more to get free shipping!).
  5. Select any Shipping classes that hide the bar. If a product added to the cart belongs to an excluded class, the shipping bar will not appear.

Design – icons and animation

  1. Under Design – icons and animation, select an Opening animation from the dropdown: Fade in (default), Slide up, or Scale.
  2. For the Title icon, you can enter an emoji/text or Upload image. Click Remove to reset to the default check mark.
  3. For the Shipping icon, the default is a truck emoji. You can enter emoji/text or upload an image. Remove currently resets it to a check mark.

Design – colors

  1. Under Design – colors, customize the appearance of different popup elements.
  2. Under Popup, adjust Backdrop (overlay) color and opacity, Popup background, Title color, Close icon, and Recommendations heading colors.
  3. Under Shipping bar, adjust Shipping bar background, Shipping bar text, and Progress bar colors.
  4. Under Product card, adjust Product card background, Product name, Price, Promotion label background, Promotion label text, Add button background, Add button text, Add button background (hover), and Add button text (hover) colors.
  5. Under Navigation buttons, adjust Cart button background, text, and hover states, and Checkout button background, text, and hover states.

Save and Preview

  1. As you make changes, observe the live Preview column on the right (on large screens) to see how your popup will appear.
  2. After configuring your settings, click the Save button at the top of the page to apply changes to your store.
  3. If you use caching plugins like WP Rocket or SiteGround, clear their caches after saving to ensure changes are visible immediately on your storefront.

What shoppers see

  1. The popup appears automatically when a shopper adds a product to their cart from a product page or via AJAX add-to-cart on archive/shop pages.
  2. If there are no recommendations, the popup still opens with the title, View Cart, and Checkout buttons.
  3. Simple recommended products will have an Add to Cart button within the popup.
  4. Variable recommended products will show a View Product button, which opens the product page in a new tab for selection.

What to know before you start

  • The popup is active by default (Popup active on, Test mode off).
  • The default recommended products source is Upsell + Cross-sell.
  • The discount feature is off by default (Enable discount off), with a default Discount percent of 10.
  • The free shipping bar is on by default (Show free shipping bar on), with a default Eligibility amount of 299.
  • The default opening animation is Fade in.
  • Test mode overrides Popup active. If Test mode is on, only store administrators will see the popup, even if Popup active is also on.
  • The Eligibility amount for the free shipping bar is specific to this popup and does not read or sync with WooCommerce’s Free Shipping method minimums.
  • When variable products are recommended, the popup displays a View Product button, which opens the product page in a new tab for the shopper to make selections. Simple products show an Add to Cart button.
  • The Add-to-Cart Popup runs automatically across your site via the WooDonkey Companion plugin. No shortcodes are needed or available.
  • The WooDonkey Companion plugin must be installed and active on your WooCommerce store for the popup to function.
  • The optional discount applied to recommended items added from the popup is a percentage on those specific items and is not part of WooCommerce’s Promotions engine.
  • Grouped products added from their product page are not intercepted by the popup.
  • Out-of-stock, catalog-hidden, and not-purchasable linked products are automatically skipped from recommendations.
  • Quantity rules set on your store are respected when shoppers add products from the popup.
  • The free shipping bar calculates eligibility based on the cart subtotal against the Eligibility amount.
  • After changing settings and clicking Save, clear any site caches (e.g., WP Rocket, SiteGround) to ensure changes are immediately visible on your storefront.

Problems you may hit, and how to fix them

  • Popup never appears: Confirm the WooDonkey Companion plugin is installed and active. For all visitors, turn Popup active on and turn Test mode off. For an admin-only check, turn Test mode on and browse the store while logged in to WordPress as a user who can manage WooCommerce. Grouped products on the product page do not open this popup. After Save, clear WP Rocket and SiteGround caches.
  • Customers see it while testing: Ensure Test mode is toggled on in the WooDonkey dashboard. When Test mode is on, only logged-in WordPress administrators will see the popup, even if Popup active is also on.
  • No recommended products in the popup: 1. Check your WooCommerce product settings for the product just added to the cart. Ensure it has upsell or cross-sell products linked, depending on your Recommended products source setting. 2. Verify that the linked recommended products are in stock, visible in the catalog, and purchasable. Out-of-stock, hidden, or non-purchasable products are skipped. 3. Ensure your Recommended products source setting (Upsell only, Cross-sell only, or Upsell + Cross-sell) matches the type of links you have configured in WooCommerce. 4. The popup will still open with View Cart and Checkout buttons even if no recommendations are found.
  • Variable product shows View Product: This is expected behavior. Variable recommended products require shoppers to select options on their product page, so the popup provides a View Product button that opens the product page in a new tab. Only simple products offer an Add to Cart button directly in the popup.
  • Free shipping bar amount looks wrong or doesn’t match WooCommerce free shipping: The Eligibility amount in the WooDonkey Add-to-Cart Popup is independent of WooCommerce’s Free Shipping method minimums. Adjust the Eligibility amount directly within the WooDonkey dashboard to set the target for this popup’s bar. The bar uses the current cart subtotal for its calculation.
  • Bar hidden for some products: Check the Shipping classes that hide the bar setting under Free shipping. If the product just added to the cart belongs to one of the selected shipping classes, the bar will be hidden.
  • Discount did not apply: 1. Ensure Enable discount is toggled on under Discount on recommended products. 2. Verify that a valid Discount percent (1-99) is entered. 3. The discount applies only to items added from the popup’s recommended products section, not to the initial product added to the cart.
  • Changes not visible after Save: Clear your site’s cache. If you use caching plugins (e.g., WP Rocket) or your host provides server-side caching (e.g., SiteGround Optimizer), you must clear these caches after saving settings in WooDonkey.
  • Popup on product page but not from shop grid or the reverse: The popup is designed to open when a shopper adds to cart on a product page or via AJAX add to cart on archive/shop pages. If it’s not appearing in one of these scenarios, ensure your theme’s AJAX add-to-cart functionality is standard and not custom-implemented in a way that bypasses WooCommerce’s hooks. Also, re-check that the WooDonkey Companion plugin is active and your site’s cache is cleared.

Related reading