WooCommerce mağaza sayfası programlı olarak nasıl düzenlenir (CSS ve PHP)

Yayınlanan: 2020-08-27

Mağaza sayfanızı özelleştirmenin yollarını mı arıyorsunuz? Bu eğitimde, hem PHP hem de CSS kullanarak WooCommerce mağaza sayfasını programlı olarak nasıl düzenleyeceğinizi göstereceğiz.

Herhangi bir çevrimiçi mağazada, dönüşüm oranlarınızı artırmak için alışveriş sayfasını düzenlemek ve optimize etmek çok önemlidir. Mağaza sayfası, ürünlerinizi sergilediğiniz yerdir ve işinizi yapabilir veya bozabilir. Bir WooCommerce mağazası işletiyorsanız, mağaza sayfasını özelleştirmenizi ve bundan en iyi şekilde yararlanmanızı şiddetle tavsiye ederiz. Bu kılavuzda, WooCommerce mağaza sayfasını programlı olarak nasıl düzenleyeceğinizi göstereceğiz.

WooCommerce'de mağaza sayfasını düzenlemek neden önemlidir?

Mağaza sayfası, WooCommerce'deki en önemli sayfalardan biridir. Mağazanızın performansı üzerinde büyük bir etkisi olabilmesi için ürünlerinizi ziyaretçilerinize gösterdiğiniz yerdir. İyi bir alışveriş sayfası, kullanıcı deneyimini iyileştirebilir, dönüşüm oranlarını artırabilir ve kullanıcı katılımı oluşturmanıza yardımcı olabilir. Kötü bir mağaza sayfası ise tam tersini yapabilir ve işinizi boğabilir.

Bu yüzden satışlarınızı en üst düzeye çıkarmak için optimize etmelisiniz. Bunu eklentiler ve sayfa oluşturucularla yapabilirsiniz, ancak kodlama becerileriniz varsa, kendi çözümünüzü oluşturmanın yolu budur.

WooCommerce mağaza sayfası programlı olarak nasıl düzenlenir

Mağaza sayfasını özelleştirmek için daha önce farklı yöntemler görmüştük. Ancak, bu eğitimde, biraz CSS ve PHP kodu kullanarak WooCommerce mağaza sayfasını programlı olarak nasıl düzenleyeceğinize odaklanacağız. Bu kılavuzda bir alt tema üzerinde çalışacağımızı ve ayrıca WooCommerce varsayılan mağaza şablonunu da düzenleyeceğimizi belirtmekte fayda var. WooCommerce şablon dosyalarına ve alt temanın functions.php dosyasına bazı referanslara odaklanacağız.

Bu eğitimde, WooCommerce mağaza sayfasını programlı olarak nasıl düzenleyeceğinizi öğreneceksiniz:

  1. Varsayılan WooCommerce mağaza sayfası şablonunu devre dışı bırakın
  2. Başlıkları ve içeriği özelleştirin
    1. En popüler ürünler
    2. En çok satan ürünler
    3. En Çok Oy Alan
    4. Ürünleri sınıflandırmalara göre göster
    5. Functions.php'de WooCommerce mağaza sayfasını özelleştirin
  3. Ürün döngüsünün düzenini düzenleyin ve CSS stil sayfasını uygulayın
    1. Satır başına varsayılan sütun sayısını düzenle
    2. Mağaza sayfasına CSS Stili uygula
  4. WooCommerce mağaza sayfasının döngü dosyalarını düzenleyin
    1. Animasyonlu bir gif için varsayılan "satış" metnini değiştirin
    2. Sıralama seçeneklerini ve sayfalandırmayı kaldırın

Başlamadan önce

Lütfen aşağıdaki kılavuzun gelişmiş kodlama içerdiğini unutmayın, bu nedenle teknik becerileriniz yoksa bunun yerine bu diğer öğreticiyi izlemenizi öneririz.

Başlamadan önce ayrıca bir alt tema yüklemenizi öneririz. Bir alt temanın nasıl oluşturulacağına dair kılavuzumuza göz atabilir veya bunu birkaç tıklamayla yapmak için bir eklenti kullanabilirsiniz. Bunun da ötesinde, çekirdek dosyaları değiştireceğiniz için sitenizin tam bir yedeğini almak iyi bir fikirdir.

Şimdi, WooCommerce'de mağaza sayfasını kodlama ile nasıl özelleştireceğimizi görelim.

1. Varsayılan WooCommerce mağaza sayfası şablonunu devre dışı bırakın

Mağaza sayfasını özelleştirmek için iki olası yaklaşım vardır:

  1. Mağaza sayfasını yazdırmaktan sorumlu WooCommerce dosyasının üzerine yazabilirsiniz.
  2. WC kancalarını kullanarak alt temanızın functions.php dosyasına özelleştirilmiş komut dosyaları ekleyin

WooCommerce HTML şablonunu, alt temanın functions.php dosyası gibi düzenleyebilir, bir güncelleme olduğunda silmeyi önlemek için çekirdek dosyaların üzerine yazabilirsiniz. Ancak, işler tam olarak functions.php dosyasındaki gibi çalışmadığından WooCommerce bu dosyaları güncellemeye karar verirse, özelleştirmeleriniz artık çalışmayabilir.

Ama bu endişelenecek bir şey değil. WooCommerce bunun farkındadır, bu nedenle şablon dosyalarını nadiren komut dosyalarınızı bozabilecek şekilde güncellerler. functions.php dosyasıyla çalışmanın sorunu, kancalarınızı ekledikten sonra varsayılan WooCommerce mağaza sayfasının görünmeye devam etmesidir.

Bu nedenle, her şeyden önce, şablonunuzu sıfırdan oluşturmak için varsayılan WooCommerce şablon mağaza sayfasını devre dışı bırakmanız gerekir.

arşiv-product.php dosyası

WooCommerce'de, mağaza sayfasındaki çıktıdan sorumlu dosyanın adıarchive archive-product.php ve onu WooCommerce şablonlar klasöründe bulabilirsiniz ( WooCommerce > Templates >archive-product.php ). WooCommerce mağaza sayfasını programlı olarak düzenleyin - Mağaza sayfası şablonunu devre dışı bırakın

Bu dosyanın üzerine yazmak için, aşağıda gösterildiği gibi alt temanızdaki WooCommerce klasörüne kopyalayıp yapıştırmanız gerekir:

Şimdi, WooCommerce'in mağaza sayfasını nasıl görüntülediğini görebilmeniz için archive-product.php dosyasına bir göz atalım. Bunu yapmak için favori entegre geliştirme ortamınızı (IDE) açın, WooCommerce eklentisinin şablonlar klasörüne gidin ve dosyayı açın. Diğer WC şablon dosyalarını özelleştirebildiğiniz gibi, onu düzenleyebilir ve onunla oynayabilirsiniz.

Bunu yapmadan önce, gerekirse değişiklikleri geri almak için orijinal dosyanın yedeğini aldığınızdan emin olun.

Archive archive-product.php dosyasında birkaç do_action() işlevi göreceksiniz. Bu işlevler, mağaza sayfası için şu anda mevcut olan WooCommerce kancalarını oluşturmak için kullanılır. WooCommerce mağaza sayfasını tamamen devre dışı bırakmak için ürünleri yazdırmaktan sorumlu döngüyü silmeniz yeterlidir:

 if (wc_get_loop_prop('toplam')) {
    while (have_posts()) {
        posta();
        do_action('woocommerce_shop_loop');
        wc_get_template_part('içerik', 'ürün');
    }
}

Burada daha fazla değişiklik yapabilirsiniz, ancak basitleştirmek için sadece döngüyü silip geri kalan her şeyi olduğu gibi bırakacağız. Daha fazla değişiklik yapmaya karar verirseniz, do_action() işlevlerinden bazılarını kaldırırsanız, ilgili kısa kodun artık web sitesinin hiçbir sayfasında çalışmayacağını unutmayın.

Ürün yazdırma döngüsünü sildikten sonra, archive-product.php dosyası şöyle görünecektir:

 tanımlı('KESİNLİKLE') || çıkış;
get_header('mağaza');
do_action('woocommerce_before_main_content');
if (woocommerce_product_loop()) {
    do_action('woocommerce_before_shop_loop');
    // burada döngüyü sildik
    do_action('woocommerce_after_shop_loop');
} Başka {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('woocommerce_sidebar');
get_footer('mağaza');

Bu kadar! Varsayılan mağaza sayfası şablonunu devre dışı bıraktınız ve WooCommerce mağaza sayfasını programlı olarak düzenlediniz ! Artık boş bir mağaza sayfanız var, böylece kendinizinkini tasarlamaya başlayabilirsiniz.

2. WooCommerce mağaza sayfasının başlıklarını ve içeriğini programlı olarak özelleştirin

İçerik ve başlıklar, resimler, tablolar veya bağlantılar içerebilen herhangi bir HTML işaretlemesi olabilir. Veya harici bir JavaScript dosyasını çalıştırmak için boş bir kapsayıcı gibi bir şey. Bunun için, ürünleri mağaza sayfasında görüntülemek için kullanacağınız için WooCommerce kısa kodları hakkında temel bilgilere ihtiyacınız olacak. WC kısa kodlarına aşina değilseniz, bu kılavuza bir göz atın.

Şimdi, WC mağaza sayfasını düzenleyelim ve ürünleri en popüler, en çok satan, en çok puan alan ve sınıflandırmalara göre görüntüleyelim. Ek olarak, döngünün dışına bazı başlıkları ve içeriği nasıl ekleyeceğinizi göstereceğiz.

2.1 En popüler ürünleri görüntüleyin

En popüler ürünleri görüntülemek için alt temanızınarchive archive-product.php dosyasını düzenlemeniz gerekir. İlk önce, aşağıdaki kısa kodu kullanın

 [ products orderby="popularity" ]

Döngünün, siz onu silmeden önce olduğu yerde. # en popüler ürünleri göster: 2 sütunda 2 ürün

 do_action('woocommerce_before_shop_loop');
echo '<h1>EN POPÜLER!!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

Kısa kodda, daha sonra stilleri uygularken kullanabileceğiniz m-popular adlı bir sınıf ekleyeceksiniz. Yukarıdaki örnekte, 2 ürünü tek bir 2 sütun satırında gösterecek şekilde ayarladık (columns=”2″ limit=”2″) . Kısa kodları burada bir gönderide veya sayfada kullandığınız şekilde kullanamayacağınızı unutmayın.

Kısa kodların çalışması için do_shortcode() işlevini kullanmanız gerekir. Her şey yolunda gittiyse, şimdi mağaza sayfasında şunu görmelisiniz: özel mağaza sayfası

2.2 En çok satan ürünler

WooCommerce mağazasını programlı olarak özelleştirmenin başka bir yolu da ürünleri en çok satanlara göre sıralamaktır. Bunun için, kısa kodun yankılanmasının yanı sıra, basit bir HTML işaretlemesi ( <h1> ) kullanarak bazı içerikler ekleyeceksiniz. Burada, uygun HTML biçimiyle eşleşen başka herhangi bir içerik türü ekleyebilirsiniz.

En çok satan ürünleri bu sefer 2 satır ve 3 sütunlu bir düzende gösterelim. Bunu yapmak için, bunu önceki adım 2.1'de eklediğiniz echo do_shortcode() satırından hemen sonra yapıştırmanız yeterlidir:

 echo '<h1>En Çok Satanlar</h1>';
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Ve aldığınız şey şu: özel mağaza sayfası En popüler ürünler yerine yalnızca En çok satanlar eklemek istiyorsanız, 2.1'deki echo satırını 2.2'deki ile değiştirmeniz yeterlidir.

2.3 En çok oy alan ürünler

Şimdi kısa kodlarla biraz daha oynayalım ve en çok oy alan ürünleri gösterelim. Bu sefer, bir sınıftan daha fazla özniteliği olmayan bir kısa kod kullanacağız.

 echo '<h1>En Çok Oy Alan</h1>';
do_shortcode('[ top_rated_products class="t-rated" ]');

Bakalım bundan sonra neler olacak: özel mağaza sayfası Gördüğünüz gibi, WooCommerce varsayılan düzeni 4 sütuna sahiptir. Şimdilik böyle bırakalım, daha sonra tekrar geleceğiz.

2.4 Ürünleri mağaza sayfasında taksonomilere göre görüntüleyin

En çok satan veya en çok oy alan ürünleri göstermenin yanı sıra, bunları sınıflandırmalara göre de görüntüleyebilirsiniz. Örneğin, aşağıdaki kod, daha önce kullandığınız öznitelikleri kullanarak ancak sütun sayısını 5 olarak değiştirerek Posterler ve Giyim kategorileri için ürünleri yazdıracaktır.

 echo '<h1>Giyim sınıflandırması:</h1>';
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Poster sınıflandırması:</h1>'; echo '<h2>En iyi posterleri duvarınıza asın</h2>'; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

Ve şimdi archive-product.php dosyanız şu şekilde görünmelidir:

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</header>
<?php
if ( woocommerce_product_loop() ) {
	do_action('woocommerce_before_shop_loop');		
	
	echo '<h1>EN POPÜLER!!</h1>';
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>En Çok Satanlar</h1>'; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>En Çok Oy Alan</h1>'; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>Giyim sınıflandırması:</h1>'; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Poster sınıflandırması:</h1>; echo '<h2>En iyi posterleri duvarınıza asın</h2>'; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action('woocommerce_after_shop_loop'); } else { do_action( 'woocommerce_no_products_found'); } do_action('woocommerce_after_main_content'); do_action('woocommerce_sidebar'); get_footer('mağaza');

Bu noktada, herhangi bir tasarım gereksinimini karşılayabilecek özel bir mağaza sayfası oluşturmak için tüm WooCommerce kısa kodlarını ve özelliklerini nasıl kullanacağınızı anlayabilmelisiniz.

2.5 Functions.php'de WC mağaza sayfasını özelleştirin

WooCommerce mağaza sayfasını programlı olarak özelleştirmek istiyorsanız, functions.php dosyasını da düzenleyebilirsiniz. Ürünler döngüsünün dışındaki içerik için, archive-product.php dosyasında görülen bazı kancaları kullanabilir ve bunları alt temanın functions.php dosyasından çalıştırabilirsiniz. Bu şekilde, WC şablon dosyalarını güncellemeye karar verse bile betiklerinizin çalışmaya devam edeceğinden emin olursunuz.

Bu örnek için başlık, alt başlık, açıklama ve başlık içeren özel bir başlık ekleyelim. Bu betiği alt temanın functions.php dosyasına yapıştırın:

 add_action('woocommerce_before_shop_loop','shop_main_heading');
işlev shop_main_heading(){
	$içerik = '';
	$content.='<h1>Muhteşem alışveriş sayfama hoş geldiniz!</h1>'; 
	$content.='<h2>Tek başıma sevgiyle inşa ettim</h2>';
	$content.='<p>Geçtiğiniz ve web sitemin mağaza sayfasını ziyaret ettiğiniz için teşekkürler, lütfen en çok beğendiğiniz ürünlere göz atın ve hepsini satın alın</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	echo $içerik;
}

Mağaza sayfanız şu şekilde görünecektir: özel mağaza sayfası Aynı şekilde, mağaza sayfasının sonunda bazı içerikleri görüntülemek için woocommerce_after_shop_loop kancasını kullanabilirsiniz.

3. Satır başına ürün sayısını düzenleyin ve WC mağaza sayfasına bir CSS stil sayfası uygulayın

Şimdiye kadar ürünleri görüntüleyebilmeli, öne çıkanlara, taksonomilere, en çok satanlara ve WooCommerce kısa kodlarını kullanarak istediğiniz herhangi bir şekilde sıralayabilmelisiniz. Bunun da ötesinde, mağaza sayfanızda istediğiniz herhangi bir yere her türlü içeriği ekleyebilmelisiniz. Peki ya daha da ileri gidip mağaza sayfanızı bir sonraki düzeye taşıyabilseydiniz? WooCommerce mağaza sayfanızı programlı olarak özelleştirmek için şablon düzenini düzenleyebilir ve bazı CSS stilleri ekleyebilirsiniz.

3.1 Satır başına varsayılan sütun sayısını düzenle

WC kısa kodunun sütun niteliğini belirtirseniz, her satırın gösterileceği ürün sayısını ayarlayabilirsiniz. Ek olarak, limit özniteliği ile kısa kod için toplam ürün sayısını ayarlayabilirsiniz:

 [ product orderby=”popularity” columns=”3” limit=”3” ]

Ancak, column özniteliğini tanımlamazsanız, alt temanın functions.php dosyasındaki bu betiği kullanarak her satır için yazdırmak istediğiniz ürün sayısını ayarlayabilirsiniz.

 add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
    function loop_columns() {
        satır başına 4 ;//4 ürün döndürür
    }
}

Bu, yalnızca WooCommerce kısa kodunda bir sütun özelliği yoksa, satır başına görüntülenen varsayılan ürün sayısını değiştirir.

3.2 Mağaza sayfasına bazı CSS Stilleri uygulayın

WooCommerce mağaza sayfasına biraz CSS uygulamak için, komut dosyalarınızı şu şekilde şablon dosyasına ekleyebilirsiniz:

 <stil>
* {
    arka plan rengi:#a2bcff;
}
</style>

Bu, küçük CSS parçaları için uygundur, ancak önerilen bir uygulama değildir. CSS Stilini WordPress yöntemiyle uygulamak için, komut dosyalarınızı farklı bir dosyadan yüklemek için wp_enqueue_scripts kancasını kullanmanız gerekir.

Bu örnek için, bu dosyaya shop_style.css adını vereceğiz ve onu alt tema ana klasörümüzde, varsayılan style.css dosyasıyla aynı hiyerarşi düzeyinde saklayacağız. Bu dosyayı oluşturduktan sonra, aşağıdaki betiği functions.php dosyanıza yapıştırın:

 add_action('wp_enqueue_scripts', 'quadlayers_enqueue_css');
işlev quadlayers_enqueue_css(){    
    if( is_shop() ):
    wp_enqueue_style('checkout_style',
        get_stylesheet_directory_uri() . '/shop_style.css'
    );
    endif;
}

Gördüğünüz gibi, shop_style.css dosyasını kuyruğa almak için if(is_shop()): koşulunun true olması gerekir. Bu dosyada, yalnızca mağaza sayfasına uygulamak istediğiniz tüm stil komut dosyalarına sahip olacaksınız. Bu, komut dosyalarını tüm web sitesi ön ucuna uygulayacak olan alt temadaki style.css dosyasından farklıdır. Bu kılavuz için aşağıdaki shop_style.css dosyasını kullanacağız, ancak CSS komut dosyalarınızı kullanmaktan veya bunu değiştirmekten çekinmeyin:

 div.storefront-sorting:nth-child(2){
	metin hizalama:merkez;
} 
#main div.storefront-sıralama h1{
	yazı tipi stili:normal;
}
#ana h1,#ana h2{
	yazı tipi ağırlığı: daha kalın;
	yazı tipi stili: eğik;
	metin hizalama:merkez;
}
#main > .m-popüler,#main > .b satıcıları,#main > .t dereceli,#main > .t-giyim,#main > .t-poster{	
	kenarlık: düz #b8b8b8 1 piksel;
	sınır yarıçapı: 25 piksel;
	kenar boşluğu-alt: 25 piksel;
	üst dolgu: 35 piksel;	
	sol dolgu: 20 piksel;
	dolgu-sağ: 20px;	
} 
#main > .m-popüler{
	arka plan rengi:#dbad97;	
}
#main > .b satıcıları {
	arka plan rengi:#b4e6a3;
}
#main > .t dereceli {
	arka plan rengi:#f0f695;	
}
#main > .t-giyim {
	arka plan rengi:#95b4f6;	
}
#main > .t-posterler {
	arka plan rengi:#c88fe5;	
}

CSS dosyasında özel sınıflar içeren bazı seçiciler bulacaksınız. Kısa kodları oluşturmadan önce onları oluşturduk. Örneğin, kısa koda "b-seller" sınıfını şöyle ekledik:

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

WooCommerce mağaza sayfasına CSS Stilini ekledikten sonra, şöyle bir şey elde edeceksiniz (tam boyutta görmek için resme tıklayın): Tam boyutta görmek için resmin üzerine tıklayın

Tam boyutta görmek için resmin üzerine tıklayın.

Ayrıca StoreFront temasının etkin olduğunu ve bildiğiniz gibi CSS seçicilerinin aynı temaya sahip olsalar bile her web sitesinde farklı olabileceğini unutmayın. Bu nedenle, bu dosyanın çalışması için sitenizin seçicilerini düzenlemeniz gerekebilir.

BONUS : Sayfa başına ürün sayısı nasıl değiştirilir?

Şimdi, mağaza sayfasında her sayfada görüntülediğiniz ürün sayısını değiştirmek istediğinizi varsayalım. Örneğin sayfa başına 10 ürün görüntülemek istiyorsanız, aşağıdaki kodu functions.php dosyasına eklemeniz yeterlidir:

 add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {
  $sütun = 10;
  $ sütunları döndür;
}

Burada $cols , Seçenekler -> Okuma'dan değeri alan ve her sayfada görüntülemek istediğiniz ürün sayısını veren sayfa başına ürün sayısını içerir.

4. WooCommerce mağaza sayfasının döngü dosyalarını düzenleyin

Şimdiye kadar, WooCommerce mağaza sayfasını programlı olarak özelleştirmek için archive-product.php şablon dosyasını nasıl düzenleyeceğinizi gördük. Bu dosya, sayfanın tüm ürünlerini görüntülemek için WC döngüsünün çalıştığı yerdir. Şimdi, eklenti düzenleyicide veya IDE'nizde WooCommerce eklenti klasörünü açın ve döngü klasörünü açın. archive-product.php dosyasıyla aynı seviyede bulacaksınız.

Döngü klasöründe, mağaza sayfasını daha da özelleştirmek için düzenleyebileceğiniz bazı dosyalar bulacaksınız. Bu dosyanın üzerine yazmak için alt temanızda klonlanmış bir klasör ve dosya oluşturmanız gerekir. Daha önce oluşturduğunuz WooCommerce klasörünüzün altında loop adlı yeni bir klasör oluşturun.

Bundan sonra, eklenti şablonlarından orijinal sale-flash.php dosyasını kopyalayın ve alt temanızdaki bu döngü klasörünün içine yapıştırın. Satışta olan tüm ürünlere animasyonlu bir gif eklemek için sale-flash.php dosyasını kullanacağız. Dosyaya bakarsanız, bir ürün satışa çıktığında “İNDİRİM” mesajını görüntülemekten sorumlu script olduğunu göreceksiniz.

4.1 Animasyonlu bir gif için varsayılan "satış" metnini değiştirin

Bu bölümde, varsayılan indirimde mesajını nasıl devre dışı bırakacağınızı ve onu hareketli bir gif ile nasıl değiştireceğinizi göstereceğiz. flash-sale.php dosyasını şöyle görünecek şekilde düzenlemeniz gerekir:

 tanımlı('KESİNLİKLE') || çıkış;
global $post, $ürün;
if ( $product->is_on_sale() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >';
   echo $an_gif;
}

Orada gif dosyasını beğendiğiniz başka bir gif ile değiştirebilirsiniz.

4.2 Sıralama seçeneklerini ve sayfalandırmayı kaldırın

Şimdi, WooCommerce mağaza sayfasındaki "sıralama ölçütü" seçicisinin ve sayfalandırma işlevinin nasıl devre dışı bırakılacağına bir göz atalım. sale-flash.php dosyasında yaptığınıza benzer şekilde, aynı ada sahip boş bir dosyayı kaydederek bunu başarabilirsiniz.

Her iki dosyayı da döngü klasöründe oluşturun ve onları orderby.php ve pagination.php olarak adlandırın. Her iki dosyayı da tamamen devre dışı bırakmak için bu komut dosyasını yalnızca her dosyaya koymalısınız:

 tanımlı('KESİNLİKLE') || çıkış;

Bunu yaptıktan sonra, mağaza sayfanızda daha temiz bir üstbilgi ve altbilgiye sahip olacaksınız. Bunun da ötesinde, çok sayıda ürün görüntülediğiniz için sayfalandırma çok kullanışlı olmayabilir. WooCommerce mağaza sayfasını programlı olarak düzenleyin - Sıralama ve sayfalandırma sale-flash.php dosyasında, varsayılan WooCommerce davranışını sildiğimizi ve animasyonlu bir gif görüntüleyerek kendimizinkini eklediğimizi unutmayın. Bu çok temel bir görevdir, ancak bu teknik ileri düzey geliştiriciler için çok çeşitli olanaklar sunar.

SON NOTLAR

  • Alt temanın WC şablon dosyaları, WooCommerce şablonların bir güncellemesini yayınlamaya karar verirse, üzerine yazmaları engellemez. Ancak, bu nadiren olur.
  • Bunlar örnek komut dosyalarıdır ve üretime alınmamalıdır, yalnızca didaktik amaçlara yöneliktirler.

Bonus: WooCommerce Mağaza Sayfasında Kategorileri Görüntüle

Son olarak, biraz kod kullanarak WooCommerce Mağaza Sayfasına nasıl kategori ekleyebileceğinizi görelim. Bu yöntem, kodlama becerisine sahip kullanıcılar için önerilir. PHP'nin yanı sıra, koda stil verebilmek için biraz CSS bilmeniz de önerilir.

NOT : Başlamadan önce sitenizi yedeklediğinizden emin olun ve henüz yoksa bir alt tema oluşturun.

Mağaza sayfasına Kategoriler ekleyin

Kontrol panelinizde Görünüm > Tema Düzenleyici'ye gidin ve alt tema functions.php dosyasını açın. Sağ Tema Dosyaları kenar çubuğundaki functions.php dosyasına tıklayın ve özel işlevlerinizi eklemek için aşağıdaki komut dosyalarını yapıştırın.

Aşağıdaki işlev, Mağaza sayfanızın diğer öğelerini yüklemeden önce ürün kategorilerinizi ekleyecektir. Bu, alışveriş yapanların ürün kataloğundan önce tüm ürün kategorilerinizi göreceği anlamına gelir.

 function ürün_alt kategorileri( $args = dizi() ) {
$parentid = get_queried_object_id();

$args = dizi(
'ebeveyn' => $parentid
);

$terms = get_terms('product_cat', $args);

if ( $terimler ) {
echo '<ul class="ürün-kediler">';

foreach ( $terms as $term ) {
echo '<li class="kategori">'; 
woocommerce_subcategory_thumbnail($term);
yankı '<h2>';
echo '<a href="' .esc_url( get_term_link( $term ) ) .'" class="' . $term->slug .'">';
echo $term->ad;
yankı '</a>';
yankı '</h2>';
yankı '</li>';
}

yankı '</ul>';
}

}

add_action( 'woocommerce_before_shop_loop', 'product_subcategories', 50 );

Bu işlev, Kategorilerinizi WooCommerce Shop sayfasına ekleyecektir. Ancak, tam olarak istediğiniz gibi görünmeyebileceklerini unutmayın, bu nedenle yeni kategoriler bölümünü biraz CSS ile biçimlendirmeniz gerekecek. Bununla ilgili daha fazla bilgi için, mağaza sayfasında kategorilerin nasıl görüntüleneceği ve stillendirileceği hakkındaki gönderimize göz atın.

Çözüm

Sonuç olarak, alışveriş sayfası son derece önemlidir ve mağazanızı yapabilir veya bozabilir. Bu nedenle, kodlama becerileriniz varsa , WooCommerce mağaza sayfasını programlı olarak düzenlemenizi ve dönüşüm oranlarınızı artırmak için optimize etmenizi öneririz.

Bu kılavuzda, mağazanızın farklı yönlerini nasıl ekleyeceğinizi, kaldıracağınızı ve özelleştireceğinizi gösterdik. Ancak bunlar, ilham almanıza ve mağazanızı bir sonraki seviyeye taşımanıza yardımcı olabilecek bazı örnekler ve fikirlerdir. Şimdi oynamanın ve özelleştirmelerinizi geliştirmenin zamanı geldi.

WooCommerce mağazanızı özelleştirmek için daha fazla kılavuz için şunları kontrol etmenizi öneririz:

  • WooCommerce AJAX sepete ekleme
  • Ödeme sayfasına özel alanlar nasıl eklenir?
  • WooCommerce programlı olarak sepete ekle işlevi

Son olarak, Facebook Shop'u WooCommerce ile bağlamak istiyorsanız, bu eksiksiz kılavuza bir göz atmalısınız. Çevrimiçi mağazanızı özelleştirdiniz mi? Neyi değiştirdin? Herhangi bir sorunuz varsa, aşağıya bir yorum bırakın, size yardımcı olmak için elimizden geleni yapacağız! Ayrıca Github'da tam kodu kontrol edebilirsiniz.