WooCommerce Sipariş Detay Sayfasına İçerik Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde müşteri deneyimini iyileştirmenin en etkili yollarından biri, sipariş detay sayfalarını zenginleştirmektir. WooCommerce varsayılan olarak sipariş özetini, ürün listesini ve fatura bilgilerini gösterir. Ancak çoğu zaman bu yeterli gelmez: kargo takip numarası eklemek, özel mesajlar göstermek, indirim kuponu sunmak ya da teknik destek bilgileri vermek isteyebilirsiniz. İşte tam bu noktada functions.php devreye giriyor.

Bu yazıda WooCommerce sipariş detay sayfasına farklı noktalara nasıl içerik ekleyeceğinizi, hangi hook’ların ne işe yaradığını ve gerçek dünya senaryolarında bu bilgiyi nasıl kullanacağınızı ele alacağız.

WooCommerce Sipariş Detay Sayfası Nedir?

Müşteri bir siparişi tamamladıktan sonra iki farklı sayfada sipariş detaylarını görebilir:

  • Teşekkür sayfası (Thank You Page): Ödeme sonrası yönlendirilen /checkout/order-received/ sayfası
  • Hesabım > Siparişlerim detay sayfası: Müşterinin my-account/orders/ bölümünden eriştiği sayfa

Her ikisinde de WooCommerce, içerik eklemek için bir dizi hook (aksiyon ve filtre) sunuyor. Bu hook’ları doğru kullanmak, tema güncellemelerinden bağımsız, sürdürülebilir bir özelleştirme sağlar. Doğrudan tema dosyalarını düzenlemek yerine her zaman functions.php veya özel bir eklenti dosyası tercih edin.

Temel Hook’ları Tanıyalım

WooCommerce sipariş sayfalarında en çok kullanılan hook’lar şunlardır:

  • woocommerce_order_details_before_order_table: Sipariş tablosunun üstüne içerik ekler
  • woocommerce_order_details_after_order_table: Sipariş tablosunun altına içerik ekler
  • woocommerce_thankyou: Teşekkür sayfasında sipariş bilgileri altına içerik ekler
  • woocommerce_thankyou_order_received_text: Teşekkür sayfasının üst metnini filtreler
  • woocommerce_before_order_itemmeta: Her sipariş kalemi meta bilgisinden önce çalışır
  • woocommerce_after_order_itemmeta: Her sipariş kalemi meta bilgisinden sonra çalışır
  • woocommerce_view_order: Hesabım > Siparişler detay sayfasında içerik ekler

Önce basit bir örnek ile başlayalım, ardından giderek karmaşıklaşan senaryolara geçelim.

1. Teşekkür Sayfasına Basit Mesaj Ekleme

En yaygın kullanım senaryosundan başlayalım. Müşteri siparişi tamamladıktan sonra ona özel bir teşekkür mesajı veya bilgilendirme notu göstermek istiyorsunuz.

// functions.php
add_action( 'woocommerce_thankyou', 'custom_thankyou_message', 10, 1 );

function custom_thankyou_message( $order_id ) {
    if ( ! $order_id ) return;

    echo '<div class="woocommerce-notice woocommerce-notice--info">';
    echo '<p><strong>Siparişiniz için teşekkür ederiz!</strong></p>';
    echo '<p>Siparişiniz genellikle <strong>2-3 iş günü</strong> içinde kargoya verilmektedir. ';
    echo 'Kargo takip numaranız hazır olduğunda size e-posta ile bildirim yapılacaktır.</p>';
    echo '</div>';
}

Bu kod woocommerce_thankyou hook’una bağlandığı için sadece teşekkür sayfasında çalışır. $order_id parametresi sayesinde sipariş bilgilerine de erişebilirsiniz.

2. Sipariş Durumuna Göre Dinamik Mesaj Gösterme

Gerçek projede statik mesajlar yerine sipariş durumuna göre farklı içerikler göstermek çok daha değerli. Örneğin, ödeme bekleyen bir siparis için farklı, tamamlanmış sipariş için farklı mesaj gösterebilirsiniz.

// functions.php
add_action( 'woocommerce_thankyou', 'dynamic_order_status_message', 15, 1 );

function dynamic_order_status_message( $order_id ) {
    if ( ! $order_id ) return;

    $order  = wc_get_order( $order_id );
    $status = $order->get_status();

    $messages = array(
        'pending'    => array(
            'type' => 'warning',
            'text' => 'Siparişiniz ödeme bekleniyor. Ödemeniz onaylandıktan sonra işleme alınacaktır.'
        ),
        'processing' => array(
            'type' => 'info',
            'text' => 'Siparişiniz hazırlanıyor! Ekibimiz en kısa sürede kargoya verecektir.'
        ),
        'completed'  => array(
            'type' => 'success',
            'text' => 'Siparişiniz teslim edildi. Alışverişinizden memnun kaldıysanız yorum bırakmayı unutmayın!'
        ),
        'on-hold'    => array(
            'type' => 'warning',
            'text' => 'Siparişiniz inceleme aşamasında. Sorularınız için bize ulaşabilirsiniz.'
        ),
    );

    if ( isset( $messages[ $status ] ) ) {
        $msg = $messages[ $status ];
        echo '<div class="woocommerce-notice woocommerce-notice--' . esc_attr( $msg['type'] ) . '">';
        echo '<p>' . esc_html( $msg['text'] ) . '</p>';
        echo '</div>';
    }
}

Bu yaklaşım özellikle banka havalesi veya kapıda ödeme gibi manuel onay gerektiren ödeme yöntemleri kullanan sitelerde çok işe yarıyor.

3. Sipariş Tablosunun Üstüne ve Altına İçerik Ekleme

Hesabım sayfasındaki sipariş detayları için woocommerce_order_details_before_order_table ve woocommerce_order_details_after_order_table hook’larını kullanabilirsiniz. Bu hook’lar hem teşekkür sayfasında hem de hesabım bölümünde çalışır.

// functions.php - Sipariş tablosunun üstüne içerik ekle
add_action( 'woocommerce_order_details_before_order_table', 'add_content_before_order_table', 10, 1 );

function add_content_before_order_table( $order ) {
    // $order burada WC_Order nesnesidir
    $order_date = $order->get_date_created()->date_i18n( 'd F Y' );

    echo '<div class="custom-order-info">';
    echo '<p>Bu sipariş <strong>' . esc_html( $order_date ) . '</strong> tarihinde oluşturulmuştur.</p>';
    echo '</div>';
}

// Sipariş tablosunun altına içerik ekle
add_action( 'woocommerce_order_details_after_order_table', 'add_content_after_order_table', 10, 1 );

function add_content_after_order_table( $order ) {
    $order_status = $order->get_status();

    // Sadece tamamlanan siparişlerde yorum yapma linki göster
    if ( 'completed' === $order_status ) {
        echo '<div class="review-invitation">';
        echo '<h3>Bizi Değerlendirin</h3>';
        echo '<p>Alışveriş deneyiminizi paylaşarak diğer müşterilere yardımcı olabilirsiniz.</p>';
        echo '<a href="' . esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ) . '" class="button">Ürünleri Değerlendir</a>';
        echo '</div>';
    }
}

Dikkat edin: woocommerce_order_details_before_order_table ve woocommerce_order_details_after_order_table hook’larının callback fonksiyonuna $order parametresi WC_Order nesnesi olarak gelir. woocommerce_thankyou hook’unda ise $order_id integer olarak gelir. Bu farka dikkat etmezseniz hata alırsınız.

4. Kargo Takip Numarası Ekleme

E-ticaret sitelerinin en çok ihtiyaç duyduğu özelliklerden biri kargo takip numarası göstermektir. Bunun için önce sipariş meta verisine takip numarasını kaydetmeniz, ardından sipariş sayfasında göstermeniz gerekiyor.

// functions.php - Admin panelinde sipariş düzenleme sayfasına kargo takip alanı ekle
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'add_tracking_number_field', 10, 1 );

function add_tracking_number_field( $order ) {
    $tracking_number = get_post_meta( $order->get_id(), '_cargo_tracking_number', true );
    $tracking_url    = get_post_meta( $order->get_id(), '_cargo_tracking_url', true );
    ?>
    <div class="form-field-wide">
        <h3>Kargo Takip Bilgileri</h3>
        <p>
            <label>Takip Numarası:</label>
            <input type="text" 
                   name="cargo_tracking_number" 
                   value="<?php echo esc_attr( $tracking_number ); ?>" 
                   placeholder="Örn: 1234567890" />
        </p>
        <p>
            <label>Takip Linki:</label>
            <input type="url" 
                   name="cargo_tracking_url" 
                   value="<?php echo esc_attr( $tracking_url ); ?>" 
                   placeholder="https://kargo.com/takip/" />
        </p>
    </div>
    <?php
}

// Admin kaydettiğinde takip bilgilerini sakla
add_action( 'woocommerce_process_shop_order_meta', 'save_tracking_number_field', 10, 2 );

function save_tracking_number_field( $order_id, $post ) {
    if ( isset( $_POST['cargo_tracking_number'] ) ) {
        update_post_meta( $order_id, '_cargo_tracking_number', sanitize_text_field( $_POST['cargo_tracking_number'] ) );
    }
    if ( isset( $_POST['cargo_tracking_url'] ) ) {
        update_post_meta( $order_id, '_cargo_tracking_url', esc_url_raw( $_POST['cargo_tracking_url'] ) );
    }
}

// Müşterinin sipariş sayfasında takip bilgisini göster
add_action( 'woocommerce_order_details_after_order_table', 'show_tracking_info_to_customer', 10, 1 );

function show_tracking_info_to_customer( $order ) {
    $tracking_number = get_post_meta( $order->get_id(), '_cargo_tracking_number', true );
    $tracking_url    = get_post_meta( $order->get_id(), '_cargo_tracking_url', true );

    if ( empty( $tracking_number ) ) return;

    echo '<div class="tracking-info" style="background:#f8f9fa; padding:15px; margin-top:20px; border-left:4px solid #0071a1;">';
    echo '<h3>Kargo Takip Bilgisi</h3>';
    echo '<p>Takip Numarası: <strong>' . esc_html( $tracking_number ) . '</strong></p>';

    if ( ! empty( $tracking_url ) ) {
        echo '<a href="' . esc_url( $tracking_url ) . '" target="_blank" class="button button-primary">Kargoyu Takip Et</a>';
    }

    echo '</div>';
}

Bu yapı gerçek bir e-ticaret sitesinde sıklıkla kullanılır. Admin sipariş sayfasından takip numarasını girer, müşteri de kendi sipariş sayfasında bu bilgiyi görür.

5. Teşekkür Sayfası Üst Metnini Özelleştirme

WooCommerce’in varsayılan “Siparişiniz için teşekkür ederiz” metnini filtrelemek için woocommerce_thankyou_order_received_text kullanabilirsiniz.

// functions.php
add_filter( 'woocommerce_thankyou_order_received_text', 'custom_order_received_text', 10, 2 );

function custom_order_received_text( $text, $order ) {
    if ( ! $order ) return $text;

    $customer_name = $order->get_billing_first_name();

    return sprintf(
        'Teşekkürler %s! Siparişiniz başarıyla alındı. Sipariş numaranız: <strong>#%d</strong>. Onay e-postası <strong>%s</strong> adresine gönderildi.',
        esc_html( $customer_name ),
        $order->get_order_number(),
        esc_html( $order->get_billing_email() )
    );
}

Müşteriyi ismiyle selamlamak, dönüşüm oranlarını ve müşteri memnuniyetini artıran küçük ama etkili bir dokunuş.

6. Belirli Ödeme Yöntemine Göre İçerik Gösterme

Banka havalesi yapan müşterilere hesap bilgilerini, kapıda ödemeli siparişlerde farklı bir mesaj göstermek isteyebilirsiniz.

// functions.php
add_action( 'woocommerce_thankyou', 'payment_method_specific_content', 20, 1 );

function payment_method_specific_content( $order_id ) {
    if ( ! $order_id ) return;

    $order          = wc_get_order( $order_id );
    $payment_method = $order->get_payment_method();

    switch ( $payment_method ) {
        case 'bacs': // Banka havalesi
            echo '<div class="payment-info woocommerce-notice woocommerce-notice--info">';
            echo '<h3>Havale/EFT Bilgileri</h3>';
            echo '<ul>';
            echo '<li><strong>Banka:</strong> Ziraat Bankası</li>';
            echo '<li><strong>Hesap Sahibi:</strong> Örnek Şirket A.Ş.</li>';
            echo '<li><strong>IBAN:</strong> TR00 0000 0000 0000 0000 0000 00</li>';
            echo '<li><strong>Açıklama:</strong> Sipariş No: ' . esc_html( $order->get_order_number() ) . '</li>';
            echo '</ul>';
            echo '<p><strong>Önemli:</strong> Havale açıklamasına mutlaka sipariş numaranızı yazınız.</p>';
            echo '</div>';
            break;

        case 'cod': // Kapıda ödeme
            echo '<div class="cod-info woocommerce-notice woocommerce-notice--info">';
            echo '<p>Kapıda ödeme seçeneğini tercih ettiniz. Teslimat sırasında nakit veya kredi kartı ile ödeme yapabilirsiniz.</p>';
            echo '<p>Teslimat görevlisi sizi önceden arayacaktır.</p>';
            echo '</div>';
            break;

        case 'cheque': // Çek ile ödeme
            echo '<div class="cheque-info woocommerce-notice woocommerce-notice--warning">';
            echo '<p>Siparişiniz çekiniz tarafımıza ulaştıktan sonra işleme alınacaktır.</p>';
            echo '</div>';
            break;
    }
}

7. Sipariş Detayına İndirim Kuponu Ekleme

Müşteri siparişini tamamladıktan sonra bir sonraki alışverişi için indirim kuponu göstermek, müşteri sadakatini artıran güçlü bir yöntem.

// functions.php
add_action( 'woocommerce_thankyou', 'show_next_order_coupon', 25, 1 );

function show_next_order_coupon( $order_id ) {
    if ( ! $order_id ) return;

    $order = wc_get_order( $order_id );

    // Sadece belirli bir tutarın üzerindeki siparişlerde kupon göster
    $order_total = $order->get_total();
    if ( $order_total < 500 ) return;

    // Müşteriye özel kupon oluştur veya mevcut sabit kuponu göster
    $coupon_code    = 'TESEKKURLER10'; // Önceden WooCommerce'de tanımlanmış kupon
    $discount_rate  = '10';

    echo '<div class="next-order-coupon" style="background:#fff3cd; border:2px dashed #ffc107; padding:20px; margin-top:25px; text-align:center;">';
    echo '<h3>Bir Sonraki Alışverişinize Özel Hediye!</h3>';
    echo '<p>500 TL ve üzeri alışverişiniz için sizi ödüllendiriyoruz.</p>';
    echo '<p style="font-size:24px; font-weight:bold; color:#28a745; letter-spacing:3px;">' . esc_html( $coupon_code ) . '</p>';
    echo '<p>Kupon kodunuzu kullanarak <strong>%' . esc_html( $discount_rate ) . ' indirim</strong> kazanın.</p>';
    echo '<p><small>Kupon 30 gün geçerlidir. Yalnızca bir kez kullanılabilir.</small></p>';
    echo '</div>';
}

8. Hesabım Sipariş Sayfasına Özel CSS Ekleme

Eklediğiniz içeriklerin görsel olarak uyumlu olması için sayfa bazlı CSS eklemek gerekebilir. Bunu da functions.php üzerinden yapabilirsiniz.

// functions.php
add_action( 'wp_head', 'custom_order_detail_styles' );

function custom_order_detail_styles() {
    // Sadece hesabım sayfasında veya checkout sayfasında yükle
    if ( ! is_wc_endpoint_url( 'view-order' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
        return;
    }
    ?>
    <style>
        .tracking-info {
            border-radius: 4px;
            margin: 20px 0;
        }
        .tracking-info h3 {
            margin-top: 0;
            color: #0071a1;
        }
        .next-order-coupon {
            border-radius: 8px;
            animation: pulse 2s infinite;
        }
        .review-invitation {
            padding: 20px;
            background: #f0f8f0;
            border-left: 4px solid #28a745;
            margin-top: 20px;
        }
        .payment-info ul {
            list-style: none;
            padding: 0;
        }
        .payment-info ul li {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }
    </style>
    <?php
}

is_wc_endpoint_url() fonksiyonu sayesinde CSS’i sadece gerekli sayfalara yüklüyoruz. Bu, performans açısından önemli bir pratik.

9. Sipariş Ürünlerine Meta Bilgi Ekleme

Her sipariş kalemine özel bilgi göstermek de mümkün. Örneğin, dijital ürünlerde indirme linki, garanti bilgisi veya ürün seri numarası göstermek isteyebilirsiniz.

// functions.php
add_action( 'woocommerce_after_order_itemmeta', 'add_product_warranty_info', 10, 3 );

function add_product_warranty_info( $item_id, $item, $product ) {
    if ( ! $product ) return;

    // Ürün meta verisinden garanti bilgisini al
    $warranty = get_post_meta( $product->get_id(), '_warranty_period', true );

    if ( empty( $warranty ) ) return;

    echo '<p class="warranty-info">';
    echo '<small><strong>Garanti Süresi:</strong> ' . esc_html( $warranty ) . ' yıl</small>';
    echo '</p>';
}

Aynı hook kullanılarak sipariş kalemi bazında destek bilgisi, kullanım kılavuzu linki veya ürüne özel notlar da gösterilebilir.

Gerçek Dünya Senaryosu: Yazılım Lisans Anahtarı Dağıtımı

Dijital ürün satan bir sitede siparişi tamamlayan müşteriye otomatik olarak lisans anahtarı göstermek, destek yükünü ciddi ölçüde azaltır.

// functions.php
add_action( 'woocommerce_order_details_after_order_table', 'show_license_keys', 10, 1 );

function show_license_keys( $order ) {
    $has_license = false;

    foreach ( $order->get_items() as $item_id => $item ) {
        $product_id  = $item->get_product_id();
        $license_key = get_post_meta( $product_id, '_license_key', true );

        // Her sipariş kalemine özel lisans anahtarı meta verisi
        $order_license = wc_get_order_item_meta( $item_id, '_generated_license_key', true );

        if ( empty( $order_license ) && ! empty( $license_key ) ) {
            // Basit bir lisans oluştur (gerçekte daha güvenli bir sistem kullanın)
            $order_license = strtoupper( substr( md5( $order->get_id() . $product_id . time() ), 0, 20 ) );
            $order_license = implode( '-', str_split( $order_license, 5 ) );
            wc_add_order_item_meta( $item_id, '_generated_license_key', $order_license );
        }

        if ( ! empty( $order_license ) ) {
            if ( ! $has_license ) {
                echo '<div class="license-keys-section">';
                echo '<h3>Lisans Anahtarlarınız</h3>';
                $has_license = true;
            }

            echo '<div class="license-item" style="background:#f8f9fa; padding:10px; margin:10px 0; font-family:monospace;">';
            echo '<strong>' . esc_html( $item->get_name() ) . ':</strong> ';
            echo '<code style="font-size:16px; color:#e83e8c;">' . esc_html( $order_license ) . '</code>';
            echo '</div>';
        }
    }

    if ( $has_license ) {
        echo '<p><small>Lisans anahtarınızı güvenli bir yerde saklayınız. Aynı zamanda e-posta adresinize de gönderilmiştir.</small></p>';
        echo '</div>';
    }
}

Hook Önceliği (Priority) Hakkında

Birden fazla fonksiyon aynı hook’a bağlandığında sıralama önemli olur. WooCommerce’in varsayılan içeriği de belirli önceliklerle çalışır.

  • Düşük sayı = Önce çalışır: add_action( 'hook', 'fonksiyon', 5 ) önce çalışır
  • Yüksek sayı = Sonra çalışır: add_action( 'hook', 'fonksiyon', 20 ) daha sonra çalışır
  • Varsayılan: Belirtilmezse 10 kullanılır

woocommerce_thankyou için WooCommerce’in kendi içeriği genellikle 10 önceliğiyle çalışır. Kendi içeriğinizi bunun üstüne eklemek istiyorsanız 5, altına eklemek istiyorsanız 15 veya 20 kullanabilirsiniz.

Güvenlik Notları

functions.php‘ye eklediğiniz kodlarda güvenliği göz ardı etmeyin:

  • Kullanıcı girdilerini her zaman sanitize_text_field(), esc_html(), esc_url() gibi fonksiyonlarla temizleyin
  • Doğrudan $_POST veya $_GET verisini HTML’e basmayın
  • Admin kayıt işlemlerinde nonce kullanın
  • Kapasitesi (capability) olmayan kullanıcıların görmemesi gereken bilgileri current_user_can() ile koruyun
  • wc_get_order() döndüğünde null kontrolü yapın

Sonuç

WooCommerce sipariş detay sayfaları, müşteri deneyimini iyileştirmek için kullanılmayan bir alan olmaktan çıkabilir. Doğru hook’ları kullanarak kargo takip bilgisi, lisans anahtarı, indirim kuponu, ödeme yöntemine göre özel mesaj gibi pek çok özelliği functions.php üzerinden kolayca ekleyebilirsiniz.

Önemli nokta şu: her zaman doğrudan tema dosyalarını değil, functions.php veya özel bir eklenti yapısını tercih edin. Böylece tema güncellemeleri özelleştirmelerinizi silmez. Üstelik bir child theme kullanıyorsanız bu kodları ana temanın değil, child temanın functions.php dosyasına eklemelisiniz.

Üretim ortamında değişiklik yapmadan önce staging ortamında test etmek de kritik. Özellikle sipariş sürecine dokunan herhangi bir kod, yanlış yazıldığında ödeme akışını bozabilir. Küçük adımlarla ilerleyin, her değişikliği test edin ve WooCommerce sürüm güncellemelerinden sonra her şeyin düzgün çalıştığını doğrulayın.

Bir yanıt yazın

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