In this guide
Explore the steps and reference sections below.
On this page
The Add to Cart Popup confirms a successful add-to-cart action without immediately taking the shopper away from the page. It shows the added product, quantity and price, plus the current cart count and total. You can decide where it appears, how long it stays open and how it looks. Pro adds control over the action buttons, related products and more of the design.
Set up the popup
- In WordPress admin, open Swift Commerce → Add to Cart Popup.
- Turn on the feature with the switch in the page header.
- On Settings, choose where the popup should appear. Adjust the timing and Pro options if needed.
- Open Appearance to choose a preset and preview your changes.
- Select Save Changes in the page header, then add a product to the cart on your storefront to test it.
Important: The Appearance live preview uses sample products and does not change a real cart. Changes in the preview are not saved until you select Save Changes.
Choose where the popup appears
Use Settings → Display settings → Show popup on. “All Pages” is the default. The selection controls where the popup assets load; the popup itself appears only after a product is successfully added to the cart.
| Option | Where it can appear |
|---|---|
| All Pages | Any storefront page where an add-to-cart action occurs. |
| Products Archive Only | The shop, product-category and product-tag archives. |
| Single Product Only | Individual product pages. |
| Archive & Single Product | Product archives and individual product pages. |
Set timing and mobile visibility
Expand Settings → Timing & display to configure:
- Auto-Close Popup (Free): Leave it off to keep the popup open until the shopper dismisses it. When enabled, choose a delay from 2 to 15 seconds; the initial delay is 5 seconds.
- Animation Duration (Free): Set how quickly the popup enters and exits, from 100 to 500 milliseconds. The default is 300 milliseconds.
- Show on Mobile Devices (Pro): Control whether the popup appears on mobile devices. It is on by default.
The shopper can also close the popup manually with its close button. If you turn off mobile visibility in Pro, test on a phone after saving.
Choose the popup actions (Pro)
Expand Settings → Popup buttons. Show or hide the View Cart, Checkout and Continue Shopping actions independently, and edit each button label. These controls are Pro-only; the Free popup uses its built-in actions.
For example, a store that wants shoppers to keep browsing can make Continue Shopping prominent, while a short purchase flow may emphasize Checkout. Review the actual storefront result after changing labels so they fit comfortably on smaller screens.
Show related products (Pro)
Expand Settings → Product recommendations and enable Show Related Products to add a “You may also like” area beneath the added product. Choose 2–8 products to display; the initial count is 4. The popup uses WooCommerce related products for the item just added and only includes published, visible products. Availability depends on the relationships and catalog content in your store.
Current limitation: The dashboard also displays a Show Recommended Products switch, but the current storefront popup does not generate a separate recommended-products list from it. Use Show Related Products for working product suggestions.
Customize the appearance
Open the Appearance tab. Start with one of the current presets—Classic, Flyout or Solid Bar—then adjust the controls below. Changing a preset or individual setting updates the sample preview immediately, but you must save to apply it to the storefront.
Free design controls cover the popup heading and success icon, overlay and text colors, price, border and success-icon colors, and primary/secondary button colors.
Pro design controls add popup and product-row backgrounds, typography and text alignment, spacing and dimensions, border and shadow settings, success-icon and close-button details, and entrance animation styles. The Pro popup-width control ranges from 320 to 800 pixels.
Use the desktop, tablet and mobile buttons in Live preview to inspect the sample at different widths. Reset sample resets only the preview example; Reset design resets design controls. The page-header Reset affects the feature settings, so use the reset control that matches what you intend to change.
What Free and Pro include
| Free | Added with Pro |
|---|---|
| Popup confirmation after add to cart; page-display choices; auto-close and animation duration; Classic, Flyout and Solid Bar presets; core content, color and button-color controls. | Mobile visibility switch; action-button visibility and labels; related products; expanded backgrounds, typography, alignment, spacing, borders, shadows, icon and close-button styling, and entrance animation styles. |
Test the storefront result
- Save the feature settings and confirm the header switch is enabled.
- Open a page covered by your Show popup on choice. Add a purchasable product to the cart and wait for the add-to-cart action to complete.
- Check the product, quantity, price, cart count/total and visible actions. If related products are enabled, check that eligible catalog items appear.
- Repeat on a product archive and a single product page if both are in scope. Test mobile separately when using the Pro mobile switch.
If the popup does not appear
- Confirm that the feature is enabled and that you saved changes.
- Check the selected display location. “Single Product Only” will not show the popup on the shop archive, and “Products Archive Only” will not show it on an individual product page.
- Confirm the product was actually added to the cart. An unsuccessful add-to-cart action will not trigger a confirmation.
- If it fails only on mobile, check Show on Mobile Devices in Pro.
- If the page uses caching or custom add-to-cart behavior from a theme or another extension, retest with a standard WooCommerce product after clearing relevant caches.
For related-product questions, see WooCommerce product relationships and make sure eligible products are published and visible. If the popup still does not work with a standard add-to-cart action, contact Swift Commerce support with the affected page URL and the steps to reproduce it.