WooCommerce Checkout Başına İçerik Eklemek

E-ticaret sitesi yönetirken checkout sayfası, dönüşüm oranını doğrudan etkileyen en kritik noktalardandır. Müşterilerin alışverişi tamamlamadan önce gördüğü bu sayfa, bazen ek bir bilgi mesajı, güven rozeti, özel bir promosyon notu ya da yasal bir uyarı gerektir. WooCommerce bunu yerleşik arayüzden yapmana izin vermez, ama functions.php dosyasına birkaç satır kod ekleyerek istediğin içeriği tam istediğin yere yerleştirebilirsin.

WooCommerce Hook Sistemi Nedir?

WooCommerce, WordPress’in action ve filter hook sistemini son derece kapsamlı biçimde kullanır. Checkout sayfasında onlarca farklı hook noktası bulunur ve her biri sayfanın farklı bir bölgesine karşılık gelir. Bu hook’ları bilmek, tema dosyalarına dokunmadan, güncellemeye dayanıklı şekilde özelleştirme yapmanı sağlar.

Checkout sayfasının başına içerik eklemek için en çok kullanılan iki hook şunlardır:

woocommerce_before_checkout_form: Checkout formunun tamamen dışına, form başlamadan önce içerik ekler
woocommerce_checkout_before_customer_details: Müşteri bilgileri bölümünün hemen üstüne, ama form içine ekler

Bu ikisi arasındaki fark önemlidir. Birincisi formun dışındayken ikincisi formun içindedir. Tasarım ve CSS açısından hangi konumun daha iyi çalışacağı temana göre değişir.

Temel Kullanım: Basit Metin Mesajı Ekleme

En basit senaryo ile başlayalım. Checkout sayfasının en üstüne bir bilgi mesajı eklemek istiyorsun. Örneğin kargo süreleriyle ilgili bir uyarı ya da aktif bir kampanya notu olabilir.

// functions.php dosyasına ekle
add_action( 'woocommerce_before_checkout_form', 'ozel_checkout_mesaji', 5 );

function ozel_checkout_mesaji() {
    echo '<div class="checkout-bilgi-mesaji" style="background:#fff3cd; border:1px solid #ffc107; padding:15px; margin-bottom:20px; border-radius:4px;">';
    echo '<strong>Bilgi:</strong> Siparişler hafta içi saat 14:00'e kadar aynı gün kargoya verilmektedir.';
    echo '</div>';
}

Bu kodda dikkat etmen gereken şey 5 öncelik değeridir. WooCommerce’in kendi içerikleri genellikle 10 önceliğiyle yüklenir. Sen 5 yazarak kendi içeriğinin önce gelmesini garantiliyorsun.

WooCommerce Bildirim Sınıflarını Kullanmak

WooCommerce’in kendi stil sistemini kullanmak, eklediğin içeriğin sayfayla daha uyumlu görünmesini sağlar. WooCommerce’in yerleşik CSS sınıfları şunlardır:

woocommerce-info: Mavi renkte bilgi kutusu
woocommerce-message: Yeşil renkte başarı mesajı
woocommerce-error: Kırmızı renkte hata/uyarı kutusu

add_action( 'woocommerce_before_checkout_form', 'wc_stilinde_checkout_mesaji', 5 );

function wc_stilinde_checkout_mesaji() {
    echo '<div class="woocommerce-info">';
    echo 'Ücretsiz kargo için sepetinizin <strong>500 TL</strong> üzerinde olması gerekmektedir. ';
    echo '<a href="' . get_permalink( wc_get_page_id( 'shop' ) ) . '">Alışverişe devam et</a>';
    echo '</div>';
}

Bu yaklaşımın güzelliği, mevcut temandan bağımsız olarak WooCommerce’in kendi CSS’ini kullanmasıdır. Temayı değiştirsen bile mesaj aynı şekilde görünmeye devam eder.

Koşullu İçerik: Sadece Belirli Durumlarda Gösterme

Gerçek dünyada genellikle herkese değil, belirli müşterilere veya belirli koşullar sağlandığında içerik göstermek istersin. Aşağıdaki örnekte sepet tutarına göre dinamik mesaj gösteriyoruz.

add_action( 'woocommerce_before_checkout_form', 'kosullu_checkout_mesaji', 5 );

function kosullu_checkout_mesaji() {
    $sepet_toplami = WC()->cart->get_subtotal();
    $ucretsiz_kargo_limiti = 500;
    $kalan = $ucretsiz_kargo_limiti - $sepet_toplami;

    if ( $sepet_toplami < $ucretsiz_kargo_limiti ) {
        echo '<div class="woocommerce-info">';
        printf(
            'Ücretsiz kargo için <strong>%s TL</strong> daha alışveriş yapman yeterli!',
            number_format( $kalan, 2, ',', '.' )
        );
        echo '</div>';
    } else {
        echo '<div class="woocommerce-message">';
        echo '<strong>Tebrikler!</strong> Siparişiniz ücretsiz kargo için uygun.';
        echo '</div>';
    }
}

Bu kod hem teşvik edici hem de dinamiktir. Sepet tutarı değiştikçe mesaj otomatik güncellenir.

Kullanıcı Rolüne Göre İçerik Gösterme

Toptan satış yapan bir site yönetiyorsan, bayi müşterilere farklı, normal müşterilere farklı bilgiler göstermen gerekebilir.

add_action( 'woocommerce_before_checkout_form', 'role_bazli_checkout_mesaji', 5 );

function role_bazli_checkout_mesaji() {
    if ( ! is_user_logged_in() ) {
        echo '<div class="woocommerce-info">';
        echo 'Üye girişi yaparak siparişlerinizi daha kolay takip edebilirsiniz. ';
        echo '<a href="' . wp_login_url( get_permalink() ) . '">Giriş yap</a> | ';
        echo '<a href="' . wp_registration_url() . '">Üye ol</a>';
        echo '</div>';
        return;
    }

    $kullanici = wp_get_current_user();
    
    if ( in_array( 'wholesale_customer', (array) $kullanici->roles ) ) {
        echo '<div class="woocommerce-message">';
        echo 'Bayi fiyatları uygulanmaktadır. Minimum sipariş tutarı: <strong>1.000 TL</strong>';
        echo '</div>';
    }
    
    if ( in_array( 'administrator', (array) $kullanici->roles ) ) {
        echo '<div class="woocommerce-info">';
        echo '<strong>[Yönetici Görünümü]</strong> Bu sipariş test amaçlı işlenecektir.';
        echo '</div>';
    }
}

Güven Rozeti ve SSL Bilgisi Ekleme

Checkout sayfasında dönüşüm oranını artırmanın en etkili yollarından biri güven rozeti ve güvenlik ikonları eklemektir. Araştırmalar, ödeme sayfasında güven sembolleri gören kullanıcıların sepeti terk etme oranının belirgin şekilde düştüğünü gösteriyor.

add_action( 'woocommerce_before_checkout_form', 'guven_rozeti_ekle', 3 );

function guven_rozeti_ekle() {
    ?>
    <div class="guven-rozeti-alani" style="display:flex; align-items:center; justify-content:center; gap:20px; padding:15px; background:#f8f9fa; border-radius:6px; margin-bottom:25px; flex-wrap:wrap;">
        
        <div style="display:flex; align-items:center; gap:8px; color:#28a745;">
            <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
            </svg>
            <span style="font-size:14px; font-weight:600;">256-bit SSL Şifreleme</span>
        </div>
        
        <div style="display:flex; align-items:center; gap:8px; color:#007bff;">
            <span style="font-size:14px;">&#10003; Güvenli Ödeme</span>
        </div>
        
        <div style="display:flex; align-items:center; gap:8px; color:#6c757d;">
            <span style="font-size:14px;">&#128274; Kişisel Verileriniz Korunmaktadır</span>
        </div>
        
    </div>
    <?php
}

Kampanya Kodu Veya Özel Teklif Bildirimi

Zaman sınırlı kampanyalar için checkout sayfasına bir banner eklemek ve sayaç ile desteklemek oldukça etkili bir yöntemdir. Aşağıdaki örnek, veritabanındaki bir kampanya bayrağını kontrol ederek içeriği dinamik şekilde gösteriyor.

add_action( 'woocommerce_before_checkout_form', 'kampanya_bildirimi_ekle', 4 );

function kampanya_bildirimi_ekle() {
    // Kampanya aktif mi kontrolü (ACF, Options API veya custom meta ile yönetilebilir)
    $kampanya_aktif = get_option( 'ozel_kampanya_aktif', false );
    $kampanya_mesaji = get_option( 'ozel_kampanya_mesaji', '' );
    $kampanya_kodu = get_option( 'ozel_kampanya_kodu', '' );
    
    if ( ! $kampanya_aktif || empty( $kampanya_mesaji ) ) {
        return;
    }
    
    ?>
    <div class="kampanya-alani" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; padding:18px 20px; border-radius:6px; margin-bottom:20px; text-align:center;">
        <p style="margin:0 0 8px; font-size:16px; font-weight:600;">
            <?php echo esc_html( $kampanya_mesaji ); ?>
        </p>
        <?php if ( ! empty( $kampanya_kodu ) ) : ?>
            <p style="margin:0; font-size:14px;">
                Kampanya kodu: 
                <code style="background:rgba(255,255,255,0.2); padding:3px 10px; border-radius:3px; font-size:15px; font-weight:700; letter-spacing:2px;">
                    <?php echo esc_html( $kampanya_kodu ); ?>
                </code>
            </p>
        <?php endif; ?>
    </div>
    <?php
}

Bu yaklaşımın avantajı, kampanya içeriğini WordPress yönetim panelinden update_option() çağrısıyla veya özel bir settings sayfası üzerinden yönetebilmenidir. Kodu her değiştirmene gerek kalmaz.

Hook Öncelik Değerleri ve Sıralama

Birden fazla içerik ekliyorsan, hangi içeriğin önce görüneceğini hook öncelik değerleriyle kontrol edersin. Bu değerlere dair bilmeni gereken noktalar:

1-4 arası: En üst, WooCommerce’in kendi içeriklerinden önce
5: WooCommerce’in woocommerce_before_checkout_form çıktısından hemen önce
10: WooCommerce varsayılan önceliği
15-20: WooCommerce’in kendi içeriklerinden sonra
Sayı ne kadar küçükse o kadar önce çalışır

// Öncelik sıralaması örneği
// 3 numarası ile önce çalışacak - güven rozeti
add_action( 'woocommerce_before_checkout_form', 'guven_rozeti_ekle', 3 );

// 4 numarası ile ikinci çalışacak - kampanya
add_action( 'woocommerce_before_checkout_form', 'kampanya_bildirimi_ekle', 4 );

// 5 numarası ile üçüncü çalışacak - genel bilgi mesajı
add_action( 'woocommerce_before_checkout_form', 'ozel_checkout_mesaji', 5 );

Belirli Ürün Kategorilerine Göre Dinamik Mesaj

Sepette belirli kategorilerden ürün varsa özel mesaj göstermek, hem kullanıcı deneyimini iyileştirir hem de ek satış fırsatı yaratır.

add_action( 'woocommerce_before_checkout_form', 'kategori_bazli_checkout_mesaji', 5 );

function kategori_bazli_checkout_mesaji() {
    if ( is_null( WC()->cart ) || WC()->cart->is_empty() ) {
        return;
    }
    
    $hedef_kategori = 'elektronik'; // Slug olarak gir
    $kategori_var = false;
    $urun_isimleri = array();
    
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $urun_id = $cart_item['product_id'];
        
        if ( has_term( $hedef_kategori, 'product_cat', $urun_id ) ) {
            $kategori_var = true;
            $urun_isimleri[] = get_the_title( $urun_id );
        }
    }
    
    if ( $kategori_var ) {
        echo '<div class="woocommerce-info">';
        echo '<strong>Elektronik ürünler için:</strong> ';
        echo 'Sepetinizdeki elektronik ürünler 2 yıl resmi garanti kapsamındadır. ';
        echo 'Garanti belgesi kargo ile birlikte teslim edilir.';
        echo '</div>';
    }
}

Geri Sayım Sayacı ile Aciliyet Yaratma

Sınırlı süreli teklifler için basit bir JavaScript geri sayım sayacını checkout sayfasına ekleyebilirsin.

add_action( 'woocommerce_before_checkout_form', 'geri_sayim_banner', 4 );

function geri_sayim_banner() {
    // Kampanya bitiş zamanı (sunucu saatine göre)
    $bitis_zamani = strtotime( '2024-12-31 23:59:59' );
    $simdi = time();
    
    if ( $simdi >= $bitis_zamani ) {
        return; // Kampanya bitti, gösterme
    }
    
    $kalan_saniye = $bitis_zamani - $simdi;
    
    ?>
    <div id="geri-sayim-banner" style="background:#dc3545; color:#fff; padding:15px 20px; border-radius:6px; margin-bottom:20px; text-align:center;">
        <p style="margin:0 0 8px; font-size:15px; font-weight:600;">
            Yil Sonu Kampanyasi - Sinirsiz Kargo!
        </p>
        <div id="sayac" style="font-size:22px; font-weight:700; letter-spacing:2px;">
            <span id="saat">00</span>:<span id="dakika">00</span>:<span id="saniye">00</span>
        </div>
    </div>
    
    <script type="text/javascript">
        var kalanSaniye = <?php echo intval( $kalan_saniye ); ?>;
        
        function sayacGuncelle() {
            if ( kalanSaniye <= 0 ) {
                document.getElementById('geri-sayim-banner').style.display = 'none';
                return;
            }
            
            var saat    = Math.floor( kalanSaniye / 3600 );
            var dakika  = Math.floor( ( kalanSaniye % 3600 ) / 60 );
            var saniye  = kalanSaniye % 60;
            
            document.getElementById('saat').textContent    = String(saat).padStart(2, '0');
            document.getElementById('dakika').textContent  = String(dakika).padStart(2, '0');
            document.getElementById('saniye').textContent  = String(saniye).padStart(2, '0');
            
            kalanSaniye--;
        }
        
        sayacGuncelle();
        setInterval( sayacGuncelle, 1000 );
    </script>
    <?php
}

Yasal Uyarı ve KVKK Bilgilendirmesi

E-ticaret sitelerinde checkout sayfasına yasal bilgilendirme eklemek, hem kullanıcı hakları açısından hem de yasal uyum açısından önemlidir.

add_action( 'woocommerce_before_checkout_form', 'yasal_bilgilendirme_ekle', 6 );

function yasal_bilgilendirme_ekle() {
    $kvkk_url        = get_privacy_policy_url();
    $kosullar_url    = get_permalink( get_option('woocommerce_terms_page_id') );
    $mesafeli_url    = '#mesafeli-satis'; // Kendi sayfanı linkle
    
    ?>
    <div class="yasal-bilgi" style="background:#f8f9fa; border-left:4px solid #6c757d; padding:12px 15px; margin-bottom:20px; font-size:13px; color:#555; line-height:1.6;">
        <strong>Bilgilendirme:</strong> Siparişinizi tamamlayarak 
        <?php if ( $kosullar_url ) : ?>
            <a href="<?php echo esc_url( $kosullar_url ); ?>" target="_blank">Kullanim Sartlari</a> ve 
        <?php endif; ?>
        <?php if ( $kvkk_url ) : ?>
            <a href="<?php echo esc_url( $kvkk_url ); ?>" target="_blank">KVKK Aydinlatma Metni</a>
        <?php endif; ?>
        'ni okudugunuzu ve kabul ettiginizi onaylamis olursunuz. 
        <a href="<?php echo esc_url( $mesafeli_url ); ?>" target="_blank">Mesafeli Satis Sozlesmesi</a> 
        siparis tamamlandiginda e-posta ile iletilecektir.
    </div>
    <?php
}

Dikkat Edilmesi Gereken Noktalar

Güvenlik ve veri doğrulama konusunda:

Dinamik içerik çıktılarken daima esc_html(), esc_url(), wp_kses_post() gibi sanitizasyon fonksiyonlarını kullan
get_option() ile çektiğin değerleri ekrana basmadan önce temizle
Kullanıcı girişi gerektiren işlemlerde nonce doğrulaması ekle

Performans konusunda:

Her hook callback’i, her checkout sayfası yüklenişinde çalışır
Veritabanı sorguları içeren fonksiyonları mümkünse transient ile önbelleğe al
JavaScript eklerken wp_add_inline_script() kullanmayı düşün, direkt echo yerine

Tema uyumluluğu konusunda:

Inline CSS kullanmak hızlı ama sürdürülebilir değil, mümkünse wp_enqueue_style() ile harici CSS ekle
Farklı temalarda hook’ların görsel konumu değişebilir, ekledikten sonra mutlaka test et
Storefront, Astra, Flatsome gibi popüler temalarda test etmek iyi bir alışkanlıktır

WooCommerce güncellemeleri konusunda:

Hook isimleri nadiren değişse de her büyük WooCommerce güncellemesinden sonra checkout sayfanı kontrol et
woocommerce_before_checkout_form hook’u WooCommerce 2.x’ten beri stabil olduğu için güvenle kullanabilirsin

Tüm Kodları Temiz Organize Etmek

Birden fazla checkout özelleştirmesi yapıyorsan, bunları functions.php içinde gruplayarak yönetmek daha sonra bakımı kolaylaştırır.

/**
 * ==========================================
 * CHECKOUT SAYFASI OZELESTIRMELERI
 * ==========================================
 */

// 1. Guven rozeti (en ust)
add_action( 'woocommerce_before_checkout_form', 'guven_rozeti_ekle', 3 );

// 2. Aktif kampanya bildirimi
add_action( 'woocommerce_before_checkout_form', 'kampanya_bildirimi_ekle', 4 );

// 3. Genel bilgi mesaji (kargo, teslimat vs.)
add_action( 'woocommerce_before_checkout_form', 'ozel_checkout_mesaji', 5 );

// 4. Yasal bilgilendirme (en alta)
add_action( 'woocommerce_before_checkout_form', 'yasal_bilgilendirme_ekle', 6 );

/**
 * Guven rozeti
 */
function guven_rozeti_ekle() {
    // ... kod buraya
}

/**
 * Kampanya bildirimi - WordPress Options API ile yonetilir
 */
function kampanya_bildirimi_ekle() {
    // ... kod buraya
}

Bu yapıyı kullandığında ileride bir fonksiyonu kapatmak için sadece ilgili add_action satırını yorum satırına almak yeterli, fonksiyonun kendisini silmene gerek kalmaz.

Sonuç

WooCommerce checkout sayfasının başına içerik eklemek, functions.php dosyasına birkaç satır kod ile çözülebilecek basit ama etkili bir özelleştirmedir. woocommerce_before_checkout_form hook’u bu iş için tam da ihtiyacın olan noktaya erişmeni sağlar.

Özetlemek gerekirse şu yaklaşım en sağlıklısı:

Statik bilgi mesajları için WooCommerce’in kendi CSS sınıflarını kullan
Dinamik içerikler için her zaman veri doğrulaması ve sanitizasyon ekle
Birden fazla içerik eklerken öncelik değerlerini bilinçli kullan
Büyük WooCommerce güncellemelerinden sonra checkout sayfanı gözden geçir
Farklı kullanıcı rolleri ve sepet durumları için koşullu gösterim uygula

E-ticaret sitelerinde küçük görünen bu değişiklikler, kullanıcı güvenini artırarak sepet terk oranını düşürür ve dönüşüm oranına doğrudan olumlu etki eder. Bunu yaparken tema dosyalarına dokunmadan, güncellemeye dayanıklı bir yöntem kullanmış olursun.

WooCommerce Checkout Sayfasının Başına İçerik Ekleme