How to show a popup on a Divi website after page loads?

Creating a WooCommerce-Specific Popup in Divi

Solution Overview

To create a shop-specific popup that appears once per visitor, we can use one of these approaches:

1. Using a popup plugin (recommended for non-developers)
2. Custom code solution (more control, but requires development knowledge)

Using a Plugin (Easier Approach)

Recommended Plugins:

1. Popup Maker (Free)

• Perfect for Divi integration
• WooCommerce-specific targeting
• Cookie-based display control
• Get Popup Maker

2. Divi Supreme Pro (Premium)

• Native Divi integration
• Advanced targeting options
• Get Divi Supreme Pro

Custom Code Solution

First, add this code to your child theme's functions.php:

This code checks if we're on a WooCommerce page and enqueues necessary scripts:

function custom_popup_scripts() {
    if (is_shop() || is_product_category() || is_product()) {
        wp_enqueue_script('custom-popup', get_stylesheet_directory_uri() . '/js/popup.js', array('jquery'), '1.0', true);
        wp_enqueue_style('custom-popup-style', get_stylesheet_directory_uri() . '/css/popup.css');
    }
}
add_action('wp_enqueue_scripts', 'custom_popup_scripts');

Add this HTML to your footer.php (before closing body tag):

<?php if (is_shop() || is_product_category() || is_product()): ?>
    <div id="custom-popup" class="popup-overlay">
        <div class="popup-content">
            <span class="close-popup">&times;</span>
            <h3>Your Popup Title</h3>
            <p>Your popup content goes here</p>
        </div>
    </div>
<?php endif; ?>

Create a new file popup.css in your child theme's css folder:

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 999999;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 90%;
}

.close-popup {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 24px;
}

Create a new file popup.js in your child theme's js folder:

jQuery(document).ready(function($) {
    if (!localStorage.getItem('popupShown')) {
        setTimeout(function() {
            $('#custom-popup').fadeIn();
        }, 1000);
    }

    $('.close-popup').click(function() {
        $('#custom-popup').fadeOut();
        localStorage.setItem('popupShown', 'true');
    });
});

Best Practices & Security Considerations

1. Always use a child theme for custom code
2. Properly escape output in popup content
3. Use localStorage instead of cookies for better performance
4. Add proper mobile responsiveness
5. Consider page load speed impact

Common Pitfalls to Avoid

1. Don't forget to check for WooCommerce activation
2. Avoid conflicts with other popups
3. Don't set z-index too low
4. Consider GDPR compliance for cookie/storage usage
5. Test on various browsers and devices

Alternative Approaches

1. Use Divi's built-in condition options to show/hide sections
2. Implement as a WooCommerce notice instead of popup
3. Use WordPress AJAX for more dynamic content

Remember to test thoroughly on a staging site before implementing on production, especially if using the custom code approach.