WooCommerce Ödeme Alanının Üzerine İçerik Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde ödeme sayfası, dönüşüm hunisinin en kritik noktasıdır. Müşteri bu sayfaya geldiğinde, sepetindeki ürünleri satın almaya karar vermiş ya da en azından değerlendiriyor demektir. Bu yüzden ödeme alanının hemen üstüne doğru bir mesaj, bir güven rozeti ya da özel bir kampanya notu eklemek, satışları doğrudan etkileyebilir. WooCommerce bu tür özelleştirmeler için hook sistemi sunuyor ve biz de bu hook’ları functions.php dosyasından kolayca kullanabiliyoruz.

WooCommerce Hook Sistemi Hakkında Kısa Bilgi

WooCommerce, sayfa yapısının hemen her noktasına müdahale edebilmeniz için onlarca action hook barındırır. Bu hook’lar sayesinde tema dosyalarını düzenlemeden, doğrudan functions.php üzerinden içerik ekleyebilir, kaldırabilir ya da değiştirebilirsiniz.

Ödeme sayfasındaki temel hook’lar şunlardır:

  • woocommerce_before_checkout_form: Ödeme formu başlamadan önce tetiklenir
  • woocommerce_checkout_before_order_review: Sipariş özeti bölümünün üstünde çalışır
  • woocommerce_checkout_order_review: Sipariş özeti alanının kendisi
  • woocommerce_before_order_review_heading: Sipariş özeti başlığından önce
  • woocommerce_checkout_after_order_review: Sipariş özeti bölümünün altında
  • woocommerce_review_order_before_payment: Ödeme yöntemi seçim alanının üstünde
  • woocommerce_review_order_after_payment: Ödeme yöntemi seçim alanının altında
  • woocommerce_review_order_before_submit: Sipariş tamamla butonundan önce

Bizim bugün odaklanacağımız hook woocommerce_review_order_before_payment yani ödeme alanının tam üstü. Bu nokta hem görünür hem de kullanıcının dikkatini çekmek için ideal bir konum.

Temel İçerik Ekleme

En basit haliyle başlayalım. Ödeme alanının üstüne sabit bir metin kutusu eklemek istiyorsunuz diyelim:

// functions.php dosyasina ekle
add_action( 'woocommerce_review_order_before_payment', 'custom_checkout_message' );

function custom_checkout_message() {
    echo '<div class="checkout-notice" style="background:#f0f8ff; border:1px solid #b0d4f1; padding:15px; margin-bottom:20px; border-radius:4px;">';
    echo '<p><strong>🔒 Güvenli Ödeme:</strong> Tüm işlemleriniz SSL ile şifrelenmektedir. Kart bilgileriniz hiçbir şekilde sunucularımızda saklanmaz.</p>';
    echo '</div>';
}

Bu kadar. Kaydet, sayfayı yenile, ödeme sayfasına git, orada olacak. Ama tabii ki bu çok basit bir örnek. Gerçek dünyada ihtiyaçlar daha karmaşık olur.

Stil Dosyasıyla Birlikte Kullanım

İnline stil yazmak hızlı bir çözüm ama bakımı zorlaştırır. Daha temiz bir yaklaşım, ayrı bir stil tanımlamak ve bunu enqueue sistemiyle yüklemektir:

// Önce stili kaydet
add_action( 'wp_enqueue_scripts', 'checkout_custom_styles' );

function checkout_custom_styles() {
    if ( is_checkout() ) {
        wp_add_inline_style( 'woocommerce-inline', '
            .checkout-payment-notice {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: #ffffff;
                padding: 16px 20px;
                margin-bottom: 24px;
                border-radius: 6px;
                font-size: 14px;
                line-height: 1.6;
            }
            .checkout-payment-notice strong {
                display: block;
                font-size: 16px;
                margin-bottom: 6px;
            }
            .checkout-payment-notice ul {
                margin: 8px 0 0 0;
                padding-left: 18px;
            }
        ' );
    }
}

// Sonra içeriği ekle
add_action( 'woocommerce_review_order_before_payment', 'checkout_payment_notice_html' );

function checkout_payment_notice_html() {
    ?>
    <div class="checkout-payment-notice">
        <strong>Neden Güvenle Alışveriş Yapabilirsiniz?</strong>
        <ul>
            <li>256-bit SSL şifreleme</li>
            <li>Kapıda ödeme seçeneği mevcut</li>
            <li>30 gün iade garantisi</li>
            <li>Müşteri hizmetleri 7/24 hizmetinizde</li>
        </ul>
    </div>
    <?php
}

is_checkout() koşulunu kullanmak önemli. Bu sayede stil dosyası sadece ödeme sayfasında yükleniyor, gereksiz yere tüm sayfalarda çalışmıyor.

Sepet Tutarına Göre Dinamik Mesaj

Gerçek dünya senaryosu: Müşteri 200 TL’lik sepet oluşturmuş ama kargo ücretsiz eşiği 250 TL. Bunu ona ödeme sayfasında hatırlatmak hem satışı artırır hem de müşteri memnuniyetini yükseltir.

add_action( 'woocommerce_review_order_before_payment', 'dynamic_shipping_notice' );

function dynamic_shipping_notice() {
    $free_shipping_threshold = 250;
    $cart_total = WC()->cart->get_subtotal();
    $remaining = $free_shipping_threshold - $cart_total;

    if ( $remaining > 0 ) {
        $formatted_remaining = wc_price( $remaining );
        echo '<div style="background:#fff3cd; border:1px solid #ffc107; padding:14px 18px; margin-bottom:20px; border-radius:5px; color:#856404;">';
        echo '<strong>🚚 Ücretsiz Kargo Fırsatı!</strong><br>';
        echo "Sepetinize <strong>{$formatted_remaining}</strong> değerinde ürün daha ekleyin ve kargonuz ücretsiz olsun.";
        echo ' <a href="' . esc_url( wc_get_page_permalink( 'shop' ) ) . '" style="color:#856404; text-decoration:underline;">Alışverişe devam et</a>';
        echo '</div>';
    } else {
        echo '<div style="background:#d4edda; border:1px solid #28a745; padding:14px 18px; margin-bottom:20px; border-radius:5px; color:#155724;">';
        echo '<strong>✅ Tebrikler!</strong> Siparişiniz ücretsiz kargo hakkı kazandı.';
        echo '</div>';
    }
}

Bu kod parçası her ödeme sayfası açılışında sepet tutarını hesaplar ve duruma göre iki farklı mesajdan birini gösterir. wc_price() fonksiyonu para birimini ve formatı otomatik olarak WooCommerce ayarlarından alır, elle yazmana gerek kalmaz.

Kullanıcı Rolüne Göre Özel Mesaj

B2B ve B2C müşterileriniz aynı mağazadan alışveriş yapıyorsa, toptan müşterilere farklı bir mesaj göstermek isteyebilirsiniz. Ya da premium üyelere özel bir hatırlatma:

add_action( 'woocommerce_review_order_before_payment', 'role_based_checkout_notice' );

function role_based_checkout_notice() {
    if ( ! is_user_logged_in() ) {
        // Giriş yapmamis kullanicilara kayit tesviki
        echo '<div style="background:#e8f4f8; border-left:4px solid #17a2b8; padding:14px 18px; margin-bottom:20px;">';
        echo '<strong>💡 İpucu:</strong> <a href="' . esc_url( wp_login_url( get_permalink() ) ) . '">Giriş yaparak</a> siparişlerinizi takip edebilir ve özel indirimlerden yararlanabilirsiniz.';
        echo '</div>';
        return;
    }

    $user = wp_get_current_user();
    $roles = $user->roles;

    if ( in_array( 'wholesale_customer', $roles ) ) {
        // Toptan musteri
        echo '<div style="background:#e8f5e9; border-left:4px solid #4caf50; padding:14px 18px; margin-bottom:20px;">';
        echo '<strong>🏭 Toptan Müşteri Avantajı:</strong> Bu siparişinize özel %10 toptan indiriminiz otomatik olarak uygulanmıştır. Faturanız e-posta adresinize gönderilecektir.';
        echo '</div>';
    } elseif ( in_array( 'vip_member', $roles ) ) {
        // VIP uye
        $points = get_user_meta( $user->ID, 'loyalty_points', true );
        echo '<div style="background:#fff8e1; border-left:4px solid #ffc107; padding:14px 18px; margin-bottom:20px;">';
        echo '<strong>⭐ VIP Üye:</strong> Mevcut puan bakiyeniz: <strong>' . intval( $points ) . ' puan</strong>. Bu sipariş sonrası 50 puan daha kazanacaksınız.';
        echo '</div>';
    }
}

get_user_meta() ile kullanıcıya ait özel alanları çekebilir, bunu dinamik mesajlara dönüştürebilirsiniz. Loyalty sistemi, özel fiyatlandırma, VIP üyelik, bunların hepsi bu yöntemle ödeme sayfasına yansıtılabilir.

Belirli Ürün Kategorisine Göre Uyarı

Diyelim ki mağazanızda elektronik ürün satıyorsunuz ve belirli ürünlerin kurulum gerektirdiğini ödeme aşamasında hatırlatmak istiyorsunuz:

add_action( 'woocommerce_review_order_before_payment', 'product_category_checkout_notice' );

function product_category_checkout_notice() {
    $installation_required = false;
    $warranty_products = false;
    $heavy_products = false;

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

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

        if ( has_term( 'beyaz-esya', 'product_cat', $product_id ) ) {
            $heavy_products = true;
        }

        // Özel ürün meta kontrolü
        $has_warranty = get_post_meta( $product_id, '_extended_warranty', true );
        if ( $has_warranty === 'yes' ) {
            $warranty_products = true;
        }
    }

    if ( $installation_required ) {
        echo '<div style="background:#fff3cd; border:1px solid #ffc107; padding:14px 18px; margin-bottom:12px; border-radius:4px;">';
        echo '<strong>🔧 Kurulum Notu:</strong> Sepetinizdeki elektronik ürünler için ücretsiz kurulum hizmeti sunuyoruz. Sipariş notuna "kurulum istiyorum" yazmanız yeterlidir.';
        echo '</div>';
    }

    if ( $heavy_products ) {
        echo '<div style="background:#e3f2fd; border:1px solid #2196f3; padding:14px 18px; margin-bottom:12px; border-radius:4px;">';
        echo '<strong>🏠 Teslimat Bilgisi:</strong> Beyaz eşya ürünleriniz için kapı önü teslimat yapılmaktadır. İstek halinde kat çıkarma hizmeti ücret karşılığında sağlanmaktadır.';
        echo '</div>';
    }

    if ( $warranty_products ) {
        echo '<div style="background:#f3e5f5; border:1px solid #9c27b0; padding:14px 18px; margin-bottom:12px; border-radius:4px;">';
        echo '<strong>🛡️ Garanti:</strong> Sepetinizdeki ürünler genişletilmiş garanti kapsamındadır. Garanti belgesi ürünle birlikte teslim edilecektir.';
        echo '</div>';
    }
}

Bu yapı oldukça esnek. Birden fazla mesaj aynı anda gösterilebiliyor ve her biri bağımsız koşula bağlı. Sepetin içeriği değiştikçe mesajlar da otomatik olarak değişiyor.

Zamana Bağlı Aciliyet Mesajı

Sınırlı süreli kampanyalar için ödeme sayfasında bir sayaç ya da aciliyet mesajı göstermek dönüşüm oranını ciddi ölçüde artırabilir:

add_action( 'woocommerce_review_order_before_payment', 'urgency_message_checkout' );

function urgency_message_checkout() {
    // Kampanya bitis tarihi
    $campaign_end = strtotime( '2024-12-31 23:59:59' );
    $now = current_time( 'timestamp' );
    $remaining_seconds = $campaign_end - $now;

    if ( $remaining_seconds <= 0 ) {
        return; // Kampanya bitti, hicbir sey gosterme
    }

    $days = floor( $remaining_seconds / 86400 );
    $hours = floor( ( $remaining_seconds % 86400 ) / 3600 );
    $minutes = floor( ( $remaining_seconds % 3600 ) / 60 );

    echo '<div style="background:#ff5722; color:#ffffff; padding:16px 20px; margin-bottom:20px; border-radius:5px; text-align:center;">';
    echo '<strong>⏰ Kampanya Fırsatı!</strong><br>';
    echo 'Bu fiyatlar sadece ';

    if ( $days > 0 ) {
        echo "<strong>{$days} gün {$hours} saat</strong> daha geçerli.";
    } elseif ( $hours > 0 ) {
        echo "<strong>{$hours} saat {$minutes} dakika</strong> daha geçerli.";
    } else {
        echo "<strong>{$minutes} dakika</strong> daha geçerli. Acele edin!";
    }

    echo '<br><small>Kampanya fiyatları stokla sınırlıdır.</small>';
    echo '</div>';
}

Burada current_time( 'timestamp' ) kullanmak önemli çünkü bu fonksiyon WordPress’in zaman dilimi ayarını dikkate alıyor. PHP’nin time() fonksiyonu sunucu saatini verir, bu da yanlış hesaplamaya yol açabilir.

Güven Rozeti ve Ödeme Logoları

Ödeme alanı üstüne güven rozetleri eklemek, özellikle yeni müşterilerde satın alma kararını olumlu etkiler:

add_action( 'woocommerce_review_order_before_payment', 'trust_badges_before_payment' );

function trust_badges_before_payment() {
    $upload_dir = wp_upload_dir();
    // ya da theme dizininden logo yolu alınabilir
    $theme_uri = get_stylesheet_directory_uri();

    ?>
    <div class="trust-badges-wrapper" style="margin-bottom:24px;">
        <p style="text-align:center; font-size:13px; color:#666; margin-bottom:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;">
            Güvenli Ödeme Seçenekleri
        </p>
        <div style="display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; padding:14px; background:#f8f9fa; border-radius:6px; border:1px solid #e9ecef;">
            <!-- SVG ikonlar ya da resim dosyalari buraya gelir -->
            <span style="font-size:28px;" title="Visa">💳</span>
            <span style="font-size:28px;" title="Mastercard">💳</span>
            <span style="font-size:24px;" title="SSL Güvenli">🔒</span>
            <span style="background:#003087; color:#fff; padding:4px 10px; border-radius:3px; font-size:12px; font-weight:bold;">PayPal</span>
            <span style="background:#000; color:#fff; padding:4px 10px; border-radius:3px; font-size:12px; font-weight:bold;">iyzico</span>
        </div>
        <div style="display:flex; justify-content:center; gap:20px; margin-top:12px; flex-wrap:wrap;">
            <span style="font-size:12px; color:#28a745;">✓ SSL Şifreli</span>
            <span style="font-size:12px; color:#28a745;">✓ 3D Secure</span>
            <span style="font-size:12px; color:#28a745;">✓ PCI DSS Uyumlu</span>
            <span style="font-size:12px; color:#28a745;">✓ 30 Gün İade</span>
        </div>
    </div>
    <?php
}

Gerçek mağazalarda bu alanda ödeme sağlayıcısının logosunu, SSL sertifika rozetini ve varsa üçüncü taraf güven sertifikalarını (Trusted Shops, vb.) göstermek oldukça etkili.

Özel Kupon Alanı Notu

Bazı mağazalarda müşteriler kupon kodlarını nereye gireceğini bulamaz. Ödeme sayfasında bir yönlendirici not ekleyebilirsiniz:

add_action( 'woocommerce_review_order_before_payment', 'coupon_reminder_notice' );

function coupon_reminder_notice() {
    // Zaten kupon kullanildiysa gosterme
    if ( ! empty( WC()->cart->get_applied_coupons() ) ) {
        $applied = WC()->cart->get_applied_coupons();
        echo '<div style="background:#d4edda; border:1px solid #c3e6cb; padding:12px 16px; margin-bottom:16px; border-radius:4px; color:#155724; font-size:14px;">';
        echo '<strong>✅ Kupon Uygulandı:</strong> "' . esc_html( strtoupper( implode( ', ', $applied ) ) ) . '" kuponu aktif.';
        echo '</div>';
        return;
    }

    // Kupon girilebilecek alana link ver
    echo '<div style="background:#f8f9fa; border:1px dashed #ccc; padding:12px 16px; margin-bottom:16px; border-radius:4px; font-size:13px; color:#555;">';
    echo '🏷️ <strong>İndirim Kodunuz Var Mı?</strong> ';
    echo 'Sayfanın üst kısmındaki "İndirim Kodu Girin" alanını kullanabilirsiniz.';
    echo '</div>';
}

Bu küçük ama işlevsel bir detay. Kupon zaten uygulanmışsa yeşil onay mesajı görünür, uygulanmamışsa kuponun nereye girileceğini hatırlatır.

Hook’ları Doğru Test Etme

Geliştirme aşamasında hangi hook’un tam olarak nerede tetiklendiğini görmek isteyebilirsiniz. Bunun için geçici debug kodu yazılabilir:

// Sadece gelistirme ortaminda kullan, yayinda birakma!
add_action( 'woocommerce_review_order_before_payment', 'debug_hook_position', 1 );

function debug_hook_position() {
    if ( current_user_can( 'administrator' ) ) {
        echo '<div style="background:yellow; color:black; padding:8px; font-family:monospace; font-size:11px; border:2px solid red; margin:5px 0;">';
        echo '>>> HOOK: woocommerce_review_order_before_payment <<<';
        echo '</div>';
    }
}

Hook’un priority parametresini (burada 1) düşük tutarak en başa aldık. Gerçek içerik kodlarının önünde tetikleneceği için konumu net görürsünüz. Testi bitirince bu fonksiyonu kaldırın.

Önbellek ve Performans Konuları

Dinamik içerik eklediğinizde, özellikle sayfa önbelleği kullanan bir yapınız varsa, dikkat etmeniz gereken bazı noktalar var.

  • WP Rocket, W3TC gibi eklentiler ödeme sayfasını önbelleğe almaz ama yine de bu eklentilerin ödeme sayfası hariç tutma ayarlarını kontrol edin
  • woocommerce_cache_helper WooCommerce’in kendi önbellek yöneticisidir, dinamik sayfaları otomatik olarak hariç tutar
  • Sunucu taraflı önbellek (Nginx FastCGI, Varnish) kullanıyorsanız /checkout/ yolunu kesinlikle bypass listesine ekleyin
  • Veritabanı sorgusu yapan fonksiyonlarda (özellikle get_user_meta, WC()->cart erişimleri) gereksiz tekrar sorgudan kaçınmak için sonuçları değişkende saklayın
// Kötü: Her hook çağrısında ayrı sorgu
function bad_example() {
    $user_id = get_current_user_id();
    $meta1 = get_user_meta( $user_id, 'field1', true );
    $meta2 = get_user_meta( $user_id, 'field2', true );
    $meta3 = get_user_meta( $user_id, 'field3', true );
}

// İyi: Tüm meta tek seferde çekilir
function good_example() {
    $user_id = get_current_user_id();
    $all_meta = get_user_meta( $user_id ); // Tüm meta tek sorguda
    $meta1 = isset( $all_meta['field1'][0] ) ? $all_meta['field1'][0] : '';
    $meta2 = isset( $all_meta['field2'][0] ) ? $all_meta['field2'][0] : '';
    $meta3 = isset( $all_meta['field3'][0] ) ? $all_meta['field3'][0] : '';
}

Güvenlik Kontrolleri

Ödeme sayfasına içerik eklerken güvenlik pratiklerini atlamayın. Kullanıcı verisi çıktı alırken mutlaka kaçış (escape) işlemi uygulayın:

add_action( 'woocommerce_review_order_before_payment', 'safe_user_message' );

function safe_user_message() {
    if ( ! is_user_logged_in() ) {
        return;
    }

    $user = wp_get_current_user();
    // Doğrudan echo etme, esc_html kullan
    $display_name = esc_html( $user->display_name );
    $email = esc_html( $user->user_email );

    // URL çıktısında esc_url kullan
    $orders_url = esc_url( wc_get_account_endpoint_url( 'orders' ) );

    echo '<div style="background:#e8f5e9; padding:12px 16px; margin-bottom:16px; border-radius:4px; font-size:14px;">';
    echo "Merhaba <strong>{$display_name}</strong>! Önceki siparişlerinizi <a href="{$orders_url}">buradan</a> görüntüleyebilirsiniz.";
    echo '</div>';
}

Kural basit: HTML çıktısında esc_html(), URL çıktısında esc_url(), HTML attribute içinde esc_attr(). Bu üçü alışkanlık haline geldiğinde XSS açıklarının önüne geçmiş olursunuz.

Farklı Ödeme Yöntemlerine Göre Mesaj

WooCommerce seçili ödeme yöntemine göre dinamik mesaj göstermek için JavaScript tarafına geçmek gerekebilir, ama PHP tarafında da belirli ödeme yöntemleri için hazır mesajlar koyabilirsiniz:

add_action( 'woocommerce_review_order_before_payment', 'payment_method_notices' );

function payment_method_notices() {
    // PHP tarafinda secili yontem bilinmez, JS ile handle etmek gerekir
    // Ama tum yontemler icin ortak bir mesaj kutusu olusturup JS ile gosterebiliriz
    ?>
    <div id="payment-method-notice" style="padding:12px 16px; margin-bottom:16px; border-radius:4px; font-size:13px; display:none;"></div>

    <script>
    jQuery(function($) {
        var messages = {
            'bacs': '🏦 Havale/EFT ödemelerinde siparişiniz ödeme onaylandıktan sonra işleme alınır. İşlem süresi 1-2 iş günüdür.',
            'cod': '🚪 Kapıda ödeme seçeneğinde kurye geldiğinde nakit veya kartla ödeme yapabilirsiniz.',
            'stripe': '💳 Kart bilgileriniz Stripe güvenlik altyapısıyla korunmaktadır. Bilgileriniz sunucularımızda saklanmaz.',
            'iyzico': '🔐 iyzico üzerinden güvenli ödeme yapıyorsunuz. 3D Secure desteği aktiftir.'
        };

        $('body').on('change', 'input[name="payment_method"]', function() {
            var method = $(this).val();
            var notice = $('#payment-method-notice');

            if (messages[method]) {
                notice.html(messages[method])
                      .css({
                          'background': '#e3f2fd',
                          'border': '1px solid #90caf9',
                          'color': '#1565c0'
                      })
                      .fadeIn(300);
            } else {
                notice.fadeOut(200);
            }
        });

        // Sayfa yüklendiğinde seçili olani kontrol et
        $('input[name="payment_method"]:checked').trigger('change');
    });
    </script>
    <?php
}

Bu yaklaşımda PHP ile HTML iskeleti ve JavaScript kodu sayfaya yerleştiriliyor, gerçek dinamizm ise tarayıcı tarafında jQuery ile sağlanıyor.

Sonuç

WooCommerce ödeme sayfasına woocommerce_review_order_before_payment hook’u üzerinden içerik eklemek, hem teknik açıdan basit hem de iş etkisi yüksek bir yöntem. Birkaç satır functions.php kodu ile güven rozeti, dinamik kampanya mesajı, kullanıcı rolüne özel bildirim ya da ürün kategorisi bazlı uyarı ekleyebilirsiniz.

Önemli noktalara tekrar bakalım:

  • is_checkout() koşulunu kullanarak stilleri ve scriptleri sadece ilgili sayfada yükleyin
  • esc_html() ve esc_url() ile kullanıcı verisi çıktısını her zaman temizleyin
  • Önbellek kullanıyorsanız ödeme sayfasının bypass listesinde olduğundan emin olun
  • Priority parametresi ile hook’ların çalışma sırasını kontrol edin
  • Birden fazla hook bir arada kullanabileceğinizi unutmayın, her mesaj tipi için ayrı fonksiyon yazmak bakımı kolaylaştırır

Bu yöntemler tema güncellemelerinden etkilenmez, eklenti bağımlılığı oluşturmaz ve performans üzerindeki etkisi minimumdur. Ödeme sayfanıza doğru mesajı doğru anda göstermek, müşterinin son adımı atmasına yardımcı olan küçük ama etkili bir dokunuştur.

Bir yanıt yazın

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