WhatsApp este unul dintre cele mai populare canale de comunicare pentru clienții online, iar integrarea unui buton direct pe pagina produsului poate crește semnificativ vânzările. Acest tutorial te va ghida pas cu pas pentru a adăuga un buton „Comandă pe WhatsApp” pe pagina fiecărui produs din WooCommerce.

De ce să adaugi un buton WhatsApp pe WooCommerce?

✔ Permite clienților să comande rapid prin WhatsApp

✔ Reduce fricțiunea procesului de cumpărare

✔ Oferă o modalitate directă de comunicare cu clientul

✔ Crește rata de conversie, mai ales pe mobil

Cum funcționează acest cod?

• Afișează un buton pe pagina fiecărui produs.
• Când utilizatorul dă click, se deschide WhatsApp cu un mesaj predefinit care include numele produsului și prețul.
• Pe desktop, se deschide WhatsApp Web.
• Pe mobil, se deschide aplicația WhatsApp.

Vezi tutorialul pe YouTube

Codul pentru butonul WhatsApp pe pagina produsului

Adaugă acest cod la finalul fișierului functions.php din tema activă sau folosește un plugin precum Code Snippets.

function add_whatsapp_button_single_product() {
    global $product;
    
    $product_name = urlencode($product->get_name());
    $product_price = $product->get_price();
    $whatsapp_number = '40762008240'; // Prefix 40 pentru România

    // Mesaj personalizat
    $whatsapp_message = "Bună, sunt interesat de produsul *$product_name* la prețul de $product_price RON. Îmi puteți oferi mai multe detalii?";

    // Link WhatsApp pentru desktop și mobil
    $whatsapp_link = "https://wa.me/$whatsapp_number?text=" . urlencode($whatsapp_message);

    echo '<div class="whatsapp-order">';
    echo '<a id="whatsapp-button" href="#" class="button whatsapp-button" style="background:#25D366; color:white; padding:10px 20px; border-radius:5px; display:inline-block; margin-top:10px;">
            📞 Comandă pe WhatsApp
          </a>';
    echo '</div>';

    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var whatsappButton = document.getElementById("whatsapp-button");
            if (whatsappButton) {
                var userAgent = navigator.userAgent || navigator.vendor || window.opera;
                var whatsappUrl = "";

                if (/android/i.test(userAgent)) {
                    // Android -> Deschide aplicația WhatsApp
                    whatsappUrl = "whatsapp://send?phone=<?php echo $whatsapp_number; ?>&text=<?php echo urlencode($whatsapp_message); ?>";
                } else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                    // iOS -> Deschide aplicația WhatsApp
                    whatsappUrl = "whatsapp://send?phone=<?php echo $whatsapp_number; ?>&text=<?php echo urlencode($whatsapp_message); ?>";
                } else {
                    // Alte dispozitive (desktop) -> WhatsApp Web
                    whatsappUrl = "https://wa.me/<?php echo $whatsapp_number; ?>?text=<?php echo urlencode($whatsapp_message); ?>";
                }

                whatsappButton.setAttribute("href", whatsappUrl);
            }
        });
    </script>
    <?php
}
add_action('woocommerce_single_product_summary', 'add_whatsapp_button_single_product', 25);

Explicație codului:

• $whatsapp_number – Setează numărul de WhatsApp unde vrei să primești comenzile.
• $whatsapp_message – Creează mesajul care va fi trimis automat.
• whatsapp://send – Deschide aplicația WhatsApp pe mobil.
• wa.me – Deschide WhatsApp Web pe desktop.
• Scriptul JavaScript – Detectează dispozitivul utilizatorului și setează link-ul corect.

Testare și depanare

1. Adaugă codul în functions.php sau Code Snippets.
2. Mergi la un produs din WooCommerce.
3. Vezi dacă apare butonul „Comandă pe WhatsApp”.
4. Apasă pe buton și verifică dacă WhatsApp se deschide corect.

Concluzie

Acest buton simplifică procesul de cumpărare și oferă clienților o modalitate rapidă de a comanda. Mai ales pentru utilizatorii de mobil, această funcționalitate poate crește semnificativ conversiile.