WooCommerce Hesabım sayfasını programlı olarak nasıl düzenlerim

Yayınlanan: 2020-12-22

Mağazanızdaki Hesabım sayfasını özelleştirmek istiyor musunuz? Doğru yere geldiniz. Bu kılavuzda, müşteri deneyiminizi geliştirmenize yardımcı olmak için WooCommerce Hesabım sayfasını programlı olarak nasıl düzenleyeceğinizi göstereceğiz.

Hesabım sayfası nedir?

Varsayılan olarak, WooCommerce mağazaları, kullanıcıların siparişlerine bakabilecekleri ve müşterilerinizin kişisel bilgileri, fatura ve teslimat adresleri hakkında bilgileri depoladığınız bir Hesabım sayfası içerir. Varsayılan Hesabım sayfası , WooCommerce kısa kodunu içeren bir WordPress sayfasıdır.

[ woocommerce_my_account ]

Bu kullanıma hazır sayfa, kullanıcılarınızın siparişlerini ve ayarlarını yönetmek için ihtiyaç duyduğu tüm temel bilgilere sahip olsa da, Hesabım sayfasını düzenlemek, rakiplerinizden sıyrılmanıza ve daha iyi bir kullanıcı deneyimi sunmanıza yardımcı olabilir.

WooCommerce'de Hesabım Sayfasını neden özelleştirmelisiniz?

Harika bir UX sağlamanın herhangi bir e-ticaret mağazasının başarısının anahtarı olduğu bir sır değil. Kullanıcılar hızlı ve rahat olduğu için çevrimiçi satın alır, bu nedenle mağazanızın onlara harika bir deneyim yaşamaları için ihtiyaç duydukları araçları sağladığından emin olmalısınız.

Çoğu mağaza sahibi, ürün sayfasını özelleştirmeye ve ödeme yapmaya odaklanır, ancak Hesabım sayfasını unutur. Bu, kayıtlı kullanıcılarınız için tasarlanmış bir sayfa olduğundan, onu özelleştirmek , sitenizdeki deneyimlerini iyileştirmenize yardımcı olabilir. Ek olarak, mağazanıza geri gelmelerini ve satışlarınızı artırmanıza yardımcı olabilir. Örneğin, onlara kişiselleştirilmiş fırsatlar ve promosyonlar gösterdiğiniz özel bir bölüm oluşturabilirsiniz.

Hesabım sayfasını özelleştirmek için en iyi eklentileri zaten analiz ettik. Ancak, herhangi bir üçüncü taraf aracı yüklemek istemiyorsanız ve bazı kodlama becerileriniz varsa, sizin için bir şeyimiz var. Bu kılavuzda, WooCommerce Hesabım sayfasını programlı olarak nasıl düzenleyeceğinizi göstereceğiz.

WooCommerce Hesabım sayfasını programlı olarak nasıl düzenlerim

WooCommerce'de Hesabım sayfasını düzenlemek için iki farklı teknik vardır:

  1. Varsayılan WooCommerce şablon dosyalarını geçersiz kılabilirsiniz
  2. Bazı WooCommerce kancalarını kullanın

Hangi yöntem daha iyi? Bu seçeneklerin her biri farklı durumlar için daha uygundur. Genel bir kural olarak, mümkünse şablon dosyalarının üzerine yazmak yerine kancaları kullanmayı denemelisiniz. Bu, sitenizi özelleştirirken WordPress'in önerdiği en iyi uygulamalardan biridir.

Ancak, işlevler veya nesneler içeren daha karmaşık görevler yapmak istiyorsanız, şablon dosyalarını düzenlemeniz gerekebilir. Bu kılavuzda, her iki yöntemi de kullanarak WooCommerce Hesabım sayfasını programlı olarak nasıl düzenleyeceğinizi öğreneceksiniz. Tahmin edebileceğiniz gibi, şablon dosyalarını düzenlemek, kanca kullanmaktan daha fazla risk taşır, bu nedenle istediğiniz seçeneği seçmeden önce bunu aklınızda bulundurun.

1) Şablon dosyalarını geçersiz kılarak Hesap Sayfam'ı özelleştirin

NOT : Bu yöntem şablon dosyalarının geçersiz kılınmasını içerdiğinden, başlamadan önce sitenizin tam bir yedeğini oluşturmanızı öneririz. Nasıl yapacağınızı bilmiyorsanız, bu kılavuza göz atın. WooCommerce şablonlarının nasıl özelleştirileceği hakkında daha ayrıntılı bilgi için bu gönderiye göz atın.

WooCommerce şablon dosyalarını geçersiz kılma işlemi, alt temanızdaki diğer dosyaları geçersiz kılmaya benzer. Bildiğiniz gibi alt temalar, temanızı güncellediğinizde özelleştirmeleri kaybetmeden temanızı düzenlemenizi sağlar. Aynısı WooCommerce eklentileri için de geçerlidir, bu nedenle bir alt temanız yoksa, bir tane oluşturabilir veya bu eklentilerden herhangi birini kullanabilirsiniz.

İlk olarak, WordPress yönetici kontrol panelinizde Eklentiler > Düzenleyici'ye gidin. Ardından eklentiler klasörüne gidin, WooCommerce'i açın ve şablon dosyalarını bulun. Bunun için WordPress eklenti dosya düzenleyicisini veya istediğiniz herhangi bir kod düzenleyiciyi kullanabilirsiniz. WooCommerce dizini altında şablonlar dosyasını açın ve myaccount klasörünü arayın.

plugins/woocommerce/templates/myaccount

WooCommerce Hesabım sayfasını programlı olarak nasıl düzenlerim - Şablon dosyaları

/myaccount klasörünü açın, Hesabım sayfasının kullandığı tüm şablon dosyalarını bulacaksınız. woocommerce hesabım şablon dosyaları

Bunlar, şu anda web sitenizde çalışmakta olan varsayılan dosyalardır. Bu dosyaların üzerine yazmak için alt temanızda aynı ada sahip yeni bir dosya oluşturmanız gerekir. Ancak boş bir dosya oluşturursanız, orijinal dosyanın tüm işlevlerini devre dışı bırakırsınız. Bu nedenle sitenizde sorun oluşturmamak için varsayılan dosyayı kopyalayıp tema klasörünüze yapıştırmanız gerekir.

Örneğin, dashboard.php dosyasını WooCommerce kurulumundan kopyalamak istediğinizi varsayalım. Alt temanıza yapıştırmadan önce, iç içe iki alt dizin oluşturmanız ve bunları /woocommerce ve /myaccount olarak adlandırmanız gerekir. Bundan sonra, dashboard.php dosyasını içine yapıştırın: child_theme/woocommerce/myaccount/dashboard.php WooCommerce Hesabım sayfasını programlı olarak düzenleyin - Şablon dosyasını geçersiz kılma

Şimdi dashboard.php dosyasını açın ve düzgün çalıştığından emin olmak için bazı küçük değişiklikler yapın. Bu kadar! Bir WooCommerce şablon dosyasını nasıl geçersiz kılacağınızı öğrendiniz. İlk adım bu. Şimdi bir adım daha ileri gidelim ve Hesabım sayfasını nasıl özelleştireceğinizi görelim.

Hesabım sayfası panosunu özelleştirin

Artık şablon dosyalarını nasıl geçersiz kılacağınızı bildiğinize göre, WooCommerce Hesabım sayfasını programlı olarak nasıl düzenleyeceğinizi görelim. Bu bölümde, Hesabım sayfasının ana panosunu nasıl özelleştireceğinizi göstereceğiz. Bu işlemin sonunda Hesabım sayfanız şöyle görünecek:

hesabımı woocommerce kontrol paneli şablonunu özelleştir Bir başlık resmi ve altına bir metin ekledik. Ek olarak, müşterilerin sizinle kolayca iletişim kurabilmesi için kullanıcıların daha sık ziyaret ettiği bölümlerin bağlantılarını, altbilgiyi ve bazı resim bağlantılarını içeren bir liste oluşturduk.

Tam komut dosyası

Bu, yukarıdaki ekran görüntüsünü oluşturan son dashboard.php dosyasıdır.

 if ( ! tanımlanmış( 'KESİNLİKLE' ) ) {
çıkış; // Doğrudan erişiliyorsa çıkın.
}
$izin verilen_html = dizi(
'a' => dizi('href' => dizi(),)
);
?>
<h2>
<?php
yazdırf(
/* çevirmenler: 1: kullanıcı görünen adı 2: çıkış url'si */
wp_kses( __( 'Hey %1$s, geri döndünüz!', 'woocommerce' ), $allowed_html ),
'<güçlü>' . esc_html( $current_user->display_name ) . '</strong>',
esc_url(wc_logout_url() )
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* çevirmenler: 1: Siparişler URL'si 2: Adres URL'si 3: Hesap URL'si. */
$dashboard_desc = __( 'Bu, hesabınızın ana panosudur:', 'woocommerce');
if ( wc_shipping_enabled() ) {
/* çevirmenler: 1: Siparişler URL'si 2: Adresler URL'si 3: Hesap URL'si. */
$dashboard_desc = __( 'Bu, hesabınızın ana panosudur:', 'woocommerce');
}
yazdırf(
wp_kses($dashboard_desc,$allowed_html),
esc_url(wc_get_endpoint_url( 'siparişler') ),
esc_url(wc_get_endpoint_url('düzenleme-adres')),
esc_url( wc_get_endpoint_url( 'hesabı düzenle' ))
);
$ul_list = __('<ul>
<li><a href="%1$s">son siparişlerinizi</a></li> görüntüleyin
<li><a href="%2$s">Nakliye ve fatura adreslerinizi</a></li> yönetin
<li><a href="%3$s">Şifrenizi ve hesap ayrıntılarınızı düzenleyin</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#whatsapp mesajı göndermek için bağlantı"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#facebook profiline bağlantı"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#twitter profiline bağlantı"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#e-posta göndermek için bağlantı"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>Sevgiyle inşa edildi !</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Profil ve kişisel bilgileri buradan yönetin. Sizden haberdar olabilmemiz için tüm alanları doldurun. Hesabınızda yapılan tüm sürümler anında web sitesine yansıtılacaktır, böylece diğer kullanıcılar sizi ve mevcut ihtiyaçlarınızı herhangi bir gecikme olmadan öğrenebileceklerdir</p>
<?php
echo $ul_list.$div_footer.$div_contact;

Koda bir göz atarsanız, varsayılan şablondan kopyaladığımız tüm orijinal kodun hala orada olduğunu göreceksiniz. Bazı dizileri değiştirdik ve bağlantıları bir liste olarak yeniden sıraladık. Bunun da ötesinde, sekmeye daha fazla içerik eklemek için ek komut dosyaları kullandık. Yaptığımız değişiklikleri daha iyi anlamak için varsayılan dashboard.php kontrol edebilirsiniz.

Resim Ekleme

Resimleri Hesabım sayfasında görüntülemek için resimlerin URL'lerini değiştirmeniz gerekir. Aynısı sosyal simgeler resim bağlantıları için de geçerlidir.

CSS özelleştirmeleri

Hesabım sayfasını ve diğer herhangi bir sayfayı özelleştirmenin başka bir yolu da CSS komut dosyalarını kullanmaktır. Bu, özel dashboard.php dosyamızı biçimlendirmek için kullandığımız CSS betiğidir:

 .woocommerce-MyAccount içeriği > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
metin hizalama:merkez;
}
.acc_contact{
üst dolgu:20px;
metin hizalama:merkez;
}
.acc_contact > h3{
yüzer: sol;
}
.acc_images{
kenar boşluğu:otomatik;
genişlik: %50;
Ekran bloğu;
}
#hoş geldin{
kenar boşluğu:otomatik;
}
.acc_images görseli {
sol kenar boşluğu:4px;
sağ kenar boşluğu:4px;
görüntüleme: satır içi blok;
genişlik:55 piksel;
}
#acc_footer{
üst kenar boşluğu:15 piksel;
arka plan rengi: #20202020;
metin hizalama: merkez;
sınır yarıçapı: 15 piksel;
}
#acc_footer > h4{
üst dolgu:20px;
renk: rgb(235, 228, 228);
yazı tipi ağırlığı:kalın;
}
#acc_footer > img{
kenar boşluğu:otomatik;
alt dolgu:20 piksel;
}

Bu kodu temel alabilir, alt temanızın style.css dosyasına yapıştırabilir ve sitenizin görünümüne ve tarzına göre özelleştirebilirsiniz.

2. WooCommerce Hesabım Sayfasını kancalarla düzenleyin

Hesabım sayfasını programlı olarak düzenlemenin ikinci yöntemi, bazı WooCommerce kancalarını kullanmaktır. Bunun için WooCommerce'de kancaların nasıl çalıştığına dair temel bir anlayışa sahip olmanız gerekir. Kancalara aşina değilseniz, bu kılavuza göz atmanızı öneririz.

A) Sekmeleri Yeniden Adlandır

Bu komut dosyası, Adres sekmesini Adresleriniz olarak yeniden adlandıracaktır.

 add_filter('woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999);
function QuadLayers_rename_acc_adress_tab( $items ) {
$items['edit-address'] = 'Adresleriniz';
$öğeleri döndür;
}

B) Sekmeleri Kaldır

Herhangi bir sekmeyi tamamen kaldırmak için unset() işlevini şu şekilde kullanın:

 add_filter('woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999);
function QuadLayers_remove_acc_address( $items ) {
unset( $ites['indirilenler']);
$öğeleri döndür;
}

Yukarıdaki komut dosyasında İndirilenler sekmesini kaldırdık. $items dizisinde sekmelerin tam listesini bulabilir, böylece istediğinizi seçebilirsiniz.

 $öğeler = dizi(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'siparişler' => __( 'Siparişler', 'woocommerce' ),
'indirilenler' => __( 'İndirilenler', 'woocommerce' ),
'edit-address' => _n( 'Adresler', 'Adres', (int) wc_shipping_enabled(), 'woocommerce' ),
'ödeme yöntemleri' => __( 'Ödeme yöntemleri', 'woocommerce' ),
'hesabı düzenle' => __( 'Hesap ayrıntıları', 'woocommerce' ),
'müşteri-logout' => __( 'Çıkış', 'woocommerce' ),
);

C) Sekmeleri ve İçeriği Birleştirme

Hesabım sayfasını özelleştirmek için başka bir seçenek de sekmeleri birleştirmektir . Örneğin, Adresler sekmesini nasıl kaldıracağımızı ve içeriğini Hesap sekmesine nasıl taşıyacağımızı görelim.

 // --------------------------------
// 1. Adresler sekmesini kaldırın
add_filter('woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab( $items ) {
unset($ites['düzenle-adres']);
$öğeleri döndür;
}
// ----------------------------------
// 2. Adresler sekmesinin içeriğini mevcut bir sekmeye ekleyin (bu durumda hesap düzenleme)
add_action('woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address');

Şimdi, Hesap sekmesi şöyle görünecek: hesabımı woocommerce sekmesi içeriğini birleştir

D) Özel içerikli yeni bir sekme ekleyin

Şimdi Hesabım sayfasına nasıl içerik ekleneceğini görelim. Bu örnekte, kullanıcıların destek biletlerine kolayca bakabilecekleri Destek adlı yeni bir sekme ekleyeceğiz. Bazı ilginç içerikleri görüntülemek için üçüncü taraf bir eklenti tarafından sağlanan iki kısa kodu kullanacağız, ancak yeni sekmenizde istediğiniz herhangi bir kısa kodu kullanabilmeniz gerekir.

Ancak, WooCommerce ile uyumsuzluklar nedeniyle bazı kısa kodların çalışmayabileceğini unutmayın. WooCommerce Hesabım sayfasına özel içerikli bir Destek sekmesi eklemek için aşağıdaki kodu alt temanızın functions.php dosyasına yapıştırın.

 // 1. Yeni uç noktayı kaydet
// Not: Kalıcı Bağlantıları Yeniden Kaydet yoksa 404 hatası verir  
function QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint('destek', EP_ROOT | EP_PAGES);
}  
add_action('init', 'QuadLayers_add_support_endpoint');  
// ------------------
// 2. Yeni sorgu ekle
function QuadLayers_support_query_vars( $vars ) {
    $vars[] = 'destek';
    $vars döndür;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );  
// ------------------
// 3. Yeni uç noktayı ekleyin 
function QuadLayers_add_support_link_my_account( $items ) {
    $items['destek'] = 'Destek';
    $öğeleri döndür;
}  
add_filter('woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account');
// ------------------
// 4. Yeni uç noktaya içerik ekleyin  
function QuadLayers_support_content() {
echo '<h3>Destek</h3><p>Destek alanına hoş geldiniz. Premium müşteri olarak, destek biletlerinizi buradan yönetin, web sitenizle ilgili herhangi bir sorununuz varsa bir bilet gönderebilirsiniz. Size hızlı ve verimli bir çözüm sunmak için elimizden gelenin en iyisini yapacağız</p>';
echo do_shortcode('[bilet-kısa kod]');
echo do_shortcode('[wpforms]');
}  
add_action('woocommerce_account_support_endpoint', 'QuadLayers_support_content');

Yeni sekmeye tıkladığınızda 404 sayfa bulunamadı hatası alırsanız, WordPress panosu > Ayarlar > Kalıcı Bağlantılar'a giderek kalıcı bağlantı sayfasını açın ve alttaki Kaydet düğmesini tıklayın.

Komut dosyasının dört bölüme ayrıldığını unutmayın. Her biri farklı bir görevi yerine getirir, böylece mağazanıza eklemek istediğiniz bölümleri kullanırsınız. Ayrıca betiğin (4) son bölümünde do_shortcode() işlevindeki kısa kodu değiştirebileceğinizi unutmayın. Bu, yeni Destek sekmesinin nihai sonucu olacaktır. özel sekme hesabım woocommerce

Çözüm

Sonuç olarak, varsayılan Hesabım sayfası, kullanıcıların ihtiyaç duyduğu temel bilgilere sahiptir, ancak oldukça basittir. Bu nedenle, mağazanızdaki kullanıcı deneyimini geliştirmek istiyorsanız Hesabım sayfasını özelleştirmelisiniz. Bu sadece mağazanızın çok önemli bir bölümünü geliştirmenize yardımcı olmakla kalmayacak, aynı zamanda satışlarınızı da artıracaktır.

Hesabım sayfasını özelleştirmek için birkaç eklenti var. Ancak, daha fazla eklenti yüklemek istemiyorsanız ve kodlama becerileriniz varsa, WooCommerce Hesabım sayfasını programlı olarak düzenleyebilirsiniz. Bunun için iki seçenek vardır:

  • Şablon dosyalarını geçersiz kıl
  • WooCommerce kancalarını kullanın

Her iki yöntem de işi halledecektir, ancak genel bir kural olarak, mümkün olduğunda kancaları kullanmanızı öneririz. Daha az risklidir ve WordPress'in önerdiği en iyi uygulamalardan biridir. Bu kılavuzda, her iki yöntemi de kullanarak yapabileceğiniz şeylerin birkaç örneğini gördük. Bu komut dosyalarını kılavuz olarak almanızı, fikir edinmek için kullanmanızı ve mağazanızdaki Hesabım sayfasından en iyi şekilde yararlanmak için biraz oynamanızı öneririz.

Son olarak, Hesabım sayfasından en iyi şekilde yararlanmaya yönelik daha fazla kılavuz için şu kılavuzlara göz atın:

  • WooCommerce Hesabım eklentili ve eklentisiz nasıl özelleştirilir
  • WooCommerce Hesabım Sayfasını özelleştirmek için en iyi eklentiler

Hesabım sayfanızda ne gibi değişiklikler yaptınız? Eğitimimizi takip ederken herhangi bir sorun yaşadınız mı? Aşağıdaki yorumlar bölümünde bize bildirin!