WooCommerce Sepet Toplamının Üzerine İçerik Ekleme

WooCommerce mağazanızda sepet sayfası, müşterinin satın alma kararını verdiği en kritik noktalardan biridir. Bu alana doğru içerik eklemek, hem dönüşüm oranlarını artırabilir hem de müşteriye önemli bilgileri iletmek için mükemmel bir fırsat sunar. Bugün woocommerce_before_cart_totals ve benzeri hook’ları kullanarak sepet toplamının üzerine nasıl özel içerik ekleyebileceğinizi, gerçek dünya senaryolarıyla birlikte ele alacağız.

WooCommerce Hook Sistemi ve Sepet Sayfası

WooCommerce’in hook sistemi, core dosyalarına dokunmadan mağazanızın davranışını değiştirmenizi sağlar. Sepet sayfasında kullanabileceğiniz onlarca action ve filter hook bulunur. Biz bugün özellikle sepet toplamları kutusunun üzerine içerik eklemek için kullanılan hook’lara odaklanacağız.

Temel çalışma mantığı şu şekilde: WooCommerce sepet sayfasını render ederken belirli noktalarda hook’ları tetikler. Siz de bu hook’lara kendiniz fonksiyon bağlayarak o noktaya istediğiniz HTML veya PHP çıktısı ekleyebilirsiniz.

Önemli hook’lar:

  • woocommerce_before_cart_totals: Sepet toplamları kutusunun en üstüne içerik ekler
  • woocommerce_cart_totals_before_order_total: Sipariş toplamı satırından önce içerik ekler
  • woocommerce_cart_totals_after_order_total: Sipariş toplamı satırından sonra içerik ekler
  • woocommerce_proceed_to_checkout: Ödemeye geç butonunun bulunduğu alana içerik ekler
  • woocommerce_after_cart_totals: Sepet toplamları kutusunun altına içerik ekler

functions.php’ye Kod Ekleme Kuralları

Her şeyden önce, child theme kullanmak şarttır. Ana tema dosyalarına doğrudan kod eklerseniz, tema güncellemesinde tüm değişiklikleriniz silinir. Child theme’inizin functions.php dosyasına aşağıdaki kod örneklerini ekleyebilirsiniz.

Alternatif olarak Code Snippets eklentisini de kullanabilirsiniz. Bu eklenti, kod parçacıklarını veritabanında saklar ve tema güncellemelerinden etkilenmez.

Senaryo 1: Basit Bilgi Mesajı Ekleme

En temel kullanım senaryosu, sepet toplamının üzerine sabit bir bilgi mesajı eklemektir. Örneğin kargo politikanızı, güvenlik rozetlerinizi veya kampanya bilgilerinizi buraya ekleyebilirsiniz.

add_action( 'woocommerce_before_cart_totals', 'custom_before_cart_totals_message' );

function custom_before_cart_totals_message() {
    echo '<div class="custom-cart-notice" style="background:#f0f8ff; border:1px solid #b0d4f1; padding:12px; margin-bottom:15px; border-radius:4px;">';
    echo '<p style="margin:0; color:#333;"><strong>🚚 Ücretsiz Kargo:</strong> 500 TL ve üzeri siparişlerinizde kargo bedava!</p>';
    echo '</div>';
}

Bu kadar basit. Hook adını, öncelik değerini ve fonksiyon adını belirleyip echo ile HTML çıktınızı veriyorsunuz.

Senaryo 2: Dinamik İçerik – Sepet Tutarına Göre Mesaj

Gerçek dünyada daha işe yarar olan şey, sepet tutarına göre dinamik mesajlar göstermektir. Müşteri 400 TL’lik ürün sepete eklediyse, “100 TL daha ekle ücretsiz kargoya hak kazan” gibi bir mesaj göstermek dönüşüm oranını ciddi ölçüde artırır.

add_action( 'woocommerce_before_cart_totals', 'dynamic_free_shipping_notice' );

function dynamic_free_shipping_notice() {
    $free_shipping_threshold = 500;
    $cart_total = WC()->cart->get_subtotal();
    $remaining = $free_shipping_threshold - $cart_total;

    if ( $cart_total >= $free_shipping_threshold ) {
        echo '<div class="shipping-notice success" style="background:#e8f5e9; border:1px solid #81c784; padding:12px; margin-bottom:15px; border-radius:4px; text-align:center;">';
        echo '<p style="margin:0; color:#2e7d32;"><strong>✅ Tebrikler!</strong> Ücretsiz kargoya hak kazandınız.</p>';
        echo '</div>';
    } else {
        $remaining_formatted = wc_price( $remaining );
        echo '<div class="shipping-notice warning" style="background:#fff8e1; border:1px solid #ffcc02; padding:12px; margin-bottom:15px; border-radius:4px; text-align:center;">';
        echo '<p style="margin:0; color:#e65100;"><strong>🛒 Ücretsiz Kargo için</strong> sepetinize ' . $remaining_formatted . ' değerinde daha ürün ekleyin!</p>';
        echo '</div>';
    }
}

WC()->cart->get_subtotal() fonksiyonu sepet ara toplamını vergi hariç getirir. Vergili toplamı almak isterseniz WC()->cart->get_cart_contents_total() kullanabilirsiniz. wc_price() fonksiyonu ise sayısal değeri WooCommerce para birimi formatına çevirir.

Senaryo 3: Güven Rozetleri ve Ödeme Yöntemleri

Sepet sayfasında güven unsurları göstermek, müşterinin ödeme adımına geçme kararını kolaylaştırır. SSL rozeti, güvenli ödeme ikonları, iade garantisi gibi bilgiler bu alana mükemmel uyar.

add_action( 'woocommerce_before_cart_totals', 'add_trust_badges_before_totals', 5 );

function add_trust_badges_before_totals() {
    ?>
    <div class="trust-badges-wrapper" style="padding:15px 0; margin-bottom:10px; border-bottom:1px solid #e0e0e0;">
        <p style="text-align:center; font-size:13px; color:#666; margin-bottom:8px;"><strong>Güvenli Alışveriş</strong></p>
        <div style="display:flex; justify-content:center; gap:15px; flex-wrap:wrap;">
            <span style="font-size:12px; color:#555;">🔒 SSL Korumalı</span>
            <span style="font-size:12px; color:#555;">💳 Güvenli Ödeme</span>
            <span style="font-size:12px; color:#555;">🔄 14 Gün İade</span>
            <span style="font-size:12px; color:#555;">📞 7/24 Destek</span>
        </div>
    </div>
    <?php
}

Hook öncelik parametresine dikkat edin. add_action fonksiyonunun üçüncü parametresi öncelik değeridir. Varsayılan değer 10’dur. Daha küçük değer, daha önce çalışır. Aynı hook’a birden fazla fonksiyon bağladığınızda sıralamayı bu şekilde kontrol edersiniz.

Senaryo 4: Kupon Teşvik Mesajı

Sitenizde kupon sistemi kullanıyorsanız, sepet toplamının üzerinde bunu hatırlatmak çok işe yarar. Kupon uygulanmadıysa teşvik edici bir mesaj, zaten uygulandıysa teşekkür mesajı gösterebilirsiniz.

add_action( 'woocommerce_before_cart_totals', 'coupon_reminder_message', 15 );

function coupon_reminder_message() {
    $applied_coupons = WC()->cart->get_applied_coupons();

    if ( empty( $applied_coupons ) ) {
        // Kupon uygulanmamış, teşvik et
        echo '<div class="coupon-reminder" style="background:#fce4ec; border:1px solid #f48fb1; padding:10px 12px; margin-bottom:12px; border-radius:4px;">';
        echo '<p style="margin:0; font-size:13px; color:#880e4f;">🎁 <strong>İndirim kuponunuz var mı?</strong> Yukarıdaki kupon alanını kullanmayı unutmayın!</p>';
        echo '</div>';
    } else {
        // Kupon uygulanmış, teşekkür et
        $coupon_code = strtoupper( implode( ', ', $applied_coupons ) );
        echo '<div class="coupon-applied" style="background:#e8f5e9; border:1px solid #a5d6a7; padding:10px 12px; margin-bottom:12px; border-radius:4px;">';
        echo '<p style="margin:0; font-size:13px; color:#1b5e20;">✅ <strong>' . esc_html( $coupon_code ) . '</strong> kuponu başarıyla uygulandı!</p>';
        echo '</div>';
    }
}

WC()->cart->get_applied_coupons() sepete uygulanmış kuponları dizi olarak döndürür. Boş dizi geliyorsa hiç kupon uygulanmamış demektir. esc_html() kullanmayı unutmayın, kullanıcı kaynaklı verileri her zaman escape etmelisiniz.

Senaryo 5: Belirli Kullanıcı Rollerine Özel Mesaj

B2B mağazaları veya üyelik sistemi olan sitelerde, farklı kullanıcı rollerine farklı mesajlar göstermek gerekebilir. Örneğin toptan satış müşterilerine özel bir not, misafir kullanıcılara üye ol teşviki gösterebilirsiniz.

add_action( 'woocommerce_before_cart_totals', 'role_based_cart_message', 10 );

function role_based_cart_message() {
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        $roles = $user->roles;

        if ( in_array( 'wholesale_customer', $roles ) ) {
            echo '<div class="wholesale-notice" style="background:#e3f2fd; border:1px solid #90caf9; padding:10px 12px; margin-bottom:12px; border-radius:4px;">';
            echo '<p style="margin:0; font-size:13px; color:#0d47a1;">⭐ Toptan müşteri indiriminiz otomatik olarak uygulandı.</p>';
            echo '</div>';
        } elseif ( in_array( 'vip_member', $roles ) ) {
            echo '<div class="vip-notice" style="background:#f3e5f5; border:1px solid #ce93d8; padding:10px 12px; margin-bottom:12px; border-radius:4px;">';
            echo '<p style="margin:0; font-size:13px; color:#4a148c;">👑 VIP üye ayrıcalıklarınız bu siparişe yansıtılmıştır.</p>';
            echo '</div>';
        }
    } else {
        // Misafir kullanıcı
        $login_url = wc_get_page_permalink( 'myaccount' );
        echo '<div class="guest-notice" style="background:#fff3e0; border:1px solid #ffb74d; padding:10px 12px; margin-bottom:12px; border-radius:4px;">';
        echo '<p style="margin:0; font-size:13px; color:#e65100;">💡 <a href="' . esc_url( $login_url ) . '">Giriş yapın</a> veya üye olun, özel fiyatlardan yararlanın!</p>';
        echo '</div>';
    }
}

Senaryo 6: Geri Sayım Sayacı ile Aciliyet Oluşturma

E-ticaret psikolojisinde aciliyet hissi dönüşümü artırır. Sepet toplamının üzerine bir geri sayım sayacı eklemek, müşteriyi harekete geçirebilir.

add_action( 'woocommerce_before_cart_totals', 'add_countdown_timer', 20 );

function add_countdown_timer() {
    // Kargo saatine kadar geri sayım (örnek: her gün 17:00)
    $cutoff_hour = 17;
    $current_hour = (int) date( 'H', current_time( 'timestamp' ) );
    $current_minute = (int) date( 'i', current_time( 'timestamp' ) );

    if ( $current_hour < $cutoff_hour ) {
        $remaining_hours = $cutoff_hour - $current_hour - 1;
        $remaining_minutes = 60 - $current_minute;
        ?>
        <div class="shipping-countdown" style="background:#ff5722; padding:10px 12px; margin-bottom:12px; border-radius:4px; text-align:center;">
            <p style="margin:0; color:#fff; font-size:13px;">
                <strong>⏰ Bugün Kargoda!</strong> Siparişinizi 
                <strong id="cart-countdown"><?php echo esc_html( $remaining_hours . ' saat ' . $remaining_minutes . ' dakika' ); ?></strong> 
                içinde tamamlayın, bugün kargoya verilsin.
            </p>
        </div>
        <?php
    }
}

Senaryo 7: Minimum Sipariş Tutarı Uyarısı

Bazı mağazalarda minimum sipariş tutarı şartı olur. Bu şartı WooCommerce checkout aşamasında engelleyebilirsiniz ama kullanıcıyı daha erken bilgilendirmek çok daha iyi bir UX sağlar.

add_action( 'woocommerce_before_cart_totals', 'minimum_order_amount_notice', 10 );

function minimum_order_amount_notice() {
    $minimum_order = 150; // TL cinsinden minimum sipariş
    $cart_total = WC()->cart->get_subtotal();

    if ( $cart_total < $minimum_order ) {
        $remaining = $minimum_order - $cart_total;
        $remaining_formatted = wc_price( $remaining );
        $minimum_formatted = wc_price( $minimum_order );

        echo '<div class="min-order-notice" style="background:#ffebee; border:2px solid #ef9a9a; padding:12px; margin-bottom:15px; border-radius:4px;">';
        echo '<p style="margin:0; color:#b71c1c; font-size:13px;">';
        echo '<strong>⚠️ Minimum Sipariş Tutarı:</strong> Sipariş verebilmek için sepet tutarınızın en az ' . $minimum_formatted . ' olması gerekiyor. ';
        echo 'Sepetinize ' . $remaining_formatted . ' daha ürün eklemeniz gerekiyor.';
        echo '</p>';
        echo '</div>';

        // Ödeme butonunu devre dışı bırak
        add_filter( 'woocommerce_is_purchasable', '__return_false' );
    }
}

Bu örnekte hem görsel uyarı veriyoruz hem de minimum tutara ulaşılmadığında woocommerce_is_purchasable filter’ını kullanarak ürünleri satın alınamaz hale getiriyoruz. Gerçi bu yaklaşım biraz agresif olabilir, sadece checkout butonunu gizlemek daha iyi bir deneyim sunabilir.

Senaryo 8: Sipariş Notu veya Promosyon Bilgilendirmesi

Belirli ürünler sepete eklendiğinde özel mesajlar göstermek de çok kullanışlıdır. Örneğin müşteri kampanyalı bir ürün aldıysa bunu teyit eden veya ek bilgi veren bir mesaj gösterebilirsiniz.

add_action( 'woocommerce_before_cart_totals', 'product_specific_cart_message', 10 );

function product_specific_cart_message() {
    $promo_product_ids = array( 42, 87, 156 ); // Kampanyalı ürün ID'leri
    $has_promo_product = false;
    $has_heavy_product = false;

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

        // Kampanyalı ürün kontrolü
        if ( in_array( $product_id, $promo_product_ids ) ) {
            $has_promo_product = true;
        }

        // Ağır ürün kontrolü (ağırlık bazlı kargo uyarısı)
        $product = $cart_item['data'];
        if ( $product->get_weight() && $product->get_weight() > 20 ) {
            $has_heavy_product = true;
        }
    }

    if ( $has_promo_product ) {
        echo '<div class="promo-notice" style="background:#e8f5e9; border:1px solid #66bb6a; padding:10px 12px; margin-bottom:10px; border-radius:4px;">';
        echo '<p style="margin:0; font-size:13px; color:#1b5e20;">🎉 Sepetinizde kampanyalı ürün bulunuyor! İndirim otomatik uygulanacaktır.</p>';
        echo '</div>';
    }

    if ( $has_heavy_product ) {
        echo '<div class="heavy-product-notice" style="background:#fff8e1; border:1px solid #ffd54f; padding:10px 12px; margin-bottom:10px; border-radius:4px;">';
        echo '<p style="margin:0; font-size:13px; color:#e65100;">🚛 Sepetinizde ağır/hacimli ürün bulunduğundan kargo ücreti ödeme adımında hesaplanacaktır.</p>';
        echo '</div>';
    }
}

CSS ile Özelleştirme

Yukarıdaki örneklerde inline stil kullandım, ancak gerçek projede CSS’i ayrı bir dosyaya taşımalısınız. Bunu wp_enqueue_styles ile yapabilirsiniz.

add_action( 'wp_enqueue_scripts', 'enqueue_cart_custom_styles' );

function enqueue_cart_custom_styles() {
    if ( is_cart() ) {
        wp_enqueue_style(
            'custom-cart-styles',
            get_stylesheet_directory_uri() . '/css/custom-cart.css',
            array(),
            '1.0.0'
        );
    }
}

is_cart() fonksiyonuyla sadece sepet sayfasında bu CSS dosyasının yüklenmesini sağlıyorsunuz. Gereksiz yere her sayfada yüklememek performans açısından önemlidir.

Hata Ayıklama İpuçları

Kod eklerken en sık karşılaşılan sorunları şöyle özetleyebilirim:

  • Beyaz ekran: Sözdizimi hatası var demektir. PHP error log’larını kontrol edin. wp-config.php dosyasında define('WP_DEBUG', true) açık olsun.
  • Hook çalışmıyor: Hook adını yanlış yazmış olabilirsiniz. WooCommerce versiyonuna göre bazı hook’lar değişmiş olabilir.
  • Mesaj iki kez görünüyor: Aynı hook’a aynı fonksiyonu iki kez bağladınız. functions.php’de mükerrer kayıt var mı kontrol edin.
  • WC() fonksiyonu bulunamıyor: Fonksiyonunuz çok erken çalışıyor olabilir. WooCommerce’in yüklenmesini beklemek için woocommerce_loaded hook’unu kullanın.

Debug için basit test kodu:

add_action( 'woocommerce_before_cart_totals', 'test_hook_working', 10 );

function test_hook_working() {
    if ( current_user_can( 'administrator' ) ) {
        echo '<p style="color:red; font-size:11px;">[DEBUG] Hook çalışıyor - ' . current_time( 'H:i:s' ) . '</p>';
    }
}

Bu test kodunu sadece admin kullanıcısına gösteriyoruz, böylece canlı sitede ziyaretçiler görmüyor.

Önemli Güvenlik Notları

  • Asla güvenilmeyen veriyi doğrudan echo etmeyin. Kullanıcıdan gelen veya veritabanından çekilen her veriyi uygun escape fonksiyonuyla işleyin.
  • esc_html(): HTML bağlamında metin gösterimi için
  • esc_url(): URL çıktıları için
  • esc_attr(): HTML attribute değerleri için
  • wp_kses(): Belirli HTML tag’lerine izin vermek istediğinizde

Nonce kullanımına sepet sayfasındaki okuma işlemleri için gerek yok, ancak form gönderimleri söz konusuysa mutlaka nonce doğrulaması yapın.

Sonuç

WooCommerce sepet toplamının üzerine içerik eklemek, doğru hook’u bilmek ve birkaç satır PHP yazmak kadar basit. woocommerce_before_cart_totals hook’u bu iş için en uygun seçenek olmakla birlikte, sepet sayfasının farklı bölgelerine müdahale etmek için onlarca hook bulunuyor.

Paylaştığım senaryoların hepsini birden kullanmak yerine, mağazanızın ihtiyacına göre seçim yapın. Çok fazla mesaj göstermek kullanıcıyı yorar ve asıl amacın tersine etki edebilir. A/B testi yaparak hangi mesajların dönüşüme katkı sağladığını ölçmek, uzun vadede en doğru yaklaşım.

Son olarak, bu kodları üretime almadan önce mutlaka staging ortamında test edin. WooCommerce güncellemeleri bazen hook davranışlarını değiştirebilir, bu yüzden eklenti veya WooCommerce güncellemelerinden sonra sepet sayfasını tekrar gözden geçirme alışkanlığı edinin.

Bir yanıt yazın

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