WooCommerce Ürün Sayfasına Özel Sekme Ekleme ve Sekme Yönetimi

Tarafındankomut
0 Comments

E-ticaret sitelerinde ürün sayfası deneyimi, dönüşüm oranlarını doğrudan etkileyen kritik bir faktördür. WooCommerce varsayılan olarak “Açıklama”, “Ek Bilgi” ve “Yorumlar” sekmelerini sunar, ancak çoğu zaman bu sekmeler yetmez. Belki kargo bilgilerini ayrı bir sekmede göstermek istiyorsunuz, belki ürüne özel video içeriği eklemek istiyorsunuz ya da belirli ürün kategorileri için özel içerik alanları oluşturmanız gerekiyor. Tüm bunları functions.php dosyasına yazacağınız birkaç fonksiyonla halledebilirsiniz.

WooCommerce Sekme Sistemi Nasıl Çalışır?

WooCommerce, ürün sayfasındaki sekmeleri woocommerce_product_tabs filter hook’u üzerinden yönetir. Bu hook, bir dizi (array) döndürür ve her sekme şu yapıda tanımlanır:

  • label: Sekme başlığı (kullanıcının gördüğü metin)
  • target: HTML anchor ID’si (CSS ve JS için kullanılır)
  • callback: Sekme içeriğini render eden fonksiyon
  • priority: Sekmenin sırasını belirleyen sayısal değer (düşük sayı = öne geçer)

Varsayılan sekmelerin priority değerleri şöyledir:

  • description: 10 (Açıklama)
  • additional_information: 20 (Ek Bilgi)
  • reviews: 30 (Yorumlar)

Bu değerleri bilerek sıralama üzerinde tam kontrol sağlarsınız.

Temel: Yeni Sekme Ekleme

En basit senaryo, tüm ürünlerde görünecek sabit bir sekme eklemektir. Diyelim ki kargo politikanızı her ürün sayfasında göstermek istiyorsunuz.

// functions.php
add_filter( 'woocommerce_product_tabs', 'sysadmin_kargo_sekme_ekle' );

function sysadmin_kargo_sekme_ekle( $tabs ) {
    $tabs['kargo_bilgi'] = array(
        'label'    => 'Kargo Bilgileri',
        'target'   => 'kargo_bilgi',
        'callback' => 'sysadmin_kargo_sekme_icerik',
        'priority' => 25,
    );
    return $tabs;
}

function sysadmin_kargo_sekme_icerik() {
    echo '<h2>Kargo Bilgileri</h2>';
    echo '<p>Tüm siparişleriniz 1-3 iş günü içinde kargoya verilmektedir.</p>';
    echo '<p>500 TL üzeri alışverişlerde ücretsiz kargo geçerlidir.</p>';
    echo '<p>Aynı gün kargo için saat 14:00'a kadar verilen siparişler geçerlidir.</p>';
}

Bu kadar. sysadmin_kargo_sekme_ekle fonksiyonu mevcut sekme dizisine yeni elemanı ekler, sysadmin_kargo_sekme_icerik ise tıklandığında ne görüneceğini belirler. Priority 25 olduğu için “Ek Bilgi” (20) ile “Yorumlar” (30) arasında görünür.

Mevcut Sekmeleri Kaldırma

Bazı durumlarda varsayılan sekmeleri kaldırmanız gerekebilir. Örneğin, ürünlerinizin hepsinde “Ek Bilgi” sekmesi gereksiz görünüyorsa ya da yorumları farklı bir eklenti üzerinden yönetiyorsanız:

// functions.php
add_filter( 'woocommerce_product_tabs', 'sysadmin_varsayilan_sekmeleri_duzenle', 98 );

function sysadmin_varsayilan_sekmeleri_duzenle( $tabs ) {

    // Ek Bilgi sekmesini kaldır
    unset( $tabs['additional_information'] );

    // Yorumlar sekmesini kaldır
    // unset( $tabs['reviews'] );

    // Açıklama sekmesini kaldır
    // unset( $tabs['description'] );

    return $tabs;
}

Burada dikkat edilmesi gereken nokta, bu filter’ın priority değeridir. 98 vermenizin sebebi, başka eklentilerin eklediği sekmelerin önce yüklenmesini sağlamak ve ardından toplu düzenleme yapabilmektir.

Mevcut Sekme Başlıklarını Değiştirme

Diyelim ki “Açıklama” yazan sekme başlığını “Ürün Detayları” olarak değiştirmek istiyorsunuz:

// functions.php
add_filter( 'woocommerce_product_tabs', 'sysadmin_sekme_baslik_degistir', 98 );

function sysadmin_sekme_baslik_degistir( $tabs ) {

    if ( isset( $tabs['description'] ) ) {
        $tabs['description']['label'] = 'Ürün Detayları';
    }

    if ( isset( $tabs['reviews'] ) ) {
        $tabs['reviews']['label'] = 'Müşteri Yorumları';
    }

    if ( isset( $tabs['additional_information'] ) ) {
        $tabs['additional_information']['label'] = 'Teknik Özellikler';
    }

    return $tabs;
}

Basit ama etkili. Marka dilinize uygun sekme isimleri kullanmak kullanıcı deneyimini ciddi şekilde iyileştirir.

Gerçek Dünya Senaryosu: Ürün Kategorisine Göre Koşullu Sekme

İşte asıl güçlü olan kısım burası. Diyelim ki “elektronik” kategorisindeki ürünlerde “Teknik Destek” sekmesi göstermek, “giyim” kategorisindeki ürünlerde ise “Beden Rehberi” sekmesi göstermek istiyorsunuz.

// functions.php
add_filter( 'woocommerce_product_tabs', 'sysadmin_kategori_bazli_sekmeler' );

function sysadmin_kategori_bazli_sekmeler( $tabs ) {
    global $product;

    if ( ! $product ) {
        return $tabs;
    }

    $product_id = $product->get_id();

    // Elektronik kategorisi kontrolü
    if ( has_term( 'elektronik', 'product_cat', $product_id ) ) {
        $tabs['teknik_destek'] = array(
            'label'    => 'Teknik Destek',
            'target'   => 'teknik_destek',
            'callback' => 'sysadmin_teknik_destek_icerik',
            'priority' => 40,
        );
    }

    // Giyim kategorisi kontrolü
    if ( has_term( 'giyim', 'product_cat', $product_id ) ) {
        $tabs['beden_rehberi'] = array(
            'label'    => 'Beden Rehberi',
            'target'   => 'beden_rehberi',
            'callback' => 'sysadmin_beden_rehberi_icerik',
            'priority' => 35,
        );
    }

    return $tabs;
}

function sysadmin_teknik_destek_icerik() {
    echo '<h2>Teknik Destek</h2>';
    echo '<p>7/24 teknik destek hattımız: <strong>0850 XXX XX XX</strong></p>';
    echo '<p>E-posta: <a href="mailto:[email protected]">[email protected]</a></p>';
    echo '<p>Ortalama yanıt süremiz 2 saattir.</p>';
}

function sysadmin_beden_rehberi_icerik() {
    echo '<h2>Beden Rehberi</h2>';
    echo '<p><strong>S:</strong> Göğüs 88-92 cm, Bel 68-72 cm</p>';
    echo '<p><strong>M:</strong> Göğüs 92-96 cm, Bel 72-76 cm</p>';
    echo '<p><strong>L:</strong> Göğüs 96-100 cm, Bel 76-80 cm</p>';
    echo '<p><strong>XL:</strong> Göğüs 100-104 cm, Bel 80-84 cm</p>';
}

has_term() fonksiyonu burada kritik rol oynuyor. Ürünün belirli bir taksonomiye (kategori, etiket vb.) ait olup olmadığını kontrol ediyor.

Ürün Meta Verisine Göre Dinamik Sekme

Bir adım daha ileri gidelim. Ürün düzenleme sayfasında özel bir alan oluşturup, o alan dolu olduğunda sekme gösterelim:

// functions.php

// Önce sekmeyi kayıt et
add_filter( 'woocommerce_product_tabs', 'sysadmin_video_sekme_ekle' );

function sysadmin_video_sekme_ekle( $tabs ) {
    global $product;

    if ( ! $product ) {
        return $tabs;
    }

    // Ürün meta'dan video URL'sini al
    $video_url = get_post_meta( $product->get_id(), '_urun_video_url', true );

    // Sadece video URL'si girilmiş ürünlerde sekmeyi göster
    if ( ! empty( $video_url ) ) {
        $tabs['urun_video'] = array(
            'label'    => 'Ürün Videosu',
            'target'   => 'urun_video',
            'callback' => 'sysadmin_video_sekme_icerik',
            'priority' => 15,
        );
    }

    return $tabs;
}

function sysadmin_video_sekme_icerik() {
    global $product;
    $video_url = get_post_meta( $product->get_id(), '_urun_video_url', true );

    if ( empty( $video_url ) ) {
        return;
    }

    echo '<h2>Ürün Tanıtım Videosu</h2>';
    echo '<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">';
    echo '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" ';
    echo 'src="' . esc_url( $video_url ) . '" frameborder="0" allowfullscreen></iframe>';
    echo '</div>';
}

// Admin panelinde ürün düzenleme sayfasına video URL alanı ekle
add_action( 'woocommerce_product_options_general_product_data', 'sysadmin_video_url_alani_ekle' );

function sysadmin_video_url_alani_ekle() {
    woocommerce_wp_text_input( array(
        'id'          => '_urun_video_url',
        'label'       => 'YouTube Embed URL',
        'placeholder' => 'https://www.youtube.com/embed/VIDEO_ID',
        'desc_tip'    => true,
        'description' => 'YouTube veya Vimeo embed URL'sini girin. Bu URL girilirse ürün sayfasında Video sekmesi görünür.',
    ) );
}

// Alanı kaydet
add_action( 'woocommerce_process_product_meta', 'sysadmin_video_url_kaydet' );

function sysadmin_video_url_kaydet( $post_id ) {
    $video_url = isset( $_POST['_urun_video_url'] ) ? sanitize_url( $_POST['_urun_video_url'] ) : '';
    update_post_meta( $post_id, '_urun_video_url', $video_url );
}

Bu yaklaşım çok daha profesyonel. İçerik editörleriniz admin panelinden video URL’si girdikçe sekme otomatik olarak belirir, girilmediğinde ise görünmez. Hiçbir ek eklenti gerekmez.

Sekme İçinde Shortcode Kullanımı

Bazen sekme içeriğini doğrudan PHP’den değil, shortcode ile yönetmek daha pratik olabilir. Özellikle içeriği müşteri veya editör güncelleyecekse:

// functions.php
add_filter( 'woocommerce_product_tabs', 'sysadmin_garantı_sekme_ekle' );

function sysadmin_garantı_sekme_ekle( $tabs ) {
    $tabs['garanti_kosullari'] = array(
        'label'    => 'Garanti Koşulları',
        'target'   => 'garanti_kosullari',
        'callback' => 'sysadmin_garanti_sekme_icerik',
        'priority' => 50,
    );
    return $tabs;
}

function sysadmin_garanti_sekme_icerik() {
    echo '<h2>Garanti Koşulları</h2>';

    // WordPress sayfasından içerik çek (sayfa ID: 42)
    $garanti_sayfasi = get_post( 42 );

    if ( $garanti_sayfasi ) {
        echo apply_filters( 'the_content', $garanti_sayfasi->post_content );
    }

    // Ya da shortcode çalıştır
    // echo do_shortcode( '[garanti_tablosu]' );
}

Bu yöntemde garanti koşullarınızı bir WordPress sayfasında tutarsınız. Sayfa güncellenince ürün sayfasındaki sekme de otomatik güncellenir. Çok daha yönetilebilir bir yapı.

Tüm Sekmeleri Tek Seferde Yönetme: Kapsamlı Örnek

Aşağıdaki örnek, birden fazla işlemi tek bir filter üzerinden yönetir. Gerçek bir projede functions.php’niz şuna benzeyebilir:

// functions.php
add_filter( 'woocommerce_product_tabs', 'sysadmin_sekme_yonetimi', 98 );

function sysadmin_sekme_yonetimi( $tabs ) {
    global $product;

    if ( ! $product ) {
        return $tabs;
    }

    // 1. Mevcut sekme başlıklarını düzenle
    if ( isset( $tabs['description'] ) ) {
        $tabs['description']['label']    = 'Ürün Açıklaması';
        $tabs['description']['priority'] = 10;
    }

    if ( isset( $tabs['additional_information'] ) ) {
        $tabs['additional_information']['label'] = 'Özellikler';
    }

    if ( isset( $tabs['reviews'] ) ) {
        $tabs['reviews']['label'] = 'Değerlendirmeler';
    }

    // 2. Dijital ürünlerde "Ek Bilgi" sekmesini gizle
    if ( $product->is_type( 'simple' ) && $product->is_virtual() ) {
        unset( $tabs['additional_information'] );
    }

    // 3. Tüm ürünlere kargo sekmesi ekle (dijital ürünler hariç)
    if ( ! $product->is_virtual() && ! $product->is_downloadable() ) {
        $tabs['kargo'] = array(
            'label'    => 'Kargo ve Teslimat',
            'target'   => 'kargo',
            'callback' => function() {
                echo '<h2>Kargo ve Teslimat</h2>';
                echo '<p><strong>Standart Kargo:</strong> 2-4 iş günü</p>';
                echo '<p><strong>Ekspres Kargo:</strong> 1 iş günü (saat 12:00'a kadar verilen siparişler)</p>';
                echo '<p>500 TL üzeri alışverişlerde ücretsiz kargo uygulanır.</p>';
            },
            'priority' => 25,
        );
    }

    // 4. Video URL'si olan ürünlerde video sekmesi ekle
    $video_url = get_post_meta( $product->get_id(), '_urun_video_url', true );
    if ( ! empty( $video_url ) ) {
        $tabs['video'] = array(
            'label'    => 'Video',
            'target'   => 'video',
            'callback' => function() use ( $video_url ) {
                echo '<div style="position:relative;padding-bottom:56.25%;height:0;">';
                echo '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="' . esc_url( $video_url ) . '" frameborder="0" allowfullscreen></iframe>';
                echo '</div>';
            },
            'priority' => 15,
        );
    }

    return $tabs;
}

Bu yapı temiz, okunabilir ve bakımı kolay. Tek bir fonksiyon içinde tüm sekme mantığını görürsünüz.

Sekmelere CSS Sınıfı Ekleme

WooCommerce sekme sistemi, default olarak özel CSS sınıfı eklemeye izin vermez ama bunu açıklamanın yolu var:

// functions.php

// Sekme li elementine özel CSS sınıfı eklemek için
add_filter( 'woocommerce_product_tabs', 'sysadmin_sekme_css_sinifi' );

function sysadmin_sekme_css_sinifi( $tabs ) {

    // Yorumlar sekmesine özel sınıf ver
    if ( isset( $tabs['reviews'] ) ) {
        // WooCommerce sekme wrap'ında class ekleme için
        // callback içinde wrapper div kullanımı daha güvenlidir
        $tabs['reviews']['class'] = 'yorum-sekmesi ozel-stil';
    }

    return $tabs;
}

// Sekme callback'i içinde stil tanımlama örneği
function sysadmin_ozel_icerik_ile_stil() {
    ?>
    <style>
        #ozel-sekme-wrap {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 4px;
        }
    </style>
    <div id="ozel-sekme-wrap">
        <h2>Özel İçerik</h2>
        <p>Bu sekme özel CSS stilleri ile gelir.</p>
    </div>
    <?php
}

Performans Notu ve Dikkat Edilmesi Gerekenler

Bu tür özelleştirmeleri yaparken aklınızda tutmanız gereken birkaç önemli nokta var:

  • global $product kullanımı: Callback fonksiyonlarında global $product değişkenine ihtiyaç duyarsınız. Bu değişken WooCommerce tarafından ürün sayfasında otomatik olarak tanımlanır.
  • isset() kontrolü: Mevcut sekmeleri düzenlemeden önce her zaman isset() ile varlığını kontrol edin. Bir eklenti o sekmeyi kaldırmışsa PHP hatası almanızın önüne geçersiniz.
  • Önbellekleme uyumluluğu: Sekme içerikleri PHP ile render edildiği için sunucu tarafı önbellekleme çözümleriyle (Redis, Varnish) uyumlu çalışır. Ancak kişiselleştirilmiş içerik gösteriyorsanız o bloğu önbellek dışında tutmalısınız.
  • esc_html() ve esc_url() kullanımı: Sekme içeriklerinde kullanıcı girdisi veya veritabanından gelen veri gösteriyorsanız mutlaka escape fonksiyonlarını kullanın. Bu bir güvenlik zorunluluğudur.
  • Tema güncellemeleri: Tüm bu kodları child theme’in functions.php dosyasına yazın. Ana tema güncellendiğinde değişiklikleriniz silinmez.
  • Eklenti çakışmaları: Yoast SEO, WPML veya bazı sayfa oluşturucular sekme sistemine müdahale edebilir. Priority değerlerini buna göre ayarlayın; genellikle 98 veya 99 vermek güvenlidir.

Sekme Görünürlüğünü Kullanıcı Rolüne Göre Ayarlama

Sadece toptan satış müşterilerine (wholesale) özel fiyat listesi sekmesi göstermek gibi bir senaryo düşünün:

// functions.php
add_filter( 'woocommerce_product_tabs', 'sysadmin_rol_bazli_sekme' );

function sysadmin_rol_bazli_sekme( $tabs ) {

    $kullanici = wp_get_current_user();
    $roller    = (array) $kullanici->roles;

    // Sadece 'wholesale_customer' rolündekiler görsün
    if ( in_array( 'wholesale_customer', $roller, true ) ) {
        $tabs['toptan_fiyatlar'] = array(
            'label'    => 'Toptan Fiyat Listesi',
            'target'   => 'toptan_fiyatlar',
            'callback' => 'sysadmin_toptan_fiyat_icerik',
            'priority' => 60,
        );
    }

    return $tabs;
}

function sysadmin_toptan_fiyat_icerik() {
    if ( ! is_user_logged_in() ) {
        echo '<p>Bu içeriği görüntülemek için giriş yapmanız gerekmektedir.</p>';
        return;
    }

    echo '<h2>Toptan Fiyat Listesi</h2>';
    echo '<p><strong>5-10 adet:</strong> %5 indirim</p>';
    echo '<p><strong>11-50 adet:</strong> %10 indirim</p>';
    echo '<p><strong>51+ adet:</strong> %18 indirim</p>';
    echo '<p>Toptan sipariş için: <a href="mailto:[email protected]">[email protected]</a></p>';
}

Sonuç

WooCommerce sekme sistemi, woocommerce_product_tabs filter’ı sayesinde son derece esnek bir yapıya sahip. Bu yazıda anlattıklarımızı özetlersek:

  • Yeni sekme eklemek için filter’a yeni bir dizi elemanı ekleyin, callback fonksiyonuyla içeriği çizin
  • Mevcut sekmeleri kaldırmak için unset() kullanın, başlık değiştirmek için doğrudan label anahtarına atama yapın
  • Koşullu sekme gösterimi için has_term(), $product->is_type() veya get_post_meta() kullanın
  • Kullanıcı rolüne göre içerik kontrolü için wp_get_current_user() ve roller dizisini kontrol edin
  • Tüm bu kodu child theme’in functions.php dosyasında tutun

Ek eklenti kurmadan, veritabanına gereksiz yük bindirmeden, sadece hooks sistemi aracılığıyla güçlü özelleştirmeler yapabilirsiniz. WordPress’in güzelliği zaten burada: doğru hook’u bilince her şeyi kontrol altına alabilirsiniz.

Bir yanıt yazın

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