WooCommerce Sepet Sayfasında İçeriğin Altına İçerik Ekleme

Tarafındankomut
0 Comments

WooCommerce ile çalışırken en sık karşılaşılan ihtiyaçlardan biri, mevcut sayfalara müdahale etmeden ekstra içerik eklemektir. Sepet sayfası da bunların başında gelir. Müşteriye ek bilgi vermek, promosyon mesajı göstermek ya da güven artırıcı bir banner koymak istiyorsun ama template dosyalarını kurcalamak istemiyorsun. İşte tam burada WooCommerce hook sistemi devreye giriyor.

Bu yazıda woocommerce_after_cart hook’unu ve çevresindeki diğer hook’ları kullanarak sepet sayfasının içerik alanının altına nasıl içerik ekleyebileceğini, bunu functions.php üzerinden nasıl yöneteceğini ve gerçek dünya senaryolarıyla nasıl uygulamaya dökeceğini ele alacağız.

WooCommerce Hook Sistemi Nedir?

WordPress’in aksiyona dayalı hook sistemi, WooCommerce tarafından çok kapsamlı biçimde kullanılır. Bir sayfanın farklı bölgelerine müdahale etmek için onlarca action hook mevcuttur. Bu hook’lar sayesinde core dosyalarını değiştirmeden, tema güncellemelerinden etkilenmeden özelleştirmeler yapabilirsin.

Sepet sayfasıyla ilgili temel hook’lar şunlardır:

  • woocommerce_before_cart: Sepet tablosunun tamamen üstüne içerik ekler
  • woocommerce_before_cart_table: Sepet tablosunun hemen öncesine ekler
  • woocommerce_after_cart_table: Sepet tablosunun hemen arkasına ekler
  • woocommerce_cart_collaterals: Sepet toplamları bölgesinin yanına ekler
  • woocommerce_after_cart: Tüm sepet içeriğinin en altına ekler
  • woocommerce_before_cart_totals: Sepet toplamları kutusunun üstüne ekler
  • woocommerce_after_cart_totals: Sepet toplamları kutusunun altına ekler

Biz bu yazıda özellikle woocommerce_after_cart hook’u üzerine yoğunlaşacağız çünkü bu hook, sepetteki tüm içeriğin, ürün listesinin ve toplam kutusunun bittiği noktanın hemen arkasına içerik eklememizi sağlar.

Temel Kullanım: Basit Metin veya HTML Ekleme

En basit senaryodan başlayalım. Sepet sayfasının altına sabit bir bilgi mesajı eklemek istiyorsun. Bunun için functions.php dosyana şu kodu eklemen yeterli:

// functions.php
add_action( 'woocommerce_after_cart', 'sepet_alti_bilgi_mesaji' );

function sepet_alti_bilgi_mesaji() {
    echo '<div class="sepet-bilgi-kutusu" style="background:#f0f8ff; border:1px solid #d0e8ff; padding:15px; margin-top:20px; border-radius:6px;">';
    echo '<p><strong>Kargo Bilgisi:</strong> 500 TL ve üzeri siparişlerde kargo tamamen ücretsizdir. Siparişiniz 1-3 iş günü içinde kargoya verilir.</p>';
    echo '</div>';
}

Bu kadar basit. add_action ile hook’a bağlanıyorsun, callback fonksiyonunu tanımlıyorsun ve içeriği echo ile yazdırıyorsun. Hook sistemi geri kalanını hallediyor.

Gelişmiş Kullanım: Koşullu İçerik Gösterimi

Gerçek dünyada genellikle herkese aynı içeriği göstermek istemezsin. Belki sadece belirli bir sepet tutarının altındaki kullanıcılara ücretsiz kargo eşiğini hatırlatmak istiyorsun. Ya da belirli kategorilerden ürün ekleyenlere özel bir mesaj vermek istiyorsun.

// functions.php
add_action( 'woocommerce_after_cart', 'kargo_esigi_hatirlatmasi', 10 );

function kargo_esigi_hatirlatmasi() {
    $ucretsiz_kargo_esigi = 500;
    $sepet_toplami = WC()->cart->get_subtotal();
    $kalan_tutar = $ucretsiz_kargo_esigi - $sepet_toplami;

    if ( $sepet_toplami < $ucretsiz_kargo_esigi ) {
        $mesaj = sprintf(
            '<strong>%s TL</strong> daha ekle, ücretsiz kargonun tadını çıkar!',
            number_format( $kalan_tutar, 2, ',', '.' )
        );
        echo '<div class="ucretsiz-kargo-bar" style="background:#fff3cd; border:1px solid #ffc107; padding:12px 20px; margin-top:20px; border-radius:4px; text-align:center;">';
        echo '<span style="font-size:16px;">🚚 ' . $mesaj . '</span>';
        echo '</div>';
    } else {
        echo '<div class="ucretsiz-kargo-bar" style="background:#d4edda; border:1px solid #28a745; padding:12px 20px; margin-top:20px; border-radius:4px; text-align:center;">';
        echo '<span style="font-size:16px;">✅ Tebrikler! Ücretsiz kargo hakkı kazandınız.</span>';
        echo '</div>';
    }
}

Bu örnek çok daha kullanışlı. Müşteri eşiğin altındaysa ne kadar eksik olduğunu görür, eşiği geçtiyse olumlu bir geri bildirim alır. Bu küçük detay dönüşüm oranlarını ciddi ölçüde etkileyebilir.

Priority (Öncelik) Parametresini Anlamak

add_action fonksiyonunun üçüncü parametresi olan priority değeri, aynı hook’a bağlı birden fazla fonksiyon varsa hangisinin önce çalışacağını belirler. Varsayılan değer 10‘dur.

// Düşük priority = daha önce çalışır
add_action( 'woocommerce_after_cart', 'ilk_gosterilecek_icerik', 5 );

function ilk_gosterilecek_icerik() {
    echo '<div class="birinci-blok" style="margin-top:20px; padding:15px; background:#e8f5e9; border-radius:4px;">';
    echo '<p>Bu içerik önce görünür - Priority: 5</p>';
    echo '</div>';
}

// Yüksek priority = daha sonra çalışır
add_action( 'woocommerce_after_cart', 'son_gosterilecek_icerik', 20 );

function son_gosterilecek_icerik() {
    echo '<div class="ikinci-blok" style="margin-top:10px; padding:15px; background:#fce4ec; border-radius:4px;">';
    echo '<p>Bu içerik sonra görünür - Priority: 20</p>';
    echo '</div>';
}

Birden fazla bilgi bloğu ekleyeceksen priority parametresi kritik öneme sahip. Önce kargo bilgisi, sonra güven rozetleri, en son sosyal medya paylaşım butonları gibi mantıklı bir sıralama oluşturabilirsin.

Güven Rozetleri Ekleme

E-ticaret sitelerinde sepet terk oranını düşürmenin en etkili yöntemlerinden biri güven artırıcı elementler göstermektir. Sepet sayfasının altına ödeme güvenliği, iade garantisi gibi rozetler eklemek için:

// functions.php
add_action( 'woocommerce_after_cart', 'guven_rozetleri_ekle', 15 );

function guven_rozetleri_ekle() {
    // Sadece sepet boş değilse göster
    if ( WC()->cart->is_empty() ) {
        return;
    }
    ?>
    <div class="guven-rozetleri-wrapper" style="margin-top:30px; padding:20px; border-top:2px solid #eee;">
        <div style="display:flex; justify-content:center; gap:30px; flex-wrap:wrap; align-items:center; text-align:center;">
            <div class="rozet-item">
                <span style="font-size:28px; display:block;">🔒</span>
                <strong style="display:block; margin-top:5px;">256-bit SSL</strong>
                <small style="color:#777;">Güvenli Ödeme</small>
            </div>
            <div class="rozet-item">
                <span style="font-size:28px; display:block;">↩️</span>
                <strong style="display:block; margin-top:5px;">30 Gün</strong>
                <small style="color:#777;">İade Garantisi</small>
            </div>
            <div class="rozet-item">
                <span style="font-size:28px; display:block;">📦</span>
                <strong style="display:block; margin-top:5px;">Hızlı Kargo</strong>
                <small style="color:#777;">1-3 İş Günü</small>
            </div>
            <div class="rozet-item">
                <span style="font-size:28px; display:block;">📞</span>
                <strong style="display:block; margin-top:5px;">7/24 Destek</strong>
                <small style="color:#777;">Müşteri Hizmetleri</small>
            </div>
        </div>
    </div>
    <?php
}

Burada inline HTML yazmak yerine PHP’nin heredoc veya nowdoc söz dizimine benzer şekilde ?> ile PHP modundan çıkıp HTML yazıyoruz. Bu, uzun HTML blokları için çok daha okunabilir bir yaklaşım.

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

Wholesale (toptan) müşterilere ayrı mesaj, perakende müşterilere ayrı mesaj göstermek istiyorsun diyelim. Ya da sadece giriş yapmış kullanıcılara özel bir içerik sunmak istiyorsun:

// functions.php
add_action( 'woocommerce_after_cart', 'role_gore_sepet_mesaji', 12 );

function role_gore_sepet_mesaji() {
    if ( ! is_user_logged_in() ) {
        // Giriş yapmamış kullanıcılar için
        echo '<div style="background:#e3f2fd; border-left:4px solid #2196F3; padding:15px; margin-top:20px;">';
        echo '<p><strong>Üye misin?</strong> <a href="' . wc_get_page_permalink( 'myaccount' ) . '">Giriş yap</a> ve özel fırsatlardan yararlan. İlk siparişinde %10 indirim!</p>';
        echo '</div>';
        return;
    }

    $current_user = wp_get_current_user();
    $user_roles   = $current_user->roles;

    if ( in_array( 'wholesale_customer', $user_roles ) ) {
        // Toptan müşteri mesajı
        echo '<div style="background:#f3e5f5; border-left:4px solid #9C27B0; padding:15px; margin-top:20px;">';
        echo '<p>💎 <strong>Toptan Müşteri Avantajı:</strong> Bu siparişinizde toptan fiyatlandırma otomatik uygulanmıştır.</p>';
        echo '</div>';
    } else {
        // Normal üye mesajı
        echo '<div style="background:#e8f5e9; border-left:4px solid #4CAF50; padding:15px; margin-top:20px;">';
        echo '<p>⭐ <strong>Sadakat Puanı:</strong> Bu siparişten <strong>' . round( WC()->cart->get_total( 'edit' ) * 0.05 ) . ' puan</strong> kazanacaksınız!</p>';
        echo '</div>';
    }
}

Sepet İçeriğine Göre Dinamik Öneri Gösterme

Sepetteki ürünlerin kategorilerine bakarak ilgili ek hizmetleri ya da ürünleri önermek çok etkili bir yöntem. Örneğin elektronik ürün aldıysa sigorta öner, tekstil ürünü aldıysa kargo sigortası öner:

// functions.php
add_action( 'woocommerce_after_cart', 'kategori_bazli_oneri', 18 );

function kategori_bazli_oneri() {
    $elektronik_var = false;
    $tekstil_var    = false;

    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $product_id = $cart_item['product_id'];

        if ( has_term( 'elektronik', 'product_cat', $product_id ) ) {
            $elektronik_var = true;
        }

        if ( has_term( 'giyim', 'product_cat', $product_id ) || has_term( 'tekstil', 'product_cat', $product_id ) ) {
            $tekstil_var = true;
        }
    }

    if ( $elektronik_var ) {
        echo '<div class="oneri-kutusu" style="background:#fff8e1; border:1px solid #ffca28; padding:15px; margin-top:20px; border-radius:6px;">';
        echo '<p>⚡ <strong>Elektronik Ürün Koruma:</strong> Sepetinizdeki elektronik ürünleriniz için 2 yıl ek garanti sigortası ekleyebilirsiniz. ';
        echo '<a href="/urun/ek-garanti" style="color:#f57f17; font-weight:bold;">Daha fazla bilgi al →</a></p>';
        echo '</div>';
    }

    if ( $tekstil_var ) {
        echo '<div class="oneri-kutusu" style="background:#fce4ec; border:1px solid #e91e63; padding:15px; margin-top:15px; border-radius:6px;">';
        echo '<p>👗 <strong>Stil Önerisi:</strong> Seçtiklerinizi tamamlayacak aksesuarlar için ';
        echo '<a href="/kategori/aksesuarlar" style="color:#c2185b; font-weight:bold;">aksesuar kategorimize göz atın →</a></p>';
        echo '</div>';
    }
}

Shortcode ile Esnek İçerik Yönetimi

Eğer içeriği sık sık değiştirmek istiyorsan ya da teknik olmayan bir ekip üyesinin bu içeriği yönetmesini istiyorsan, WordPress shortcode’ları ve sayfa editörünü devreye sokabilirsin. Şöyle çalışır: WordPress’te bir sayfa oluşturursun, içeriği oraya yazarsın, sonra bu sayfanın ID’sini hook üzerinden çağırırsın.

// functions.php - Shortcode veya sayfa içeriği ile dinamik yönetim
add_action( 'woocommerce_after_cart', 'dinamik_sepet_alti_icerik', 20 );

function dinamik_sepet_alti_icerik() {
    // WordPress admin'de oluşturulan sayfanın ID'si
    // Bunu options'a da kaydedebilirsin
    $sayfa_id = get_option( 'sepet_alti_icerik_id', 0 );

    if ( $sayfa_id && get_post_status( $sayfa_id ) === 'publish' ) {
        $sayfa = get_post( $sayfa_id );
        if ( $sayfa ) {
            echo '<div class="dinamik-sepet-icerik" style="margin-top:30px; padding:20px; background:#f9f9f9; border-radius:8px;">';
            echo apply_filters( 'the_content', $sayfa->post_content );
            echo '</div>';
        }
        return;
    }

    // Sayfa tanımlanmamışsa varsayılan içerik göster
    echo '<div style="margin-top:20px; padding:15px; background:#f5f5f5; text-align:center; border-radius:4px;">';
    echo '<p>Güvenli alışveriş için doğru adrestesiniz. 🛡️</p>';
    echo '</div>';
}

Bu yaklaşımla admin panelinden herhangi biri içeriği güncelleyebilir. SEO eklentileriyle oluşturulan içerikler, Gutenberg blokları veya klasik editör içerikleri, tamamı desteklenir.

Inline CSS Yerine wp_enqueue Ile Stil Yönetimi

Yukarıdaki örneklerin bir kısmında inline style kullandık. Bu küçük testler ve prototipler için uygun ama production ortamı için CSS dosyasını ayrı yönetmek çok daha temiz bir yaklaşım:

// functions.php - CSS dosyasını sadece sepet sayfasında yükle
add_action( 'wp_enqueue_scripts', 'sepet_alti_stilleri' );

function sepet_alti_stilleri() {
    if ( ! function_exists( 'is_cart' ) || ! is_cart() ) {
        return;
    }

    // Tema dizininde assets/css/sepet-alti.css dosyası oluşturman gerekiyor
    wp_enqueue_style(
        'sepet-alti-stiller',
        get_template_directory_uri() . '/assets/css/sepet-alti.css',
        array( 'woocommerce-general' ),
        '1.0.0'
    );
}

// Hook fonksiyonu - artık temiz class isimleri kullanabiliriz
add_action( 'woocommerce_after_cart', 'temiz_guven_rozetleri', 15 );

function temiz_guven_rozetleri() {
    if ( WC()->cart->is_empty() ) {
        return;
    }
    ?>
    <div class="sepet-guven-wrapper">
        <div class="sepet-guven-baslik">Neden bizi tercih etmelisiniz?</div>
        <div class="sepet-guven-grid">
            <div class="guven-item">
                <span class="guven-icon">🔐</span>
                <span class="guven-text">Güvenli Ödeme</span>
            </div>
            <div class="guven-item">
                <span class="guven-icon">🔄</span>
                <span class="guven-text">Kolay İade</span>
            </div>
            <div class="guven-item">
                <span class="guven-icon">⚡</span>
                <span class="guven-text">Hızlı Teslimat</span>
            </div>
        </div>
    </div>
    <?php
}

Dikkat Edilmesi Gereken Noktalar

Tüm bu örnekleri uygularken bazı önemli detaylara dikkat etmek gerekiyor.

Güvenlik kontrolleri: Eğer kullanıcı girdisini herhangi bir şekilde çıktıya dahil ediyorsan mutlaka esc_html(), esc_url() veya wp_kses_post() fonksiyonlarını kullan. XSS açıklarına kapı aralamamak için bu alışkanlığı edinmek şart.

Sepet boş kontrolü: Her hook fonksiyonuna WC()->cart->is_empty() kontrolü eklemek iyi pratik. Boş sepetle anlamsız içerikler göstermekten kaçınırsın.

Cache uyumluluğu: Eğer sitende full page cache kullanıyorsan (WP Rocket, W3 Total Cache gibi), kullanıcıya özel içerikler (giriş durumu, sepet toplamı vb.) cache’den dolayı yanlış gösterilebilir. Bu durumlarda içeriği AJAX ile yüklemek ya da ilgili sayfaları cache’den hariç tutmak gerekebilir.

Tema uyumu: Bazı temalar WooCommerce template dosyalarını override eder. Bu durumda standart hook’lar çalışmayabilir. Temana bağlı olarak farklı hook noktaları kullanmak gerekebilir.

Test ortamı: Her değişikliği önce staging ortamında test et. Production’da çıkacak bir PHP hatası tüm sepet sayfasını bozabilir.

Fonksiyon isim çakışmaları: Fonksiyon isimlerini özelleştirip marka_ veya proje_ gibi prefix ile başlat. Eklentilerle ya da temanın kendi fonksiyonlarıyla isim çakışması yaşamak can sıkıcı hatalara yol açar.

Hızlı Test Yöntemi

Yazdığın kodu hızlıca test etmek için geçici olarak doğrudan functions.php‘ye ekleyebilirsin ama bu dosyayı korumak için bir child tema kullanmak çok önemli. Eğer parent tema güncellenerek functions.php sıfırlanırsa tüm özelleştirmelerini kaybedersin.

Child tema yoksa alternatif olarak Code Snippets eklentisi de işini görebilir. Bu eklenti, kodları doğrudan veritabanına kaydeder ve tema güncellemelerinden etkilenmez. Üstelik her kod parçasını ayrı ayrı aktif/pasif yapabilmek test sürecini kolaylaştırır.

Sonuç

WooCommerce’in hook sistemi, theme dosyalarına dokunmadan sepet sayfasını son derece esnek biçimde özelleştirmene olanak tanır. woocommerce_after_cart başta olmak üzere çevresindeki diğer hook’ları doğru priority değerleriyle kullanarak, kullanıcı rolüne, sepet içeriğine, toplam tutara göre dinamik ve kişiselleştirilmiş içerikler sunabilirsin.

Anlattığımız senaryoların hepsini aynı anda kullanmak zorunda değilsin. Projenin ihtiyacına göre bir veya iki tanesini alıp uygulaman yeterli. Başlamak için en pratik nokta, kargo eşiği hatırlatması ya da güven rozetleri eklemektir. Bunlar hem uygulaması kolay hem de kullanıcı deneyimine ve dönüşüm oranına doğrudan katkı sağlayan özelliklerdir. Kodu yaz, test et, ölç ve iterasyona devam et.

Bir yanıt yazın

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