WooCommerce Sepete Ekle Butonunun Altına İçerik Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde dönüşüm oranlarını artırmanın en etkili yollarından biri, müşterinin satın alma kararı verdiği tam o kritik noktada doğru bilgiyi sunmaktır. WooCommerce’de “Sepete Ekle” butonu, bu kritik noktanın tam merkezindedir. Butonun hemen altına eklediğin küçük bir güven mesajı, kargo bilgisi ya da stok uyarısı, ziyaretçiyi müşteriye dönüştürebilir. Bu yazıda functions.php dosyasını kullanarak bu alana nasıl içerik ekleyeceğini, hangi hook’ların ne işe yaradığını ve gerçek dünya senaryolarında nasıl kullanabileceğini detaylıca ele alacağız.

WooCommerce Hook Yapısını Anlamak

WooCommerce’in hook sistemi, tema dosyalarına dokunmadan neredeyse her şeyi değiştirmene izin verir. Ürün sayfasındaki “Sepete Ekle” butonunun çevresinde birkaç kritik hook bulunur. Bunları doğru kullanmak, hem kodun temiz kalmasını sağlar hem de WooCommerce güncellemelerinden etkilenmemeni garantiler.

Butonun etrafındaki temel hook’lar şunlardır:

  • woocommerce_before_add_to_cart_button: Butonun hemen üstüne içerik ekler
  • woocommerce_after_add_to_cart_button: Butonun hemen altına içerik ekler
  • woocommerce_after_add_to_cart_form: Formun tamamının altına içerik ekler
  • woocommerce_before_add_to_cart_form: Formun tamamının üstüne içerik ekler

Biz ağırlıklı olarak woocommerce_after_add_to_cart_button hook’unu kullanacağız. Bu hook, butonun hemen akabinde tetiklenir ve form henüz kapanmamıştır. Yani eklediğin içerik görsel olarak butonun tam altında görünür.

Temel Kullanım: Sabit Bir Mesaj Eklemek

En basit senaryodan başlayalım. Tüm ürünlerde butonun altına sabit bir güven mesajı eklemek istiyorsun diyelim. “functions.php” dosyasına şunu eklemek yeterli:

// functions.php
add_action( 'woocommerce_after_add_to_cart_button', 'siteadi_buton_alti_mesaj' );

function siteadi_buton_alti_mesaj() {
    echo '<p class="guven-mesaji">
        <span>&#10003;</span> Güvenli ödeme | 
        <span>&#128666;</span> Ücretsiz kargo 500 TL üzeri | 
        <span>&#8635;</span> 30 gün iade garantisi
    </p>';
}

Bu kadar basit. Ama sadece bununla kalmayacağız. Gerçek projelerde bu alan çok daha akıllı kullanılabilir.

CSS ile Görsel Düzenleme

Eklediğin içeriğin düzgün görünmesi için biraz CSS gerekiyor. Bunu da functions.php üzerinden inline olarak ya da temanın style.css dosyasına ekleyebilirsin. Ancak daha temiz bir yaklaşım için ayrı bir CSS bloğu enqueue etmek mantıklıdır:

// functions.php - CSS ekleme
add_action( 'wp_head', 'siteadi_buton_alti_css' );

function siteadi_buton_alti_css() {
    if ( ! is_product() ) return;
    ?>
    <style>
        .guven-mesaji {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 10px;
            font-size: 13px;
            color: #555;
            flex-wrap: wrap;
        }
        .guven-mesaji span {
            color: #27ae60;
            font-weight: bold;
        }
        .stok-uyari {
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 4px;
            padding: 8px 12px;
            margin-top: 8px;
            font-size: 13px;
            color: #856404;
        }
        .kargo-bilgisi {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 4px;
            padding: 8px 12px;
            margin-top: 8px;
            font-size: 13px;
            color: #155724;
        }
    </style>
    <?php
}

is_product() kontrolünü unutma. Bu CSS sadece ürün sayfalarında yüklensin, gereksiz yere her sayfaya ekleme.

Dinamik Stok Uyarısı Gösterme

Şimdi işleri gerçekten ilginç hale getirelim. Stok durumuna göre farklı mesajlar göstermek, müşteriyi aceleye getirir ve dönüşümü artırır. “Son 3 ürün kaldı!” gibi bir mesaj, kararsız bir müşteriyi harekete geçirebilir:

// functions.php - Dinamik stok uyarısı
add_action( 'woocommerce_after_add_to_cart_button', 'siteadi_stok_uyarisi', 10 );

function siteadi_stok_uyarisi() {
    global $product;
    
    if ( ! $product || ! $product->managing_stock() ) return;
    
    $stok_miktari = $product->get_stock_quantity();
    
    if ( $stok_miktari === null ) return;
    
    if ( $stok_miktari > 0 && $stok_miktari <= 5 ) {
        echo '<div class="stok-uyari">';
        echo '&#9888; <strong>Dikkat!</strong> Bu üründen sadece <strong>' . $stok_miktari . ' adet</strong> kaldı. Hemen sipariş ver!';
        echo '</div>';
    } elseif ( $stok_miktari > 5 && $stok_miktari <= 15 ) {
        echo '<div class="stok-uyari" style="background:#fff8e1; border-color:#ffcc02; color:#6b4c00;">';
        echo '&#128337; Stoklar tükeniyor, <strong>' . $stok_miktari . ' adet</strong> kaldı.';
        echo '</div>';
    }
}

Bu kod, stok 5’in altındaysa kırmızımsı uyarı, 5-15 arasındaysa sarı bir uyarı gösterir. Stok 15’in üzerindeyse hiçbir şey göstermez. Müşteriyi gereksiz baskıyla boğmak istemiyoruz, sadece gerçekten az kalan ürünlerde bilgilendirme yapıyoruz.

Kargo Süresi ve Ücretsiz Kargo Bilgisi

Müşterilerin en çok merak ettiği şeylerden biri kargonun ne zaman geleceğidir. Sepete ekle butonunun altına dinamik kargo bilgisi ekleyebilirsin. Hatta siparişin kaç TL’ye tamamlandığında ücretsiz kargo hakkı kazanılacağını göstermek de çok işe yarar:

// functions.php - Dinamik kargo bilgisi
add_action( 'woocommerce_after_add_to_cart_button', 'siteadi_kargo_bilgisi', 15 );

function siteadi_kargo_bilgisi() {
    global $product;
    
    if ( ! $product ) return;
    
    // Ücretsiz kargo limiti (WooCommerce ayarından al ya da manuel gir)
    $ucretsiz_kargo_limiti = 500;
    $urun_fiyati = floatval( $product->get_price() );
    $kalan_tutar = $ucretsiz_kargo_limiti - $urun_fiyati;
    
    echo '<div class="kargo-bilgisi">';
    
    if ( $urun_fiyati >= $ucretsiz_kargo_limiti ) {
        echo '&#128666; <strong>Bu ürün ücretsiz kargo kapsamındadır!</strong>';
    } else {
        $kalan_formatli = number_format( $kalan_tutar, 2, ',', '.' );
        echo '&#128666; Sepetine <strong>' . $kalan_formatli . ' TL</strong> daha ürün ekle, <strong>ücretsiz kargo</strong> kazan!';
    }
    
    // Tahmini teslimat günü hesaplama
    $gun = date('N'); // 1=Pazartesi, 7=Pazar
    $saat = intval( date('H') );
    
    if ( $gun >= 6 || $saat >= 16 ) {
        $teslimat = 'Pazartesi';
        if ( $gun == 6 ) $teslimat = 'Salı';
    } else {
        $teslimat = date('l', strtotime('+2 days'));
        // Türkçe gün adına çevir
        $gun_adlari = array(
            'Monday'    => 'Pazartesi',
            'Tuesday'   => 'Salı',
            'Wednesday' => 'Çarşamba',
            'Thursday'  => 'Perşembe',
            'Friday'    => 'Cuma',
        );
        $teslimat = isset( $gun_adlari[$teslimat] ) ? $gun_adlari[$teslimat] : $teslimat;
    }
    
    echo '<br>&#128197; Tahmini teslimat: <strong>' . $teslimat . '</strong>';
    echo '</div>';
}

Buradaki add_action çağrısındaki 15 öncelik değerine dikkat et. Önceki stok uyarısını 10 önceliğiyle ekledik, bu kargo bilgisini ise 15 ile. Böylece önce stok uyarısı, sonra kargo bilgisi görünür. Hook öncelikleri bu tür sıralama kontrolü için harika.

Ürün Kategorisine Göre Özelleştirilmiş İçerik

Farklı kategorilerdeki ürünler için farklı mesajlar göstermek isteyebilirsin. Elektronik ürünlerde garanti bilgisi, giyimde beden rehberi linki, gıdada son kullanma tarihi uyarısı gibi:

// functions.php - Kategoriye özel içerik
add_action( 'woocommerce_after_add_to_cart_button', 'siteadi_kategori_icerik', 20 );

function siteadi_kategori_icerik() {
    global $product;
    
    if ( ! $product ) return;
    
    $product_id     = $product->get_id();
    $kategoriler    = wp_get_post_terms( $product_id, 'product_cat', array( 'fields' => 'slugs' ) );
    
    if ( is_wp_error( $kategoriler ) || empty( $kategoriler ) ) return;
    
    // Elektronik kategorisi
    if ( in_array( 'elektronik', $kategoriler ) ) {
        echo '<div class="kategori-bilgi" style="margin-top:8px; font-size:12px; color:#444;">';
        echo '&#128220; <a href="/garanti-kosullari">2 Yıl Resmi Garantili</a> | ';
        echo '&#128222; Teknik destek: 0800 XXX XX XX';
        echo '</div>';
    }
    
    // Giyim kategorisi
    if ( in_array( 'giyim', $kategoriler ) || in_array( 'kiyafet', $kategoriler ) ) {
        echo '<div class="kategori-bilgi" style="margin-top:8px; font-size:12px; color:#444;">';
        echo '&#128220; <a href="/beden-rehberi" target="_blank">Beden rehberine bak</a> | ';
        echo '&#128257; Ücretsiz değişim hakkı';
        echo '</div>';
    }
    
    // Organik / gıda kategorisi
    if ( in_array( 'gida', $kategoriler ) || in_array( 'organik', $kategoriler ) ) {
        echo '<div class="kategori-bilgi" style="margin-top:8px; font-size:12px; color:#27ae60;">';
        echo '&#127807; %100 Organik Sertifikalı | Soğuk zincir ile kargo';
        echo '</div>';
    }
}

ACF veya Ürün Meta Verisiyle Dinamik İçerik

Eğer sitende Advanced Custom Fields (ACF) kullanıyorsan ya da custom meta alan ekliyorsan, bu alanın değerini butonun altında gösterebilirsin. Örneğin her ürüne ayrı bir “özel promosyon notu” girebiliyor olabilirsin:

// functions.php - ACF veya custom meta ile içerik
add_action( 'woocommerce_after_add_to_cart_button', 'siteadi_meta_icerik', 25 );

function siteadi_meta_icerik() {
    global $product;
    
    if ( ! $product ) return;
    
    $product_id = $product->get_id();
    
    // ACF kullanıyorsan
    if ( function_exists( 'get_field' ) ) {
        $promosyon_notu = get_field( 'promosyon_notu', $product_id );
        if ( ! empty( $promosyon_notu ) ) {
            echo '<div class="promosyon-notu" style="background:#e8f5e9; border-left:4px solid #4caf50; padding:8px 12px; margin-top:10px; font-size:13px;">';
            echo '<strong>&#127881; Özel Fırsat:</strong> ' . esc_html( $promosyon_notu );
            echo '</div>';
        }
    }
    
    // Standart WP meta ile (ACF olmadan)
    $ozel_bilgi = get_post_meta( $product_id, '_ozel_bilgi_notu', true );
    if ( ! empty( $ozel_bilgi ) ) {
        echo '<div class="ozel-bilgi" style="margin-top:8px; font-size:12px; color:#666; font-style:italic;">';
        echo '&#8505; ' . esc_html( $ozel_bilgi );
        echo '</div>';
    }
}

Kullanıcı Giriş Durumuna Göre İçerik

Giriş yapan müşterilere özel fiyat ya da avantaj göstermek de bu alanda yapılabilecek akıllıca bir şey. Üye olmayan ziyaretçilere “Üye ol, %5 indirim kazan” gibi bir mesaj göstermek dönüşümü ciddi şekilde artırabilir:

// functions.php - Giriş durumuna göre içerik
add_action( 'woocommerce_after_add_to_cart_button', 'siteadi_uye_icerik', 30 );

function siteadi_uye_icerik() {
    global $product;
    
    if ( ! $product ) return;
    
    if ( is_user_logged_in() ) {
        // Giriş yapan kullanıcı
        $current_user = wp_get_current_user();
        $toplam_siparis = wc_get_customer_order_count( $current_user->ID );
        
        if ( $toplam_siparis >= 5 ) {
            echo '<div style="margin-top:8px; font-size:12px; color:#7b1fa2;">';
            echo '&#11088; <strong>VIP Müşteri:</strong> Bu siparişte %3 ek indirim otomatik uygulandı.';
            echo '</div>';
        }
        
    } else {
        // Giriş yapmamış ziyaretçi
        $urun_fiyati    = floatval( $product->get_price() );
        $indirim_tutari = number_format( $urun_fiyati * 0.05, 2, ',', '.' );
        
        echo '<div style="margin-top:8px; padding:8px; background:#f3e5f5; border-radius:4px; font-size:12px; color:#6a1b9a;">';
        echo '&#127381; <a href="' . wp_login_url( get_permalink() ) . '"><strong>Üye girişi yap</strong></a> ve bu üründe <strong>' . $indirim_tutari . ' TL</strong> tasarruf et!';
        echo '</div>';
    }
}

Değişken Ürünlerde (Variable Products) Dikkat Edilmesi Gerekenler

Değişken ürünlerde (renk, beden seçenekli ürünler) bu hook’lar farklı davranabilir. Seçili varyasyona göre içerik göstermek istiyorsan biraz daha dikkatli olman gerekir. Bunun için en temiz yol JavaScript ile varyasyon değişikliğini dinlemektir:

// functions.php - Varyasyon değişikliğine tepki veren içerik
add_action( 'woocommerce_after_add_to_cart_button', 'siteadi_variasyon_mesaj', 35 );

function siteadi_variasyon_mesaj() {
    global $product;
    
    if ( ! $product || ! $product->is_type( 'variable' ) ) return;
    
    // Başlangıçta boş bir div, JS ile dolduracağız
    echo '<div id="variasyon-bilgi" style="margin-top:8px; font-size:12px; display:none;"></div>';
    
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('form.cart').on('found_variation', function(event, variation) {
            var bilgiDiv = $('#variasyon-bilgi');
            var mesaj = '';
            
            if (variation.is_in_stock) {
                if (variation.max_qty && variation.max_qty <= 5) {
                    mesaj = '&#9888; Bu renk/bedenden sadece <strong>' + variation.max_qty + ' adet</strong> kaldı!';
                    bilgiDiv.css({
                        'background': '#fff3cd',
                        'border': '1px solid #ffc107',
                        'padding': '8px',
                        'border-radius': '4px',
                        'color': '#856404'
                    });
                } else {
                    mesaj = '&#10003; Seçili varyant stokta mevcut.';
                    bilgiDiv.css({
                        'color': '#27ae60',
                        'background': 'transparent',
                        'border': 'none',
                        'padding': '0'
                    });
                }
            }
            
            if (mesaj) {
                bilgiDiv.html(mesaj).show();
            } else {
                bilgiDiv.hide();
            }
        });
        
        $('form.cart').on('reset_data', function() {
            $('#variasyon-bilgi').hide();
        });
    });
    </script>
    <?php
}

Tüm Kodları Düzenli Organize Etmek

Birden fazla fonksiyon ekleyince functions.php karmaşıklaşabilir. Özellikle ekip ortamında çalışıyorsan ya da müşteri sitesi yönetiyorsan, bu kodları düzenli tutmak bakımı kolaylaştırır:

// functions.php - Tüm buton altı içerikleri tek fonksiyonda
add_action( 'woocommerce_after_add_to_cart_button', 'siteadi_buton_alti_icerikler', 10 );

function siteadi_buton_alti_icerikler() {
    global $product;
    
    if ( ! $product ) return;
    
    echo '<div class="buton-alti-wrapper">';
    
    // 1. Güven ikonları
    siteadi_guven_ikonlari();
    
    // 2. Stok uyarısı
    siteadi_stok_mesaji( $product );
    
    // 3. Kargo bilgisi
    siteadi_kargo_mesaji( $product );
    
    echo '</div>';
}

function siteadi_guven_ikonlari() {
    echo '<div class="guven-satiri">';
    echo '<span>&#128274; Güvenli Ödeme</span>';
    echo '<span>&#128222; 7/24 Destek</span>';
    echo '<span>&#8635; Kolay İade</span>';
    echo '</div>';
}

function siteadi_stok_mesaji( $product ) {
    if ( ! $product->managing_stock() ) return;
    $stok = $product->get_stock_quantity();
    if ( $stok && $stok <= 10 ) {
        echo '<p class="stok-uyari">Son <strong>' . intval( $stok ) . '</strong> ürün!</p>';
    }
}

function siteadi_kargo_mesaji( $product ) {
    $fiyat = floatval( $product->get_price() );
    if ( $fiyat >= 500 ) {
        echo '<p class="kargo-bilgisi">&#128666; Bu ürün <strong>ücretsiz kargo</strong> kapsamında!</p>';
    }
}

Performans ve Güvenlik Notları

Bu kodları yazarken dikkat etmen gereken birkaç önemli nokta var:

  • Çıktı temizleme: Kullanıcıdan ya da veritabanından gelen her veriyi esc_html() veya esc_attr() ile temizle. Yukarıdaki örneklerde bunu uyguladık, sen de kendi kodlarında bunu ihmal etme.
  • is_product() kontrolü: CSS ve JavaScript’i sadece ürün sayfalarına yükle, gereksiz yük oluşturma.
  • Global $product kullanımı: Hook’ların içinde global $product değişkenine erişmek güvenlidir ama her ihtimale karşı null kontrolü yap.
  • Öncelik çakışması: Birden fazla eklenti ya da tema aynı hook’u kullanıyorsa öncelik numaralarını dikkatlice seç. 10, 15, 20 gibi artan değerler kullanmak sıralamayı netleştirir.
  • Tema uyumluluğu: Bazı temalar (Flatsome, Divi, vb.) WooCommerce hook’larını override edebilir. Eğer içerik görünmüyorsa temanın kendi ürün sayfası şablonunu kontrol et.

Child theme kullanıyorsan bu kodları parent temanın functions.php‘sine değil, child temanınkine eklemeyi unutma. Yoksa tema güncellemesinde her şey gidebilir.

Sonuç

woocommerce_after_add_to_cart_button hook’u, görünüşte küçük ama etkisi büyük bir alan için kapı açıyor. Sadece birkaç satır PHP ile stok uyarısı, kargo bilgisi, güven mesajı, kategori özelinde içerik ya da üye durumuna göre özelleştirilmiş teklifler sunabilirsin. Tüm bunları tema dosyalarına dokunmadan, sadece functions.php üzerinden yapabilmek WooCommerce’in hook sisteminin ne kadar güçlü olduğunu gösteriyor.

Gerçek projelerde bu teknikleri test ederken A/B testlerini de unutma. Aynı ürün sayfasında farklı mesajların hangisinin daha iyi dönüştürdüğünü Google Optimize ya da başka bir araçla ölçebilirsin. Çünkü sonuçta en doğru mesaj, müşterinin davranışının sana söylediğidir.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir