Wooocommerce ürünlerini kategoriye göre nasıl gösterilir
Bu kısa öğreticide, ürünü göstermeden önce bir kategorinin ayrı bir listede nasıl görüntüleneceğini öğreneceksiniz.
Arşiv sayfasında kategorileri ve alt kategorileri görüntülemek için kullanılan WooCommerce’deki kodları tanımlama veya ayırt edin.
Kod için özel bir eklenti oluşturun.
Ürün listesinin önüne kategoriyi veya alt kategoriyi yerleştirecek bir işlev yazın. Çıktı için özel bir stil yapın.
a) Ürünleri ve kategorileri veya alt kategorilerin görüntülenmesi, ürünleri ve kategorileri veya alt kategorileri görüntülemek için adımlar.
WordPress sitenizi girin ve yönetici kullanıcısı olarak gösterge tablosuna erişin.
Gösterge Tablosu menüsünden görünüm menüsüne tıklayın> Özelleştir. Mağaza sayfasına tıklayın ve WooCommerce> Ürün Kataloğu’nu seçin. Mağaza Ekran seçeneğinde Kategorileri ve Ürünleri Göster’i seçin. Kategori Ekran seçeneğinde, aşağıda gösterildiği gibi alt kategoriyi ve ürünleri gösterin:
Yaptığınız değişiklikleri kaydetmeyi unutmayın. Sonuç bu olacak:
b) Woocommerce ürün kategorilerini gösterin, ancak WooCommerce ürün kategorisini, functions.php dosyasına yerleştirilmesi gereken aşağıdaki kod fragmanını kullanarak görüntüleyebilirsiniz. WooCommerce Ürün kategorisini görüntüleme adımları, izlemeniz gereken adımlardır:
WordPress sitenizi girin ve yönetici kullanıcısı olarak gösterge tablosuna erişin.
Gösterge Tablosu menüsünden, Tema Düzenleyicisi sayfası açık olduğunda görünüm menüsü> Tema Düzenleyicisi’ne tıklayın, WooCommerce ürün kategorisini görüntüleyecek bir işlev ekleyeceğimiz işlevler dosyalarını arayın.
PHP dosyasına aşağıdaki kodu ekleyin:
İşlev wooocommerce_product_category ($ args = array ()) {
$ wooocommerce_category_id = get_qued_object_id ();
$ args = dizi (
‘Ebeveyn’ => $ wooocommerce_category_id
);
$ term = get_terms (‘ürün_cat’, $ args);
İf ($ cound) {
echo ‘
‘;
foreach ($ olarak $ dönem) {
echo ‘
‘; wooocommerce_subcategory_thumbnail ($ terim);
echo ‘
‘;
echo ‘ slug.’ “> ‘;
echo $ term-> adı;
Gema ‘‘;
echo ‘
‘;
yankılar ‘
‘;
}
yankılar ‘
‘;
}
}
Add_action (‘wooocommerce_beefore_shop_loop’, ‘wooocommerce_product_category’, 100);
Sonuç bu olacak:
Ancak, ürünü iyi görüntülemek için bazı özel CSS’ye ihtiyaç duyar. Bunu daha sonra bu öğreticide yapacağız.
Bu kodun çalışma şekli yalnızca ürünü yayınlayan bir döngü çalıştırmadan önce bir kategori veya alt kategori yayınlayan Woocommerce_product_category () işlevini kullanarak çalışır. Temayı bir kenara bırakabilir, çünkü işlevi yüklenebilir. c) WooCommerce ürün kategorisinin alt kategorilerinin listesi, ana ürün kategorisinin sümüğünü kullanan özel bir işlev kullanarak WooCommerce ürün kategorisinin bir alt kategorisini almak çok kolaydır. WooCommerce Ürün kategorisinden alt kategorileri kaydetme adımları
Gösterge Tablosu menüsünden, Görünüm Menüsü> Tema Düzenleyicisi’ni tıklayın, Tema Düzenleyicisi sayfası açık olduğunda, WooCommerce Ürün kategorisinin alt kategori listesi olacak bir işlev ekleyeceğimiz tema işlevi dosyasını arayın.
PHP dosyasına aşağıdaki kodu ekleyin:
Woocommerce_get_product_category_ooof_subcategories işlevi ($ category_slug) {
$ term_html = array ();
$ taksonomi = ‘ürün_kucing’;
$ ebeveyn = get_term_by (‘slug’, $ category_slug, $ taksonomi); $ child_ids = get_term_children ($ ebeveyn-> term_id, $ taksonomi);
foreach ($ Children_ids olarak $ Children_id) {
$ term = get_term ($ Children_id, $ taksonomi);
$ term_link = get_term_link ($ terim, $ taksonomi);
if (is_wp_error ($ term_link)) $ term_link = ”;
$ term_html [] = ‘ slug.’ “> ‘. $ terim-> isim. ‘‘;
}
geri ”. Improde (‘,’, $ term_html). ”;
}
Sonuç bu olacak:
Kod nasıl çalışır. WP_Term Nesnesi bir üst ürün kategorisi alır. Daha sonra, bir satırda bir çocuk kimliği alır ve son olarak, çocuk kategorisi bir çocuk kimliği üzerinden bir döngü çalıştırarak HTML’de görüntülenir.
d) WooCommerce tarafından arşivde kategoriler ve ürünler üretmek için kullanılan kodu bir eklenti oluşturmadan önce tanımlamak, kesin olan ilk adım WooCommerce’in kategorileri ve alt kategorileri nasıl serbest bıraktığını belirlemektir. Bu, ilgili işlevleri bulmak için WooCommerce kaynak kodunu manuel olarak aramamız gerektiği anlamına gelir. İşlemi basitleştirmek için, şablon klasöründeki arşiv-ürünü arayın. Bu, WooCommerce tarafından arşiv sayfasını görüntülemek için kullanılan bir dosyadır. Artık kategorileri ve ürünleri görüntüleyen bir kod bulmanız gerekiyor: <? PHP
/** * kanca wooocommerce_beefore_shop_loop
*
* @Hoohed woocommerce_result_cout – 20
* @Hoohed woocommerce_catalog_ordering – 30
*/
do_ace (‘wooocommerce_beefore_shop_loop’);
?>
Kod nasıl çalışır: wooCommerce_product_subcategories () işlev işlevi, bir ürün yayınlayan bir döngü çalıştırmadan önce bir kategori veya alt kategori yayınladı. Dikkatinizi bu işleve çekmemin nedeni, bu işlevin takılabilmesidir, yani temamıza gelebileceğimiz anlamına gelir.
Ancak, WooCommerce’in varsayılan ekranla satırın başında görünecek olan öğeleri silmek için varsayılan bir kuvvete sahip olduğundan bu çalışmaz. Yani ne yapmalıyız? Cevap basit. Arşiv sayfalarımızdaki kategorilerin ve alt kategorilerin görünümünü kapatmamız gerekir, böylece yalnızca ürünler görüntülenir. Bundan sonra, bir sonraki adım, ürün kategorisini veya alt kategorisini görüntüleyen yeni bir işlev oluşturmak ve WooCommerce_Before_Shop_Loop eylemine bağlamak, eyleme bağlı işlevden sonra etkinleştirilecek şekilde yüksek öncelik kullandığımızdan emin olmaktır.
Ancak WooCommerce’in her üçüncü ürün listesine temizlik eklediğini belirtmek önemlidir. Bu, kategoriyi görüntülemek için düzenlenmiş olan woocommerce_product_subcategories () işlevini veya sürümünü kullanamayacağımız anlamına gelir. Açıklama, bu işlevin kategorileri ayrı ayrı görüntülemek için kullandığımızda bile, bu işlevin üçüncü kategoriyi veya ürünü altıncı (ve benzeri) sileceğidir. Bu, buna başlayacak bir işlev yapmamız gerektiği anlamına gelir. Bu bir eklenti yapılarak yapılabilir. e) Eklentinizi yapmak önce yeni bir tane yapmalı ve WP-Content/Eklentiler Dizini’nde benzersiz bir isim vermelidir. Bu örnek için, ihtiyacımız olan işlevselliği elde edebilmeniz için adımları izlerken dikkatli olun. Bu adı Njengah-Ayrılmış-Yapım-Üretim Kategorileri DeSkives’i kullanacağım. Bu klasörde, bir kez daha benzersiz bir adla yeni bir dosya oluşturmanız gerekiyor. Bu klasör için aynı adı kullanacağım Njengah-Ayrılmış Ürünler-İncess-In-DesKives.php. Bir eklenti yapmak için adımlar
Dosyanızı açın ve aşağıdaki kodu ekleyin:
<? Php
/**
* Eklenti Adı: WooCommerce Ürün Kategorisi
* Açıklama: Woocommerce ürün sayfasındaki Woocommerce kategorisini görüntüler
**/
İşlevlerimizi yazmadan önce, WordPress sitenize girip yönetici kullanıcısı olarak gösterge paneline erişerek yönetici ekranındaki kategoriler listesini kapatmanız gerekir.
Gösterge Tablosu menüsünden görünüm menüsüne tıklayın> Özelleştir. Mağaza sayfasına tıklayın ve WooCommerce> Ürün Kataloğu’nu seçin. Mağaza Ekran seçeneğinde, Ürünleri Görüntüle’yi seçin. Kategori Ekran seçeneğinde ürünü göster seçeneğini seçin.
Yaptığınız değişiklikleri kaydetmeyi unutmayın. Bu sonuç olacaktır:
Bunu eklenti dosyasına ekleyin:
İşlev njengah_product_subcategories ($ args = array ()) {
}
Add_action (‘wooocommerce_beefore_shop_loop’, ‘njengah_produuk_subkategory’, 50);
Ardından bu kodu işleve eklemeniz gerekir:
$ parentID = get_qued_object_id ();
‘Ebeveyn’ => $ ParentID
);
$ term = get_terms (‘ürün_cat’, $ args);
İf ($ cound) {
echo ‘
‘;
foreach ($ olarak $ dönem) {
echo ‘
‘;
wooocommerce_subcategory_thumbnail ($ terim);
echo ‘
‘;
echo ‘ slug.’ “> ‘;
echo $ term-> adı;
Gema ‘‘;
echo ‘
‘;
yankılar ‘
‘;
}
yankılar ‘
‘;
} Bu sonuç olacak:
Yukarıdaki resimden de görebileceğiniz gibi, kategori iyi organize edilmemiştir. Bu, özel tarzımızı eklememiz gerektiği anlamına gelir. Ancak, ondan önce, kodun nasıl çalıştığını öğrenelim. Yaptığımız işlevin işlevinin şu anda sorulan nesneyi tanımlamak ve kimliğini $ parentID olarak tanımlamaktır. Ardından, şu anda ebeveyn olarak istenen öğelerle terimi tanımlamak için get_terms () kullanın. Bu ana mağaza sayfasıysa, üst düzey kategoriyi geri yükler ve bu bir kategori arşivi ise, alt kategoriyi geri yükler.
Ek olarak, fonksiyon, UL’nin her döngüsü ve elemanı için A açmadan önce bir terim olup olmadığını kontrol eder. Bu, her terim için Li öğesinin bir öğesi oluşturduğu ve daha sonra WooCommerce_subcatgeory_thumbnail () kullanarak kategori görüntüsünü görüntülediği ve ardından arşivin bağlantısında kategorinin adını görüntülediği anlamına gelir. Bu kategoriler listesini düzenlemek için adımlar izlemeniz gereken adımlardır, ancak bunu yapmak için eklentimizde stil sayfasına ihtiyacımız var. Bu, bu işlev görmesi için eklenti klasöründe yapılmalıdır.
Bu kodu oluşturduğunuz işlevin üstüne ekleyin:
İşlev njengah_product_cats_css () {
/ * Stil sayfasını kaydet */
wp_register_style (‘njengah _product_cats_css’, plugins_url (‘css/style.css’, __file__));
wp_enqueue_style (‘njengah _product_cats_css’);
}
Add_action (‘wp_enqueue_scripts’, ‘njengah _product_cats_css’);
Bir sonraki adım, stil sayfanızı açmak ve aşağıdaki kodu eklemektir. Bununla birlikte, WooCommerce’in ilk mobil bir stil kullandığını belirtmek önemlidir, bu yüzden de kullanacağımız şey bu.
ul. ürün-kucing li {
Liste Stili: Hayır;
Marj-sol: 0;
Marj-Bawah: 4.236em;
Metnin hizalanması: orta;
Pozisyon: göreceli;
}
ul.Product-cats li img {
Marj: 0 otomatik;
}
@Media ekranı ve (min genişliği: 768px) {
ul. ürün-kucing {
Marj-sol: 0;
ikisini de temizle;
}
ul. ürün-kucing li {
Genişlik: 29.4117647059%;
şamandıra: sol;
Marj-Sağ: 5,8823529412%;
}
UR.Product-Cats li: Nth-Type (3) {
Marj-sağ: 0;
}
}
Sonuç bu olacak:
Sonuç Bu yazıda, WooCommerce ürünlerini kategorilere göre gösterebileceğiniz çeşitli yolları vurguladım. Bu kısa öğreticiden, ürün kategorisinin neden WooCommerce’de harika bir özellik olduğunu anlayabilirsiniz, ancak görüntülenme biçimleri her zaman ideal değildir. Buna ek olarak, ürün kategorilerini veya alt kategorilerinin ürün listesinden ayrı olarak görüntülenen bir eklentinin nasıl oluşturulacağını ve kategorilerin bir listesini nasıl düzenleyeceğinizi öğrendiniz. Bu öğreticinin en önemli kısmı, işlevleri Woocommerce şablonu dosyasındaki farklı eylemlerle ilişkilendirerek sayfada kategorilerin veya alt kategorilerin bir listesini görüntüleyen özel bir eklentinin oluşturulmasıdır. Varsayılan WooCommerce ürününün sıralanmasını silen makale töreni
Woocommerce’de mevcut ürün kategorisinin adını nasıl alabilirim
Wooocommerce ile dijital ürünler nasıl satılır
Daha iyi kullanıcı deneyimi için wooocommerce kategorisi nasıl sıralanır
Wooocommerce’deki ürüne GTIN numarası nasıl eklenir
WooCommerce Ürün sayfasından miktar alanını gizleyin veya silin
Wooocommerce Kupon Kodu Alanı Nasıl Gizlenir Wooocommerce’de fiyattan önce metin nasıl eklenir »Fiyattan önce metin ekleyin
WOOOCOMMERCE’de programlanan ürün programının fiyatı nasıl değiştirilir
WOOOCOMMERCE’deki resmin altındaki açıklama nasıl hareket ettirilir
Wooocommerce ürün görüntüleri üzerindeki zoom etkilerinden nasıl kurtulur
Wooocommerce’de fiyattan sonra bir açıklama nasıl eklenir
Wooocommerce ürün görüntüsünün boyutu nasıl değiştirilir
Ürünleri WooCommerce’de nasıl gizılır veya kategorilere veya rollere göre ürünler nasıl gizlenir
