كيفية عرض منتجات WooCommerce حسب الفئة

نشرت: 2020-08-16

WooCommerce عرض المنتجات حسب الفئة هل تدير متجر WooCommerce وتريد عرض المنتجات حسب الفئة في WordPress؟ يحتوي هذا المنشور على شرح مفصل حول كيفية عرض منتجات WooCommerce حسب الفئة. إذا كنت معتادًا على WooCommerce ، فأنت تعلم أن فئات المنتجات تلعب دورًا مهمًا في تنظيم منتجاتك للعرض المناسب والوصول من قبل عملائك.

اعرض منتجات WooCommerce حسب الفئة

يمنحك WooCommerce فورًا خارج الصندوق ، بعض الخيارات فيما يتعلق بما يمكنك عرضه على صفحات الأرشيف الخاصة بك مثل المنتجات أو الفئات أو الفئات الفرعية أو كل من المنتجات والفئات . ومع ذلك ، يختار معظم مستخدمي WooCommerce الخيار الثالث لعرض كلٍ من المنتجات والفئات / الفئات الفرعية. فرز فئات woocommerce

سيسمح هذا الخيار للزائرين إما بتحديد المنتجات مباشرة من الصفحة الرئيسية أو تحسين البحث عن طريق النقر للوصول إلى أرشيف فئة المنتج.

ومع ذلك ، فإن الجانب السلبي الرئيسي حول هذا هو أنه يعرض الفئات / الفئات الفرعية معًا ، مع عدم وجود فصل بين الاثنين. هذا يجعل التخطيط يبدو فوضويًا بعض الشيء بسبب أبعاد الصورة المختلفة.

من وجهة نظر الخبراء ، حتى لو كانت صورك بالحجم نفسه ، إذا كان أحد الأسطر في صفحة الأرشيف يشتمل على الفئات والمنتجات معًا ، فإن عدم وجود زر "إضافة إلى عربة التسوق" للفئات يجعل هذا الصف يبدو غير منظم ، حيث ليست كل عناصرها لها نفس الأبعاد.

في هذا البرنامج التعليمي الموجز ، ستتعلم كيفية عرض الفئات في قائمة منفصلة قبل عرض المنتجات.

حدد أو ميز الكود في WooCommerce ، والذي يستخدم لإخراج الفئات والفئات الفرعية في صفحات الأرشيف.
قم بإنشاء مكون إضافي مخصص للرمز.
اكتب وظيفة من شأنها وضع الفئات أو الفئات الفرعية قبل قوائم المنتجات.
إنشاء نمط مخصص للإخراج.

أ) عرض كل من المنتجات والفئات أو الفئات الفرعية

خطوات عرض كل من المنتجات والفئات أو الفئات الفرعية.

قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
من قائمة لوحة التحكم ، انقر على قائمة المظهر> تخصيص. انقر فوق صفحة المتجر وحدد WooCommerce> كتالوج المنتج. في خيار عرض المتجر ، حدد إظهار الفئات والمنتجات . في خيار عرض الفئة ، حدد إظهار الفئات الفرعية والمنتجات كما هو موضح أدناه:
تذكر أن تحفظ التغييرات التي تجريها.
ستكون هذه هي النتيجة :

ب) اعرض فئة منتج WooCommerce

ومع ذلك ، يمكنك عرض فئة منتج WooCommerce باستخدام مقتطف التعليمات البرمجية أدناه ، والذي يجب وضعه في ملف function.php.

خطوات لعرض فئة منتج WooCommerce

فيما يلي الخطوات التي يجب عليك اتباعها:

قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
من قائمة لوحة المعلومات ، انقر فوق قائمة المظهر> محرر السمات عند فتح صفحة محرر السمات ، ابحث عن ملف وظائف السمة حيث سنضيف الوظيفة التي ستعرض فئة منتج WooCommerce.
أضف الكود التالي إلى ملف php :

 دالة woocommerce_product_category ($ args = array ()) {

    $ woocommerce_category_id = get_queried_object_id ()؛

  $ args = مجموعة (

             'parent' => $ woocommerce_category_id
  ) ؛

  شروط $ = get_terms ('product_cat'، $ args)؛

  إذا (شروط $) {

             صدى '<ul class = "woocommerce-categories">'؛

             foreach (مصطلحات $ مثل $ term) {

             صدى '<li class = "woocommerce-product-category-page">'؛

            woocommerce_subcategory_thumbnail ($ term) ؛

             صدى "<h2>" ؛

             صدى '<a href="'. esc_url( get_term_link( $term)).'" class="'. $term-> slug.' "> '؛

             صدى $ term-> الاسم ؛

             صدى "</a>" ؛

             صدى "</ h2>" ؛

             صدى "</li>"؛

             }

             صدى "</ul>"؛

  }

}

add_action ('woocommerce_before_shop_loop'، 'woocommerce_product_category'، 100) ؛

ستكون هذه هي النتيجة:

ومع ذلك ، فإنه يحتاج إلى بعض CSS المخصصة لعرض المنتجات بشكل جيد. سنفعل هذا لاحقًا في هذا البرنامج التعليمي.

كيف تعمل المدونة

يعمل هذا الرمز ببساطة عن طريق استخدام woocommerce_product_category() function التي تُخرج الفئات أو الفئات الفرعية قبل تشغيل الحلقة التي تُخرج المنتجات. يمكن أن يتجاوز الموضوع ، لأن الوظيفة قابلة للتوصيل.

ج) سرد الفئات الفرعية لفئة منتج WooCommerce

من السهل جدًا الحصول على الفئة الفرعية لفئات منتجات WooCommerce باستخدام وظيفة مخصصة تستفيد من سبيكة فئة المنتج الأصلية.

خطوات قائمة الفئات الفرعية لفئة منتج WooCommerce

قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
من قائمة لوحة المعلومات ، انقر فوق قائمة المظهر> محرر السمات عند فتح صفحة محرر السمات ، ابحث عن ملف وظائف السمة حيث سنضيف الوظيفة التي ستدرج الفئات الفرعية لفئة منتج WooCommerce.
أضف الكود التالي إلى ملف php :

 function woocommerce_get_product_category_of_subcategories ($ category_slug) {

$ terms_html = مجموعة () ؛
التصنيف $ = 'product_cat'؛
الوالدين = get_term_by ('slug'، $ category_slug، $ التصنيف)؛
children_ids $ = get_term_children ($ الوالدين-> term_id، التصنيف بالدولار)؛

foreach ($ children_ids كـ $ children_id) {

    مصطلح $ = get_term ($ children_id، $ التصنيف)؛

    $ term_link = get_term_link (المصطلح بالدولار ، التصنيف بالدولار) ؛

    إذا (is_wp_error ($ term_link)) $ term_link = '' ؛

    $ terms_html [] = '<a href="'. esc_url( $term_link).'" rel="tag" class="'. $term-> slug.' "> '. $ term-> الاسم. "</a>" ؛
}

إرجاع '<span class = "subcategories-'. $ category_slug. '">'. تنفجر ('،'، $ terms_html). "</span>" ؛

}

ستكون هذه هي النتيجة:

كيف يعمل الكود.

يحصل كائن WP_Term على أصل فئة المنتج. بعد ذلك ، تحصل على معرف الطفل في مصفوفة ، وأخيرًا ، يتم عرض الفئات الفرعية في HTML عن طريق تشغيل حلقة عبر مصفوفة معرف الطفل.

د) تحديد استخدامات WooCommerce للكود لفئات الإخراج والمنتجات في المحفوظات

قبل إنشاء مكون إضافي ، تتمثل الخطوة الأولى بالتأكيد في تحديد كيفية إخراج WooCommerce للفئات والفئات الفرعية. هذا يعني أنه يتعين علينا البحث يدويًا عن كود مصدر WooCommerce للعثور على الوظيفة ذات الصلة.

لتبسيط العملية لك ، ما عليك سوى البحث عن archive-product.php الموجود في مجلد القوالب. هذا هو الملف الذي يستخدمه WooCommerce لعرض صفحات الأرشيف. أنت الآن بحاجة إلى العثور على الكود الذي يخرج الفئات والمنتجات:

 <؟ php
/ **
* ربط woocommerce_before_shop_loop
*
*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 ('content'، 'product') ؛ ؟>

<؟ php end while؛ // نهاية الحلقة. ؟>

<؟ php woocommerce_product_loop_end () ؛ ؟>

كيف تعمل المدونة:

تقوم woocommerce_product_subcategories() function بإخراج الفئات أو الفئات الفرعية قبل تشغيل الحلقة التي تُخرج المنتجات. سبب لفت انتباهك إلى هذه الوظيفة هو أنها قابلة للتوصيل ، مما يعني أنه يمكننا تجاوزها في موضوعنا.

ومع ذلك ، لن يعمل هذا لأن WooCommerce يحتوي على نمط مضمن لمسح العناصر ، والذي سيظهر في بداية الصف مع العرض الافتراضي. اذا ماذا يجب ان نفعل؟ الجواب بسيط. نحتاج إلى إيقاف تشغيل عرض الفئات والفئات الفرعية على صفحات الأرشيف لدينا حتى يتم عرض المنتجات فقط.

بعد ذلك ، تتمثل الخطوة التالية في إنشاء وظيفة جديدة تُخرج فئات المنتج أو الفئات الفرعية woocommerce_before_shop_loop action ، مع التأكد من أننا نستخدم أولوية عالية بحيث يتم تنشيطها بعد الوظائف التي تم ربطها بالفعل بهذا الإجراء.

ومع ذلك ، من المهم ملاحظة أن WooCommerce تضيف عمليات مسح إلى كل قائمة منتجات ثالثة. هذا يعني أنه لا يمكننا استخدام woocommerce_product_subcategories() function أو نسخة معدلة منها لعرض الفئات. التفسير لذلك هو أن هذه الوظيفة سوف تمسح الفئة الثالثة والسادسة (وما إلى ذلك) أو المنتج المدرج ، حتى عندما نستخدم هذه الوظيفة لعرض الفئات بشكل منفصل. هذا يعني أنه يتعين علينا إنشاء دالة تتجاوزها. يمكن القيام بذلك عن طريق إنشاء مكون إضافي.

ه) إنشاء البرنامج المساعد

تحتاج أولاً إلى إنشاء أقدم جديد ومنحه اسمًا فريدًا في دليل wp-content / plugins . في هذا المثال ، كن حذرًا عند اتباع الخطوات حتى تتمكن من تحقيق الوظيفة التي نحتاجها. سأستخدم هذا الاسم njengah-separate-products-categories-in-archives .

داخل هذا المجلد ، تحتاج إلى إنشاء ملف جديد ، مرة أخرى باسم فريد. سأستخدم نفس الاسم أيضًا لهذا المجلد njengah-separate-products-categories-in-archives.php .

خطوات إنشاء البرنامج المساعد

افتح ملفك وأضف الكود التالي:

 <؟ php
/ **
* اسم البرنامج المساعد: فئة منتج WooCommerce
* الوصف: عرض فئات WooCommerce على صفحات منتجات WooCommerce

** /

قبل كتابة وظيفتنا ، تحتاج إلى إيقاف تشغيل قوائم الفئات في شاشات المسؤول عن طريق تسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
من قائمة لوحة التحكم ، انقر على قائمة المظهر> تخصيص. انقر فوق صفحة المتجر وحدد WooCommerce> كتالوج المنتج. في خيار عرض المتجر ، حدد إظهار المنتجات . في خيار عرض الفئة ، حدد إظهار المنتجات .
تذكر أن تحفظ التغييرات التي تجريها.
ستكون هذه هي النتيجة :
أضف هذا إلى ملف البرنامج المساعد:

 الدالة njengah_product_subcategories ($ args = array ()) {

}

add_action ('woocommerce_before_shop_loop'، 'njengah_product_subcategories'، 50) ؛

فأنت بحاجة إلى إضافة هذا الرمز في الوظيفة:

 $ parentid = get_queried_object_id () ؛

$ args = مجموعة (

'الوالدين' => $ parentid

) ؛

شروط $ = get_terms ('product_cat'، $ args)؛

إذا (شروط $) {

echo '<ul class = "product-cats">'؛

foreach (مصطلحات $ مثل $ term) {

صدى '<li class = "category">'؛

woocommerce_subcategory_thumbnail ($ term) ؛

صدى "<h2>" ؛

صدى '<a href="'. esc_url( get_term_link( $term)).'" class="'. $term-> slug.' "> '؛

صدى $ term-> الاسم ؛

صدى "</a>" ؛

صدى "</ h2>" ؛

صدى "</li>" ؛

}

صدى "</ul>"؛

}

ستكون هذه النتيجة: اعرض منتجات WooCommerce حسب الفئة

كما ترى من الصورة أعلاه ، فإن الفئات ليست منظمة بشكل جيد. هذا يعني أنه يتعين علينا إضافة تصميمنا المخصص. ومع ذلك ، قبل ذلك ، دعونا نتعلم كيفية عمل الكود.

كيف تعمل المدونة

تحدد الوظيفة التي أنشأناها الكائن الذي تم الاستعلام عنه حاليًا وتعرف معرفه على أنه $parentid . ثم يستخدم get_terms() لتحديد المصطلحات مع العنصر الذي تم الاستعلام عنه حاليًا باعتباره الأصل. إذا كانت هذه هي صفحة المتجر الرئيسية ، فستقوم بإرجاع فئات المستوى الأعلى وإذا كان هذا أرشيف فئة ، فسيتم إرجاع الفئات الفرعية.

علاوة على ذلك ، تتحقق الوظيفة من وجود أي شروط ، قبل فتح a لكل حلقة وعنصر ul . هذا يعني أنه لكل مصطلح ، يقوم بإنشاء عنصر li ، ثم يقوم بإخراج category image using woocommerce_subcatgeory_thumbnail() ، متبوعًا باسم الفئة في رابط إلى أرشيفه.

خطوات نمط قوائم الفئات

هذه هي الخطوات التي تحتاج إلى اتباعها ، ولكن للقيام بذلك نحتاج إلى ورقة أنماط داخل المكون الإضافي الخاص بنا ، والتي سنحتاج إلى إدراجها في قائمة.

قم بإنشاء مجلد يسمى CSS ، وداخله ، قم بإنشاء ملف يسمى CSS. يجب أن يتم ذلك في مجلد البرنامج المساعد حتى يعمل هذا .
أضف هذا الرمز في الجزء العلوي من الوظيفة التي قمت بإنشائها بالفعل:

 الوظيفة njengah_product_cats_css () {




/ * تسجيل الأنماط * /

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') ؛

الخطوة التالية هي فتح ورقة الأنماط الخاصة بك وإضافة الكود أدناه. ومع ذلك ، من المهم ملاحظة أن WooCommerce يستخدم التصميم الأول للجوال ، لذلك هذا ما سنستخدمه أيضًا.

 ul.product-cats li {
نمط القائمة: لا شيء ؛
الهامش الأيسر: 0 ؛
الهامش السفلي: 4.236em ؛
محاذاة النص: مركز ؛
الموقف: نسبي ؛
}

ul.product-cats li img {
الهامش: 0 تلقائي ؛
}


شاشةmedia و (الحد الأدنى للعرض: 768 بكسل) {

ul.product-cats {
الهامش الأيسر: 0 ؛
واضحة على حد سواء؛
}

ul.product-cats li {
العرض: 29.4117647059٪ ؛
تعويم: اليسار؛
الهامش الأيمن: 5.8823529412٪ ؛
}

ul.product-cats li: nth-of-type (3) {
الهامش الأيمن: 0 ؛
}

}

ستكون هذه هي النتيجة:

استنتاج

في هذا المنشور ، قمت بتسليط الضوء على الطرق المختلفة التي يمكنك من خلالها عرض منتجات WooCommerce حسب الفئة. من هذا البرنامج التعليمي الموجز ، يمكنك فهم سبب اعتبار فئات المنتجات ميزة رائعة في WooCommerce ، ولكن طريقة عرضها ليست مثالية دائمًا.

بالإضافة إلى ذلك ، لقد تعلمت كيفية إنشاء مكون إضافي يقوم بإخراج فئات المنتجات أو الفئات الفرعية بشكل منفصل عن قوائم المنتجات ، وكيفية تصميم قوائم الفئات. يتمثل الجزء الأكثر تميزًا في هذا البرنامج التعليمي في إنشاء المكون الإضافي المخصص الذي ينتج قائمة من الفئات أو الفئات الفرعية على الصفحة ، عن طريق ربط الوظيفة بربط إجراء مختلف داخل ملف قالب WooCommerce.

مقالات مماثلة

كيفية إزالة WooCommerce فرز المنتج الافتراضي
كيفية الحصول على اسم فئة المنتج الحالي في WooCommerce
كيفية بيع المنتجات الرقمية باستخدام WooCommerce
كيفية فرز فئات WooCommerce للحصول على تجربة مستخدم أفضل
كيفية إضافة أرقام GTIN على المنتجات في WooCommerce
إخفاء أو إزالة حقل الكمية من صفحة منتج WooCommerce
كيفية إخفاء حقل رمز قسيمة WooCommerce
كيف تضيف نصًا قبل السعر في WooCommerce »أضف نصًا قبل السعر
كيفية تغيير سعر المنتج برمجيًا في WooCommerce
كيفية نقل الوصف تحت الصورة في WooCommerce
كيفية إزالة تأثير التكبير على صورة منتج WooCommerce
كيفية إضافة الوصف بعد السعر في WooCommerce
كيفية تغيير حجم صور منتج WooCommerce
كيفية إخفاء منتج في WooCommerce أو إخفاء المنتجات حسب الفئة أو الأدوار