WooCommerce Hesabım Sayfası Sekmelerini Özelleştirme

Tarafındankomut
0 Comments

WooCommerce ile bir e-ticaret sitesi kurduğunuzda, “Hesabım” sayfası müşterilerinizin en çok ziyaret ettiği alanlardan biri haline gelir. Siparişleri takip etmek, adres güncellemek, şifre değiştirmek… Tüm bu işlemler bu sayfada gerçekleşir. Ancak varsayılan WooCommerce sekmeleri her zaman ihtiyacınıza tam olarak uymaz. Belki özel bir “Favorilerim” sekmesi eklemek istiyorsunuzdur, belki de gereksiz gördüğünüz “İndirmeler” sekmesini kaldırmak. İşte tam bu noktada functions.php devreye giriyor.

WooCommerce Hesabım Sayfası Nasıl Çalışır?

WooCommerce, “Hesabım” sayfasını woocommerce_account_menu_items filtresi üzerinden yönetir. Bu filtre, sol menüdeki sekmeleri bir PHP dizisi olarak döndürür. Her sekmenin bir slug anahtarı ve bir etiket değeri vardır.

Varsayılan olarak gelen sekmeler şunlardır:

  • dashboard: Genel hesap özeti
  • orders: Siparişler listesi
  • downloads: Dijital ürün indirmeleri
  • edit-address: Adresler (fatura ve teslimat)
  • payment-methods: Ödeme yöntemleri
  • edit-account: Hesap bilgileri
  • customer-logout: Çıkış yap

Bu yapıyı anlamak, özelleştirme işlemlerinde büyük kolaylık sağlar. Yapacağımız tüm değişiklikler functions.php dosyasına eklenecek. Eğer bir child theme kullanıyorsanız (ki kesinlikle önerilen budur), değişikliklerinizi child theme’in functions.php dosyasına yazın.

Mevcut Sekmeleri Kaldırma

En basit senaryo ile başlayalım. Diyelim ki sadece fiziksel ürün satan bir mağazanız var ve dijital indirme özelliğini hiç kullanmıyorsunuz. Bu durumda “İndirmeler” sekmesini göstermek gereksiz ve kullanıcıyı kafa karıştırıcı olur.

// İndirmeler sekmesini kaldırma
add_filter( 'woocommerce_account_menu_items', 'hesabim_sekme_kaldir' );
function hesabim_sekme_kaldir( $items ) {
    unset( $items['downloads'] );
    return $items;
}

Birden fazla sekmeyi aynı anda kaldırmak istiyorsanız:

// Birden fazla sekmeyi kaldırma
add_filter( 'woocommerce_account_menu_items', 'hesabim_coklu_sekme_kaldir' );
function hesabim_coklu_sekme_kaldir( $items ) {
    unset( $items['downloads'] );
    unset( $items['payment-methods'] );
    return $items;
}

Bu örnekte hem indirmeleri hem de ödeme yöntemleri sekmesini kaldırdık. Ödeme yöntemleri sekmesi, Stripe veya benzeri bir ödeme geçidi entegrasyonu olmayan sitelerde zaten işlevsiz kalır.

Sekme Adlarını Değiştirme

Varsayılan sekme isimleri her zaman markanızla örtüşmeyebilir. “Siparişler” yerine “Alışverişlerim” demek isteyebilirsiniz. Bu da son derece kolay:

// Sekme isimlerini özelleştirme
add_filter( 'woocommerce_account_menu_items', 'hesabim_sekme_isimlerini_degistir' );
function hesabim_sekme_isimlerini_degistir( $items ) {
    $items['orders']       = 'Alışverişlerim';
    $items['edit-address'] = 'Adreslerim';
    $items['edit-account'] = 'Profilim';
    $items['dashboard']    = 'Kontrol Paneliм';
    return $items;
}

Bu küçük değişiklik müşteri deneyimini ciddi oranda iyileştirir. Özellikle Türkçe bir mağaza işletiyorsanız “Downloads” veya İngilizce kalan ifadeler bazen tema kaynaklı olarak ortaya çıkabilir. Bu yöntemle o sorunu da çözmüş olursunuz.

Yeni Özel Sekme Ekleme

Asıl güç buradan geliyor. Kendi özel sekmelerinizi ekleyebilir, bunları tamamen istediğiniz içerikle doldurabilirsiniz. Örneğin bir “Puan Geçmişim” veya “Favorilerim” sekmesi eklemek istiyorsunuz.

Yeni sekme ekleme işlemi üç adımdan oluşur:

  • Menüye sekmeyi kaydetmek
  • Sekmenin URL endpoint’ini tanımlamak
  • Sekmenin içeriğini oluşturmak
// Adım 1: Menüye yeni sekme ekleme
add_filter( 'woocommerce_account_menu_items', 'hesabim_yeni_sekme_ekle' );
function hesabim_yeni_sekme_ekle( $items ) {
    // Çıkış butonundan önce eklemek için
    $cikis = $items['customer-logout'];
    unset( $items['customer-logout'] );

    $items['puan-gecmisim'] = 'Puan Geçmişim';
    $items['customer-logout'] = $cikis;

    return $items;
}

// Adım 2: Endpoint tanımlama
add_action( 'init', 'hesabim_endpoint_kaydet' );
function hesabim_endpoint_kaydet() {
    add_rewrite_endpoint( 'puan-gecmisim', EP_ROOT | EP_PAGES );
}

// Adım 3: Sayfa içeriğini oluşturma
add_action( 'woocommerce_account_puan-gecmisim_endpoint', 'hesabim_puan_gecmisi_icerik' );
function hesabim_puan_gecmisi_icerik() {
    $kullanici_id = get_current_user_id();
    $puanlar = get_user_meta( $kullanici_id, 'toplam_puan', true );

    echo '<h3>Puan Geçmişiniz</h3>';
    echo '<p>Toplam puanınız: <strong>' . intval( $puanlar ) . '</strong></p>';
    // Buraya kendi puan mantığınızı ekleyebilirsiniz
}

Önemli not: Endpoint’i ekledikten sonra WordPress’in yeniden yazma kurallarını yenilemeniz gerekir. Bunu yapmak için WordPress yönetim panelinde Ayarlar > Kalıcı Bağlantılar sayfasına girip kaydet butonuna basmanız yeterli.

Sekmelerin Sırasını Değiştirme

PHP dizileri sıralıdır, dolayısıyla sekmelerin menüdeki sırası dizideki sıraya göre belirlenir. Sırayı değiştirmek için diziyi yeniden oluşturmak gerekir:

// Sekme sırasını özelleştirme
add_filter( 'woocommerce_account_menu_items', 'hesabim_sekme_sirasi', 20 );
function hesabim_sekme_sirasi( $items ) {
    $yeni_siralama = array(
        'dashboard'       => $items['dashboard'],
        'edit-account'    => $items['edit-account'],
        'orders'          => $items['orders'],
        'edit-address'    => $items['edit-address'],
        'downloads'       => $items['downloads'],
        'payment-methods' => $items['payment-methods'],
        'customer-logout' => $items['customer-logout'],
    );

    // Orijinal dizide olup yenisinde olmayan öğeleri koruyalım
    foreach ( $items as $key => $label ) {
        if ( ! array_key_exists( $key, $yeni_siralama ) ) {
            $yeni_siralama[ $key ] = $label;
        }
    }

    return $yeni_siralama;
}

Bu örnekte “Hesap Bilgileri” sekmesini en üste taşıdık. Bazı mağazalarda müşterilerin önce profil bilgilerini güncellemesi beklendiğinden bu sıralama daha mantıklı olabilir.

Kullanıcı Rolüne Göre Sekme Gösterme

Gerçek dünya senaryolarında en sık karşılaşılan ihtiyaçlardan biri, farklı kullanıcı gruplarına farklı sekmeler göstermektir. Örneğin toptan satış yapan bir mağazanızda “B2B Müşteri” rolündeki kullanıcılara özel bir “Fiyat Listesi” sekmesi göstermek isteyebilirsiniz.

// Role göre sekme yönetimi
add_filter( 'woocommerce_account_menu_items', 'hesabim_role_gore_sekmeler' );
function hesabim_role_gore_sekmeler( $items ) {
    $kullanici = wp_get_current_user();

    // B2B müşterilerine özel sekme
    if ( in_array( 'b2b_musteri', (array) $kullanici->roles ) ) {
        $cikis = $items['customer-logout'];
        unset( $items['customer-logout'] );
        $items['b2b-fiyat-listesi'] = 'Toptan Fiyat Listesi';
        $items['customer-logout']   = $cikis;
    }

    // Normal müşterilerden indirme sekmesini gizle
    if ( ! in_array( 'premium_uye', (array) $kullanici->roles ) ) {
        unset( $items['downloads'] );
    }

    return $items;
}

// B2B fiyat listesi endpoint
add_action( 'init', 'b2b_endpoint_kaydet' );
function b2b_endpoint_kaydet() {
    add_rewrite_endpoint( 'b2b-fiyat-listesi', EP_ROOT | EP_PAGES );
}

// B2B içerik
add_action( 'woocommerce_account_b2b-fiyat-listesi_endpoint', 'b2b_fiyat_listesi_icerik' );
function b2b_fiyat_listesi_icerik() {
    if ( ! current_user_can( 'b2b_musteri' ) ) {
        echo '<p>Bu sayfaya erişim yetkiniz bulunmuyor.</p>';
        return;
    }
    // Fiyat listesi şablonunu yükle
    wc_get_template( 'myaccount/b2b-fiyat-listesi.php' );
}

Sekmelere İkon Ekleme

Birçok modern WooCommerce teması sekme metinlerinin yanında ikonlar kullanır. Eğer temanız bunu desteklemiyorsa veya sıfırdan eklemek istiyorsanız, bir çok yol vardır. En yaygın yöntem woocommerce_account_menu_items filtresini kullanarak sekme adlarına HTML eklemektir. Ancak bu yöntem tema desteğine bağlı olabilir. Alternatif olarak CSS ile pseudo-elementler kullanabilirsiniz.

Daha temiz bir yaklaşım için sekme adlarına sınıf tabanlı bir yapı ekleyelim:

// Sekme adlarına ikon HTML ekleme
add_filter( 'woocommerce_account_menu_items', 'hesabim_sekme_ikonlari' );
function hesabim_sekme_ikonlari( $items ) {
    $ikonlu_items = array();

    $ikonlar = array(
        'dashboard'       => 'dashicons-admin-home',
        'orders'          => 'dashicons-cart',
        'downloads'       => 'dashicons-download',
        'edit-address'    => 'dashicons-location',
        'payment-methods' => 'dashicons-credit-card',
        'edit-account'    => 'dashicons-admin-users',
        'customer-logout' => 'dashicons-exit',
    );

    foreach ( $items as $key => $label ) {
        if ( isset( $ikonlar[ $key ] ) ) {
            $ikonlu_items[ $key ] = '<span class="dashicons ' . $ikonlar[ $key ] . '"></span> ' . $label;
        } else {
            $ikonlu_items[ $key ] = $label;
        }
    }

    return $ikonlu_items;
}

Sipariş Sayısını Sekme Etiketinde Gösterme

Müşterilerin dikkatini çeken bir özellik, sekme başlığında işlem bekleyen sipariş sayısını göstermektir. “Siparişlerim (3)” gibi bir gösterim, kullanıcıya anında bilgi verir.

// Sipariş sayısını sekme adında gösterme
add_filter( 'woocommerce_account_menu_items', 'hesabim_siparis_sayisi_goster' );
function hesabim_siparis_sayisi_goster( $items ) {
    $kullanici_id = get_current_user_id();

    if ( ! $kullanici_id ) {
        return $items;
    }

    // İşlem bekleyen siparişleri say
    $bekleyen_siparisler = wc_get_orders( array(
        'customer' => $kullanici_id,
        'status'   => array( 'wc-processing', 'wc-on-hold' ),
        'limit'    => -1,
        'return'   => 'ids',
    ) );

    $adet = count( $bekleyen_siparisler );

    if ( $adet > 0 && isset( $items['orders'] ) ) {
        $items['orders'] = 'Siparişlerim <span class="siparis-badge">' . $adet . '</span>';
    }

    return $items;
}

Bu koda ek olarak küçük bir CSS ekleyerek badge’i güzel bir görünüme kavuşturabilirsiniz. Bunu da functions.php üzerinden yapabilirsiniz:

// Badge CSS enjeksiyonu
add_action( 'wp_head', 'hesabim_badge_stili' );
function hesabim_badge_stili() {
    if ( ! is_account_page() ) {
        return;
    }
    echo '<style>
    .siparis-badge {
        display: inline-block;
        background: #e74c3c;
        color: #fff;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 11px;
        line-height: 20px;
        text-align: center;
        margin-left: 5px;
    }
    </style>';
}

Hepsini Bir Arada Kullanan Gerçek Senaryo

Bir e-ticaret projesi üstlendiğinizi düşünün. Müşteri şu istekleri sıralıyor:

  • “İndirmeler” ve “Ödeme Yöntemleri” sekmelerini kaldır
  • “Siparişler” yerine “Alışverişlerim” de
  • Üyeler için bir “Özel Teklifler” sekmesi ekle
  • Hesap bilgileri en üstte görünsün
  • Çıkış butonu en altta kalsın
// Tüm özelleştirmeleri birleştiren kapsamlı örnek
add_filter( 'woocommerce_account_menu_items', 'hesabim_tam_ozellestirme', 10 );
function hesabim_tam_ozellestirme( $items ) {

    // İstenmeyen sekmeleri kaldır
    unset( $items['downloads'] );
    unset( $items['payment-methods'] );

    // Sekme isimlerini güncelle
    $items['orders']       = 'Alışverişlerim';
    $items['edit-address'] = 'Adreslerim';
    $items['edit-account'] = 'Hesap Bilgilerim';
    $items['dashboard']    = 'Genel Bakış';

    // Özel sekme ekle (çıkış hariç tüm sekmelerden önce)
    $cikis = $items['customer-logout'];
    unset( $items['customer-logout'] );
    $items['ozel-teklifler']  = 'Özel Teklifler';
    $items['customer-logout'] = $cikis;

    // Sıralamayı düzenle
    $sirali = array();
    $sirali['dashboard']      = $items['dashboard'];
    $sirali['edit-account']   = $items['edit-account'];
    $sirali['orders']         = $items['orders'];
    $sirali['edit-address']   = $items['edit-address'];
    $sirali['ozel-teklifler'] = $items['ozel-teklifler'];
    $sirali['customer-logout'] = $items['customer-logout'];

    return $sirali;
}

// Özel teklifler endpoint
add_action( 'init', 'ozel_teklifler_endpoint' );
function ozel_teklifler_endpoint() {
    add_rewrite_endpoint( 'ozel-teklifler', EP_ROOT | EP_PAGES );
}

// Özel teklifler içerik
add_action( 'woocommerce_account_ozel-teklifler_endpoint', 'ozel_teklifler_icerik' );
function ozel_teklifler_icerik() {
    echo '<h3>Size Özel Fırsatlar</h3>';
    echo '<p>Bu ay sizin için seçtiğimiz özel teklifleri aşağıda bulabilirsiniz.</p>';
    // Dinamik kupon veya kampanya içeriği buraya gelir
    $kampanyalar = get_option( 'ozel_uye_kampanyalari', array() );
    if ( empty( $kampanyalar ) ) {
        echo '<p>Şu an aktif bir teklifiniz bulunmuyor.</p>';
    } else {
        foreach ( $kampanyalar as $kampanya ) {
            echo '<div class="kampanya-karti">' . esc_html( $kampanya ) . '</div>';
        }
    }
}

Sık Yapılan Hatalar ve Çözümleri

Yeni sekme eklerken en çok karşılaşılan sorunları ve çözümlerini paylaşmak gerekiyor:

  • 404 hatası alıyorsanız: Endpoint’i init hook’una ekledikten sonra kalıcı bağlantıları yenilemeyi unutmuş olabilirsiniz. Yönetim panelinde Ayarlar > Kalıcı Bağlantılar’a gidin ve sadece “Değişiklikleri Kaydet” butonuna basın.
  • Sekme içeriği görünmüyorsa: Action hook adını kontrol edin. woocommerce_account_{endpoint_slug}_endpoint formatında olmalıdır. Tire içeren slug’larda örneğin puan-gecmisim için hook adı woocommerce_account_puan-gecmisim_endpoint şeklinde yazılır.
  • Sıralama çalışmıyorsa: Başka bir eklenti veya tema da aynı filtreyi kullanıyor olabilir. Hook önceliğini yükseltin: add_filter( 'woocommerce_account_menu_items', 'fonksiyon_adi', 99 ) şeklinde 99 veya daha yüksek bir priority değeri kullanın.
  • Çocuk tema yoksa değişiklikler kaybolur: Asla ana tema functions.php dosyasını düzenlemeyin. Bir child theme oluşturun ve tüm özelleştirmeleri oraya yazın. Tema güncellemelerinde yaptığınız her şey silinir.
  • WooCommerce güncellemesinden sonra bozuluyorsa: WooCommerce’in kendi hook sistemi zaman zaman değişebilir. woocommerce_account_menu_items filtresi uzun süredir stabil olsa da WooCommerce changelog’unu takip etmek iyi bir alışkanlıktır.

Endpoint Sorunlarını Debug Etme

Bir şeylerin yanlış gittiğini fark ettiğinizde aşağıdaki hızlı debug yöntemini kullanabilirsiniz:

// Mevcut Hesabım endpoint'lerini listele (geliştirme ortamı için)
add_action( 'init', 'hesabim_endpointleri_listele' );
function hesabim_endpointleri_listele() {
    if ( ! is_admin() || ! current_user_can( 'manage_options' ) ) {
        return;
    }
    $endpoints = WC()->query->get_query_vars();
    // wp-admin'de geçici olarak görmek için error_log kullanabilirsiniz
    // error_log( print_r( $endpoints, true ) );
}

Bu kodu kullandıktan sonra wp-content/debug.log dosyasını incelediğinizde tüm aktif endpoint’leri görebilirsiniz. WordPress’te debug logging için wp-config.php dosyasında WP_DEBUG ve WP_DEBUG_LOG sabitlerinin true olduğundan emin olun.

Performans İpuçları

Hesabım sayfası her giriş yapmış kullanıcı tarafından ziyaret edildiğinden performans da önemli bir konu:

  • Veritabanı sorgularını önbelleğe alın: Sipariş sayısı gibi değerleri her sayfa yüklemesinde sorgulamak yerine, kısa süreli transient’lar kullanın. set_transient() ve get_transient() fonksiyonlarını inceleyin.
  • is_account_page() kontrolü yapın: İkon CSS’i veya ekstra scriptleri sadece hesap sayfasında yükleyin. Her sayfaya eklemek gereksiz kaynak tüketimine yol açar.
  • Koşullu sekme içeriklerini lazy load yapın: Özellikle karmaşık sekme içerikleri için, içeriği yalnızca o sekme aktifken yükleyen bir yapı kurabilirsiniz.

Sonuç

WooCommerce “Hesabım” sayfasını functions.php üzerinden özelleştirmek, herhangi bir eklenti kurmadan mağazanızı müşterilerinize özel bir deneyim sunar hale getirmenin en temiz yoludur. Sekme kaldırma, isim değiştirme, sıralama ve yeni sekme ekleme işlemlerinin hepsi birkaç satır PHP kodu ile halledilebilir.

Bu özelleştirmelerde dikkat etmeniz gereken en önemli nokta, daima child theme kullanmak ve endpoint ekledikten sonra kalıcı bağlantıları yenilemektir. Role dayalı sekme yönetimi ile B2B/B2C ayrımı yapabilir, sipariş sayısı badge’i ile kullanıcı etkileşimini artırabilirsiniz. Tüm bu küçük detaylar bir araya geldiğinde, müşterilerinizin hesap sayfasında geçirdiği deneyim ciddi ölçüde iyileşir ve bu da doğrudan müşteri memnuniyetine yansır.

Bir yanıt yazın

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