WooCommerce Satın Al Butonunu Özelleştirme

E-ticaret sitelerinde dönüşüm oranını artırmanın en etkili yollarından biri, kullanıcı arayüzünü müşterinin beklentilerine göre şekillendirmektir. WooCommerce’in varsayılan “Sepete Ekle” butonu işlevsel olsa da çoğu zaman marka kimliğiyle uyuşmaz, yanlış yerde durur ya da yanlış mesaj verir. İşte tam bu noktada functions.php dosyası devreye giriyor. Tema dosyalarına dokunmadan, güncelleme güvenli bir şekilde buton metnini, davranışını ve görünümünü tamamen kontrol altına alabilirsiniz.

Neden functions.php Kullanıyoruz?

WooCommerce’i özelleştirmenin birden fazla yolu var: tema dosyalarını doğrudan düzenlemek, child tema oluşturmak ya da plugin yazmak. Ancak functions.php yolu, özellikle küçük ve orta ölçekli projeler için en pratik çözümü sunar. Şu avantajları var:

• Güncelleme güvenli: WooCommerce veya tema güncellendiğinde değişiklikleriniz kaybolmaz
• Hook sistemi: WordPress’in filter ve action sistemi sayesinde çekirdek dosyalara dokunmadan müdahale edersiniz
• Hız: Ayrı bir plugin yazmaktan çok daha hızlı sonuç alırsınız
• Bakım kolaylığı: Tüm özelleştirmeler tek bir dosyada toplanır

Tüm kod örneklerini child temanızın functions.php dosyasına eklemenizi öneriyorum. Ana temanın functions.php dosyasını düzenlerseniz, tema güncellemesinde her şey sıfırlanır.

Temel Buton Metni Değiştirme

En basit senaryo ile başlayalım. Müşteriler “Sepete Ekle” yerine “Hemen Satın Al” görmek istiyor. WooCommerce bunun için woocommerce_product_single_add_to_cart_text ve woocommerce_product_add_to_cart_text olmak üzere iki ayrı filter hook sunuyor.

// Ürün detay sayfasındaki buton metni
add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    return 'Hemen Satın Al';
});

// Kategori/arşiv sayfalarındaki buton metni
add_filter( 'woocommerce_product_add_to_cart_text', function() {
    return 'Sepete Ekle';
});

Bu iki hook’un farkını bilmek önemli. Birincisi tekil ürün sayfasında geçerli, ikincisi ise ürün listelerinde (kategori, mağaza, arama sonuçları) geçerli. Çoğu geliştirici sadece birini ekleyip neden diğer sayfalarda değişmedi diye saatlerce uğraşıyor.

Ürün Tipine Göre Dinamik Buton Metni

Gerçek dünyada tek tip buton metni yetmez. Basit ürün, değişken ürün, dijital ürün, abonelik ürünü… Hepsinin farklı bir call-to-action’a ihtiyacı var. Şöyle düşünün: dijital bir e-kitap için “Hemen İndir” yazmak, fiziksel bir ürün için “Sepete Ekle” yazmaktan çok daha ikna edici.

add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    global $product;

    if ( ! $product ) {
        return 'Satın Al';
    }

    switch ( $product->get_type() ) {
        case 'simple':
            return 'Hemen Satın Al';
        case 'variable':
            return 'Seçenek Seç ve Satın Al';
        case 'grouped':
            return 'Ürünleri İncele';
        case 'external':
            return 'Dış Siteden Al';
        case 'virtual':
        case 'downloadable':
            return 'Hemen İndir';
        default:
            return 'Sepete Ekle';
    }
});

Bu yaklaşım özellikle karma kataloglu mağazalarda büyük fark yaratır. Hem fiziksel hem dijital ürün satan bir mağazada bu kodu kullandıktan sonra tıklama oranlarının nasıl değiştiğini görmek gerçekten ilginç.

Stok Durumuna Göre Buton Özelleştirme

Ürün stokta yoksa “Stok Dışı” yazan buton pek de kullanıcı dostu değil. Müşteriye ne yapması gerektiğini söyleyin. Stok takip bildirimi için kaydolmasını, alternatif ürünlere bakmasını ya da ön sipariş vermesini önerebilirsiniz.

add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    global $product;

    if ( ! $product ) {
        return 'Sepete Ekle';
    }

    // Stokta yoksa
    if ( ! $product->is_in_stock() ) {
        return 'Stok Bildirimi Al';
    }

    // Az stok varsa (5 adet veya altı)
    $stock_qty = $product->get_stock_quantity();
    if ( $stock_qty !== null && $stock_qty <= 5 && $stock_qty > 0 ) {
        return 'Son ' . $stock_qty . ' Adet - Hemen Al!';
    }

    return 'Sepete Ekle';
});

// Stokta olmayan ürün butonunu tamamen değiştir
add_filter( 'woocommerce_product_add_to_cart_text', function() {
    global $product;

    if ( $product && ! $product->is_in_stock() ) {
        return 'Stok Bildirimi Al';
    }

    return 'Sepete Ekle';
});

Az stok durumunda dinamik metin gösterme taktiği harika bir aciliyet hissi yaratıyor. “Son 3 Adet – Hemen Al!” gibi bir buton metni, dönüşüm psikolojisi açısından çok güçlü bir mesaj veriyor.

Buton CSS Sınıfları ve Stilleri Ekleme

Buton metni yetmez, görsel tasarım da önemli. WooCommerce’in varsayılan buton CSS sınıflarını değiştirerek ya da yeni sınıflar ekleyerek butona farklı renkler, animasyonlar veya ikonlar ekleyebilirsiniz.

// Ürün detay sayfası butonuna özel CSS sınıfı ekle
add_filter( 'woocommerce_product_single_add_to_cart_text', function( $text ) {
    return $text;
});

// Buton HTML'ini tamamen özelleştir
add_filter( 'woocommerce_loop_add_to_cart_link', function( $link, $product ) {
    $link = str_replace(
        'class="',
        'class="custom-cart-btn ',
        $link
    );
    return $link;
}, 10, 2 );

// Tekil ürün sayfası için buton argümanlarını değiştir
add_filter( 'woocommerce_product_single_add_to_cart_text', function( $text ) {
    return '<span class="cart-icon">🛒</span> ' . $text;
});

Şimdi bu CSS sınıfına stil verelim. Buton özelleştirmesi sadece PHP tarafıyla bitmez, CSS tarafını da halledelim:

// CSS'i functions.php üzerinden sayfaya ekle
add_action( 'wp_head', function() {
    ?>
    <style>
    .custom-cart-btn,
    .single_add_to_cart_button {
        background-color: #e74c3c !important;
        border-color: #c0392b !important;
        color: #ffffff !important;
        font-size: 18px !important;
        padding: 15px 35px !important;
        border-radius: 50px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3) !important;
    }

    .single_add_to_cart_button:hover {
        background-color: #c0392b !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4) !important;
    }

    .woocommerce-cart .checkout-button {
        background-color: #27ae60 !important;
        border-color: #219a52 !important;
    }
    </style>
    <?php
});

Inline CSS yazmayı sevmiyorum açıkçası, ama hızlı proje teslimlerinde bu yöntem hayat kurtarıyor. Daha temiz bir yaklaşım için bu stilleri child temanın style.css dosyasına taşıyın.

Kategoriye Göre Buton Metni Değiştirme

Farklı kategorilerde farklı buton metni göstermek isteyebilirsiniz. Mesela “Elektronik” kategorisindeki ürünler için “Garantili Ürünü Al”, “Kitap” kategorisi için “Kitabı Sipariş Et” gibi.

add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    global $product;

    if ( ! $product ) {
        return 'Sepete Ekle';
    }

    // Ürünün kategorilerini al
    $categories = get_the_terms( $product->get_id(), 'product_cat' );

    if ( ! $categories || is_wp_error( $categories ) ) {
        return 'Sepete Ekle';
    }

    // Kategori slug'larını diziye al
    $cat_slugs = wp_list_pluck( $categories, 'slug' );

    // Kategorilere göre özel metinler
    $category_texts = array(
        'elektronik'     => 'Garantili Ürünü Sepete Ekle',
        'kitaplar'       => 'Kitabı Sipariş Et',
        'giyim'          => 'Ürünü Dene, Beğen, Al',
        'yazilim'        => 'Lisansı Hemen Al',
        'kurslar'        => 'Kursa Katıl',
        'abonelik'       => 'Abone Ol',
        'indirimli'      => 'Fırsatı Kaçırma!',
    );

    foreach ( $category_texts as $slug => $text ) {
        if ( in_array( $slug, $cat_slugs ) ) {
            return $text;
        }
    }

    return 'Sepete Ekle';
});

Bu yaklaşımı kullanırken $category_texts dizisindeki slug’ların WordPress yönetim panelindeki kategori slug’larıyla tam olarak eşleştiğinden emin olun. Türkçe karakterlerin URL’lere nasıl dönüştüğünü kontrol edin.

Fiyat Aralığına Göre Buton Özelleştirme

Yüksek biletli ürünler için daha kurumsal bir dil kullanmak mantıklı. 10.000 TL’lik bir ürün için “Hemen Al!” demek yerine “Teklif Al” veya “Satış Ekibimizle İletişime Geç” gibi bir CTA daha güvenilir hissettiriyor.

add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    global $product;

    if ( ! $product ) {
        return 'Sepete Ekle';
    }

    $price = (float) $product->get_price();

    // 10.000 TL üzeri ürünler için özel akış
    if ( $price >= 10000 ) {
        return 'Satın Alma Talebi Oluştur';
    }

    // 1.000 - 9.999 TL arası
    if ( $price >= 1000 ) {
        return 'Güvenli Ödemeyle Satın Al';
    }

    // 500 TL altı
    if ( $price < 500 ) {
        return 'Hemen Sepete At!';
    }

    return 'Sepete Ekle';
});

Yüksek fiyatlı ürünlerde “Satın Alma Talebi Oluştur” butonu tıklandığında bir iletişim formuna yönlendirmek isteyebilirsiniz. Bunu da yönetebilirsiniz:

// Yüksek fiyatlı ürünlerde buton yönlendirmesini değiştir
add_filter( 'woocommerce_product_single_add_to_cart_text', '__return_false' ); // Örnek

// Daha kontrollü bir yaklaşım:
add_action( 'woocommerce_single_product_summary', function() {
    global $product;

    if ( ! $product ) {
        return;
    }

    $price = (float) $product->get_price();

    // Sadece yüksek fiyatlı ürünlerde özel buton göster
    if ( $price >= 10000 ) {
        // Varsayılan sepet formunu kaldır
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

        echo '<div class="custom-inquiry-btn-wrapper">';
        echo '<a href="/iletisim/?urun=' . esc_attr( $product->get_id() ) . '" class="button alt custom-inquiry-btn">';
        echo 'Satış Ekibiyle İletişime Geç';
        echo '</a>';
        echo '<p class="inquiry-note">Bu ürün için özel fiyat teklifi alabilirsiniz.</p>';
        echo '</div>';
    }
}, 25 );

Sepet Sayfası ve Checkout Butonlarını Özelleştirme

Sadece ürün sayfasındaki butonla sınırlı kalmayın. Sepet ve ödeme sayfalarındaki butonlar da dönüşüm için kritik noktalardır.

// Sepet sayfasındaki "Ödemeye Geç" butonunu özelleştir
add_filter( 'woocommerce_order_button_text', function() {
    return 'Siparişi Tamamla ve Öde';
});

// Sepet sayfasındaki checkout butonunu özelleştir
add_filter( 'woocommerce_proceed_to_checkout_button_text', function() {
    return 'Güvenli Ödemeye Geç 🔒';
});

// Mini sepetteki buton metni
add_filter( 'woocommerce_widget_cart_button_text', function() {
    return 'Sepete Git';
});

Ödeme sayfasında “Siparişi Tamamla” yerine “Siparişi Tamamla ve Öde” demek kulağa küçük bir fark gibi geliyor ama müşteri zihninde çok farklı bir etki yaratıyor. Kullanıcı tam olarak ne yapacağını biliyor.

Kullanıcı Durumuna Göre Buton Özelleştirme

Giriş yapmış kullanıcılar ile misafir kullanıcılara farklı buton metni gösterebilirsiniz. Özellikle üyelik avantajı sunan mağazalar için bu çok işe yarıyor.

add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    global $product;

    if ( ! $product ) {
        return 'Sepete Ekle';
    }

    // Kullanıcı giriş yapmış mı?
    if ( is_user_logged_in() ) {
        $user_id = get_current_user_id();

        // Kullanıcının VIP üyesi olup olmadığını kontrol et
        $is_vip = get_user_meta( $user_id, 'vip_member', true );

        if ( $is_vip ) {
            $price      = (float) $product->get_price();
            $vip_price  = $price * 0.85; // %15 indirim
            return 'VIP Fiyatıyla Satın Al (' . number_format( $vip_price, 2, ',', '.' ) . ' TL)';
        }

        return 'Üye Fiyatıyla Satın Al';
    }

    // Misafir kullanıcı için
    return 'Giriş Yap ve Daha Ucuza Al';
});

// Misafir kullanıcıyı giriş sayfasına yönlendir
add_filter( 'woocommerce_add_to_cart_redirect', function( $url ) {
    if ( ! is_user_logged_in() ) {
        // Misafir kullanıcı için özel yönlendirme (isteğe bağlı)
        // return wp_login_url( wc_get_page_permalink( 'cart' ) );
    }
    return $url;
});

Yapışkan (Sticky) Satın Al Butonu Ekleme

Uzun ürün açıklamalarına sahip sayfalar için, kullanıcı sayfayı aşağı kaydırdığında butonun kaybolması dönüşüm öldürücü bir durum. Yapışkan buton ekleme çözümü:

// Yapışkan satın al butonu için HTML ve CSS ekle
add_action( 'woocommerce_after_single_product', function() {
    global $product;

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

    $button_text = apply_filters( 'woocommerce_product_single_add_to_cart_text', 'Sepete Ekle', $product );
    $price       = wc_price( $product->get_price() );

    echo '<div id="sticky-add-to-cart" class="sticky-cart-bar" style="display:none;">';
    echo '<div class="sticky-product-info">';
    echo '<strong>' . esc_html( $product->get_name() ) . '</strong>';
    echo '<span class="sticky-price">' . $price . '</span>';
    echo '</div>';
    echo '<button class="button alt sticky-cart-btn" onclick="jQuery('.single_add_to_cart_button').click();">';
    echo esc_html( $button_text );
    echo '</button>';
    echo '</div>';

    ?>
    <style>
    #sticky-add-to-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 15px 20px;
        box-shadow: 0 -3px 20px rgba(0,0,0,0.15);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    </style>

    <script>
    jQuery(document).ready(function($) {
        var $mainBtn = $('.single_add_to_cart_button');
        var $stickyBar = $('#sticky-add-to-cart');

        $(window).scroll(function() {
            var mainBtnOffset = $mainBtn.offset().top + $mainBtn.outerHeight();
            var scrollTop = $(window).scrollTop();

            if (scrollTop > mainBtnOffset) {
                $stickyBar.fadeIn(300);
            } else {
                $stickyBar.fadeOut(300);
            }
        });
    });
    </script>
    <?php
});

A/B Test İçin Rastgele Buton Metni

Hangi buton metninin daha iyi performans gösterdiğini test etmek istiyorsanız, basit bir A/B test mekanizması kurabilirsiniz:

add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    // Session başlat
    if ( ! session_id() ) {
        session_start();
    }

    // Kullanıcıya bir grup ata (ilk ziyarette)
    if ( ! isset( $_SESSION['ab_group'] ) ) {
        $_SESSION['ab_group'] = ( rand( 0, 1 ) === 0 ) ? 'A' : 'B';
    }

    $button_texts = array(
        'A' => 'Sepete Ekle',
        'B' => 'Hemen Satın Al',
    );

    $group = $_SESSION['ab_group'];

    // Hangi grubun kullandığını cookie ile logla
    setcookie( 'ab_cart_btn_group', $group, time() + ( 30 * DAY_IN_SECONDS ), '/' );

    return $button_texts[ $group ];
});

Bu basit A/B test mekanizmasını Google Analytics veya herhangi bir analytics aracıyla birleştirerek hangi metnin daha fazla dönüşüm sağladığını ölçebilirsiniz.

Önemli Notlar ve Sık Yapılan Hatalar

Kod yazarken dikkat etmeniz gereken birkaç önemli nokta var:

• global $product kullanımı: Hook içinde ürün nesnesine erişmek için global değişkeni kullanmanız gerekiyor. Bunu unutmak en yaygın hata.
• Null kontrolü: $product her zaman set olmayabilir. if ( ! $product ) kontrolünü atlamamak gerekiyor.
• Filter parametreleri: woocommerce_product_add_to_cart_text filtresi iki parametre alıyor: $text ve $product. Detay sayfası filtresi sadece bir parametre alıyor. Bu fark bazen karışıklığa yol açıyor.
• Child tema kullanımı: Ana tema functions.php yerine mutlaka child tema kullanın.
• Önbellek sorunları: Buton metni değişikliği sayfa önbelleği olan sitelerde hemen görünmeyebilir. Test sonrası önbelleği temizleyin.
• Çakışan hook’lar: Birden fazla filter aynı hook’u değiştirmeye çalışırsa, öncelik parametresini kullanarak hangisinin önce çalışacağını belirleyin.
• Çok dil desteği: WPML veya Polylang kullanıyorsanız, string’leri __() veya _e() fonksiyonlarıyla sarmanız gerekiyor.

Sonuç

WooCommerce’de satın alma butonunu özelleştirmek, kodlama açısından bakıldığında görece basit bir işlem. Ama bu basit değişikliklerin dönüşüm oranları üzerindeki etkisi hiç de küçük değil. “Sepete Ekle” yerine kategoriye ve ürüne özel bir metin kullanmak, kullanıcıya tam olarak ne alacağını anlatmak ve aciliyet hissi yaratmak, müşteri yolculuğunu ciddi ölçüde iyileştirebiliyor.

Bu yazıda anlattığım teknikler şunlardı:

• Temel metin değiştirme: En basit senaryo, iki farklı hook ile detay ve liste sayfaları
• Ürün tipine göre dinamik metin: Simple, variable, downloadable ürünler için farklı CTA’lar
• Stok durumu entegrasyonu: Az stok ve stok dışı senaryoları
• Kategori bazlı özelleştirme: Her kategori için ayrı buton dili
• Fiyat aralığı kontrolü: Yüksek biletli ürünler için farklı akış
• Kullanıcı durumu: Giriş yapmış ve misafir kullanıcı ayrımı
• Yapışkan buton: Uzun sayfalarda dönüşümü artırma
• A/B test altyapısı: Hangi metnin işe yaradığını ölçme

Başlangıç için en basit değişiklik olan ürün detay sayfası buton metnini değiştirmekle başlayın, ardından ihtiyaçlarınıza göre diğer katmanları ekleyin. Her değişikliği Analytics ile takip etmeyi unutmayın, çünkü en iyi buton metni her mağaza için farklıdır.