În comerțul electronic, unul dintre cele mai eficiente moduri de a crește vânzările este utilizarea tehnicilor de urgență, iar un timer de reducere este o metodă perfectă pentru a face acest lucru. Cumpărătorii sunt mai predispuși să achiziționeze un produs atunci când știu că oferta este limitată în timp.

Dacă ai un magazin online bazat pe WooCommerce, acest articol îți va arăta cum să implementezi un cronometru de reducere pe produsele aflate la ofertă, fără a folosi pluginuri suplimentare. Vom utiliza un cod PHP personalizat pe care îl poți adăuga direct în site-ul tău.

De ce să folosești un Timer pentru Produse la Reducere?

🛒 Crește urgența: Clienții sunt mai motivați să cumpere atunci când văd că timpul este limitat.

📈 Îmbunătățește rata de conversie: Reducerile temporare pot crește semnificativ vânzările.

🔔 Atenție vizuală: Un cronometru bine poziționat atrage privirile și crește interesul utilizatorilor.

🚀 Fără pluginuri suplimentare: Acest cod rulează nativ, fără să încarce resurse suplimentare pe site.

Implementarea Timer-ului de Reducere în WooCommerce

Vom adăuga acest timer folosind un singur snippet PHP, care include atât logica de calcul, cât și stilizarea pentru afisare.

Vezi tutorialul pe YouTube

1️⃣ Adaugă acest cod în functions.php sau în Code Snippets

function add_sale_countdown_timer() {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('.sale-countdown').forEach(function(el) {
            let endTime = parseInt(el.getAttribute('data-time')) * 1000;
            let interval = setInterval(function() {
                let now = new Date().getTime();
                let distance = endTime - now;
                if (distance < 0) {
                    clearInterval(interval);
                    el.innerHTML = "Reducerea a expirat!";
                } else {
                    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
                    el.innerHTML = "<strong>Expiră în:</strong> " + hours + "h " + minutes + "m " + seconds + "s";
                }
            }, 1000);
        });
    });
    </script>
    <style>
        .sale-countdown {
            font-size: 14px;
            font-weight: bold;
            color: red;
            background: #ffebeb;
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
            margin-top: 10px;
        }
    </style>
    <?php
}
add_action('wp_footer', 'add_sale_countdown_timer');

function display_sale_countdown_timer() {
    global $product;
    $sale_end = get_post_meta($product->get_id(), '_sale_price_dates_to', true);
    if ($sale_end) {
        echo '<div class="sale-countdown" data-time="'.$sale_end.'"></div>';
    }
}
add_action('woocommerce_after_shop_loop_item_title', 'display_sale_countdown_timer', 20);
add_action('woocommerce_single_product_summary', 'display_sale_countdown_timer', 25);

2️⃣ Cum funcționează acest cod?

✅ Detectează automat data de expirare a reducerii unui produs.

✅ Afișează timer-ul în pagina produsului și în lista de produse din magazin.

✅ Numără invers în timp real, actualizându-se la fiecare secundă.

✅ Ascunde timer-ul automat după expirarea reducerii.

✅ Include stiluri CSS personalizate pentru afișare vizibilă și atrăgătoare.

3️⃣ Personalizări Suplimentare

Dacă vrei să modifici aspectul timer-ului, poți ajusta CSS-ul din codul de mai sus. De exemplu, poți schimba culoarea fontului sau dimensiunea textului:

.sale-countdown {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background: #ff0000;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
}

De asemenea, poți schimba textul care apare după expirarea reducerii, înlocuind „Reducerea a expirat!” din codul JavaScript.

4️⃣ Testare și Depanare

Dacă timer-ul nu apare pe produsele tale, verifică următoarele:

✔️ Produsul are o reducere activă? – Verifică în WooCommerce că ai setat o reducere cu dată de expirare.

✔️ Codul a fost adăugat corect? – Folosește un plugin precum Code Snippets pentru a evita erorile în functions.php.

✔️ Cache-ul a fost șters? – Dacă folosești un plugin de cache, șterge cache-ul pentru a vedea modificările.

Concluzie

Acest timer de reducere este o metodă simplă și eficientă de a stimula vânzările și de a atrage atenția clienților asupra ofertelor. Implementarea este ușoară, nu necesită pluginuri suplimentare și poate fi personalizată după preferințele tale.

Dacă ai întrebări sau vrei să adaugi și alte funcționalități, lasă un comentariu!

Tutorial WordPress & WooCommerce de Alexandru – Tutoriale WordPress