WooCommerce Stok Bilgisinin Altına İçerik Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde ürün sayfasının stok bilgisi bölümü, ziyaretçilerin satın alma kararı vermeden önce gözlerini sabitlediği kritik noktalardan biridir. “Stokta var”, “Tükendi” ya da “3 adet kaldı” gibi mesajların hemen altına doğru içerik yerleştirirseniz, bu alanı dönüşüm oranınızı artırmak için güçlü bir araca dönüştürebilirsiniz. WooCommerce’in hook sistemi tam da bu noktada devreye giriyor ve functions.php dosyası üzerinden kod yazarak bu bölgeyi özelleştirmenize olanak tanıyor.

WooCommerce Hook Sistemi ve Stok Alanı

WooCommerce, ürün sayfasını parçalara bölerek her parçayı belirli hook’larla kontrol eder. Stok bilgisinin altına içerik eklemek için kullanacağımız temel hook woocommerce_after_add_to_cart_form ya da daha doğrudan woocommerce_single_product_summary içindeki öncelik değerleridir. Ancak stok bilgisinin tam altını hedeflemek için woocommerce_get_availability filtresi veya daha hassas yaklaşımlar gerekebilir.

En doğrudan yöntem, stok durumu metninin render edildiği yerin hemen ardına kancalanmaktır. WooCommerce bu iş için woocommerce_after_add_to_cart_form hook’unu sunar, ama stok metninin kendisine daha yakın olmak istiyorsanız template override ya da özel hook kombinasyonları kullanmanız gerekir.

Temel hook’ları anlamak için şu yapıya bakabilirsiniz:

  • woocommerce_single_product_summary: Ürün özet alanının tamamını yönetir
  • woocommerce_before_add_to_cart_form: Sepete ekle formundan önce çalışır
  • woocommerce_after_add_to_cart_form: Sepete ekle formundan sonra çalışır
  • woocommerce_product_meta_start: Ürün meta bilgileri başlamadan önce tetiklenir
  • woocommerce_product_meta_end: Ürün meta bilgileri bittikten sonra tetiklenir

Temel Kod Yapısı: Stok Bilgisinin Altına İçerik Eklemek

Başlayalım en sade örnekle. functions.php dosyanıza şu kodu ekleyerek stok bilgisinin bulunduğu alana yakın bir noktaya sabit metin yerleştirebilirsiniz:

// functions.php
add_action( 'woocommerce_single_product_summary', 'ozgun_stok_alti_icerik', 31 );
function ozgun_stok_alti_icerik() {
    global $product;

    echo '<div class="stok-alti-bilgi" style="margin: 10px 0; padding: 10px; background: #f8f8f8; border-left: 4px solid #0073aa;">';
    echo '<p>Bu ürün için ücretsiz kargo geçerlidir. Siparişiniz 24 saat içinde kargoya verilir.</p>';
    echo '</div>';
}

Buradaki 31 değeri önemlidir. WooCommerce’in varsayılan öncelik değerlerine göre stok bilgisi 20 önceliğiyle render edilir. Siz 21 ile 29 arasında bir değer kullanarak stok metninin hemen altına, ama sepete ekle butonunun üstüne girebilirsiniz. 30 ise genellikle sepete ekle formunun kendisine denk gelir.

Stok Durumuna Göre Dinamik İçerik

Gerçek dünyada ihtiyaçlarınız çok daha dinamik olacaktır. Ürün stokta varken bir mesaj, tükendiğinde başka bir mesaj göstermek isteyebilirsiniz. İşte bu senaryoyu handle eden kod:

add_action( 'woocommerce_single_product_summary', 'dinamik_stok_mesaji', 21 );
function dinamik_stok_mesaji() {
    global $product;

    if ( ! $product->managing_stock() ) {
        return;
    }

    $stok_miktari = $product->get_stock_quantity();
    $stok_durumu  = $product->get_stock_status();

    if ( $stok_durumu === 'instock' && $stok_miktari > 10 ) {
        echo '<p class="stok-mesaj stok-bol" style="color: #2ecc71; font-weight: bold;">
              Stokta bol miktarda var. Hemen sipariş ver!
              </p>';
    } elseif ( $stok_durumu === 'instock' && $stok_miktari <= 10 && $stok_miktari > 0 ) {
        echo '<p class="stok-mesaj stok-az" style="color: #e67e22; font-weight: bold;">
              Son ' . esc_html( $stok_miktari ) . ' adet! Fırsatı kaçırma.
              </p>';
    } elseif ( $stok_durumu === 'outofstock' ) {
        echo '<p class="stok-mesaj stok-yok" style="color: #e74c3c;">
              Bu ürün şu an stokta yok. 
              <a href="/stok-bildirimi">Stoka gelince haber ver</a> seçeneğini kullanabilirsiniz.
              </p>';
    }
}

Bu kod, stok yönetimi aktif olan ürünleri tespit eder ve miktara göre farklı mesajlar gösterir. esc_html() kullanımına dikkat edin, kullanıcıya veri gösterirken XSS güvenliği açısından bu zorunludur.

Yalnızca Belirli Ürün Kategorilerinde Gösterme

Bir e-ticaret sitesinde her ürün aynı mesajı gerektirmez. Gıda ürünleri için son kullanma tarihi uyarısı, elektronik ürünler için garanti bilgisi, tekstil için beden rehberi gibi kategori bazlı içerikler göstermek çok daha profesyonel bir yaklaşımdır:

add_action( 'woocommerce_single_product_summary', 'kategori_bazli_stok_mesaji', 21 );
function kategori_bazli_stok_mesaji() {
    global $product;

    $urun_id         = $product->get_id();
    $kategoriler     = get_the_terms( $urun_id, 'product_cat' );
    $kategori_sluglar = array();

    if ( $kategoriler && ! is_wp_error( $kategoriler ) ) {
        foreach ( $kategoriler as $kategori ) {
            $kategori_sluglar[] = $kategori->slug;
        }
    }

    if ( in_array( 'elektronik', $kategori_sluglar ) ) {
        echo '<div class="garanti-bilgi">';
        echo '<p>Bu ürün 2 yıl resmi distribütör garantisi kapsamındadır. 
              Garanti işlemleri için faturanızı saklayınız.</p>';
        echo '</div>';
    } elseif ( in_array( 'gida', $kategori_sluglar ) ) {
        echo '<div class="gida-uyari">';
        echo '<p>Gıda ürünleri iade alınmamaktadır. 
              Ürünlerimiz +4°C soğuk zincir koşullarında sevk edilmektedir.</p>';
        echo '</div>';
    } elseif ( in_array( 'tekstil', $kategori_sluglar ) ) {
        echo '<div class="beden-rehberi">';
        echo '<p><a href="/beden-rehberi" target="_blank">Beden rehberimizi</a> 
              inceleyerek doğru beden seçimi yapabilirsiniz.</p>';
        echo '</div>';
    }
}

Bu yapıyla her kategori kendine özgü bir bilgi gösterir ve kod tek bir fonksiyonda merkezi olarak yönetilir.

Özel Ürün Meta Alanı Kullanımı

Bazen her ürün için farklı bir mesaj göstermek isteyebilirsiniz ve bunu kategori bazlı değil ürün bazlı yönetmek isteyebilirsiniz. Bu durumda WordPress’in custom field (özel alan) sistemi devreye girer. Önce ürün düzenleme sayfasına özel bir alan ekleyelim, ardından bu alanı stok bilgisinin altında gösterelim:

// Admin paneline özel alan eklemek
add_action( 'woocommerce_product_options_general_product_data', 'stok_alti_ozel_mesaj_alani' );
function stok_alti_ozel_mesaj_alani() {
    woocommerce_wp_textarea_input( array(
        'id'          => '_stok_alti_ozel_mesaj',
        'label'       => 'Stok Altı Özel Mesaj',
        'description' => 'Bu alan stok bilgisinin hemen altında görünecektir.',
        'desc_tip'    => true,
        'rows'        => 4,
    ) );
}

// Özel alanı kaydetmek
add_action( 'woocommerce_process_product_meta', 'stok_alti_ozel_mesaj_kaydet' );
function stok_alti_ozel_mesaj_kaydet( $post_id ) {
    $ozel_mesaj = isset( $_POST['_stok_alti_ozel_mesaj'] ) 
                  ? sanitize_textarea_field( $_POST['_stok_alti_ozel_mesaj'] ) 
                  : '';
    update_post_meta( $post_id, '_stok_alti_ozel_mesaj', $ozel_mesaj );
}

// Ön yüzde göstermek
add_action( 'woocommerce_single_product_summary', 'stok_alti_ozel_mesaj_goster', 21 );
function stok_alti_ozel_mesaj_goster() {
    global $product;
    $ozel_mesaj = get_post_meta( $product->get_id(), '_stok_alti_ozel_mesaj', true );

    if ( ! empty( $ozel_mesaj ) ) {
        echo '<div class="ozel-stok-mesaji">';
        echo wp_kses_post( $ozel_mesaj );
        echo '</div>';
    }
}

Bu yaklaşımla her ürün için admin panelinden farklı bir mesaj girebilirsiniz. wp_kses_post() fonksiyonu, güvenli HTML etiketlerinin geçmesine izin verirken zararlı kodları temizler.

Countdown Timer ile Aciliyet Hissi Yaratmak

Stok bilgisinin altına geri sayım sayacı eklemek, özellikle sınırlı stoklu ürünlerde dönüşüm oranını ciddi ölçüde artırır. Basit bir JavaScript tabanlı geri sayım ekleyelim:

add_action( 'woocommerce_single_product_summary', 'stok_alti_geri_sayim', 22 );
function stok_alti_geri_sayim() {
    global $product;

    if ( ! $product->is_in_stock() ) {
        return;
    }

    $stok_miktari = $product->get_stock_quantity();
    if ( $product->managing_stock() && $stok_miktari > 20 ) {
        return; // 20'den fazla stok varsa sayac gerekmez
    }

    $bitis_zamani = strtotime( 'today 23:59:59' );
    ?>
    <div class="geri-sayim-wrapper" style="margin: 15px 0; padding: 12px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px;">
        <p style="margin: 0 0 8px 0; font-weight: bold; color: #856404;">
            Bugünkü kampanya fiyatı bitiyor:
        </p>
        <div id="urun-geri-sayim" style="font-size: 24px; font-weight: bold; color: #e74c3c;">
            <span id="saat">00</span>:<span id="dakika">00</span>:<span id="saniye">00</span>
        </div>
    </div>
    <script>
    (function() {
        var bitisZamani = <?php echo $bitis_zamani * 1000; ?>;
        function guncelleGeriSayim() {
            var simdi     = new Date().getTime();
            var fark      = bitisZamani - simdi;
            if ( fark <= 0 ) {
                document.getElementById('urun-geri-sayim').innerHTML = 'Süre doldu!';
                return;
            }
            var saat    = Math.floor( ( fark % (1000 * 60 * 60 * 24) ) / (1000 * 60 * 60) );
            var dakika  = Math.floor( ( fark % (1000 * 60 * 60) ) / (1000 * 60) );
            var saniye  = Math.floor( ( fark % (1000 * 60) ) / 1000 );
            document.getElementById('saat').textContent    = saat < 10 ? '0' + saat : saat;
            document.getElementById('dakika').textContent  = dakika < 10 ? '0' + dakika : dakika;
            document.getElementById('saniye').textContent  = saniye < 10 ? '0' + saniye : saniye;
        }
        guncelleGeriSayim();
        setInterval( guncelleGeriSayim, 1000 );
    })();
    </script>
    <?php
}

Bu kod sadece stokta olan ve stok miktarı 20’den az olan ürünlerde geri sayım gösterir. PHP ile hesaplanan bitiş zamanını JavaScript’e aktarma yöntemi, saat dilimi tutarsızlıklarını en aza indirir.

Güven Rozetleri ve Ödeme Bilgisi Eklemek

Stok bilgisinin altı, güven oluşturucu elementler için de mükemmel bir konumdur. Güvenli ödeme, iade garantisi, müşteri desteği gibi ikonları bu alana yerleştirebilirsiniz:

add_action( 'woocommerce_single_product_summary', 'guven_rozetleri_ekle', 25 );
function guven_rozetleri_ekle() {
    global $product;

    if ( ! $product->is_in_stock() ) {
        return;
    }
    ?>
    <div class="guven-rozetleri" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; padding: 12px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;">
        <div class="rozet-item" style="display: flex; align-items: center; gap: 6px; font-size: 13px;">
            <span style="color: #2ecc71;">✔</span>
            <span>256-bit SSL Güvenli Ödeme</span>
        </div>
        <div class="rozet-item" style="display: flex; align-items: center; gap: 6px; font-size: 13px;">
            <span style="color: #2ecc71;">✔</span>
            <span>14 Gün İade Garantisi</span>
        </div>
        <div class="rozet-item" style="display: flex; align-items: center; gap: 6px; font-size: 13px;">
            <span style="color: #2ecc71;">✔</span>
            <span>Hızlı Kargo</span>
        </div>
        <div class="rozet-item" style="display: flex; align-items: center; gap: 6px; font-size: 13px;">
            <span style="color: #2ecc71;">✔</span>
            <span>7/24 Müşteri Desteği</span>
        </div>
    </div>
    <?php
}

Stok Takip Formu: Tükenmiş Ürünler İçin

Stokta olmayan ürünler için “stoka gelince bildir” formu eklemek, potansiyel müşterileri kaçırmamanın en iyi yollarından biridir. Aşağıdaki kod temel bir form yapısı sunar:

add_action( 'woocommerce_single_product_summary', 'stok_bildirim_formu', 21 );
function stok_bildirim_formu() {
    global $product;

    if ( $product->is_in_stock() ) {
        return;
    }

    $nonce = wp_create_nonce( 'stok_bildirim_nonce' );
    ?>
    <div class="stok-bildirim-formu" style="margin: 15px 0; padding: 15px; background: #f0f0f0; border-radius: 4px;">
        <p style="font-weight: bold; margin-bottom: 10px;">
            Bu ürün şu an tükenmiş. Stoka geldiğinde haberdar olmak ister misiniz?
        </p>
        <form method="post" id="stok-bildirim-form">
            <input type="hidden" name="urun_id" value="<?php echo esc_attr( $product->get_id() ); ?>" />
            <input type="hidden" name="stok_nonce" value="<?php echo esc_attr( $nonce ); ?>" />
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <input
                    type="email"
                    name="bildirim_email"
                    placeholder="E-posta adresiniz"
                    required
                    style="flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px;"
                />
                <button type="submit" style="padding: 8px 20px; background: #0073aa; color: #fff; border: none; border-radius: 4px; cursor: pointer;">
                    Haber Ver
                </button>
            </div>
        </form>
        <p id="stok-form-mesaj" style="margin-top: 8px; display: none;"></p>
    </div>
    <script>
    document.getElementById('stok-bildirim-form').addEventListener('submit', function(e) {
        e.preventDefault();
        var form    = this;
        var mesaj   = document.getElementById('stok-form-mesaj');
        var data    = new FormData(form);
        data.append('action', 'stok_bildirim_kayit');
        fetch('<?php echo admin_url("admin-ajax.php"); ?>', {
            method: 'POST',
            body: data
        })
        .then(function(r) { return r.json(); })
        .then(function(response) {
            mesaj.style.display = 'block';
            mesaj.textContent   = response.data;
            if (response.success) {
                form.reset();
            }
        });
    });
    </script>
    <?php
}

// AJAX handler
add_action( 'wp_ajax_stok_bildirim_kayit', 'stok_bildirim_ajax_isle' );
add_action( 'wp_ajax_nopriv_stok_bildirim_kayit', 'stok_bildirim_ajax_isle' );
function stok_bildirim_ajax_isle() {
    if ( ! isset( $_POST['stok_nonce'] ) || ! wp_verify_nonce( $_POST['stok_nonce'], 'stok_bildirim_nonce' ) ) {
        wp_send_json_error( 'Güvenlik doğrulaması başarısız.' );
    }

    $email   = isset( $_POST['bildirim_email'] ) ? sanitize_email( $_POST['bildirim_email'] ) : '';
    $urun_id = isset( $_POST['urun_id'] ) ? absint( $_POST['urun_id'] ) : 0;

    if ( ! is_email( $email ) || ! $urun_id ) {
        wp_send_json_error( 'Geçerli bir e-posta adresi giriniz.' );
    }

    // Mevcut kayıtlı e-postaları al
    $mevcut = get_post_meta( $urun_id, '_stok_bildirim_listesi', true );
    $liste  = is_array( $mevcut ) ? $mevcut : array();

    if ( in_array( $email, $liste ) ) {
        wp_send_json_error( 'Bu e-posta adresi zaten kayıtlı.' );
    }

    $liste[] = $email;
    update_post_meta( $urun_id, '_stok_bildirim_listesi', $liste );
    wp_send_json_success( 'Kaydınız alındı. Ürün stoka girdiğinde bildirim alacaksınız.' );
}

Bu kapsamlı kod bloğu nonce ile CSRF koruması sağlar, AJAX üzerinden güvenli şekilde veriyi işler ve e-postaları ürün meta alanında saklar.

Performans ve Güvenlik Notları

Stok bilgisi altına eklenen her içerik, sayfa yüklenirken çalışır. Bu nedenle birkaç kritik noktaya dikkat etmek gerekir:

  • Transient kullanın: Sık değişmeyen veriler için get_transient() ve set_transient() ile veritabanı sorgularını önbelleğe alın
  • Koşullu yükleme: JavaScript kodlarını yalnızca ürün sayfasında yüklemek için is_product() kontrolü yapın
  • Veri temizleme: Kullanıcıdan gelen tüm veriler için sanitize_text_field(), sanitize_email(), absint() gibi fonksiyonlar kullanın
  • Nonce doğrulama: Form işlemlerinde mutlaka nonce kullanın
  • Çıktı kaçırma: Veritabanından okunan veya kullanıcıdan gelen veriler esc_html(), esc_attr(), wp_kses_post() ile güvenli hale getirilmelidir

Önce functions.php dosyanızı düzenlemeden önce mutlaka yedeğini alın. Daha iyi bir yöntem, değişikliklerinizi bir child theme’in functions.php dosyasına yazmaktır. Bu şekilde tema güncellemelerinden etkilenmezsiniz.

WooCommerce Öncelik Değerleri Referansı

woocommerce_single_product_summary hook’undaki varsayılan öncelik değerlerini bilmek, içeriğinizi doğru konuma yerleştirmenizi sağlar:

  • 5: Ürün başlığı (woocommerce_template_single_title)
  • 10: Fiyat bilgisi (woocommerce_template_single_price)
  • 20: Kısa açıklama (woocommerce_template_single_excerpt)
  • 25: Stok durumu bilgisi
  • 30: Sepete ekle formu (woocommerce_template_single_add_to_cart)
  • 40: Meta bilgiler (SKU, kategori, etiket)
  • 50: Paylaşım butonları

Stok bilgisinin tam altına yerleşmek için 26 ile 29 arasındaki öncelik değerlerini kullanabilirsiniz. Sepete ekle butonunun üstüne gelmek için 29, tam altına gelmek için 31 iyi bir başlangıç noktasıdır.

Sonuç

WooCommerce stok bilgisi altına içerik eklemek, doğru hook ve öncelik değerleriyle functions.php üzerinden tamamen kontrol edilebilir bir işlemdir. Statik mesajdan dinamik stok takip formuna kadar geniş bir yelpazede özelleştirme yapabilirsiniz.

Hangi yaklaşımı seçerseniz seçin, üç temel ilkeyi unutmayın: güvenlik, performans ve kullanıcı deneyimi. Kodu yazarken veri temizleme ve nonce doğrulamasını atlamayın, gereksiz veritabanı sorgularından kaçının ve eklediğiniz içeriğin mobil uyumlu göründüğünü test edin.

Gerçek dünyada bu kodları production ortamına taşımadan önce staging sitenizde test etmenizi, ardından Google Analytics veya benzeri bir araçla dönüşüm etkisini ölçmenizi tavsiye ederim. Çünkü en iyi kod, veriyle doğrulanmış koddur.

Bir yanıt yazın

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