{"id":3047,"date":"2025-12-27T21:05:11","date_gmt":"2025-12-27T21:05:11","guid":{"rendered":"https:\/\/www.swiftcommerce.io\/help\/?post_type=docs&#038;p=3047"},"modified":"2026-11-07T11:42:54","modified_gmt":"2026-11-07T11:42:54","password":"","slug":"add-to-cart","status":"publish","type":"docs","link":"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/","title":{"rendered":"Add To Cart Popup"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set up the popup<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In WordPress admin, open <strong>Swift Commerce \u2192 Add to Cart Popup<\/strong>.<\/li>\n\n\n\n<li>Turn on the feature with the switch in the page header.<\/li>\n\n\n\n<li>On <strong>Settings<\/strong>, choose where the popup should appear. Adjust the timing and Pro options if needed.<\/li>\n\n\n\n<li>Open <strong>Appearance<\/strong> to choose a preset and preview your changes.<\/li>\n\n\n\n<li>Select <strong>Save Changes<\/strong> in the page header, then add a product to the cart on your storefront to test it.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Important:<\/strong> The Appearance live preview uses sample products and does not change a real cart. Changes in the preview are not saved until you select <strong>Save Changes<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"900\" src=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard.jpeg\" alt=\"Swift Commerce Add to Cart Popup Settings tab showing where the popup can appear and the timing, buttons, and recommendation sections.\" class=\"wp-image-3305\" srcset=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard.jpeg 1000w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-300x270.jpeg 300w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-768x691.jpeg 768w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-360x324.jpeg 360w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Choose where the popup appears<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use <strong>Settings \u2192 Display settings \u2192 Show popup on<\/strong>. \u201cAll Pages\u201d 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.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Option<\/th><th>Where it can appear<\/th><\/tr><\/thead><tbody><tr><td>All Pages<\/td><td>Any storefront page where an add-to-cart action occurs.<\/td><\/tr><tr><td>Products Archive Only<\/td><td>The shop, product-category and product-tag archives.<\/td><\/tr><tr><td>Single Product Only<\/td><td>Individual product pages.<\/td><\/tr><tr><td>Archive &amp; Single Product<\/td><td>Product archives and individual product pages.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Set timing and mobile visibility<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Expand <strong>Settings \u2192 Timing &amp; display<\/strong> to configure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Auto-Close Popup (Free):<\/strong> 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.<\/li>\n\n\n\n<li><strong>Animation Duration (Free):<\/strong> Set how quickly the popup enters and exits, from 100 to 500 milliseconds. The default is 300 milliseconds.<\/li>\n\n\n\n<li><strong>Show on Mobile Devices (Pro):<\/strong> Control whether the popup appears on mobile devices. It is on by default.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Choose the popup actions (Pro)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Expand <strong>Settings \u2192 Popup buttons<\/strong>. Show or hide the <strong>View Cart<\/strong>, <strong>Checkout<\/strong> and <strong>Continue Shopping<\/strong> actions independently, and edit each button label. These controls are Pro-only; the Free popup uses its built-in actions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Show related products (Pro)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Expand <strong>Settings \u2192 Product recommendations<\/strong> and enable <strong>Show Related Products<\/strong> to add a \u201cYou may also like\u201d area beneath the added product. Choose 2\u20138 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Current limitation:<\/strong> The dashboard also displays a <strong>Show Recommended Products<\/strong> switch, but the current storefront popup does not generate a separate recommended-products list from it. Use Show Related Products for working product suggestions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customize the appearance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <strong>Appearance<\/strong> tab. Start with one of the current presets\u2014<strong>Classic<\/strong>, <strong>Flyout<\/strong> or <strong>Solid Bar<\/strong>\u2014then 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-1-1024x512.jpeg\" alt=\"Swift Commerce Add to Cart Popup Appearance tab with Classic, Flyout, and Solid Bar presets beside the live preview.\" class=\"wp-image-3306\" srcset=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-1-1024x512.jpeg 1024w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-1-300x150.jpeg 300w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-1-360x180.jpeg 360w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-1-768x384.jpeg 768w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2025\/12\/clipboard-1.jpeg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Free design controls<\/strong> cover the popup heading and success icon, overlay and text colors, price, border and success-icon colors, and primary\/secondary button colors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pro design controls<\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the desktop, tablet and mobile buttons in <strong>Live preview<\/strong> to inspect the sample at different widths. <strong>Reset sample<\/strong> resets only the preview example; <strong>Reset design<\/strong> resets design controls. The page-header <strong>Reset<\/strong> affects the feature settings, so use the reset control that matches what you intend to change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Free and Pro include<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Free<\/th><th>Added with Pro<\/th><\/tr><\/thead><tbody><tr><td>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.<\/td><td>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.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Test the storefront result<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Save the feature settings and confirm the header switch is enabled.<\/li>\n\n\n\n<li>Open a page covered by your <strong>Show popup on<\/strong> choice. Add a purchasable product to the cart and wait for the add-to-cart action to complete.<\/li>\n\n\n\n<li>Check the product, quantity, price, cart count\/total and visible actions. If related products are enabled, check that eligible catalog items appear.<\/li>\n\n\n\n<li>Repeat on a product archive and a single product page if both are in scope. Test mobile separately when using the Pro mobile switch.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">If the popup does not appear<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Confirm that the feature is enabled and that you saved changes.<\/li>\n\n\n\n<li>Check the selected display location. \u201cSingle Product Only\u201d will not show the popup on the shop archive, and \u201cProducts Archive Only\u201d will not show it on an individual product page.<\/li>\n\n\n\n<li>Confirm the product was actually added to the cart. An unsuccessful add-to-cart action will not trigger a confirmation.<\/li>\n\n\n\n<li>If it fails only on mobile, check <strong>Show on Mobile Devices<\/strong> in Pro.<\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<script type=\"application\/ld+json\" data-swift-commerce-documentation-schema=\"1\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/#article\",\"url\":\"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/\",\"headline\":\"Add To Cart Popup\",\"description\":\"Set up the WooCommerce Add to Cart Popup, configure cart actions and product recommendations, and adjust its appearance in Swift Commerce.\",\"inLanguage\":\"en\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/#webpage\"},\"publisher\":{\"@type\":\"Organization\",\"name\":\"Swift Commerce\",\"url\":\"https:\/\/swiftcommerce.io\/\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/#webpage\",\"url\":\"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/\",\"name\":\"Add To Cart Popup\",\"description\":\"Set up the WooCommerce Add to Cart Popup, configure cart actions and product recommendations, and adjust its appearance in Swift Commerce.\",\"inLanguage\":\"en\",\"breadcrumb\":{\"@id\":\"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Documentation\",\"item\":\"https:\/\/www.swiftcommerce.io\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Popups\",\"item\":\"https:\/\/www.swiftcommerce.io\/help\/docs-category\/popups\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Add To Cart Popup\",\"item\":\"https:\/\/www.swiftcommerce.io\/help\/popups\/add-to-cart\/\"}]}]}<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Set up the WooCommerce Add to Cart Popup, configure cart actions and product recommendations, and adjust its appearance in Swift Commerce.<\/p>\n","protected":false},"author":101,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[74],"doc_tag":[],"class_list":["post-3047","docs","type-docs","status-publish","hentry","doc_category-popups"],"year_month":"2026-11","word_count":945,"total_views":"141","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Mansoor Ahmad","author_nicename":"helpadmin","author_url":"https:\/\/www.swiftcommerce.io\/help\/author\/helpadmin\/"},"doc_category_info":[{"term_name":"Popups","term_url":"https:\/\/www.swiftcommerce.io\/help\/docs-category\/popups\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs\/3047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/users\/101"}],"replies":[{"embeddable":true,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/comments?post=3047"}],"version-history":[{"count":5,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs\/3047\/revisions"}],"predecessor-version":[{"id":3392,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs\/3047\/revisions\/3392"}],"wp:attachment":[{"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/media?parent=3047"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/doc_category?post=3047"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/doc_tag?post=3047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}