AboveWP Add To Cart Upsell Popup

AboveWP Add To Cart Upsell Popup is a powerful WordPress plugin that displays upsell products in a beautiful popup after customers add items to their cart. Now enhanced for universal theme compatibility!

✨ Key Features

• Universal Theme Compatibility: Works with any WordPress theme, including custom themes, Elementor, and page builders
• Multiple Add-to-Cart Detection Methods: Supports both AJAX and non-AJAX add-to-cart scenarios
• Flexible Upsell Sources: Choose from WooCommerce upsells, global products, or category-based upsells
• Responsive Design: Optimized for all devices and screen sizes
• Customizable Appearance: Colors, text, and button visibility options
• Performance Optimized: Lightweight and cache-friendly
• Accessibility Ready: WCAG compliant with keyboard navigation and screen reader support

🔧 Enhanced Compatibility Features

Add-to-Cart Detection
The plugin now uses 5 different methods to detect add-to-cart actions:

1. WooCommerce AJAX Events: Standard added_to_cart event
2. Form Submission Monitoring: Detects non-AJAX form submissions
3. Universal Button Clicking: Monitors all types of add-to-cart buttons
4. URL Parameter Detection: Handles redirects with add-to-cart parameters
5. Success Message Detection: Detects WooCommerce success messages

Supported Add-to-Cart Button Types
* Standard WooCommerce buttons (.single_add_to_cart_button, .add_to_cart_button)
* AJAX buttons (.ajax_add_to_cart, .product_type_simple)
* Custom theme buttons ([name="add-to-cart"], .wc-add-to-cart)
* Page builder buttons (Elementor, Gutenberg blocks)
* Custom implementations with data attributes

Theme Compatibility
* ✅ Storefront: Full compatibility (as before)
* ✅ Astra: Full compatibility
* ✅ GeneratePress: Full compatibility
* ✅ OceanWP: Full compatibility
* ✅ Divi: Full compatibility
* ✅ Elementor Pro: Full compatibility
* ✅ Custom Themes: Enhanced detection methods ensure compatibility

🎯 Upsell Sources

1. WooCommerce Upsells
Uses the built-in WooCommerce upsells defined for each product.

2. Global Products
Define specific product IDs to show as upsells for all products.
Example: 123, 456, 789

3. Category-based Upsells
Set different upsell products for each product category.

🎨 Customization Options

• Popup Title: Customize the header text
• Success Message: Personalize the “added to cart” message
• Button Text: Customize all button labels
• Colors: Set colors for prices and buttons
• Button Visibility: Show/hide View Cart, Checkout, and Continue Shopping buttons

🌐 Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+
• Internet Explorer 11 (limited support)

⚡ Performance Metrics

• JavaScript Bundle: ~15KB minified
• CSS Bundle: ~5KB minified
• Page Load Impact: <100ms
• Memory Usage: <1MB
  

  External Services

  This plugin loads the Inter font from Bunny Fonts (https://fonts.bunny.net) on the plugin’s admin settings pages. This is used to style the plugin’s administration interface. No user data is sent to this service; only a standard HTTP request is made to load the font CSS file. This request is only made when an admin user visits the plugin’s settings pages.

Bunny Fonts is a GDPR-compliant font delivery service provided by BunnyWay d.o.o.

• Service: Bunny Fonts
• Terms of Service: https://bunny.net/tos/
• Privacy Policy: https://bunny.net/privacy/

Developer Information

Hooks and Filters

Actions
// Before popup is shown
do_action(‘abovewp_atc_before_popup’, $product_id, $upsell_data);

// After popup is shown
do_action('abovewp_atc_after_popup', $product_id, $upsell_data);

Filters
// Modify upsell data
$upsell_data = apply_filters(‘abovewp_atc_upsell_data’, $upsell_data, $product_id);

// Modify popup HTML
$popup_html = apply_filters('abovewp_atc_popup_html', $popup_html, $upsell_data);

// Add custom button selectors
$selectors = apply_filters('abovewp_atc_button_selectors', $selectors);

Custom Integration

// Manually trigger popup with custom data
if (typeof AtcPopupUpsell !== 'undefined') {
    AtcPopupUpsell.showPopup({
        added_product_name: 'Product Name',
        upsell_products: [
            {
                id: 123,
                name: 'Upsell Product',
                price_html: '$19.99',
                image: 'image-url.jpg'
            }
        ]
    });
}