WooCommerce Ürün Fiyatının Altına İçerik Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde ürün sayfasının tasarımı, dönüşüm oranlarını doğrudan etkiler. WooCommerce’de fiyatın hemen altındaki alan, ziyaretçinin satın alma kararını en çok etkileyen bölgedir. İşte bu yüzden bu alana doğru içeriği yerleştirmek, hem güven artırır hem de sepete ekleme oranlarını ciddi şekilde yükseltebilir. Bu yazıda functions.php dosyasını kullanarak WooCommerce ürün fiyatının altına nasıl içerik ekleyeceğini, hangi hook’ların ne işe yaradığını ve gerçek dünya senaryolarında bu özelliği nasıl kullanabileceğini detaylıca anlatacağım.

WooCommerce Hook Sistemi ve Fiyat Altı Alan

WooCommerce, ürün sayfasını parçalara bölen ve her parçanın konumunu belirleyen bir hook sistemi kullanır. Bu sistem sayesinde tema dosyalarına dokunmadan, sadece functions.php üzerinden istediğin alana içerik ekleyebilirsin.

Fiyatın altına içerik eklemek için kullanabileceğin iki temel hook var:

  • woocommerce_single_product_summary: Ürün özet alanının tamamını kontrol eden ana hook
  • woocommerce_after_single_product_summary: Özet alanının tamamen bitmesinden sonra çalışır

Fiyatın hemen altını hedeflemek için woocommerce_single_product_summary hook’unu belirli bir öncelik değeriyle kullanman gerekiyor. WooCommerce’in varsayılan öncelik değerlerini bilmek burada kritik:

  • 5: Ürün başlığı
  • 10: Ürün fiyatı (woocommerce_template_single_price)
  • 20: Ürün kısa açıklaması
  • 30: Sepete ekle butonu
  • 40: Meta bilgileri (kategori, etiket vb.)

Yani fiyatın hemen altına içerik eklemek için 10 ile 20 arasında bir öncelik değeri kullanman yeterli. Genellikle 11, 12 veya 15 tercih edilen değerler.

Temel Kullanım: Basit Metin Ekleme

En basit senaryoyla başlayalım. Tüm ürünlerin fiyatının altına sabit bir mesaj eklemek istiyorsun diyelim. Örneğin “Ücretsiz kargo” veya “KDV dahil fiyat” gibi bilgilendirici bir not.

// functions.php dosyasina ekle
add_action( 'woocommerce_single_product_summary', 'fiyat_alti_mesaj_ekle', 11 );
function fiyat_alti_mesaj_ekle() {
    echo '<p class="fiyat-alti-mesaj" style="color: #2e7d32; font-size: 14px; margin: 5px 0;">
        ✅ Ücretsiz kargo - 150 TL ve üzeri siparişlerde
    </p>';
}

Bu kadar basit. Öncelik değerini 11 verdiğimiz için fiyatın (10) hemen altında, kısa açıklamanın (20) üstünde görünecek.

Kategori Bazlı İçerik Ekleme

Gerçek dünya senaryolarında her ürüne aynı mesajı göstermek pek mantıklı değil. Belirli kategorilerdeki ürünlere özel içerik göstermek için şöyle bir yapı kurabilirsin:

add_action( 'woocommerce_single_product_summary', 'kategori_bazli_fiyat_alti', 11 );
function kategori_bazli_fiyat_alti() {
    global $product;
    
    // Ürünün kategorilerini al
    $product_cats = wp_get_post_terms( $product->get_id(), 'product_cat', array( 'fields' => 'slugs' ) );
    
    // Elektronik kategorisi için özel mesaj
    if ( in_array( 'elektronik', $product_cats ) ) {
        echo '<div class="garanti-bilgisi" style="background: #e3f2fd; padding: 8px 12px; border-radius: 4px; margin: 8px 0; font-size: 13px;">
            🔧 2 yıl resmi garantili | Teknik servis desteği dahil
        </div>';
    }
    
    // Giyim kategorisi için farklı mesaj
    if ( in_array( 'giyim', $product_cats ) ) {
        echo '<div class="iade-bilgisi" style="background: #fce4ec; padding: 8px 12px; border-radius: 4px; margin: 8px 0; font-size: 13px;">
            👗 30 gün içinde ücretsiz iade | Beden değişimi mevcut
        </div>';
    }
    
    // Birden fazla kategoride olabilir, her ikisi de gösterilir
    if ( in_array( 'kampanya', $product_cats ) ) {
        echo '<div class="kampanya-mesaji" style="background: #fff3e0; padding: 8px 12px; border-radius: 4px; margin: 8px 0; font-size: 13px; font-weight: bold;">
            🔥 Kampanya fiyatı - Son 24 saat!
        </div>';
    }
}

Stok Durumuna Göre Dinamik İçerik

Stok durumuna göre farklı mesajlar göstermek, aciliyet hissi yaratmak açısından oldukça etkili. Özellikle az stok uyarısı dönüşüm oranlarını artıran klasik bir e-ticaret taktiği.

add_action( 'woocommerce_single_product_summary', 'stok_durumu_mesaji', 11 );
function stok_durumu_mesaji() {
    global $product;
    
    // Stok yönetimi aktif mi?
    if ( ! $product->managing_stock() ) {
        return;
    }
    
    $stok_miktari = $product->get_stock_quantity();
    
    if ( $stok_miktari === null ) {
        return;
    }
    
    // Stok miktarına göre farklı mesajlar
    if ( $stok_miktari <= 0 ) {
        // Stokta yok - zaten WooCommerce gösteriyor ama özelleştirebiliriz
        return;
    } elseif ( $stok_miktari <= 3 ) {
        echo '<p class="stok-uyari kritik" style="color: #c62828; font-weight: bold; font-size: 14px; margin: 6px 0;">
            ⚠️ Son ' . $stok_miktari . ' ürün kaldı! Hemen sipariş ver.
        </p>';
    } elseif ( $stok_miktari <= 10 ) {
        echo '<p class="stok-uyari az" style="color: #e65100; font-size: 14px; margin: 6px 0;">
            📦 Stokta sadece ' . $stok_miktari . ' adet var.
        </p>';
    } else {
        echo '<p class="stok-durumu" style="color: #2e7d32; font-size: 14px; margin: 6px 0;">
            ✅ Stokta mevcut - Hızlı kargo
        </p>';
    }
}

Bu yaklaşımda stok miktarını doğrudan ürün objesinden çekiyoruz. Eğer stok yönetimi aktif değilse fonksiyon erken çıkıyor, gereksiz çıktı üretmiyor.

Ürün Tipine Göre İçerik Farklılaştırma

WooCommerce’de basit ürün, değişken ürün, dijital ürün, abonelik gibi farklı ürün tipleri var. Bunlara göre farklı içerik göstermek çok daha profesyonel bir deneyim sunar.

add_action( 'woocommerce_single_product_summary', 'urun_tipine_gore_bilgi', 11 );
function urun_tipine_gore_bilgi() {
    global $product;
    
    $urun_tipi = $product->get_type();
    
    switch ( $urun_tipi ) {
        
        case 'variable':
            // Değişken ürünler için varyasyon hatırlatması
            echo '<p class="varyasyon-not" style="font-size: 13px; color: #555; margin: 5px 0; font-style: italic;">
                ℹ️ Renk ve beden seçiminize göre fiyat değişebilir.
            </p>';
            break;
            
        case 'downloadable':
        case 'virtual':
            // Dijital ürünler için anında teslimat mesajı
            echo '<p class="dijital-urun" style="background: #e8f5e9; padding: 6px 10px; border-radius: 3px; font-size: 13px; margin: 5px 0;">
                ⚡ Anında indirme - Satın aldıktan hemen sonra erişim sağlanır
            </p>';
            break;
            
        case 'subscription':
            // Abonelik ürünleri için açıklama
            echo '<p class="abonelik-bilgi" style="font-size: 13px; color: #1565c0; margin: 5px 0;">
                🔄 Abonelik istediğin zaman iptal edilebilir
            </p>';
            break;
            
        default:
            // Fiziksel ürünler için kargo bilgisi
            echo '<p class="kargo-bilgi" style="font-size: 13px; color: #555; margin: 5px 0;">
                🚚 Aynı gün kargo - 14:00 öncesi siparişlerde geçerli
            </p>';
            break;
    }
}

Özel Ürün Meta Verilerine Göre İçerik

Bazı durumlarda ürün bazında farklı içerik göstermen gerekebilir. Bunu WooCommerce’in özel alan (custom field) sistemiyle yapabilirsin. Örneğin ürün düzenleme ekranına özel bir alan ekleyip oradan çekebilirsin.

add_action( 'woocommerce_single_product_summary', 'meta_bazli_fiyat_alti_icerik', 11 );
function meta_bazli_fiyat_alti_icerik() {
    global $product;
    
    $urun_id = $product->get_id();
    
    // Özel taksit bilgisi meta alanı
    $taksit_bilgisi = get_post_meta( $urun_id, '_taksit_secenekleri', true );
    if ( ! empty( $taksit_bilgisi ) ) {
        echo '<div class="taksit-bilgisi" style="border: 1px solid #e0e0e0; padding: 8px 12px; border-radius: 4px; margin: 8px 0; font-size: 13px;">
            💳 ' . esc_html( $taksit_bilgisi ) . '
        </div>';
    }
    
    // Ürüne özgü kampanya mesajı
    $kampanya_metni = get_post_meta( $urun_id, '_ozel_kampanya_mesaji', true );
    if ( ! empty( $kampanya_metni ) ) {
        echo '<div class="ozel-kampanya" style="background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; padding: 10px 14px; border-radius: 5px; margin: 8px 0; font-size: 13px; font-weight: bold;">
            🎯 ' . esc_html( $kampanya_metni ) . '
        </div>';
    }
    
    // Ürün rozeti - yeni, öne çıkan vb.
    $urun_rozeti = get_post_meta( $urun_id, '_urun_rozeti', true );
    if ( $urun_rozeti === 'yeni' ) {
        echo '<span class="urun-rozeti" style="display: inline-block; background: #4caf50; color: white; padding: 3px 10px; border-radius: 20px; font-size: 12px; margin: 5px 0;">
            ✨ YENİ ÜRÜN
        </span>';
    }
}

Giriş Durumuna Göre Farklı İçerik

Kullanıcının giriş yapıp yapmadığına göre farklı mesajlar göstermek, özellikle üyelik sistemi olan sitelerde çok işe yarar. Toptan satış sitelerinde indirimli fiyatı sadece üyelere göstermek gibi senaryolarda kullanabilirsin.

add_action( 'woocommerce_single_product_summary', 'uyelik_bazli_mesaj', 11 );
function uyelik_bazli_mesaj() {
    global $product;
    
    if ( is_user_logged_in() ) {
        $kullanici = wp_get_current_user();
        $kullanici_rolleri = $kullanici->roles;
        
        // VIP üyelere özel mesaj
        if ( in_array( 'vip_uye', $kullanici_rolleri ) ) {
            echo '<div class="vip-mesaj" style="background: #4a148c; color: #ffd54f; padding: 8px 14px; border-radius: 4px; margin: 8px 0; font-size: 13px;">
                ⭐ VIP üyesiniz - Bu üründe ek %10 indirim hakkınız var!
            </div>';
        }
        
        // Normal giriş yapmış kullanıcı
        if ( in_array( 'customer', $kullanici_rolleri ) ) {
            $puan = get_user_meta( $kullanici->ID, 'musteri_puani', true );
            if ( $puan > 0 ) {
                echo '<p class="puan-bilgi" style="font-size: 13px; color: #1565c0; margin: 5px 0;">
                    🏆 Bu alışverişte ' . intval( $puan ) . ' puan kazanacaksınız.
                </p>';
            }
        }
        
    } else {
        // Giriş yapmamış kullanıcıya üyelik teşviki
        $login_url = wc_get_page_permalink( 'myaccount' );
        echo '<p class="uyelik-daveti" style="font-size: 13px; color: #666; margin: 5px 0;">
            🔒 <a href="' . esc_url( $login_url ) . '" style="color: #1565c0;">Üye girişi yaparak</a> özel fiyatlardan yararlanın!
        </p>';
    }
}

Satın Alma Güvencesi Bölümü

Profesyonel e-ticaret sitelerinde fiyatın altında güven rozetleri görmüşsündür. Bu oldukça etkili bir dönüşüm taktığidir. Aşağıdaki örnekte HTML/CSS ile bu yapıyı fonksiyon olarak ekliyoruz:

add_action( 'woocommerce_single_product_summary', 'guven_rozeti_ekle', 12 );
function guven_rozeti_ekle() {
    // Sadece belirli kategorilerde göster (opsiyonel)
    global $product;
    $hariç_kategoriler = array( 'dijital-urunler', 'abonelik' );
    $urun_kategorileri = wp_get_post_terms( $product->get_id(), 'product_cat', array( 'fields' => 'slugs' ) );
    
    foreach ( $hariç_kategoriler as $hkategori ) {
        if ( in_array( $hkategori, $urun_kategorileri ) ) {
            return; // Hariç tutulan kategorilerdeyse gösterme
        }
    }
    
    ?>
    <div class="guven-rozet-alani" style="display: flex; gap: 15px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 10px 0;">
        
        <div class="guven-item" style="display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555;">
            <span style="font-size: 18px;">🔒</span>
            <span>Güvenli Ödeme</span>
        </div>
        
        <div class="guven-item" style="display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555;">
            <span style="font-size: 18px;">🚚</span>
            <span>Hızlı Kargo</span>
        </div>
        
        <div class="guven-item" style="display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555;">
            <span style="font-size: 18px;">↩️</span>
            <span>30 Gün İade</span>
        </div>
        
        <div class="guven-item" style="display: flex; align-items: center; gap: 5px; font-size: 12px; color #555;">
            <span style="font-size: 18px;">🎧</span>
            <span>7/24 Destek</span>
        </div>
        
    </div>
    <?php
}

Tüm Fonksiyonları Tek Class Altında Toplamak

Büyük projelerde bu fonksiyonların hepsini düzgün bir şekilde organize etmek önemli. Hepsini tek bir dosyada class yapısıyla toplamak hem okunabilirliği artırır hem de çakışma riskini azaltır:

// wp-content/themes/tema-adiniz/inc/woo-price-extra.php
// Bu dosyayı functions.php'den require_once ile çağır

class WooFiyatAltiIcerik {
    
    public function __construct() {
        add_action( 'woocommerce_single_product_summary', array( $this, 'kargo_bilgisi' ), 11 );
        add_action( 'woocommerce_single_product_summary', array( $this, 'stok_uyarisi' ), 12 );
        add_action( 'woocommerce_single_product_summary', array( $this, 'guven_mesaji' ), 13 );
    }
    
    public function kargo_bilgisi() {
        global $product;
        if ( $product->is_virtual() || $product->is_downloadable() ) {
            return;
        }
        echo '<p class="kargo-notu" style="font-size:13px; color:#2e7d32; margin:4px 0;">
            🚚 Aynı gün kargo (14:00 öncesi siparişlerde)
        </p>';
    }
    
    public function stok_uyarisi() {
        global $product;
        if ( ! $product->managing_stock() ) {
            return;
        }
        $stok = $product->get_stock_quantity();
        if ( $stok !== null && $stok <= 5 && $stok > 0 ) {
            echo '<p style="color: #c62828; font-size:13px; font-weight:600; margin:4px 0;">
                ⚡ Son ' . $stok . ' ürün!
            </p>';
        }
    }
    
    public function guven_mesaji() {
        echo '<p style="font-size:12px; color:#888; margin:4px 0;">
            🔒 256-bit SSL ile güvenli alışveriş
        </p>';
    }
}

new WooFiyatAltiIcerik();
// functions.php icindeki cagri
require_once get_template_directory() . '/inc/woo-price-extra.php';

CSS ile Görünümü Düzeltme

İnline style kullanmak hızlı prototipler için işe yarasa da production ortamında CSS dosyasına taşımalısın. Aşağıdaki kod functions.php üzerinden tema stiline ek CSS ekler:

add_action( 'wp_head', 'fiyat_alti_ozel_css' );
function fiyat_alti_ozel_css() {
    if ( ! is_product() ) {
        return; // Sadece ürün sayfasında yükle
    }
    ?>
    <style>
    .fiyat-alti-mesaj {
        font-size: 14px;
        margin: 6px 0 8px;
        padding: 0;
    }
    
    .guven-rozet-alani {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        padding: 10px 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin: 10px 0;
    }
    
    .guven-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #555;
    }
    
    .stok-uyari.kritik {
        animation: blink 1.5s ease-in-out infinite;
    }
    
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
    
    @media (max-width: 768px) {
        .guven-rozet-alani {
            gap: 8px;
        }
        .guven-item {
            font-size: 11px;
        }
    }
    </style>
    <?php
}

Dikkat Edilmesi Gereken Noktalar

Uygulamada sık yapılan hatalar ve bunlardan kaçınma yöntemleri:

  • is_product() kontrolü: Bazı hook’lar sadece ürün sayfasında çalışır ama biz ek bir güvence olarak is_product() ile kontrol ekleyebiliriz. Özellikle wp_head gibi global hook’larda bu zorunlu.
  • esc_html() ve esc_url() kullanımı: Veritabanından çektiğin veriyi her zaman escape et. Özellikle meta verilerini doğrudan echo etme, güvenlik açığı oluşturur.
  • Öncelik değeri çakışması: Başka plugin’ler de aynı öncelik değerini kullanıyor olabilir. Eğer içeriğin görünmüyorsa öncelik değerini değiştirip dene.
  • WooCommerce aktiflik kontrolü: Eğer WooCommerce devre dışı bırakılırsa bu fonksiyonlar hata verebilir. Kritik projelerde class_exists( 'WooCommerce' ) ile kontrol ekle.
  • Tema güncellemeleri: Kod direkt olarak functions.php‘e yazılmışsa tema güncellemesinde kaybolur. Bu yüzden child theme kullanmak veya özel bir eklenti yazmak çok daha sağlıklı.
  • Performans: Her ürün sayfasında çalışan fonksiyonlarda veritabanı sorgusu yaparken dikkatli ol. get_post_meta() çağrıları zaten WordPress cache’ini kullanır ama ek sorgulardan kaçın.

Gerçek Dünya Senaryosu: Moda E-ticaret Sitesi

Bir moda sitesi için düşün: Elektronik ürünlerde garanti bilgisi, giyimde beden değişim garantisi, kampanya ürünlerinde geri sayım sayacı, VIP üyelere özel rozet. Bunların hepsini tek bir iyi organize edilmiş fonksiyon setiyle yönetebilirsin.

Bu yapıyı kurduktan sonra içerik yöneticileri her ürüne özel mesajı WordPress yönetici panelinden özel alanlar üzerinden girebilir, geliştirici müdahalesine gerek kalmaz. _taksit_secenekleri gibi meta alanlarını ACF (Advanced Custom Fields) veya WooCommerce’in kendi özel alan sistemiyle görsel bir editörden yönetebilirsin.

Sonuç

WooCommerce fiyat altı alan, doğru kullanıldığında dönüşüm oranını ciddi şekilde artıran bir yer. Burada anlattıklarını özetlersek:

  • woocommerce_single_product_summary hook’una 11-19 arası öncelik değeriyle ekleme yaparak fiyatın altına istediğin içeriği koyabilirsin.
  • Kategori, stok durumu, ürün tipi, kullanıcı rolü gibi koşullara göre dinamik içerik üretebilirsin.
  • İnline style yerine ayrı CSS kullanmak daha temiz ve yönetilebilir kod sağlar.
  • Tüm fonksiyonları class yapısına taşımak büyük projelerde zorunlu hale gelir.
  • Child theme ya da özel eklenti yapısı, uzun vadeli projeler için her zaman daha iyi bir seçimdir.

Küçük bir detay gibi görünse de doğru bilgi, doğru yerde gösterildiğinde kullanıcıyı satın almaya ikna eden unsur olabilir. Bunu functions.php ile birkaç satır kodla yapabilmek ise WooCommerce’in güzel yanlarından biri.

Bir yanıt yazın

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