Add To Cart

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

1. Navigate to Swift Commerce → Added To Cart in your WordPress admin
2. Enable the feature using the master toggle
3. Configure display settings in the Settings tab
4. Customize the popup appearance in the Customization tab
5. Save your changes

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.

---

Settings Tab #

Display Settings

Control where the popup appears on your store.

Option	Description
All Pages	Show popup on all pages of your store
Products Archive Only	Only on shop and category pages
Single Product Only	Only on individual product pages
Archive & Single Product	Both archive and single product pages

Upselling Features (Pro)

Boost sales by showing additional products in the popup.

Setting	Description	Default
Show Related Products	Display products related to the added item	Disabled
Number of Related Products	How many related products to show (2-8)	4
Show Recommended Products	Display custom recommended products	Disabled
Number of Recommended Products	How many recommended products to show	4

Use Case: Enable related products to encourage customers to add complementary items to their cart, increasing average order value.

Mobile & Animation

Setting	Description	Default
Show on Mobile Devices (Pro)	Display popup on smartphones and tablets	Enabled
Auto-Close Popup	Automatically close popup after delay	Disabled
Auto-close delay	Time before auto-close (2-15 seconds)	5 seconds
Animation Duration	Speed of popup appear/disappear (100-500ms)	300ms

Tip: Enable auto-close for a less intrusive experience, especially useful on mobile devices where screen space is limited.

---

Customization Tab #

Templates

Choose from pre-designed styles or customize your own:

Template	Description
Classic	Clean, professional look with subtle shadows
Modern Minimal	Sleek, minimal design with sharp edges
Vibrant	Bold colors with eye-catching buttons
Dark Elegant	Sophisticated dark theme with gold accents

Selecting a template applies all its preset colors, typography, and styling. You can further customize any setting after applying a template.

Colors

Customize the popup color scheme:

Setting	Description	Default
Overlay Color	Background overlay behind popup	#000000
Overlay Opacity	Transparency of overlay (0-100%)	50%
Background Color	Popup container background	#ffffff
Text Color	General text color	#374151
Heading Color	Title text color	#111827
Price Color	Product price color	#059669
Border Color	Popup border color	#e5e7eb

Button Colors

Customize primary and secondary button appearance:

Primary Buttons (View Cart, Checkout):

Setting	Description	Default
Background	Button fill color	#18181b
Text	Button text color	#ffffff
Hover Background	Color on mouse hover	#27272a

Secondary Button (Continue Shopping):

Setting	Description	Default
Background	Button fill color	#f4f4f5
Text	Button text color	#18181b
Hover Background	Color on mouse hover	#e4e4e7

Typography

Setting	Options	Default
Font Family	Theme Default, Inter, Roboto, Open Sans, Poppins, Lato, Montserrat	Theme Default
Body Font Size	12px, 13px, 14px, 15px, 16px, 18px	14px
Heading Font Size	16px, 18px, 20px, 22px, 24px	18px

Spacing & Dimensions

Setting	Description	Range	Default
Popup Width	Width of the popup container	320-800px	480px
Content Padding	Inner spacing of popup content	12-48px	24px
Item Spacing	Space between elements inside popup	8-32px	16px
Max Height	Maximum popup height	–	80vh

Border & Shadow

Setting	Options	Default
Border Width	0-4px slider	1px
Border Radius	None (Square), Small (4px), Medium (8px), Large (12px), Extra Large (16px), Rounded (24px)	Large (12px)
Shadow	None, Small, Medium, Large, Extra Large	Large

Branding

Setting	Description	Default
Show “Powered by Swift Commerce”	Display branding link at bottom of popup	Disabled

Popup Buttons (Pro)

Configure which buttons appear and their text:

Button	Description	Default Text
View Cart Button	Navigate to cart page	“View Cart”
Checkout Button	Navigate to checkout	“Checkout”
Continue Shopping Button	Close popup	“Continue Shopping”

Each button can be:

• Enabled or disabled individually
• Custom text (when enabled)

---

How It Works #

Customer Experience

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

Display Logic

The popup respects your display settings:

Page Filtering:

• All Pages: Popup works everywhere
• Archive Only: Shop, category, and tag pages
• Single Only: Individual product pages
• Both: Combination of archive and single

Product Filtering:

• All Products: Every product triggers popup
• Exclude Specific: Popup for all except blacklisted products
• Include Specific: Popup only for whitelisted products

Cart Display Options

Option	Behavior
Added Product Only	Shows just the product that was added
Full Cart	Shows all items currently in the cart

---

Related Products (Pro) #

When “Show Related Products” is enabled:

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

Configuration:

• Set the number of products (2-8)
• Products are pulled from WooCommerce’s related products logic

---

Mobile Behavior (Pro) #

The popup is fully responsive by default. With Pro, you can:

• Disable on Mobile – Turn off popup for smaller screens
• Useful if you prefer a different mobile cart experience
• Mobile detection uses WordPress’s wp_is_mobile() function

Best Practices for Mobile:

• Keep popup width at 320-400px for small screens
• Enable auto-close to reduce friction
• Consider shorter animation duration (100-200ms)

---

Auto-Close Feature #

When enabled, the popup automatically closes after a specified delay:

Setting	Range	Default
Auto-Close Delay	2-15 seconds	5 seconds

When to Use:

• High-volume stores where customers add multiple items quickly
• Mobile shopping experiences
• When you want minimal interruption to browsing

Note: Customers can still manually close the popup before auto-close triggers.

---

Styling Examples #

Minimalist Theme

Background: #ffffff
Text: #1f2937
Heading: #000000
Border Radius: 4px (Small)
Shadow: Small
Border Width: 0

Bold & Colorful

Background: #ffffff
Heading: #7c3aed (Purple)
Primary Button: #7c3aed
Border Radius: 16px
Shadow: Extra Large

Dark Mode

Background: #1f2937
Text: #d1d5db
Heading: #f9fafb
Price: #fbbf24 (Gold)
Primary Button: #fbbf24
Shadow: Large

---

Integration with WooCommerce #

The popup integrates seamlessly with WooCommerce:

Hooks Used

• woocommerce_add_to_cart_fragments – Updates cart data
• wc-add-to-cart – Listens for add-to-cart events

Data Provided

Data	Source
Product Name	$product->get_name()
Product Price	$product->get_price_html()
Product Image	Product thumbnail
Cart Total	WC()->cart->get_cart_total()
Cart Count	WC()->cart->get_cart_contents_count()

URLs

• View Cart: wc_get_cart_url()
• Checkout: wc_get_checkout_url()

---

Troubleshooting #

Popup Not Appearing

1. Verify the feature is enabled
2. Check “Display Pages” setting matches current page type
3. Confirm product isn’t in excluded list (if using filters)
4. Check for JavaScript errors in browser console
5. Verify WooCommerce AJAX add-to-cart is enabled

Styling Conflicts

1. Use “Theme Default” font to inherit theme styles
2. Increase popup z-index if hidden behind other elements
3. Check for !important CSS overrides in your theme

Mobile Issues

1. Ensure “Show on Mobile” is enabled (Pro)
2. Test with smaller popup width (320-400px)
3. Enable auto-close for better mobile UX

Cart Data Not Updating

1. Clear any caching plugins
2. Verify WooCommerce fragments are not blocked
3. Check AJAX requests in browser Network tab

---

Feature Comparison #

Feature	Free	Pro
Basic popup on add to cart	✓	✓
Display page selection	✓	✓
Pre-designed templates	✓	✓
Color customization	✓	✓
Typography customization	✓	✓
Spacing & dimensions	✓	✓
Border & shadow options	✓	✓
Auto-close timer	✓	✓
Animation speed control	✓	✓
Branding toggle	✓	✓
Related products	✗	✓
Recommended products	✗	✓
Show/hide on mobile	✗	✓
Product filtering (include/exclude)	✗	✓
Custom button text	✗	✓
Show/hide individual buttons	✗	✓
Full cart display mode	✗	✓