WooCommerce WhatsApp Sipariş Butonu Nasıl Eklenir?

WooCommerce WhatsApp sipariş butonu, ürün sayfasındaki ziyaretçiyi önceden hazırlanmış bir mesajla WhatsApp görüşmesine taşır. Ancak bu bağlantı tek başına WooCommerce içinde sipariş oluşturmaz, stok düşürmez ve ödeme kaydı açmaz. Bu nedenle butonun işlevini “WhatsApp ile sor” veya “WhatsApp üzerinden sipariş talebi gönder” şeklinde açık anlatmak, hem müşteri beklentisi hem mağaza operasyonu açısından daha doğrudur.

Bu rehberde eklentiye bağımlı kalmadan ürün adı ve ürün bağlantısını mesaja ekleyen bir wa.me butonu oluşturacağız. Kodun nereye eklenmesi gerektiğini, telefon numarası biçimini, değişken ürün sınırlarını, mobil testi ve dönüşüm ölçümünü de birlikte ele alacağız.

WooCommerce WhatsApp butonu nasıl çalışır?

Temel yapı bir “click to chat” bağlantısıdır. Kullanıcı butona bastığında WhatsApp uygulaması veya WhatsApp Web açılır; telefon numarası ve isteğe bağlı mesaj bağlantı parametrelerinden okunur. Numara uluslararası biçimde, yalnızca rakamlardan oluşmalıdır. Türkiye için ülke kodu 90 ile başlar; başında artı işareti, boşluk, parantez veya sıfır kullanılmaz.

Örnek bağlantının mantığı şöyledir:

https://wa.me/905000000000?text=Merhaba

Mesaj içinde boşluk, Türkçe karakter, ürün adı ve URL bulunacağı için metnin URL uyumlu kodlanması gerekir. PHP tarafında bunu rawurlencode() ile yapacağız. Numarayı da yalnızca rakam kalacak şekilde temizleyeceğiz.

Kodu nereye eklemelisiniz?

Kodu Pars temasının ana functions.php dosyasına doğrudan eklemek iyi bir yöntem değildir; tema güncellemesi değişikliği silebilir ve bir sözdizimi hatası siteyi erişilemez duruma getirebilir. Küçük PHP özelleştirmeleri için yönetilebilir bir kod parçacığı eklentisi, daha kapsamlı değişiklikler için özel bir child theme tercih edin. Değişiklikten önce yedek alın ve mümkünse staging ortamında test edin.

Bu işlem şablon dosyasını kopyalamayı gerektirmez. WooCommerce’in ürün formunda sunduğu aksiyon kancasına bir fonksiyon bağlamak yeterlidir. Böylece WooCommerce şablonlarını güncellediğinizde eski bir template override taşımak zorunda kalmazsınız.

Ürün sayfasına WhatsApp sipariş butonu ekleme

Aşağıdaki kod, tekil ürün sayfasında sepete ekle düğmesinin hemen ardından bir WhatsApp bağlantısı üretir. Örnek numarayı kendi WhatsApp Business numaranızla değiştirin. Başında + kullanmayın.

<?php
add_action( 'woocommerce_after_add_to_cart_button', 'ozgurbayram_whatsapp_urun_butonu' );

function ozgurbayram_whatsapp_urun_butonu() {
    if ( ! is_product() ) {
        return;
    }

    global $product;

    if ( ! $product instanceof WC_Product ) {
        return;
    }

    // Örnek numarayı ülke koduyla birlikte kendi numaranızla değiştirin.
    $phone = '905000000000';
    $phone = preg_replace( '/[^0-9]+/', '', $phone );

    $message = sprintf(
        'Merhaba, %s ürünü hakkında bilgi almak istiyorum: %s',
        $product->get_name(),
        get_permalink( $product->get_id() )
    );

    $whatsapp_url = 'https://wa.me/' . $phone . '?text=' . rawurlencode( $message );

    echo '<a class="button oz-whatsapp-button" href="' . esc_url( $whatsapp_url ) . '" target="_blank" rel="noopener noreferrer nofollow">WhatsApp ile Sor</a>';
}

Koddaki WC_Product kontrolü, beklenmeyen bir bağlamda ürün nesnesi yoksa fonksiyonun hata vermeden durmasını sağlar. get_permalink() müşterinin hangi üründen geldiğini mesaja ekler. Çıktıdaki URL, WordPress’in esc_url() işleviyle güvenli biçimde yazdırılır.

Ürün sayfasının başlık, açıklama ve yapılandırılmış veri tarafını da düzenliyorsanız WooCommerce ürün sayfası SEO rehberindeki kontrolleri aynı test planına ekleyin.

Butonun görünümünü düzenleme

Aşağıdaki CSS’i Görünüm → Özelleştir → Ek CSS alanına ekleyebilirsiniz. Renkleri sitenizin kontrast ve marka standartlarına göre düzenleyin. Yalnızca renkle anlam vermeyin; buton metni işlevi açıkça belirtmelidir.

.single-product .oz-whatsapp-button {
    margin-top: 12px;
    background: #128c7e;
    border-color: #128c7e;
    color: #fff;
}

.single-product .oz-whatsapp-button:hover,
.single-product .oz-whatsapp-button:focus {
    background: #0b6f63;
    border-color: #0b6f63;
    color: #fff;
}

Mobil ekranda butonun sepete ekle alanını taşırmadığını, klavye odağının görünür olduğunu ve metnin tek satıra zorlanmadığını kontrol edin. LiteSpeed gibi bir önbellek kullanıyorsanız değişiklikten sonra ilgili sayfa önbelleğini temizleyin; tüm site önbelleğini gereksiz yere boşaltmayın.

Değişken ürün, adet ve stok bilgisi

Sunucu tarafında üretilen basit bağlantı ürün adını ve sayfa URL’sini taşır; kullanıcının tarayıcıda seçtiği beden, renk veya adet değerini otomatik olarak okuyamaz. Değişken ürünlerde bu bilgileri mesaja eklemek istiyorsanız varyasyon seçimi değiştiğinde bağlantıyı JavaScript ile güncellemeniz veya bu özelliği destekleyen, güncel ve güvenilir bir WooCommerce uzantısı kullanmanız gerekir.

Stokta olmayan üründe butonu göstermek istemiyorsanız ürün nesnesi kontrolünden sonra şu koşulu ekleyebilirsiniz:

if ( ! $product->is_in_stock() ) {
    return;
}

WhatsApp görüşmesi stok rezervasyonu oluşturmaz. Müşteri mesaj gönderirken başka bir kullanıcı son ürünü satın alabilir. Bu nedenle kesin fiyat, stok ve kargo bilgisini WooCommerce sepeti veya ödeme ekranında yeniden doğrulayın. Stok davranışını ayrıntılı yapılandırmak için WooCommerce stok yönetimi rehberini kullanabilirsiniz.

Sipariş kaydı ve ödeme güvenliği

“WhatsApp ile sipariş ver” ifadesi kullanılıyorsa müşteriye işlemin hangi aşamada resmî siparişe dönüşeceğini açıkça belirtin. Sadece sohbet mesajı alınması; WooCommerce sipariş numarası, fatura, stok hareketi veya ödeme kaydı üretmez. Görüşme sonunda müşteriyi güvenli WooCommerce ödeme bağlantısına yönlendirmek operasyonu daha izlenebilir tutar.

Kart numarası, CVV, parola veya kimlik belgesi gibi hassas bilgileri WhatsApp mesajıyla istemeyin. Ödeme için mağazanızın HTTPS kullanan ödeme sayfasını ve yetkili ödeme altyapısını kullanın. Kapıda ödeme seçeneğiniz varsa WooCommerce kapıda ödeme rehberindeki durum ve ücret kontrollerini uygulayın.

Tıklamaları nasıl ölçersiniz?

Butona tıklanması tamamlanan sipariş anlamına gelmez. Analitik aracınızda “WhatsApp butonu tıklaması” adıyla ayrı bir olay ölçün; bunu gelir veya satın alma dönüşümü olarak işaretlemeyin. Daha sonra WooCommerce’de gerçekten oluşan siparişlerle operasyonel olarak karşılaştırabilirsiniz.

Google Tag Manager kullanıyorsanız CSS sınıfı oz-whatsapp-button olan bağlantı tıklamalarını tetikleyici olarak seçebilirsiniz. Telefon numarasını, mesaj içeriğini veya müşteri bilgisini analiz sistemine olay parametresi olarak göndermeyin. Ölçüm ekledikten sonra tarayıcı geliştirici araçlarında tek tıklamanın tek olay ürettiğini doğrulayın.

Yayın öncesi test listesi

• Telefon numarası ülke koduyla ve yalnızca rakamlarla yazıldı.
• Buton masaüstünde WhatsApp Web’i, telefonda uygulamayı doğru açıyor.
• Mesajda ürün adı ve doğru canonical ürün URL’si bulunuyor.
• Basit ve değişken ürün sayfaları ayrı ayrı denendi.
• Stokta olmayan ürün için belirlenen davranış çalışıyor.
• Buton klavyeyle erişilebilir ve mobil ekranda taşmıyor.
• Önbellek temizlendikten sonra oturum kapalı kullanıcıyla test edildi.
• Tıklama olayı satın alma dönüşümünden ayrı ölçülüyor.
• Gerçek sipariş, ödeme ve e-posta akışı WooCommerce içinde doğrulanıyor.

Sipariş tamamlandıktan sonraki bildirimleri ayrıca test etmek için WooCommerce sipariş e-postası sorun giderme rehberine bakabilirsiniz.

Sık sorulan sorular

WhatsApp butonu WooCommerce siparişi oluşturur mu?

Hayır. wa.me bağlantısı yalnızca sohbeti açar. WooCommerce sipariş numarası, stok düşümü ve ödeme kaydı için müşterinin mağazanın sipariş akışını tamamlaması gerekir.

Telefon numarası hangi biçimde yazılmalı?

Ülke kodu dahil yalnızca rakam kullanın. Türkiye numarasında 90 ile başlayın; artı, boşluk, parantez ve baştaki sıfırı eklemeyin.

Kod Pars temasının functions.php dosyasına eklenebilir mi?

Teknik olarak eklenebilir; fakat tema güncellemesinde kaybolabilir. Yönetilebilir bir kod parçacığı eklentisi veya özel child theme daha güvenli bir yöntemdir.

Seçilen varyasyon mesaja otomatik eklenir mi?

Bu temel PHP örneğinde eklenmez. Varyasyon seçimini ve adedi tarayıcıdan okuyarak bağlantıyı güncelleyen ek JavaScript ya da uygun bir WooCommerce uzantısı gerekir.

WhatsApp tıklaması satın alma dönüşümü sayılır mı?

Hayır. Tıklama yalnızca görüşme niyetini gösterir. Satın alma dönüşümü, WooCommerce’de tamamlanan sipariş veya doğrulanmış ödeme olayıyla ölçülmelidir.

Resmî teknik kaynaklar

• WooCommerce özelleştirme için iyi uygulamalar
• WooCommerce aksiyon ve filtre kancaları
• WooCommerce Code Snippets kullanım rehberi
• WordPress esc_url() geliştirici referansı