✅ 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:
🔥 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!