WooCommerce Ürünleri Kategoriye Göre Nasıl Görüntülenir

Yayınlanan: 2020-08-16

Kategoriye Göre WooCommerce Görüntüleme Ürünleri Bir WooCommerce mağazası mı işletiyorsunuz ve ürünleri WordPress'te kategoriye göre mi görüntülemek istiyorsunuz? Bu gönderi, WooCommerce ürünlerinin kategoriye göre nasıl görüntüleneceği hakkında ayrıntılı bir açıklamaya sahiptir. WooCommerce'e aşina iseniz, ürün kategorilerinin, ürünlerinizi müşterileriniz tarafından uygun şekilde teşhir ve erişim için organize etmede önemli bir rol oynadığını bilirsiniz.

WooCommerce Ürünlerini Kategoriye Göre Görüntüle

Kutudan çıktığı anda, WooCommerce size ürünler, kategoriler veya alt kategoriler veya hem ürünler hem de kategoriler gibi arşiv sayfalarınızda neleri görüntüleyebileceğiniz konusunda birkaç seçenek sunar. Ancak, çoğu WooCommerce kullanıcısı hem ürünleri hem de kategorileri/alt kategorileri görüntülemek için üçüncü seçeneği tercih eder. woocommerce kategorilerini sırala

Bu seçenek, ziyaretçinizin ya doğrudan ana sayfadan ürünleri seçmesine ya da bir ürün kategorisi arşivine tıklayarak aramalarını daraltmasına olanak tanır.

Bununla birlikte, bunun ana dezavantajı, kategorileri/alt kategorileri ikisi arasında ayrım yapmadan birlikte göstermesidir. Bu, farklı görüntü boyutları nedeniyle yerleşimin biraz dağınık görünmesini sağlar.

Uzman bir bakış açısıyla, görselleriniz aynı boyutta olsa bile, arşiv sayfasındaki satırlardan biri hem kategorileri hem de ürünleri içeriyorsa, kategoriler için 'Sepete Ekle' düğmesinin olmaması o satırın düzensiz görünmesine neden olur. tüm öğeleri aynı boyutlara sahip değildir.

Bu kısa eğitimde, ürünleri göstermeden önce kategorilerin ayrı bir listede nasıl görüntüleneceğini öğreneceksiniz.

  • Arşiv sayfalarında kategorilerin ve alt kategorilerin çıktısını almak için kullanılan WooCommerce'deki kodu tanımlayın veya ayırt edin.
  • Kod için özel bir eklenti oluşturun.
  • Kategorileri veya alt kategorileri ürün listelemelerinin önüne koyacak bir fonksiyon yazın.
  • Çıktı için özel bir stil oluşturun.

a) Hem Ürünleri hem de Kategorileri veya Alt Kategorileri Görüntüle

Hem Ürünleri hem de Kategorileri veya Alt Kategorileri Görüntüleme Adımları.

  1. WordPress sitenize giriş yapın ve yönetici kullanıcı olarak Gösterge Tablosuna erişin.
  2. Pano menüsünden Görünüm Menüsü > Özelleştir'e tıklayın. Mağaza sayfasına tıklayın ve WooCommerce > Ürün Kataloğu'nu seçin. Mağaza Teşhir seçeneğinde, Kategorileri ve ürünleri göster 'i seçin. Kategori görüntüleme seçeneğinde, aşağıda gösterildiği gibi alt kategorileri ve ürünleri göster'i seçin: WooCommerce Ürünlerini Kategoriye Göre Görüntüle
  3. Yaptığınız değişiklikleri kaydetmeyi unutmayın.
  4. Bu sonuç olacaktır: WooCommerce Ürünlerini Kategoriye Göre Görüntüle

b) WooCommerce Ürün Kategorisini Görüntüle

Ancak, function.php dosyasına yerleştirilmesi gereken aşağıdaki kod parçacığını kullanarak WooCommerce Ürün Kategorisini görüntüleyebilirsiniz.

WooCommerce Ürün Kategorisini Görüntüleme Adımları

İşte izlemeniz gereken adımlar:

  1. WordPress sitenize giriş yapın ve yönetici kullanıcı olarak Gösterge Tablosuna erişin.
  2. Dashboard menüsünden Görünüm Menüsü > Tema Düzenleyici seçeneğine tıklayın Tema Düzenleyici sayfası açıldığında WooCommerce Ürün kategorisini gösterecek işlevi ekleyeceğimiz tema işlevleri dosyasını arayın.
  3. php dosyasına aşağıdaki kodu ekleyin :
 function woocommerce_product_category( $args = dizi() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = dizi(

             'ebeveyn' => $woocommerce_category_id
  );

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

  if ( $terimler ) {

             echo '<ul class="woocommerce-categories">';

             foreach ( $terms as $term ) {

             echo '<li class="woocommerce-product-category-page">';

            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', 'woocommerce_product_category', 100 );
  1. Bu Sonuç olacaktır: WooCommerce Ürünlerini Kategoriye Göre Görüntüle

Ancak, ürünleri iyi gösterebilmesi için bazı özel CSS'lere ihtiyacı var. Bunu daha sonra bu eğitimde yapacağız.

Kod Nasıl Çalışır?

Bu kod, ürünleri çıkaran döngüyü çalıştırmadan önce kategorilerin veya alt kategorilerin çıktısını veren woocommerce_product_category() function kullanarak çalışır. İşlev takılabilir olduğundan temayı geçersiz kılabilir.

c) WooCommerce Ürün Kategorisinin Alt Kategorilerini Listeleyin

Ana ürün kategorisi bilgisinden yararlanan özel bir işlev kullanarak WooCommerce ürün kategorilerinin alt kategorisini elde etmek çok kolaydır.

WooCommerce Ürün Kategorisinin Alt Kategorilerini Listeleme Adımları

  1. WordPress sitenize giriş yapın ve yönetici kullanıcı olarak Gösterge Tablosuna erişin.
  2. Pano menüsünden Görünüm Menüsü > Tema Düzenleyici'ye tıklayın Tema Düzenleyici sayfası açıldığında, bir WooCommerce Ürün Kategorisinin Alt Kategorilerini Listeleyecek işlevi ekleyeceğimiz tema işlevleri dosyasını arayın.
  3. php dosyasına aşağıdaki kodu ekleyin :
 function woocommerce_get_product_category_of_subcategories( $category_slug ){

$terms_html = dizi();
$taksonomi = 'product_cat';
$parent = get_term_by( 'sümüklü böcek', $category_slug, $taksonomi);
$children_ids = get_term_children( $parent->term_id, $taksonomi);

foreach($children_ids as $children_id){

    $term = get_term( $children_id, $taksonomi);

    $term_link = get_term_link( $term, $taksonomi);

    if ( is_wp_error( $term_link ) ) $term_link = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->ad . '</a>';
}

'<span class="subcategories-' . $category_slug .'">' döndür. implode(',', $terms_html ) . '</span>';

}
  1. Bu Sonuç olacaktır: WooCommerce Ürün kategorisinin Alt Kategorilerini Listeleme

Kod nasıl çalışır.

WP_Term nesnesi, ürün kategorisi üst öğesini alır. Ardından, bir dizideki alt kimliği alır ve son olarak, alt kategoriler, alt kimlik dizisi boyunca bir döngü çalıştırarak HTML'de görüntülenir.

d) Arşivlerdeki Kategorileri ve Ürünleri Çıkarmak için WooCommerce Kullandığı Kodu Tanımlama

Bir eklenti oluşturmadan önce, ilk adım kesinlikle WooCommerce'in kategorileri ve alt kategorileri nasıl çıkardığını belirlemektir. Bu, ilgili işlevi bulmak için WooCommerce kaynak kodunu manuel olarak aramamız gerektiği anlamına gelir.

İşlemi sizin için basitleştirmek için, şablonlar klasöründe archive-product.php aramanız yeterlidir. Bu, WooCommerce'in arşiv sayfalarını görüntülemek için kullandığı dosyadır. Şimdi kategorileri ve ürünleri veren kodu bulmanız gerekiyor:

 <?php
/**
* woocommerce_before_shop_loop kancası
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/

do_action('woocommerce_before_shop_loop');
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php wc_get_template_part( 'içerik', 'ürün'); ?>

<?php bitiş zamanı; // döngünün sonu. ?>

<?php woocommerce_product_loop_end(); ?>

Kod Nasıl Çalışır:

woocommerce_product_subcategories() function , ürünleri çıkaran döngüyü çalıştırmadan önce kategorilerin veya alt kategorilerin çıktısını verir. Dikkatinizi bu fonksiyona çekmemin sebebi takılabilir olması, yani temamızda onu geçersiz kılabileceğimiz anlamına geliyor.

Bununla birlikte, WooCommerce, varsayılan ekranla bir satırın başında görünecek olan öğeleri temizlemek için yerleşik bir stile sahip olduğundan bu çalışmaz. Yani ne yapmalıyız? Cevap basit. Sadece ürünlerin görüntülenmesi için arşiv sayfalarımızda kategori ve alt kategorilerin gösterimini kapatmamız gerekiyor.

Bundan sonraki adım, ürün kategorilerini veya alt kategorilerini çıkaran ve onu woocommerce_before_shop_loop action yeni bir işlev oluşturmaktır, bu eyleme zaten bağlı olan işlevlerden sonra harekete geçmesi için yüksek bir öncelik kullandığımızdan emin olun.

Bununla birlikte, WooCommerce'in her üçüncü ürün listesine temizleme eklediğini unutmamak önemlidir. Bu, kategorileri görüntülemek için woocommerce_product_subcategories() function veya onun düzenlenmiş bir sürümünü kullanamayacağımız anlamına gelir. Bunun açıklaması, kategorileri ayrı ayrı görüntülemek için bu işlevi kullandığımızda bile, bu işlevin listelenen üçüncü, altıncı (ve benzeri) kategoriyi veya ürünü sileceğidir. Bu, onu geçersiz kılacak bir işlev oluşturmamız gerektiği anlamına gelir. Bu, bir eklenti oluşturarak yapılabilir.

e) Eklentiyi Oluşturma

Önce yeni bir eski oluşturmanız ve buna wp-content/plugins dizininde benzersiz bir ad vermeniz gerekir. Bu örnekte, ihtiyacımız olan işlevselliği elde edebilmeniz için adımları uygularken dikkatli olun. Bu ismi njengah-separate-products-categories-in-archives olarak kullanacağım.

Bu klasörün içinde, yine benzersiz bir adla yeni bir dosya oluşturmanız gerekir. Aynı adı bu klasör için de kullanacağım njengah-separate-products-categories-in-archives.php .

Eklenti Oluşturma Adımları

  1. Dosyanızı açın ve aşağıdaki kodu ekleyin:
 <?php
/**
* Eklenti Adı: WooCommerce Ürün Kategorisi
* Açıklama: WooCommerce ürün sayfalarında WooCommerce kategorilerini görüntüleyin

**/
  1. Fonksiyonumuzu yazmadan önce WordPress sitenize giriş yaparak admin ekranlarındaki kategori listelerini kapatmanız ve admin kullanıcısı olarak Dashboard'a erişmeniz gerekmektedir.
  2. Pano menüsünden Görünüm Menüsü > Özelleştir'e tıklayın. Mağaza sayfasına tıklayın ve WooCommerce > Ürün Kataloğu'nu seçin. Mağaza Teşhir seçeneğinde Ürünleri göster 'i seçin. Kategori görüntüleme seçeneğinde Ürünleri göster 'i seçin.
  3. Yaptığınız değişiklikleri kaydetmeyi unutmayın.
  4. Bu sonuç olacaktır: WooCommerce Ürünlerini Kategoriye Göre Görüntüle
  5. Bunu eklenti dosyasına ekleyin :
 function njengah_product_subcategories($args = dizi()) {

}

add_action( 'woocommerce_before_shop_loop', 'njengah_product_subcategories', 50 );
  1. Ardından, işleve bu kodu eklemeniz gerekir:
  2.  $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>';

}

    Bu sonuç olacaktır: WooCommerce Ürünlerini Kategoriye Göre Görüntüle

Yukarıdaki resimden de görebileceğiniz gibi, kategoriler iyi organize edilmemiş. Bu, özel stilimizi eklememiz gerektiği anlamına gelir. Ancak bundan önce kodun nasıl çalıştığını öğrenelim.

Kod Nasıl Çalışır?

Oluşturduğumuz işlev, sorgulanan geçerli nesneyi tanımlar ve kimliğini $parentid olarak tanımlar. Ardından, o anda sorgulanan öğeyle terimleri üst öğeleri olarak tanımlamak için get_terms() 'i kullanır. Bu ana mağaza sayfasıysa, üst düzey kategorileri döndürür ve bu bir kategori arşiviyse alt kategorileri döndürür.

Ayrıca fonksiyon, her döngü için bir a ve bir ul elemanı açmadan önce herhangi bir terim olup olmadığını kontrol eder. Bu, her terim için bir li öğesi oluşturduğu ve ardından category image using woocommerce_subcatgeory_thumbnail() ve ardından arşiv bağlantısındaki kategori adını çıkardığı anlamına gelir.

Kategori Listelerini Stillendirme Adımları

Bunlar, izlemeniz gereken adımlardır, ancak bunu yapmak için eklentimizin içinde sıraya koymamız gereken bir stil sayfasına ihtiyacımız var.

  1. CSS adlı bir klasör oluşturun ve bunun içinde CSS adlı bir dosya oluşturun. Bunun çalışması için eklenti klasöründe yapılmalıdır.
  2. Bu kodu, oluşturduğunuz işlevin en üstüne ekleyin :
 function njengah_product_cats_css() {




/* stil sayfasını kaydet */

wp_register_style( 'njengah _product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );




/* stil sayfasını sıraya koy */

wp_enqueue_style(' njengah _product_cats_css');




}




add_action('wp_enqueue_scripts', 'njengah _product_cats_css');
  1. Bir sonraki adım, stil sayfanızı açmak ve aşağıdaki kodu eklemektir. Bununla birlikte, WooCommerce'in mobil öncelikli stil kullandığını unutmamak önemlidir, bu yüzden biz de bunu kullanacağız.
 ul.product-cats li {
liste stili: yok;
sol kenar boşluğu: 0;
kenar boşluğu-alt: 4.236em;
metin hizalama: merkez;
pozisyon: göreceli;
}

ul.product-cats li img {
kenar boşluğu: 0 otomatik;
}


@medya ekranı ve (min-width:768px) {

ul.product-cats {
sol kenar boşluğu: 0;
ikisini de temizle;
}

ul.product-cats li {
genişlik: %29.4117647059;
yüzer: sol;
marj-sağ: %5.8823529412;
}

ul.product-cats li:nth-of-type(3) {
sağ kenar boşluğu: 0;
}

}
  1. Bu sonuç olacaktır: WooCommerce Ürünlerini Kategoriye Göre Görüntüle

Çözüm

Bu yazıda, WooCommerce ürünlerini kategoriye göre gösterebileceğiniz farklı yolları vurguladım. Bu kısa eğitimden, ürün kategorilerinin WooCommerce'de neden harika bir özellik olduğunu anlayabilirsiniz, ancak görüntülenme biçimleri her zaman ideal değildir.

Ek olarak, ürün listelemelerinden ayrı olarak ürün kategorileri veya alt kategoriler çıkaran bir eklentinin nasıl oluşturulacağını ve kategori listelerinin nasıl şekillendirileceğini öğrendiniz. Bu öğreticinin en göze çarpan kısmı, işlevi WooCommerce şablon dosyasındaki farklı bir eylem kancasına bağlayarak sayfada bir kategori veya alt kategori listesi çıkaran özel eklentinin oluşturulmasıdır.

Benzer Makaleler

  1. Varsayılan Ürün Sıralaması Nasıl Kaldırılır WooCommerce
  2. WooCommerce'de Mevcut Ürün Kategori Adı Nasıl Alınır
  3. WooCommerce ile Dijital Ürünler Nasıl Satılır?
  4. Daha İyi Kullanıcı Deneyimi için WooCommerce Kategorileri Nasıl Sıralanır?
  5. WooCommerce'de Ürünlere GTIN Numaraları Nasıl Eklenir?
  6. WooCommerce Ürün Sayfasından Miktar Alanını Gizle veya Kaldır
  7. WooCommerce Kupon Kodu Alanı Nasıl Gizlenir
  8. WooCommerce'de Fiyattan Önce Metin Nasıl Eklenir » Fiyattan Önce Metin Eklenir
  9. WooCommerce'de Ürün Fiyatını Programlı Olarak Nasıl Değiştirirsiniz?
  10. WooCommerce'de Resmin Altına Açıklama Nasıl Taşınır?
  11. WooCommerce Ürün Resminde Yakınlaştırma Etkisi Nasıl Kaldırılır
  12. WooCommerce'de Fiyattan Sonra Açıklama Nasıl Eklenir
  13. WooCommerce Ürün Resimleri Nasıl Yeniden Boyutlandırılır
  14. WooCommerce'de Bir Ürün Nasıl Gizlenir veya Ürünleri Kategoriye veya Rollere Göre Gizlenir