Woo Add-to-Cart Popup Trigger

Automatically triggers Elementor Pro popups when specific WooCommerce add-to-cart parameters are detected in the URL.

Description

The Woo Add-to-Cart Popup Trigger plugin seamlessly integrates WooCommerce with Elementor Pro to create dynamic popup experiences. When visitors access your site with specific add-to-cart URL parameters, the plugin automatically triggers your custom Elementor Pro popup after a configurable delay.

Key Features

✅ Automatic Popup Triggering - Detects specific add-to-cart parameters and shows popups
✅ Elementor Pro Integration - Native integration with Elementor Pro popup system
✅ Clean URL Management - Removes query parameters after popup trigger
✅ Smart Loading - Only loads required scripts when needed
✅ Error Handling - Comprehensive error checking and console logging
✅ No Configuration Required - Works out of the box

Perfect For

• E-commerce stores wanting to show special offers after add-to-cart actions
• Marketing campaigns with targeted popup content
• Product promotions triggered by specific product additions
• Cross-selling opportunities with related product popups
• Thank you messages after cart additions

Installation

Automatic Installation

1. Log in to your WordPress admin dashboard
2. Navigate to Plugins > Add New
3. Search for "Woo Add-to-Cart Popup Trigger"
4. Click Install Now and then Activate

Manual Installation

1. Download the plugin ZIP file
2. Log in to your WordPress admin dashboard
3. Navigate to Plugins > Add New > Upload Plugin
4. Choose the ZIP file and click Install Now
5. Click Activate Plugin

FTP Installation

1. Download and unzip the plugin files
2. Upload the woo-add-to-cart-popup-trigger folder to /wp-content/plugins/
3. Log in to WordPress admin and navigate to Plugins
4. Find "Woo Add-to-Cart Popup Trigger" and click Activate

Requirements

Essential Requirements

• WordPress: 5.0 or higher
• PHP: 7.4 or higher
• WooCommerce: 4.0 or higher
• Elementor: Latest version
• Elementor Pro: Latest version (required for popup functionality)

Recommended Environment

• PHP: 8.0 or higher for optimal performance
• MySQL: 5.6 or higher / MariaDB 10.1 or higher
• WordPress Memory Limit: 256MB or higher

Setup Guide

Step 1: Create Your Popup in Elementor Pro

1. Go to Templates > Popups in your WordPress admin
2. Click Add New and choose Popup
3. Design your popup content using Elementor Pro
4. Important: Set the popup ID to product-popup-123 in the popup settings
5. Configure popup display conditions (leave as manual trigger)
6. Publish your popup

Step 2: Configure Product URLs

The plugin automatically triggers for these add-to-cart parameter values:

• 5074
• 679

Example URLs that will trigger the popup:

https://yoursite.com/shop/?add-to-cart=5074
https://yoursite.com/product/item/?add-to-cart=679

Step 3: Test the Functionality

1. Visit one of your test URLs with the add-to-cart parameter
2. Wait 800ms - the popup should appear automatically
3. Check that the URL parameter is removed after popup display
4. Open browser console to view debug messages

Usage Examples

Basic Usage

<!-- Product link that triggers popup -->
<a href="https://yoursite.com/shop/?add-to-cart=5074">
    Add Special Product to Cart
</a>

WooCommerce Integration

// Generate add-to-cart URL for specific products
$product_id = 5074; // Target product ID
$cart_url = wc_get_cart_url() . '?add-to-cart=' . $product_id;
echo '<a href="' . esc_url($cart_url) . '">Add to Cart with Popup</a>';

Email Marketing

Use these URLs in your email campaigns:

https://yoursite.com/special-offer/?add-to-cart=5074
https://yoursite.com/limited-time/?add-to-cart=679

Customization

Changing Target Product IDs

To modify which product IDs trigger the popup, edit the plugin file:

// In woo-add-to-cart-popup-trigger.php, find this line:
if (addToCartParam === '5074' || addToCartParam === '679') {

// Change to your desired product IDs:
if (addToCartParam === '1234' || addToCartParam === '5678') {

Adjusting Popup Delay

To change the 800ms delay:

// Find this line in the plugin:
}, 800); // 800ms delay

// Change to your preferred delay:
}, 1200); // 1200ms delay (1.2 seconds)

Custom Popup ID

To use a different popup ID:

// Find this line:
elementorPro.widgets.popup.showPopup('product-popup-123');

// Change to your popup ID:
elementorPro.widgets.popup.showPopup('your-custom-popup-id');

Troubleshooting

Popup Not Showing

1. Check Elementor Pro is active

   • Verify Elementor Pro plugin is installed and activated
   • Ensure your license is valid

2. Verify popup ID

   • Confirm your popup ID is exactly product-popup-123
   • Check popup is published, not draft

3. Check console for errors

   • Open browser Developer Tools (F12)
   • Look for plugin messages in Console tab

4. Verify URL parameters

   • Ensure add-to-cart value is exactly 5074 or 679
   • Check URL encoding is correct

Scripts Not Loading

1. Check plugin conflicts

   • Temporarily deactivate other plugins
   • Test with default WordPress theme

2. Verify requirements

   • Confirm WooCommerce is active
   • Check PHP version meets requirements

3. Clear caching

   • Clear any caching plugins
   • Clear browser cache

Common Issues

Issue: Popup shows but URL parameter remains
Solution: Check browser console for JavaScript errors

Issue: Multiple popups appear
Solution: Ensure only one popup has the target ID

Issue: Popup appears on every page load
Solution: Verify URL parameters are being properly detected

Developer Hooks

Action Hooks

Currently, the plugin doesn't provide custom hooks, but you can extend functionality by modifying the class methods.

Filter Examples

// Example: Custom product IDs (requires plugin modification)
add_filter('woo_popup_trigger_product_ids', function($ids) {
    return array('1234', '5678', '9999');
});

FAQ

Q: Can I use different popup IDs?
A: Yes, but you'll need to modify the plugin code to change product-popup-123 to your desired ID.

Q: Will this work with Elementor Free?
A: No, this plugin requires Elementor Pro for popup functionality.

Q: Can I add more product IDs?
A: Yes, modify the JavaScript condition in the plugin file to include additional IDs.

Q: Does this affect site performance?
A: Minimal impact - scripts only load when Elementor Pro is active, and execution only occurs when URL parameters match.

Q: Is it compatible with caching plugins?
A: Yes, the plugin uses client-side JavaScript which works with most caching solutions.

Support

Getting Help

• Documentation: This README file
• Issues: Report bugs on GitHub
• Support: Contact SPARKWEB Studio

Professional Support

For custom modifications, setup assistance, or advanced integrations, contact SPARKWEB Studio:

• Website: https://sparkwebstudio.com
• Email: Contact through website
• Services: WordPress development, WooCommerce customization, Elementor design

Contributing

We welcome contributions! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This plugin is licensed under the GPL v2 or later.

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

---

Developed by SPARKWEB Studio - Professional WordPress & WooCommerce Development