WooCommerce Checkout Sayfasının Sonuna İçerik Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde checkout sayfası, dönüşüm hunisinin en kritik noktasıdır. Müşteri bu sayfaya geldiğinde artık satın alma kararını vermiş demektir, ancak son anda ekleyeceğin küçük bir bilgi notu, güven mesajı veya promosyon bildirimi hem müşteri deneyimini iyileştirir hem de sepet değerini artırabilir. WooCommerce, bu tür özelleştirmeler için zengin bir hook sistemi sunar ve functions.php dosyasında birkaç satır kod yazarak checkout sayfasına istediğin içeriği ekleyebilirsin.

WooCommerce Hook Sistemi ve Checkout Sayfası

WooCommerce’in hook mimarisini anlamadan checkout özelleştirmelerine girmek, haritasız bir şehirde yol bulmaya çalışmak gibidir. WooCommerce, checkout sayfasında onlarca action hook tanımlar. Bu hooklar sayesinde tema dosyalarına dokunmadan, güncelleme güvenli bir şekilde sayfaya içerik ekleyebilirsin.

Checkout sayfasının sonuna içerik eklemek için en çok kullanılan hooklar şunlardır:

  • woocommerce_after_checkout_form: Tüm checkout formunun kapanış etiketinden sonra tetiklenir
  • woocommerce_checkout_after_order_review: Sipariş özeti bölümünün hemen altında çalışır
  • woocommerce_review_order_after_submit: “Sipariş Ver” butonunun hemen altına içerik ekler
  • woocommerce_after_order_notes: Sipariş notları alanından sonra, sipariş özetinden önce çalışır

Her birinin konumlandırması farklıdır ve hangi hook’u kullanacağın tamamen ne tür içerik ekleyeceğine bağlıdır.

Temel Kullanım: woocommerce_after_checkout_form

En yaygın senaryo, checkout formunun tamamen bitmesinden sonra bir içerik bloğu eklemektir. Güven rozetleri, ödeme yöntemi logoları veya iade politikası bilgileri bunun için idealdir.

// Checkout sayfasının sonuna güven mesajı ekleme
add_action( 'woocommerce_after_checkout_form', 'custom_after_checkout_content' );

function custom_after_checkout_content() {
    echo '<div class="checkout-trust-section">';
    echo '<p><strong>100% Güvenli Alışveriş:</strong> Tüm ödemeleriniz SSL ile şifrelenmektedir.</p>';
    echo '<p>Sorularınız için: <a href="tel:+905001234567">0500 123 45 67</a></p>';
    echo '</div>';
}

Bu kadar basit. functions.php dosyana bu kodu ekleyip kaydettiğinde, checkout sayfanın sonunda bu mesaj görünür. Ancak gerçek dünyada işler biraz daha karmaşık olur, o yüzden daha kapsamlı örneklere geçelim.

Sipariş Özeti Altına İçerik Ekleme

Müşterinin siparişini gözden geçirdiği bölümün hemen altına içerik eklemek, dikkat çekme açısından çok daha etkilidir. “Siparişini ver” butonuna yakın olduğu için müşteri bu içeriği kesinlikle görecektir.

// Sipariş özeti bölümünün altına ek kampanya bilgisi ekleme
add_action( 'woocommerce_checkout_after_order_review', 'add_promo_message_after_order_review', 20 );

function add_promo_message_after_order_review() {
    $cart_total = WC()->cart->get_cart_contents_total();
    $free_shipping_threshold = 500;
    
    if ( $cart_total < $free_shipping_threshold ) {
        $remaining = $free_shipping_threshold - $cart_total;
        echo '<div class="free-shipping-notice" style="background:#f0f7ff; padding:15px; border-radius:5px; margin-top:10px;">';
        echo '<p>Ücretsiz kargo için sepetine <strong>' . wc_price( $remaining ) . '</strong> daha ekle!</p>';
        echo '</div>';
    } else {
        echo '<div class="free-shipping-achieved" style="background:#f0fff4; padding:15px; border-radius:5px; margin-top:10px;">';
        echo '<p><strong>Tebrikler!</strong> Ücretsiz kargo hakkı kazandın.</p>';
        echo '</div>';
    }
}

Bu örnekte müşterinin mevcut sepet tutarına bakarak dinamik bir mesaj gösteriyoruz. Sepet 500 TL’nin altındaysa müşteri teşvik ediliyor, üstündeyse tebrik mesajı çıkıyor. Küçük bir dokunuş ama sepet değerini artırmak için son derece etkili bir yöntem.

Koşullu İçerik Gösterme

Her müşteriye aynı içeriği göstermek yerine, kullanıcı durumuna veya sepet içeriğine göre farklı içerikler gösterebilirsin. Bu, kişiselleştirme açısından çok değerlidir.

// Kullanıcı durumuna ve sepet içeriğine göre koşullu içerik
add_action( 'woocommerce_after_checkout_form', 'conditional_checkout_content', 10 );

function conditional_checkout_content() {
    
    // Misafir kullanıcılara hesap oluşturma teşviki
    if ( ! is_user_logged_in() ) {
        echo '<div class="guest-checkout-notice">';
        echo '<h4>Hesap Oluştur, Avantajlardan Yarar!</h4>';
        echo '<ul>';
        echo '<li>Sipariş geçmişine kolayca eriş</li>';
        echo '<li>Adreslerini kaydet, tekrar girme</li>';
        echo '<li>Özel üye indirimlerinden faydalan</li>';
        echo '</ul>';
        echo '</div>';
    }
    
    // Belirli bir kategori ürünü varsa ek bilgi göster
    $cart_items = WC()->cart->get_cart();
    $has_digital_product = false;
    
    foreach ( $cart_items as $item ) {
        $product = $item['data'];
        if ( $product->is_virtual() || $product->is_downloadable() ) {
            $has_digital_product = true;
            break;
        }
    }
    
    if ( $has_digital_product ) {
        echo '<div class="digital-product-notice">';
        echo '<p><strong>Dijital Ürün Bilgisi:</strong> Satın aldığın dijital ürünler ödeme onayından sonra anında hesabına tanımlanır. İndirme linkleri e-posta adresine gönderilir.</p>';
        echo '</div>';
    }
}

Bu fonksiyon iki ayrı kontrolü tek seferde yapıyor. Giriş yapmamış kullanıcılara hesap oluşturma avantajlarını anlatıyor, sepette dijital ürün varsa indirme süreciyle ilgili bilgi veriyor. Müşteri deneyimini kişiselleştirmenin en temiz yolu budur.

Güven Rozetleri ve Ödeme Logoları Ekleme

Checkout sayfasında güven unsurları çok önemlidir. Müşteriler ödeme bilgilerini girerken endişe duyabilir. Güven rozetleri ve ödeme yöntemi logoları bu kaygıyı azaltır.

// Checkout sayfasına güven rozetleri ve ödeme logoları ekleme
add_action( 'woocommerce_after_checkout_form', 'add_trust_badges_to_checkout', 15 );

function add_trust_badges_to_checkout() {
    ?>
    <div class="checkout-trust-badges" style="text-align:center; padding:30px 0; border-top:1px solid #eee; margin-top:20px;">
        
        <div class="security-badges" style="margin-bottom:20px;">
            <span style="display:inline-block; margin:0 10px; color:#2ecc71;">
                <strong>SSL Güvenli</strong>
            </span>
            <span style="display:inline-block; margin:0 10px; color:#3498db;">
                <strong>256-bit Şifreleme</strong>
            </span>
            <span style="display:inline-block; margin:0 10px; color:#e74c3c;">
                <strong>Güvenli Ödeme</strong>
            </span>
        </div>
        
        <div class="payment-methods" style="margin-bottom:20px;">
            <p style="color:#666; font-size:13px;">Kabul Edilen Ödeme Yöntemleri</p>
            <?php
            $payment_methods = array( 'Visa', 'MasterCard', 'Troy', 'AmEx' );
            foreach ( $payment_methods as $method ) {
                echo '<span style="display:inline-block; margin:0 5px; padding:5px 12px; border:1px solid #ddd; border-radius:4px; font-size:12px;">' . esc_html( $method ) . '</span>';
            }
            ?>
        </div>
        
        <div class="return-policy">
            <p style="color:#888; font-size:12px;">
                14 gün koşulsuz iade garantisi. Detaylar için 
                <a href="<?php echo esc_url( get_permalink( get_page_by_path( 'iade-politikasi' ) ) ); ?>">tıkla</a>.
            </p>
        </div>
        
    </div>
    <?php
}

Dikkat etmeni gereken nokta, inline style kullanmak yerine gerçek bir projede bu stilleri temanın CSS dosyasına veya Customizer’a taşıman gerekir. Bu örneklerde inline style kullanımı sadece bağımsız çalışabilirlik içindir.

Checkbox ile Ek Anlaşma Koşulu Ekleme

Bazı sektörlerde, özellikle dijital ürün satışı yapan sitelerde, müşterinin belirli şartları kabul ettiğini onaylaması gerekir. Bu tür checkbox’ları checkout sayfasına ekleyebilirsin.

// Checkout formuna özel onay checkbox'ı ekleme
add_action( 'woocommerce_review_order_after_submit', 'add_custom_checkout_checkbox', 10 );

function add_custom_checkout_checkbox() {
    ?>
    <div class="custom-checkout-checkbox" style="margin-top:15px; padding:10px; background:#fffde7; border-left:3px solid #ffc107;">
        <label>
            <input type="checkbox" name="custom_agreement_checkbox" id="custom_agreement_checkbox" value="1" />
            <?php echo wp_kses_post( 
                'Ön bilgilendirme formunu ve <a href="' . esc_url( get_permalink( get_page_by_path( 'mesafeli-satis-sozlesmesi' ) ) ) . '" target="_blank">Mesafeli Satış Sözleşmesi</a>'ni okudum ve kabul ediyorum.' 
            ); ?>
        </label>
    </div>
    <?php
}

// Checkbox doğrulama
add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_checkbox' );

function validate_custom_checkout_checkbox() {
    if ( ! isset( $_POST['custom_agreement_checkbox'] ) ) {
        wc_add_notice( 
            'Lütfen Mesafeli Satış Sözleşmesi'ni kabul ettiğinizi onaylayın.', 
            'error' 
        );
    }
}

Bu örnek sadece checkbox eklemekle kalmıyor, aynı zamanda sipariş verilmeden önce checkbox’ın işaretlenip işaretlenmediğini de kontrol ediyor. Eğer müşteri işaretlemezse hata mesajı gösteriliyor ve sipariş ilerleyemiyor. E-ticaret mevzuatı açısından özellikle Türkiye’de mesafeli satış sözleşmesi onayı bu şekilde alınmalıdır.

Zamanlı Kampanya Sayacı Ekleme

Urgency (aciliyet) yaratmak, dönüşüm oranını artırmanın kanıtlanmış yollarından biridir. Checkout sayfasına bir geri sayım sayacı ekleyebilirsin.

// Checkout sayfasına kampanya geri sayım sayacı ekleme
add_action( 'woocommerce_after_checkout_form', 'add_countdown_timer_checkout', 5 );

function add_countdown_timer_checkout() {
    
    // Sadece belirli bir tarih aralığında göster
    $campaign_end = strtotime( '2024-12-31 23:59:59' );
    $current_time = current_time( 'timestamp' );
    
    if ( $current_time > $campaign_end ) {
        return; // Kampanya bitti, hiçbir şey gösterme
    }
    
    $remaining_seconds = $campaign_end - $current_time;
    
    ?>
    <div class="checkout-countdown" style="background:#c0392b; color:#fff; padding:15px; text-align:center; border-radius:5px; margin-bottom:20px;">
        <p style="margin:0; font-size:14px;">
            <strong>Yılbaşı Kampanyası Bitiyor!</strong> Bu fiyatlardan alışveriş yapmak için kalan süre:
        </p>
        <div id="checkout-timer" style="font-size:24px; font-weight:bold; margin-top:5px;">
            <span id="timer-hours">00</span>:<span id="timer-minutes">00</span>:<span id="timer-seconds">00</span>
        </div>
    </div>
    
    <script type="text/javascript">
    (function() {
        var remainingSeconds = <?php echo intval( $remaining_seconds ); ?>;
        
        function updateTimer() {
            if ( remainingSeconds <= 0 ) {
                document.getElementById('checkout-countdown') && 
                document.getElementById('checkout-countdown').remove();
                return;
            }
            
            var hours   = Math.floor( remainingSeconds / 3600 );
            var minutes = Math.floor( ( remainingSeconds % 3600 ) / 60 );
            var seconds = remainingSeconds % 60;
            
            document.getElementById('timer-hours').textContent   = String(hours).padStart(2, '0');
            document.getElementById('timer-minutes').textContent = String(minutes).padStart(2, '0');
            document.getElementById('timer-seconds').textContent = String(seconds).padStart(2, '0');
            
            remainingSeconds--;
        }
        
        updateTimer();
        setInterval( updateTimer, 1000 );
    })();
    </script>
    <?php
}

Kampanya bitiş tarihini $campaign_end değişkeninden değiştirerek istediğin kampanya için kullanabilirsin. Tarih geçtikten sonra kod otomatik olarak hiçbir şey göstermez, ayrıca kaldırmak zorunda kalmazsın.

Belirli Ürün veya Kategoriye Göre Ek Bilgi Kutusu

Bazı ürünler özel teslimat bilgisi veya ek uyarı gerektirebilir. Bunu sepet içeriğine göre dinamik olarak gösterebilirsin.

// Sepetteki ürün kategorisine göre özel bilgi kutusu
add_action( 'woocommerce_checkout_after_order_review', 'show_category_specific_info', 10 );

function show_category_specific_info() {
    
    $cart_items  = WC()->cart->get_cart();
    $categories  = array();
    $messages    = array();
    
    // Kategori mesaj eşleşmeleri
    $category_messages = array(
        'elektronik'       => 'Elektronik ürünlerde garanti süreci için fatura muhafaza edilmelidir. Arıza durumunda yetkili servise başvurulmalıdır.',
        'gida'             => 'Gıda ürünleri soğuk zincir ile teslim edilir. Teslimat sırasında evde bulunmanız önerilir.',
        'buyuk-ev-aletleri'=> 'Büyük ev aletleri kurulum hizmeti ile teslim edilir. Kurulum randevunuz sipariş onayı sonrası aranarak alınacaktır.',
    );
    
    foreach ( $cart_items as $item ) {
        $product_id    = $item['product_id'];
        $product_cats  = get_the_terms( $product_id, 'product_cat' );
        
        if ( $product_cats && ! is_wp_error( $product_cats ) ) {
            foreach ( $product_cats as $cat ) {
                $slug = $cat->slug;
                if ( isset( $category_messages[ $slug ] ) && ! in_array( $slug, $categories ) ) {
                    $categories[] = $slug;
                    $messages[]   = $category_messages[ $slug ];
                }
            }
        }
    }
    
    if ( ! empty( $messages ) ) {
        echo '<div class="product-category-notices" style="margin-top:15px;">';
        echo '<h4 style="font-size:14px; color:#555;">Sipariş Bilgilendirmesi</h4>';
        foreach ( $messages as $message ) {
            echo '<div style="background:#f8f9fa; padding:10px; border-left:3px solid #007bff; margin-bottom:8px; font-size:13px;">';
            echo '<p style="margin:0;">' . esc_html( $message ) . '</p>';
            echo '</div>';
        }
        echo '</div>';
    }
}

Bu kod, sepetteki her ürünün kategorisini kontrol eder ve eğer önceden tanımlanmış bir kategori mesajı varsa gösterir. Mükemel bir e-ticaret deneyimi için bu tür dinamik bilgilendirmeler son derece değerlidir.

Mevcut Kullanıcıya Sadakat Puanı Bilgisi Gösterme

Puan-ödül sistemi kullanan sitelerde, müşteriye bu alışverişiyle kazanacağı puanı checkout sayfasında göstermek teşvik edici olur.

// Giriş yapmış kullanıcıya kazanılacak puan bilgisi gösterme
add_action( 'woocommerce_review_order_after_submit', 'show_loyalty_points_info', 5 );

function show_loyalty_points_info() {
    
    if ( ! is_user_logged_in() ) {
        return;
    }
    
    $user_id       = get_current_user_id();
    $current_points = get_user_meta( $user_id, 'loyalty_points', true );
    $current_points = $current_points ? intval( $current_points ) : 0;
    
    // Sepet tutarı başına 1 puan hesabı (her 10 TL = 1 puan)
    $cart_total       = WC()->cart->get_cart_contents_total();
    $points_to_earn   = floor( $cart_total / 10 );
    $total_after      = $current_points + $points_to_earn;
    
    if ( $points_to_earn > 0 ) {
        echo '<div class="loyalty-points-info" style="background:#f9f0ff; border:1px solid #9b59b6; border-radius:5px; padding:12px; margin-top:15px; font-size:13px;">';
        echo '<p style="margin:0;"><strong>Sadakat Puanı Bilgisi</strong></p>';
        echo '<p style="margin:5px 0 0;">Bu alışverişten <strong>' . intval( $points_to_earn ) . ' puan</strong> kazanacaksın.</p>';
        echo '<p style="margin:3px 0 0; color:#888;">Mevcut puan: ' . intval( $current_points ) . ' | Alışveriş sonrası: ' . intval( $total_after ) . ' puan</p>';
        echo '</div>';
    }
}

functions.php’ye Kod Eklerken Dikkat Edilmesi Gerekenler

Tüm bu kodları functions.php dosyana eklerken bazı pratik kurallara uyman gerekir, aksi halde site çökebilir veya beklenmedik davranışlar oluşabilir.

  • Her zaman child theme kullan: Ana temanın functions.php dosyasını düzenleme. Tema güncellemesinde değişikliklerini kaybedersin. Child theme oluştur ve oraya ekle.
  • Kod düzenleyici kullan: Doğrudan WordPress admin panelinden düzenlemek yerine FTP veya SSH üzerinden bir kod editörüyle çalış. Sözdizimi hatası olursa admin paneline giremezsin.
  • Fonksiyon adı çakışması: Her fonksiyon adının benzersiz olduğundan emin ol. function add_content() gibi genel isimler başka plugin’lerle çakışabilir. mytheme_custom_checkout_content() gibi prefix kullan.
  • Çıktıyı escape et: Kullanıcıdan veya veritabanından gelen veriyi doğrudan echo etme. esc_html(), esc_url(), wp_kses_post() fonksiyonlarını kullan.
  • Hook önceliğini yönet: add_action fonksiyonunun üçüncü parametresi önceliktir. Düşük sayı önce çalışır. Birden fazla fonksiyon aynı hook’u kullanıyorsa sıralamayı bu parametre ile yönet.
  • PHP sözdizimini doğrula: Kodu kaydetmeden önce online PHP syntax checker’dan geçir.
  • Yedek al: Herhangi bir düzenleme öncesi veritabanı ve dosya yedeği al.

Önce Test Ortamında Dene

Gerçek bir e-ticaret sitesinde checkout sayfasına müdahale etmek hassas bir iştir. Üretim ortamında test yapmak yerine, önce local bir WordPress kurulumunda veya staging ortamında dene.

Staging ortamın yoksa WP Staging veya Duplicator gibi pluginlerle kolayca bir test kopyası oluşturabilirsin. Ayrıca WooCommerce’in kendi test modu için şu adımları takip edebilirsin:

  • WooCommerce > Ayarlar > Ödemeler bölümüne git
  • “Çevrimiçi Ödeme Simülasyonu” eklentisini etkinleştir
  • Test siparişleri vererek eklediğin içeriklerin nasıl göründüğünü kontrol et

Performans Açısından Değerlendirme

Her fonksiyon çalıştığında sunucu kaynaklarını kullanır. Checkout sayfası zaten yoğun bir sayfa olduğu için eklediğin kodların performans etkisini göz önünde bulundur.

  • WC()->cart->get_cart() gibi çağrılar zaten önbelleklenmişse sorun yoktur ama döngü içinde tekrar tekrar çağırma.
  • Veritabanı sorgusu yapıyorsan sonucu transient veya wp_cache ile önbelleğe al.
  • Dış servislere istek atan bir kod yazıyorsan (API çağrısı gibi) mutlaka zaman aşımı kontrolü ekle.
  • JavaScript kodları wp_enqueue_script ile düzgün şekilde kuyruğa al, doğrudan echo etmek yerine.

Sonuç

WooCommerce checkout sayfasına functions.php üzerinden içerik eklemek, tema editörü veya page builder gerektirmeyen, son derece esnek ve güncelleme güvenli bir yöntemdir. Güven mesajları, dinamik kampanya bildirimleri, kategori bazlı ürün bilgileri, checkbox onayları ve sadakat puanı bilgilendirmeleri gibi onlarca farklı kullanım senaryosu bu yöntemle hayata geçirilebilir.

Temel mantık her örnekte aynıdır: doğru hook’u seç, fonksiyonu hook’a bağla, içeriği güvenli biçimde çıktıla. Bu üç adımı kavradıktan sonra checkout sayfasını tamamen ihtiyaçlarına göre şekillendirebilirsin. Müşteri deneyimini iyileştiren her küçük dokunuş, uzun vadede dönüşüm oranlarına ve müşteri memnuniyetine olumlu yansır.

Bir yanıt yazın

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