📌 Cum să Adaugi un Efect de Confetti la Finalizarea Comenzii în WooCommerce 🎊

YouTube Logo Urmărește canalul nostru de YouTube

✅ Vrei să îți impresionezi clienții și să le oferi o experiență memorabilă? Adaugă efecte vizuale de confetti și un mesaj animat de mulțumire atunci când o comandă este finalizată în WooCommerce!

Acest efect creează o experiență premium pentru cumpărători, îi face să se simtă apreciați și crește rata de fidelizare. 🎯


🎯 Ce Vom Face?

📌 Vom implementa un efect animat de confetti care se activează automat după plasarea unei comenzi.
📌 Vom adăuga un mesaj de mulțumire animat care dispare după câteva secunde.

💡 Acest sistem este simplu de adăugat și nu afectează viteza site-ului! 🚀


🔹 Pasul 1: Adaugă Codul în WordPress

Pentru a activa confetti și mesajul animat, adaugă acest cod în functions.php sau în Code Snippets:

add_action('wp_footer', 'add_confetti_on_order_complete');
function add_confetti_on_order_complete() {
    if (is_wc_endpoint_url('order-received')) {
        ?>
        <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Confetti cu efect animat
                function launchConfetti() {
                    var duration = 3 * 1000;
                    var end = Date.now() + duration;

                    (function frame() {
                        confetti({
                            particleCount: 7,
                            angle: 60,
                            spread: 55,
                            origin: { x: 0 }
                        });
                        confetti({
                            particleCount: 7,
                            angle: 120,
                            spread: 55,
                            origin: { x: 1 }
                        });

                        if (Date.now() < end) {
                            requestAnimationFrame(frame);
                        }
                    })();
                }

                // Afișează mesaj de mulțumire animat
                function showThankYouMessage() {
                    var thankYouMessage = document.createElement('div');
                    thankYouMessage.innerHTML = "🎉 Mulțumim pentru comandă! Ne ocupăm de ea imediat! 🚀";
                    thankYouMessage.style.position = "fixed";
                    thankYouMessage.style.bottom = "20px";
                    thankYouMessage.style.left = "50%";
                    thankYouMessage.style.transform = "translateX(-50%)";
                    thankYouMessage.style.background = "#ff6600";
                    thankYouMessage.style.color = "white";
                    thankYouMessage.style.padding = "15px 25px";
                    thankYouMessage.style.borderRadius = "10px";
                    thankYouMessage.style.fontSize = "18px";
                    thankYouMessage.style.fontWeight = "bold";
                    thankYouMessage.style.boxShadow = "0px 5px 10px rgba(0,0,0,0.2)";
                    thankYouMessage.style.opacity = "0";
                    thankYouMessage.style.transition = "opacity 0.5s ease-in-out";

                    document.body.appendChild(thankYouMessage);

                    setTimeout(() => {
                        thankYouMessage.style.opacity = "1";
                    }, 500);

                    setTimeout(() => {
                        thankYouMessage.style.opacity = "0";
                    }, 5000);
                }

                // Lansează confetti și mesajul de mulțumire
                setTimeout(() => {
                    launchConfetti();
                    showThankYouMessage();
                }, 1000);
            });
        </script>
        <?php
    }
}

🔹 Pasul 2: Cum Funcționează Codul?

🔥 Efect de confetti: Se lansează timp de 3 secunde când utilizatorul finalizează comanda.
🔥 Mesaj animat: Apare un mesaj de mulțumire cu efect de fade-in și fade-out.

💡 Totul se declanșează automat pe pagina de confirmare a comenzii (order-received).


🎥 Vezi Tutorialul Video!

📌 Dacă vrei să vezi acest efect în acțiune, urmărește tutorialul nostru pe YouTube:


YouTube Logo
Vezi tutorialul pe YouTube

🔥 De ce să Adaugi Confetti în WooCommerce?

✔ Oferă o experiență premium clienților.
✔ Crește satisfacția și fidelizarea cumpărătorilor.
✔ Ajută la diferențierea magazinului tău față de competiție.
✔ Efect cool și modern fără impact asupra performanței site-ului.

💡 Testează-l acum și vezi cum îți îmbunătățește magazinul WooCommerce!

× YouTube Logo

🔔 Abonează-te la canalul nostru!

Primește cele mai noi tutoriale WordPress direct pe YouTube!

×