Cum să creezi un pop-up dinamic pentru ofertele speciale în WooCommerce

Promovarea produselor aflate la ofertă este esențială pentru creșterea vânzărilor într-un magazin online WooCommerce. Un mod eficient de a face acest lucru este utilizarea unui pop-up automat care afișează în mod dinamic ofertele speciale. În acest tutorial, îți voi arăta cum să implementezi un astfel de sistem în WordPress, permițându-ți să gestionezi ofertele direct din panoul de administrare.

De ce să folosești un pop-up pentru oferte speciale?

Un pop-up bine configurat poate avea un impact semnificativ asupra ratei de conversie. Iată câteva beneficii majore ale acestui sistem:

🔥 Crește vizibilitatea ofertelor speciale – clienții văd imediat cele mai bune reduceri.
🚀 Îmbunătățește rata de conversie – utilizatorii sunt mai predispuși să cumpere un produs pe care îl văd promovat în mod activ.
✅ Gestionare ușoară din panoul de administrare – poți adăuga sau elimina produse rapid, fără a modifica codul manual.
⏳ Afișare secvențială a produselor – fiecare produs din ofertă este afișat pe rând, schimbându-se automat la fiecare 10 secunde.

Cum funcționează acest sistem?

1️⃣ Adaugi produse în ofertă dintr-un meniu special din WordPress Admin. Poți introduce mai multe produse folosind ID-urile acestora.

2️⃣ Pop-up-ul afișează produsul curent cu imagine, titlu, preț și un buton care duce către pagina produsului.

3️⃣ La fiecare 10 secunde, pop-up-ul se schimbă automat, afișând un alt produs din lista selectată.

4️⃣ Utilizatorii pot închide pop-up-ul manual, dacă nu sunt interesați.

5️⃣ Dacă nu sunt produse în ofertă, pop-up-ul nu apare deloc, evitând încărcarea inutilă a paginii.

Vezi tutorialul pe YouTube

Codul complet pentru implementarea pop-up-ului de oferte speciale

Următorul cod trebuie adăugat în WordPress folosind un plugin precum Code Snippets, astfel încât să fie activ pe întregul site fără a modifica fișierele temei.

<?php

function oferta_speciala_admin_menu() {
    add_menu_page(
        'Ofertă Specială', 
        'Ofertă Specială', 
        'manage_options',  
        'oferta-speciala', 
        'oferta_speciala_admin_page', 
        'dashicons-megaphone', 
        20 
    );
}
add_action('admin_menu', 'oferta_speciala_admin_menu');

function oferta_speciala_admin_page() {
    if (isset($_POST['oferta_speciala_submit'])) {
        $produse = array_map('sanitize_text_field', $_POST['oferta_speciala_produs'] ?? []);
        update_option('oferta_speciala_produse', array_filter($produse)); 
    }

    if (isset($_POST['oferta_speciala_reset'])) {
        delete_option('oferta_speciala_produse');
    }

    $produse_setate = get_option('oferta_speciala_produse', []);

    ?>
    <div class="wrap">
        <h1>Setează produsele pentru oferta specială</h1>
        <form method="post" id="oferta-form">
            <div id="oferta-container">
                <?php foreach ($produse_setate as $index => $id): ?>
                    <div class="oferta-row">
                        <input type="text" name="oferta_speciala_produs[]" value="<?php echo esc_attr($id); ?>" required>
                        <button type="button" class="remove-field">✖</button>
                    </div>
                <?php endforeach; ?>
                <div class="oferta-row">
                    <input type="text" name="oferta_speciala_produs[]" placeholder="ID produs" required>
                    <button type="button" class="remove-field">✖</button>
                </div>
            </div>
            <button type="button" id="add-new-field" class="button">Adaugă ID</button>
            <br><br>
            <input type="submit" name="oferta_speciala_submit" value="Salvează" class="button button-primary">
            <input type="submit" name="oferta_speciala_reset" value="Șterge toate" class="button button-secondary" onclick="return confirm('Sigur vrei să ștergi toate produsele din ofertă?');">
        </form>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let container = document.getElementById("oferta-container");
            let addButton = document.getElementById("add-new-field");

            // Funcție pentru a adăuga un nou câmp
            function addNewField() {
                let newField = document.createElement("div");
                newField.classList.add("oferta-row");
                newField.innerHTML = `
                    <input type="text" name="oferta_speciala_produs[]" placeholder="ID produs" required>
                    <button type="button" class="remove-field">✖</button>
                `;
                container.appendChild(newField);
            }

            // Adăugare câmp nou când se apasă butonul
            addButton.addEventListener("click", addNewField);

            // Ștergere câmp la apăsarea ✖
            container.addEventListener("click", function(e) {
                if (e.target.classList.contains("remove-field")) {
                    let row = e.target.parentElement;
                    if (container.children.length > 1) {
                        row.remove();
                    }
                }
            });
        });
    </script>

    <style>
        .oferta-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 5px;
        }
        .oferta-row input {
            width: 200px;
        }
        .remove-field {
            background: #ff4d4d;
            color: white;
            border: none;
            cursor: pointer;
            padding: 3px 6px;
            border-radius: 3px;
            font-size: 14px;
        }
        .remove-field:hover {
            background: #cc0000;
        }
    </style>
    <?php
}

add_action('wp_footer', function() {
    $produse_ids = get_option('oferta_speciala_produse', []);
    if (empty($produse_ids)) return;

    $produse_js = [];
    foreach ($produse_ids as $product_id) {
        $product = wc_get_product($product_id);
        if (!$product) continue;
        $produse_js[] = [
            'id' => $product_id,
            'link' => get_permalink($product_id),
            'title' => $product->get_name(),
            'image' => get_the_post_thumbnail_url($product_id, 'thumbnail'),
            'price' => $product->get_price_html()
        ];
    }
    if (empty($produse_js)) return;
    ?>

    <style>
        #offerPopup {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 220px;
            background: white;
            border-radius: 8px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            padding: 10px;
            text-align: center;
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            z-index: 99999; /* Peste toate elementele */
            border: 2px solid #0073aa;
            position: fixed;
        }
        #offerPopup img {
            max-width: 100px; /* Imagine și mai mică */
            height: auto;
            border-radius: 5px;
            display: block;
            margin: 0 auto 5px;
        }
        #offerPopup h4 {
            font-size: 13px;
            margin-bottom: 3px;
        }
        #offerPopup p {
            font-size: 12px;
            color: #333;
            margin: 2px 0;
        }
        #offerPopup a {
            display: block;
            margin-top: 5px;
            padding: 5px;
            background: #0073aa;
            color: white;
            text-decoration: none;
            border-radius: 3px;
            font-size: 12px;
        }
        #offerPopup a:hover {
            background: #005177;
        }
        #offerPopup .close-btn {
            position: absolute;
            top: 5px;
            right: 8px;
            font-size: 14px;
            cursor: pointer;
            color: #555;
            background: none;
            border: none;
        }
        #offerPopup .close-btn:hover {
            color: #ff0000;
        }
    </style>

    <div id="offerPopup">
        <button class="close-btn" onclick="inchideOferta()">✖</button>
        <img id="offerImage" src="" alt="Ofertă Specială">
        <h4 id="offerTitle"></h4>
        <p id="offerPrice"></p>
        <a id="offerLink" href="#" target="_blank">Vezi oferta</a>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let produse = <?php echo json_encode($produse_js); ?>;
            if (produse.length === 0) return;

            let index = 0;
            function afiseazaOferta() {
                let produs = produse[index];
                document.getElementById("offerImage").src = produs.image;
                document.getElementById("offerTitle").textContent = produs.title;
                document.getElementById("offerPrice").innerHTML = produs.price;
                document.getElementById("offerLink").href = produs.link;
                
                let popup = document.getElementById("offerPopup");
                popup.style.display = "block";
                popup.style.opacity = "1";

                setTimeout(() => {
                    popup.style.opacity = "0";
                    setTimeout(() => {
                        popup.style.display = "none";
                        index = (index + 1) % produse.length;
                    }, 500);
                }, 10000);
            }

            setTimeout(() => {
                afiseazaOferta();
                setInterval(afiseazaOferta, 15000);
            }, 5000);
        });

        function inchideOferta() {
            let popup = document.getElementById("offerPopup");
            popup.style.opacity = "0";
            setTimeout(() => {
                popup.style.display = "none";
            }, 500);
        }
    </script>
    <?php
});

Concluzie

Acest sistem oferă o modalitate eficientă și ușor de gestionat pentru promovarea produselor aflate la ofertă în WooCommerce. Cu ajutorul acestui cod, poți schimba rapid ofertele din WordPress Admin și să afișezi un pop-up dinamic, atrăgător și optimizat pentru vânzări.