{"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&p=3047"},"modified":"2026-03-14T20:19:08","modified_gmt":"2026-03-14T20:19:08","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

The Added To Cart Popup displays a confirmation modal when customers add products to their cart. This feature improves the shopping experience by providing immediate feedback, showing cart contents, and offering quick navigation to the cart or checkout. It can also increase sales through upselling with related products.<\/p>\n\n\n\n

Getting Started<\/h3>\n\n\n\n
    \n
  1. Navigate to Swift Commerce \u2192 Added To Cart<\/strong> in your WordPress admin<\/li>\n\n\n\n
  2. Enable the feature using the master toggle<\/li>\n\n\n\n
  3. Configure display settings in the Settings tab<\/li>\n\n\n\n
  4. Customize the popup appearance in the Customization tab<\/li>\n\n\n\n
  5. Save your changes<\/li>\n<\/ol>\n\n\n\n

    When a customer adds a product to the cart, a popup will appear confirming the action and providing options to view cart, proceed to checkout, or continue shopping.<\/p>\n\n\n\n

    \n\n\n\n

    Settings Tab<\/h2>\n\n\n\n

    Display Settings<\/h3>\n\n\n\n

    Control where the popup appears on your store.<\/p>\n\n\n\n

    Option<\/th>Description<\/th><\/tr><\/thead>
    All Pages<\/td>Show popup on all pages of your store<\/td><\/tr>
    Products Archive Only<\/td>Only on shop and category pages<\/td><\/tr>
    Single Product Only<\/td>Only on individual product pages<\/td><\/tr>
    Archive & Single Product<\/td>Both archive and single product pages<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Upselling Features (Pro)<\/em><\/h3>\n\n\n\n

    Boost sales by showing additional products in the popup.<\/p>\n\n\n\n

    Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
    Show Related Products<\/td>Display products related to the added item<\/td>Disabled<\/td><\/tr>
    Number of Related Products<\/td>How many related products to show (2-8)<\/td>4<\/td><\/tr>
    Show Recommended Products<\/td>Display custom recommended products<\/td>Disabled<\/td><\/tr>
    Number of Recommended Products<\/td>How many recommended products to show<\/td>4<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Use Case:<\/strong> Enable related products to encourage customers to add complementary items to their cart, increasing average order value.<\/p>\n\n\n\n

    Mobile & Animation<\/h3>\n\n\n\n
    Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
    Show on Mobile Devices (Pro)<\/em><\/td>Display popup on smartphones and tablets<\/td>Enabled<\/td><\/tr>
    Auto-Close Popup<\/td>Automatically close popup after delay<\/td>Disabled<\/td><\/tr>
    Auto-close delay<\/td>Time before auto-close (2-15 seconds)<\/td>5 seconds<\/td><\/tr>
    Animation Duration<\/td>Speed of popup appear\/disappear (100-500ms)<\/td>300ms<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Tip:<\/strong> Enable auto-close for a less intrusive experience, especially useful on mobile devices where screen space is limited.<\/p>\n\n\n\n

    \n\n\n\n

    Customization Tab<\/h2>\n\n\n\n

    Templates<\/h3>\n\n\n\n

    Choose from pre-designed styles or customize your own:<\/p>\n\n\n\n

    Template<\/th>Description<\/th><\/tr><\/thead>
    Classic<\/td>Clean, professional look with subtle shadows<\/td><\/tr>
    Modern Minimal<\/td>Sleek, minimal design with sharp edges<\/td><\/tr>
    Vibrant<\/td>Bold colors with eye-catching buttons<\/td><\/tr>
    Dark Elegant<\/td>Sophisticated dark theme with gold accents<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Selecting a template applies all its preset colors, typography, and styling. You can further customize any setting after applying a template.<\/p>\n\n\n\n

    Colors<\/h3>\n\n\n\n

    Customize the popup color scheme:<\/p>\n\n\n\n

    Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
    Overlay Color<\/td>Background overlay behind popup<\/td>#000000<\/td><\/tr>
    Overlay Opacity<\/td>Transparency of overlay (0-100%)<\/td>50%<\/td><\/tr>
    Background Color<\/td>Popup container background<\/td>#ffffff<\/td><\/tr>
    Text Color<\/td>General text color<\/td>#374151<\/td><\/tr>
    Heading Color<\/td>Title text color<\/td>#111827<\/td><\/tr>
    Price Color<\/td>Product price color<\/td>#059669<\/td><\/tr>
    Border Color<\/td>Popup border color<\/td>#e5e7eb<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Button Colors<\/h3>\n\n\n\n

    Customize primary and secondary button appearance:<\/p>\n\n\n\n

    Primary Buttons (View Cart, Checkout):<\/strong><\/p>\n\n\n\n

    Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
    Background<\/td>Button fill color<\/td>#18181b<\/td><\/tr>
    Text<\/td>Button text color<\/td>#ffffff<\/td><\/tr>
    Hover Background<\/td>Color on mouse hover<\/td>#27272a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Secondary Button (Continue Shopping):<\/strong><\/p>\n\n\n\n

    Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
    Background<\/td>Button fill color<\/td>#f4f4f5<\/td><\/tr>
    Text<\/td>Button text color<\/td>#18181b<\/td><\/tr>
    Hover Background<\/td>Color on mouse hover<\/td>#e4e4e7<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Typography<\/h3>\n\n\n\n
    Setting<\/th>Options<\/th>Default<\/th><\/tr><\/thead>
    Font Family<\/td>Theme Default, Inter, Roboto, Open Sans, Poppins, Lato, Montserrat<\/td>Theme Default<\/td><\/tr>
    Body Font Size<\/td>12px, 13px, 14px, 15px, 16px, 18px<\/td>14px<\/td><\/tr>
    Heading Font Size<\/td>16px, 18px, 20px, 22px, 24px<\/td>18px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Spacing & Dimensions<\/h3>\n\n\n\n
    Setting<\/th>Description<\/th>Range<\/th>Default<\/th><\/tr><\/thead>
    Popup Width<\/td>Width of the popup container<\/td>320-800px<\/td>480px<\/td><\/tr>
    Content Padding<\/td>Inner spacing of popup content<\/td>12-48px<\/td>24px<\/td><\/tr>
    Item Spacing<\/td>Space between elements inside popup<\/td>8-32px<\/td>16px<\/td><\/tr>
    Max Height<\/td>Maximum popup height<\/td>–<\/td>80vh<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Border & Shadow<\/h3>\n\n\n\n
    Setting<\/th>Options<\/th>Default<\/th><\/tr><\/thead>
    Border Width<\/td>0-4px slider<\/td>1px<\/td><\/tr>
    Border Radius<\/td>None (Square), Small (4px), Medium (8px), Large (12px), Extra Large (16px), Rounded (24px)<\/td>Large (12px)<\/td><\/tr>
    Shadow<\/td>None, Small, Medium, Large, Extra Large<\/td>Large<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Branding<\/h3>\n\n\n\n
    Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
    Show “Powered by Swift Commerce”<\/td>Display branding link at bottom of popup<\/td>Disabled<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Popup Buttons (Pro)<\/em><\/h3>\n\n\n\n

    Configure which buttons appear and their text:<\/p>\n\n\n\n

    Button<\/th>Description<\/th>Default Text<\/th><\/tr><\/thead>
    View Cart Button<\/td>Navigate to cart page<\/td>“View Cart”<\/td><\/tr>
    Checkout Button<\/td>Navigate to checkout<\/td>“Checkout”<\/td><\/tr>
    Continue Shopping Button<\/td>Close popup<\/td>“Continue Shopping”<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Each button can be:<\/p>\n\n\n\n

      \n
    • Enabled or disabled individually<\/li>\n\n\n\n
    • Custom text (when enabled)<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n

      How It Works<\/h2>\n\n\n\n

      Customer Experience<\/h3>\n\n\n\n
        \n
      1. Product Added<\/strong> – Customer clicks “Add to Cart” on any product<\/li>\n\n\n\n
      2. Popup Appears<\/strong> – Modal slides in with product confirmation<\/li>\n\n\n\n
      3. Information Displayed<\/strong> – Shows product name, image, price, and quantity<\/li>\n\n\n\n
      4. Cart Summary<\/strong> – Displays updated cart total and item count<\/li>\n\n\n\n
      5. Action Options<\/strong> – Customer chooses: View Cart, Checkout, or Continue Shopping<\/li>\n<\/ol>\n\n\n\n

        Display Logic<\/h3>\n\n\n\n

        The popup respects your display settings:<\/p>\n\n\n\n

        Page Filtering:<\/strong><\/p>\n\n\n\n

          \n
        • All Pages: Popup works everywhere<\/li>\n\n\n\n
        • Archive Only: Shop, category, and tag pages<\/li>\n\n\n\n
        • Single Only: Individual product pages<\/li>\n\n\n\n
        • Both: Combination of archive and single<\/li>\n<\/ul>\n\n\n\n

          Product Filtering:<\/strong><\/p>\n\n\n\n

            \n
          • All Products: Every product triggers popup<\/li>\n\n\n\n
          • Exclude Specific: Popup for all except blacklisted products<\/li>\n\n\n\n
          • Include Specific: Popup only for whitelisted products<\/li>\n<\/ul>\n\n\n\n

            Cart Display Options<\/h3>\n\n\n\n
            Option<\/th>Behavior<\/th><\/tr><\/thead>
            Added Product Only<\/td>Shows just the product that was added<\/td><\/tr>
            Full Cart<\/td>Shows all items currently in the cart<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
            \n\n\n\n

            Related Products (Pro)<\/em><\/h2>\n\n\n\n

            When “Show Related Products” is enabled:<\/p>\n\n\n\n

              \n
            1. WooCommerce determines related products based on:\n
                \n
              • Same categories<\/li>\n\n\n\n
              • Same tags<\/li>\n\n\n\n
              • Linked products (up-sells, cross-sells)<\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Products display in a grid below the cart content<\/li>\n\n\n\n
              • Each related product shows:\n
                  \n
                • Product image<\/li>\n\n\n\n
                • Product name<\/li>\n\n\n\n
                • Price<\/li>\n\n\n\n
                • Link to product page<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n

                  Configuration:<\/strong><\/p>\n\n\n\n

                    \n
                  • Set the number of products (2-8)<\/li>\n\n\n\n
                  • Products are pulled from WooCommerce’s related products logic<\/li>\n<\/ul>\n\n\n\n
                    \n\n\n\n

                    Mobile Behavior (Pro)<\/em><\/h2>\n\n\n\n

                    The popup is fully responsive by default. With Pro, you can:<\/p>\n\n\n\n

                      \n
                    • Disable on Mobile<\/strong> – Turn off popup for smaller screens<\/li>\n\n\n\n
                    • Useful if you prefer a different mobile cart experience<\/li>\n\n\n\n
                    • Mobile detection uses WordPress’s wp_is_mobile()<\/code> function<\/li>\n<\/ul>\n\n\n\n

                      Best Practices for Mobile:<\/strong><\/p>\n\n\n\n

                        \n
                      • Keep popup width at 320-400px for small screens<\/li>\n\n\n\n
                      • Enable auto-close to reduce friction<\/li>\n\n\n\n
                      • Consider shorter animation duration (100-200ms)<\/li>\n<\/ul>\n\n\n\n
                        \n\n\n\n

                        Auto-Close Feature<\/h2>\n\n\n\n

                        When enabled, the popup automatically closes after a specified delay:<\/p>\n\n\n\n

                        Setting<\/th>Range<\/th>Default<\/th><\/tr><\/thead>
                        Auto-Close Delay<\/td>2-15 seconds<\/td>5 seconds<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

                        When to Use:<\/strong><\/p>\n\n\n\n

                          \n
                        • High-volume stores where customers add multiple items quickly<\/li>\n\n\n\n
                        • Mobile shopping experiences<\/li>\n\n\n\n
                        • When you want minimal interruption to browsing<\/li>\n<\/ul>\n\n\n\n

                          Note:<\/strong> Customers can still manually close the popup before auto-close triggers.<\/p>\n","protected":false},"excerpt":{"rendered":"

                          The Added To Cart Popup displays a confirmation modal when customers add products to their cart. This feature improves the shopping experience by providing immediate feedback, showing cart contents, and offering quick navigation to the cart or checkout. It can also increase sales through upselling with related products. Getting Started When a customer adds a […]<\/p>\n","protected":false},"author":101,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[74],"doc_tag":[],"class_list":["post-3047","docs","type-docs","status-publish","hentry","doc_category-popups"],"year_month":"2026-09","word_count":878,"total_views":"133","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":3,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs\/3047\/revisions"}],"predecessor-version":[{"id":3265,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs\/3047\/revisions\/3265"}],"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}]}}