WooCommerce Sepet Sayfasında İçeriğin Üzerine İçerik Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde dönüşüm oranını artırmanın en etkili yollarından biri, kullanıcının satın alma yolculuğunun kritik noktalarında doğru mesajları göstermektir. WooCommerce sepet sayfası da tam olarak böyle bir nokta. Müşteri ürünleri sepete eklemiş, ödeme yapmaya neredeyse karar vermiş ama henüz checkout’a geçmemiş. İşte bu an, bir promosyon mesajı, ücretsiz kargo eşiği bildirimi ya da güven artırıcı bir rozet göstermek için altın değerinde. Bu yazıda functions.php dosyasını kullanarak WooCommerce sepet sayfasının içerik alanının üzerine nasıl özel içerik ekleyebileceğini, gerçek dünya senaryolarıyla birlikte detaylıca ele alacağız.

WooCommerce Hook Sistemi Neden Bu Kadar Önemli

WordPress ve WooCommerce, kod tabanına dokunmadan işlevsellik eklemenizi sağlayan bir hook sistemi üzerine kurulu. Bu sistem sayesinde tema veya eklenti güncellemeleri yaptığınızda özelleştirmeleriniz kaybolmuyor. functions.php dosyasına yazdığınız kodlar, WooCommerce’in belirlediği aksiyon ve filtre noktalarına bağlanarak çalışıyor.

Sepet sayfası için kullanabileceğiniz başlıca hook noktaları şunlar:

  • woocommerce_before_cart: Sepet tablosunun tamamen üstüne içerik ekler
  • woocommerce_before_cart_table: Sepet tablosundan hemen önce çalışır
  • woocommerce_before_cart_contents: Sepet içeriğinin başına ekler
  • woocommerce_cart_contents: Sepet satırlarının içine müdahale eder
  • woocommerce_after_cart_table: Sepet tablosundan hemen sonra çalışır
  • woocommerce_after_cart: Sepet sayfasının en altına içerik ekler
  • woocommerce_before_cart_collaterals: Sepet toplamları bölümünün üstüne ekler

Bu yazıda ağırlıklı olarak woocommerce_before_cart hook’unu kullanacağız çünkü sepet sayfasına girdiğinde kullanıcının ilk gördüğü yer burası.

Temel Yapı: İlk İçerik Ekleme

Başlamadan önce önemli bir not: Tüm kod örneklerini çocuk temanızın functions.php dosyasına eklemenizi şiddetle tavsiye ederim. Ana tema dosyasına yazmak, tema güncellemesinde her şeyi silecek.

En basit haliyle sepet sayfasına içerik eklemek:

// functions.php dosyasına ekleyin
add_action( 'woocommerce_before_cart', 'custom_content_before_cart' );

function custom_content_before_cart() {
    echo '<div class="custom-cart-notice">';
    echo '<p>Siparişleriniz her gün saat 14:00'e kadar aynı gün kargoya verilir!</p>';
    echo '</div>';
}

Bu kod çalışır ama her sayfada görünür. Bunu sadece sepet sayfasıyla sınırlamak için is_cart() kontrolü ekleyebilirsiniz, ancak zaten woocommerce_before_cart hook’u sadece sepet sayfasında tetiklendiği için ekstra kontrol gerekmez. Yine de bazen shortcode kullanıldığında veya farklı sayfalara sepet embed edildiğinde sorun çıkabilir, bu yüzden kontrol eklemeyi alışkanlık haline getirmek iyi bir pratik:

add_action( 'woocommerce_before_cart', 'custom_content_before_cart' );

function custom_content_before_cart() {
    if ( ! is_cart() ) {
        return;
    }
    
    echo '<div class="custom-cart-notice" style="background:#f0f8ff; padding:15px; margin-bottom:20px; border-left:4px solid #0073aa;">';
    echo '<strong>Hızlı Teslimat:</strong> Siparişleriniz her gün saat 14:00'e kadar aynı gün kargoya verilir!';
    echo '</div>';
}

Gerçek Dünya Senaryosu 1: Ücretsiz Kargo Eşiği Bildirimi

Bu belki de en yaygın kullanım senaryosu. Müşteri sepetine 150 TL’lik ürün eklemiş, ücretsiz kargo için 200 TL gerekiyor. Bunu dinamik olarak hesaplayıp göstermek satın alma tutarını artırmanın kanıtlanmış bir yolu.

add_action( 'woocommerce_before_cart', 'free_shipping_progress_bar' );

function free_shipping_progress_bar() {
    if ( ! is_cart() ) {
        return;
    }
    
    // Ücretsiz kargo eşiği - bunu kendinize göre ayarlayın
    $free_shipping_threshold = 500;
    
    // Mevcut sepet toplamını al
    $cart_total = WC()->cart->get_cart_contents_total();
    
    if ( $cart_total >= $free_shipping_threshold ) {
        echo '<div class="free-shipping-notice success">';
        echo '<p>🎉 Tebrikler! <strong>Ücretsiz kargo</strong> kazandınız.</p>';
        echo '</div>';
    } else {
        $remaining = $free_shipping_threshold - $cart_total;
        $progress  = ( $cart_total / $free_shipping_threshold ) * 100;
        
        echo '<div class="free-shipping-notice">';
        echo '<p>Ücretsiz kargo için <strong>' . wc_price( $remaining ) . '</strong> daha alışveriş yapın!</p>';
        echo '<div class="progress-bar-container" style="background:#e0e0e0; border-radius:10px; height:10px; margin-top:8px;">';
        echo '<div class="progress-bar-fill" style="background:#4CAF50; width:' . esc_attr( $progress ) . '%; height:10px; border-radius:10px; transition:width 0.3s;"></div>';
        echo '</div>';
        echo '</div>';
    }
}

Bu kod dinamik olarak çalışıyor. Müşteri sepete ürün eklediğinde veya çıkardığında bar güncelleniyor. wc_price() fonksiyonunu kullandığımıza dikkat edin, bu WooCommerce’in para birimi formatını ve sembolünü otomatik olarak uyguluyor.

Gerçek Dünya Senaryosu 2: Zamana Duyarlı Kampanya Mesajı

Flash sale ya da sınırlı süreli kampanyalar için sepet sayfasına geri sayım sayacı veya aciliyet mesajı eklemek dönüşümleri ciddi oranda artırıyor.

add_action( 'woocommerce_before_cart', 'campaign_urgency_message' );

function campaign_urgency_message() {
    if ( ! is_cart() ) {
        return;
    }
    
    // Kampanya bitiş tarihi
    $campaign_end = strtotime( '2024-12-31 23:59:59' );
    $current_time = current_time( 'timestamp' );
    
    // Kampanya aktif mi?
    if ( $current_time > $campaign_end ) {
        return;
    }
    
    $remaining_seconds = $campaign_end - $current_time;
    $days    = floor( $remaining_seconds / 86400 );
    $hours   = floor( ( $remaining_seconds % 86400 ) / 3600 );
    $minutes = floor( ( $remaining_seconds % 3600 ) / 60 );
    
    echo '<div class="campaign-banner" style="background:linear-gradient(135deg,#ff6b6b,#ee5a24); color:#fff; padding:15px 20px; border-radius:8px; margin-bottom:25px; text-align:center;">';
    echo '<p style="margin:0; font-size:16px;">🔥 YIL SONU KAMPANYASI aktif! ';
    
    if ( $days > 0 ) {
        echo '<strong>' . $days . ' gün ' . $hours . ' saat</strong> içinde sona eriyor.';
    } else {
        echo '<strong>' . $hours . ' saat ' . $minutes . ' dakika</strong> içinde sona eriyor!';
    }
    
    echo '</p>';
    echo '</div>';
}

Gerçek Dünya Senaryosu 3: Kullanıcı Rolüne Göre Özel Mesaj

B2B ve B2C’yi aynı sitede yöneten e-ticaret siteleri için farklı kullanıcı gruplarına farklı mesajlar göstermek çok işe yarıyor. Toptan alıcılara farklı, perakende müşterilere farklı içerik sunabilirsiniz.

add_action( 'woocommerce_before_cart', 'role_based_cart_message' );

function role_based_cart_message() {
    if ( ! is_cart() ) {
        return;
    }
    
    $current_user = wp_get_current_user();
    
    // Giriş yapmamış kullanıcılar için
    if ( ! is_user_logged_in() ) {
        echo '<div class="cart-login-notice" style="background:#fff3cd; border:1px solid #ffc107; padding:15px; border-radius:6px; margin-bottom:20px;">';
        echo '<p>💡 <a href="' . wc_get_page_permalink( 'myaccount' ) . '">Giriş yaparsanız</a> üye özel indirimlerinizi otomatik uygulayabilirsiniz.</p>';
        echo '</div>';
        return;
    }
    
    // Toptan bayi rolü için
    if ( in_array( 'wholesale_customer', $current_user->roles ) ) {
        echo '<div class="wholesale-notice" style="background:#d4edda; border:1px solid #28a745; padding:15px; border-radius:6px; margin-bottom:20px;">';
        echo '<p>✅ Toptan fiyatlandırma sepetinize uygulandı. Minimum sipariş tutarı: <strong>2.000 TL</strong></p>';
        echo '</div>';
        return;
    }
    
    // Sadakat programı üyesi için
    if ( in_array( 'loyalty_member', $current_user->roles ) ) {
        $points = get_user_meta( $current_user->ID, 'loyalty_points', true );
        echo '<div class="loyalty-notice" style="background:#e8f4f8; border:1px solid #17a2b8; padding:15px; border-radius:6px; margin-bottom:20px;">';
        echo '<p>⭐ Mevcut puan bakiyeniz: <strong>' . intval( $points ) . ' puan</strong>. Bu siparişten puan kazanmak için checkout'ta puanlarınızı kullanabilirsiniz.</p>';
        echo '</div>';
    }
}

CSS Sınıflarını Düzgün Yönetmek

Inline stil yazmak hızlı bir çözüm ama büyük projelerde yönetimi zorlaşıyor. Daha temiz bir yaklaşım için stilleri ayrı enqueue etmek gerekiyor:

// Stilleri enqueue et
add_action( 'wp_enqueue_scripts', 'cart_custom_styles' );

function cart_custom_styles() {
    if ( ! is_cart() ) {
        return;
    }
    
    $custom_css = '
        .cart-notice-wrapper {
            margin-bottom: 25px;
        }
        .free-shipping-bar {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 20px;
        }
        .free-shipping-bar.completed {
            background: #d4edda;
            border-color: #28a745;
        }
        .shipping-progress {
            background: #e9ecef;
            border-radius: 50px;
            height: 8px;
            margin-top: 10px;
            overflow: hidden;
        }
        .shipping-progress-fill {
            background: linear-gradient(90deg, #28a745, #20c997);
            height: 100%;
            border-radius: 50px;
            transition: width 0.4s ease;
        }
        .trust-badges {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            padding: 15px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .trust-badge-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #555;
        }
    ';
    
    wp_add_inline_style( 'woocommerce-layout', $custom_css );
}

Gerçek Dünya Senaryosu 4: Güven Rozetleri ve Güvenlik Bildirimleri

Müşteriler ödeme yapmadan önce “bu site güvenli mi?” diye merak eder. Sepet sayfasına güven artırıcı elementler eklemek bu kaygıları azaltır.

add_action( 'woocommerce_before_cart', 'cart_trust_badges', 5 );

function cart_trust_badges() {
    if ( ! is_cart() ) {
        return;
    }
    
    $badges = array(
        array(
            'icon'  => '🔒',
            'text'  => '256-bit SSL Güvenli Ödeme',
        ),
        array(
            'icon'  => '↩️',
            'text'  => '14 Gün Ücretsiz İade',
        ),
        array(
            'icon'  => '📦',
            'text'  => 'Hızlı Kargo Garantisi',
        ),
        array(
            'icon'  => '💳',
            'text'  => '12 Taksit İmkanı',
        ),
    );
    
    echo '<div class="trust-badges-container" style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:25px; padding:15px; background:#fafafa; border:1px solid #e8e8e8; border-radius:8px;">';
    
    foreach ( $badges as $badge ) {
        echo '<div class="trust-badge" style="display:flex; align-items:center; gap:6px; font-size:13px; color:#444;">';
        echo '<span>' . $badge['icon'] . '</span>';
        echo '<span>' . esc_html( $badge['text'] ) . '</span>';
        echo '</div>';
    }
    
    echo '</div>';
}

Hook öncelik parametresine dikkat edin. add_action( 'woocommerce_before_cart', 'cart_trust_badges', 5 ) ifadesindeki 5 sayısı, bu fonksiyonun diğer hook’lardan önce çalışmasını sağlıyor. Varsayılan değer 10’dur. Düşük sayı = önce çalışır.

Gerçek Dünya Senaryosu 5: Belirli Ürün Kategorisine Göre Özel Mesaj

Sepette belirli kategoriden ürün varsa özel mesaj göstermek, cross-sell fırsatları için mükemmel bir yöntem.

add_action( 'woocommerce_before_cart', 'category_specific_cart_notice' );

function category_specific_cart_notice() {
    if ( ! is_cart() || WC()->cart->is_empty() ) {
        return;
    }
    
    $cart_items     = WC()->cart->get_cart();
    $has_electronics = false;
    $has_clothing    = false;
    
    foreach ( $cart_items as $cart_item ) {
        $product_id = $cart_item['product_id'];
        
        // Elektronik kategorisi kontrolü (category slug kullanıyoruz)
        if ( has_term( 'elektronik', 'product_cat', $product_id ) ) {
            $has_electronics = true;
        }
        
        // Giyim kategorisi kontrolü
        if ( has_term( 'giyim', 'product_cat', $product_id ) ) {
            $has_clothing = true;
        }
    }
    
    if ( $has_electronics ) {
        echo '<div class="category-notice electronics-notice" style="background:#e8f0fe; border-left:4px solid #1a73e8; padding:12px 16px; margin-bottom:20px; border-radius:0 6px 6px 0;">';
        echo '<p style="margin:0;">⚡ Elektronik ürünleriniz için <strong>3 yıl garanti uzatma paketi</strong> sunarız. ';
        echo '<a href="/garanti-paketleri">Detayları inceleyin</a></p>';
        echo '</div>';
    }
    
    if ( $has_clothing ) {
        echo '<div class="category-notice clothing-notice" style="background:#fce4ec; border-left:4px solid #e91e63; padding:12px 16px; margin-bottom:20px; border-radius:0 6px 6px 0;">';
        echo '<p style="margin:0;">👗 Giyim ürünleriniz bedene göre farklılık gösterebilir. ';
        echo '<a href="/beden-rehberi">Beden rehberimize</a> göz atın.</p>';
        echo '</div>';
    }
}

Boş Sepet Durumunu Ayrı Yönetmek

Sepet boşken de içerik göstermek isteyebilirsiniz. WooCommerce bunun için ayrı bir hook sunuyor:

add_action( 'woocommerce_cart_is_empty', 'empty_cart_custom_content' );

function empty_cart_custom_content() {
    echo '<div class="empty-cart-suggestions" style="text-align:center; padding:30px; background:#f9f9f9; border-radius:10px; margin:20px 0;">';
    echo '<h3 style="color:#333;">Sepetiniz şu an boş görünüyor 🛒</h3>';
    echo '<p style="color:#666;">Favori ürünlerinizi keşfetmek ister misiniz?</p>';
    
    // En çok satanları listele
    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 4,
        'meta_key'       => 'total_sales',
        'orderby'        => 'meta_value_num',
        'order'          => 'DESC',
        'post_status'    => 'publish',
    );
    
    $featured_products = new WP_Query( $args );
    
    if ( $featured_products->have_posts() ) {
        echo '<div style="display:flex; flex-wrap:wrap; gap:15px; justify-content:center; margin-top:20px;">';
        
        while ( $featured_products->have_posts() ) {
            $featured_products->the_post();
            $product = wc_get_product( get_the_ID() );
            
            echo '<div style="text-align:center; width:150px;">';
            echo '<a href="' . get_permalink() . '">' . get_the_post_thumbnail( get_the_ID(), array( 150, 150 ) ) . '</a>';
            echo '<p style="font-size:13px; margin:5px 0;">' . get_the_title() . '</p>';
            echo '<strong>' . $product->get_price_html() . '</strong>';
            echo '</div>';
        }
        
        echo '</div>';
        wp_reset_postdata();
    }
    
    echo '</div>';
}

Priority ve Remove Action ile İnce Ayar

Bazen eklentilerin eklediği içerikleri kaldırmak veya sıralamayı değiştirmek gerekiyor. Bu durumda remove_action devreye giriyor:

// Başka bir eklentinin sepet sayfasına eklediği içeriği kaldır
// Kaldırmak istediğiniz hook'un fonksiyon adını ve öncelik değerini bilmeniz gerekiyor

// Örnek: Bir eklentinin 10 öncelikle eklediği fonksiyonu kaldır
remove_action( 'woocommerce_before_cart', 'some_plugin_function_name', 10 );

// Kendi içeriğinizi daha uygun bir öncelikle ekleyin
add_action( 'woocommerce_before_cart', 'your_replacement_function', 10 );

function your_replacement_function() {
    if ( ! is_cart() ) {
        return;
    }
    echo '<div class="custom-replacement">Özelleştirilmiş içerik</div>';
}

// Birden fazla hook noktasına aynı fonksiyonu bağlamak da mümkün
add_action( 'woocommerce_before_cart', 'multi_hook_content', 10 );
add_action( 'woocommerce_before_checkout_form', 'multi_hook_content', 10 );

function multi_hook_content() {
    // is_cart() veya is_checkout() kontrolü yaparak farklı içerik göster
    if ( is_cart() ) {
        echo '<p>Bu içerik sepet sayfasında görünüyor.</p>';
    } elseif ( is_checkout() ) {
        echo '<p>Bu içerik checkout sayfasında görünüyor.</p>';
    }
}

Performans İçin Transient Kullanımı

Dinamik içerik oluştururken veritabanı sorguları yapıyorsanız, bu her sayfa yüklemesinde tekrar çalışır. Transient API ile sonuçları cache’leyebilirsiniz:

add_action( 'woocommerce_before_cart', 'cached_promo_banner' );

function cached_promo_banner() {
    if ( ! is_cart() ) {
        return;
    }
    
    // Transient cache kontrol et (1 saat = 3600 saniye)
    $cached_content = get_transient( 'cart_promo_banner' );
    
    if ( false !== $cached_content ) {
        echo $cached_content;
        return;
    }
    
    // Cache yoksa içeriği oluştur
    // Örnek: Aktif kuponu veritabanından çek
    $active_coupon = wc_get_coupon_id_by_code( 'YILSONU20' );
    
    ob_start();
    
    if ( $active_coupon ) {
        $coupon = new WC_Coupon( $active_coupon );
        
        echo '<div class="promo-banner" style="background:#fff3cd; border:1px solid #ffc107; padding:15px; border-radius:6px; margin-bottom:20px; text-align:center;">';
        echo '🎁 <strong>YILSONU20</strong> kupon kodunu kullanarak ';
        echo '%' . $coupon->get_amount() . ' indirim kazanın!';
        echo '</div>';
    }
    
    $content = ob_get_clean();
    
    // 1 saat cache'le
    set_transient( 'cart_promo_banner', $content, HOUR_IN_SECONDS );
    
    echo $content;
}

Dikkat: Cache kullanan içerikler kullanıcıya özgü (user-specific) olmamalı. Kişisel veriler içeren içerikler için transient kullanmayın.

Hata Ayıklama ve Test Etme

Bu kodları geliştirirken karşılaşabileceğiniz yaygın sorunlar ve çözümleri:

  • Hook tetiklenmiyor: WooCommerce sepet sayfasında olduğunuzdan emin olun, is_cart() döndürüyor mu kontrol edin
  • İçerik iki kez görünüyor: Aynı hook’a aynı fonksiyonu iki kez bağlamış olabilirsiniz
  • Stil uygulanmıyor: Inline stil yerine enqueue yöntemini kullandıysanız, woocommerce-layout handle’ının doğru yüklendiğini kontrol edin
  • PHP hatası: WC() global objesine erişim woocommerce_init hook’undan sonra yapılmalı, bu yüzden doğrudan functions.php başında değil, bir hook içinde kullanın

Test için hızlı debug kodu:

add_action( 'woocommerce_before_cart', 'debug_cart_hooks', 1 );

function debug_cart_hooks() {
    if ( ! is_cart() || ! current_user_can( 'administrator' ) ) {
        return;
    }
    
    echo '<div style="background:#ffeb3b; padding:10px; margin-bottom:10px; font-family:monospace; font-size:12px;">';
    echo '<strong>DEBUG:</strong> woocommerce_before_cart hook çalıştı. ';
    echo 'Sepet toplam: ' . WC()->cart->get_cart_contents_total() . ' TL. ';
    echo 'Ürün sayısı: ' . WC()->cart->get_cart_contents_count();
    echo '</div>';
}

Bu kodu sadece geliştirme ortamında kullanın, canlı ortama almadan remove_action ile kaldırın.

Sonuç

WooCommerce sepet sayfasına functions.php üzerinden içerik eklemek, mağazanızın dönüşüm oranını artırmak için en düşük maliyetli ve en etkili yollardan biri. Hook sistemi sayesinde WooCommerce core dosyalarına veya şablon dosyalarına dokunmadan istediğiniz içeriği istediğiniz yere ekleyebiliyorsunuz.

Bu yazıda ele aldığımız senaryoları kendi ihtiyaçlarınıza göre birleştirebilirsiniz. Örneğin, ücretsiz kargo progress bar’ını güven rozetleriyle birlikte kullanan, kullanıcı rolüne göre farklı eşikler gösteren bir yapı kurabilirsiniz. Önemli olan her zaman kod kalitesini korumak, doğru kaçış fonksiyonlarını (esc_html(), esc_attr(), esc_url()) kullanmak ve performansı göz ardı etmemek.

Son olarak, eklediğiniz her içeriği mobil cihazlarda test etmeyi unutmayın. Sepet sayfaları mobil trafiğin yoğun olduğu sayfalar ve buradaki kötü bir deneyim direkt olarak sepet terk oranınıza yansır.

Bir yanıt yazın

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