How to Add Confetti/Party Popper Effect on WooCommerce Order Success Page

Adding a confetti or party popper effect to your WooCommerce order success page is a great way to enhance user experience and celebrate completed purchases. This effect can make your website more engaging and leave a lasting impression on your customers. In this guide, we’ll walk you through the step-by-step process to add a confetti effect using @tsparticles/confetti in WordPress.

Why Add a Confetti Effect?

A confetti animation on the order success page:

• Creates a celebratory experience for customers.
• Enhances the overall user experience.
• Helps reinforce brand identity with fun, interactive elements.

How to Implement the Confetti Effect

To achieve this, we will:

1. Use the WooCommerce woocommerce_thankyou hook to inject our confetti effect.
2. Load the @tsparticles/confetti script.
3. Use JavaScript to trigger the confetti effect when the page loads.
4. Extend the duration of the confetti effect for a more immersive experience.

Step 1: Add the Confetti Effect Using woocommerce_thankyou Hook

WooCommerce provides the woocommerce_thankyou hook, which allows us to execute custom code when an order is completed. We will use this hook to include our confetti script.

Add the following code to your WordPress theme’s functions.php file:

add_action('woocommerce_thankyou', 'add_confetti_effect_to_thankyou_page', 10);
function add_confetti_effect_to_thankyou_page() {
    ?>
    <!-- Wrapper with unique ID -->
    <div id="thank-you-confetti">
        <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Set the confetti duration in milliseconds
                const confettiDuration = 5000; // 5 seconds
                const intervalTime = 500; // Interval between each confetti trigger

                const interval = setInterval(function() {
                    confetti({
                        particleCount: 300,
                        spread: 90,
                        origin: { x: Math.random(), y: 0.9 },
                    });
                }, intervalTime);

                // Stop the confetti after the specified duration
                setTimeout(function() {
                    clearInterval(interval);
                }, confettiDuration);
            });
        </script>
    </div>
    <?php
}

Step 2: Understanding the Code

1. Hooking into woocommerce_thankyou: This ensures the confetti effect runs only on the WooCommerce order success page.
2. Loading the Confetti Script: The script from @tsparticles/confetti is loaded via a CDN for easy integration.
3. Triggering the Confetti Effect: Using document.addEventListener(‘DOMContentLoaded’, function() { … }), we ensure the confetti effect triggers when the page loads.
4. Extending the Confetti Duration: Instead of firing the confetti once, we use setInterval to continuously trigger confetti for 5 seconds and then stop it using setTimeout.

Step 3: Test the Confetti Effect

After adding the code to your functions.php, follow these steps to test:

1. Clear Cache: Ensure that your browser cache and any WordPress caching plugins are cleared.
2. Place a Test Order: Complete a test order in WooCommerce to reach the order success page.
3. Check the Console: If the confetti effect doesn’t appear, open the browser console (F12 > Console) to check for any errors.

Conclusion

Adding a confetti effect to your WooCommerce order success page is a simple but effective way to enhance user experience. By using the woocommerce_thankyou hook and the @tsparticles/confetti library, you can create a fun, celebratory effect that engages customers.

Implement this on your WooCommerce store today and surprise your customers with a delightful celebration every time they make a purchase!

This blog post is perfect for your WordPress portfolio website, showcasing your ability to enhance WooCommerce with interactive elements. Let me know if you’d like any modifications!