كيفية إظهار الفئات على صفحة متجر WooCommerce

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

لماذا تظهر الفئات على صفحة المتجر؟

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

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

إعداد الفئات والفئات الخاصة

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

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

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

كيفية إظهار الفئات على صفحة متجر WooCommerce

هناك طرق مختلفة لعرض الفئات على صفحة المتجر في WooCommerce:

1. باستخدام مُخصص السمة من لوحة القيادة
2. باستخدام رمز قصير
3. برمجيا

دعونا نلقي نظرة فاحصة على كل طريقة.

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

1) عرض الفئات باستخدام لوحة معلومات WooCommerce

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

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

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

ومع ذلك ، إذا اخترت الفئات والمنتجات ، فسيتم عرض الفئات الخاصة بك أولاً ثم باقي كتالوج المنتج الخاص بك:

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

بمجرد أن تصبح راضيًا عن التخصيص الخاص بك ، تذكر أن تنقر فوق نشر لحفظ التغييرات.

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

2) إظهار الفئات باستخدام الرموز القصيرة

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

للقيام بذلك ، تحتاج ببساطة إلى إضافة الرمز القصير التالي إلى صفحة المتجر الخاصة بك:

 [ product_categories ]

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

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

إذا كنت تستخدم Gutenberg ، فما عليك سوى الانتقال إلى صفحة المتجر وإضافة كتلة الرمز القصير ولصق الرمز القصير [ product_categories ] .

الآن دعونا نرى كيفية استخدام الرمز القصير. إذا كنت ترغب في إظهار الفئات على صفحة متجر WooCommerce ، مرتبة حسب معرّف الفئة بترتيب تصاعدي ، يمكنك استخدام الرمز القصير التالي:

 [ product_categories orderby = “id” order = “ASC” ] 

سيظهر هذا في صفحة المتجر الخاصة بك مثل هذا:

كيفية إظهار فئة معينة على صفحة متجر WooCommerce

يمكنك أيضًا استخدام طريقة الرمز المختصر لإظهار فئة منتج WooCommerce معينة.

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

بمجرد أن تعرف سبيكة منتجك المحدد ، يمكنك استخدامها في صفحة المتجر الخاصة بك على النحو التالي:

 [ product category category=”slug” ]

ببساطة استبدل نص slug مع سبيكة الفئة المقابلة. على سبيل المثال ، إذا كانت slug هي Show ، فسيكون الرمز القصير هو:

وفي الواجهة الأمامية ، سترى شيئًا كهذا:

يمكنك أيضًا استخدام نفس السمات المتاحة لـ [ product categories ] لمزيد من التخصيص.

3) عرض الفئات برمجيًا

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

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

الآن دون مزيد من اللغط ، دعنا نرى كيفية إظهار الفئات على صفحة متجر WooCommerce.

إضافة وظيفة لإظهار الفئات على صفحة المتجر

بمجرد إعداد السمة الفرعية الخاصة بك ، افتح ملف function.php السمة الخاص بك بالانتقال إلى المظهر> محرر السمة . بمجرد الوصول إلى هناك ، انقر فوق ملف jobs.php الموجود على الشريط الجانبي الأيمن لملفات السمات.

أنت الآن جاهز للصق البرامج النصية التالية في المحرر لإضافة وظائفك المخصصة.

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

 دالة product_subcategories ($ args = array ()) {
$ 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>"؛
}

}

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

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

إعداد التصميم لقسم الفئات المخصصة

الآن دعنا نضيف CSS القابل للتخصيص إلى قسم CSS الإضافي لمخصص السمة الخاص بك. في لوحة معلومات WordPress الخاصة بك ، انتقل إلى المظهر> تخصيص لفتح قائمة مُخصص السمة ثم انقر فوق CSS إضافي.

ثم الصق مقتطفات CSS التالية في قسم CSS الإضافي وقم بتخصيصها بحيث تتطابق مع نمط موقع الويب الخاص بك.

كما يمكنك أن تتخيل ، سيكون لديك العديد من الخيارات إذا كانت لديك معرفة بـ CSS. إذا لم تكن متأكدًا من كيفية إضافة التعليمات البرمجية ، فقم بإلقاء نظرة على دليلنا حول كيفية إضافة CSS إلى WordPress.

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

 ul.product-cats {
الهامش الأيسر: 0 ؛
}

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

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

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

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

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

بمجرد الانتهاء من التغييرات ، قم بتحديث إعدادات Customizer ويجب تحديث صفحة المتجر الخاصة بك بقسم الفئات الجديدة.

المكافأة: طرق إضافية لتحسين صفحة التسوق الخاصة بك

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

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

كيفية عرض المنتجات الأكثر شهرة على صفحة متجر WooCommerce

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

 [ products orderby="popularity" ]

كما رأينا من قبل ، يمكنك إضافة سمات الرمز القصير التي يمكنك العثور عليها هنا.

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

 [ products orderby="popularity" class="m-popular" columns="2" limit="2" ] 

بالإضافة إلى ذلك ، يمكنك إضافة أقسام متعددة مثل المنتجات المعروضة للبيع والأفضل مبيعًا والمنتجات الأعلى تقييمًا والمزيد باستخدام الرموز القصيرة:

• [ best_selling_products ]
• [ top_rated_products ]
• [ recent_products ]

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

هذه مجرد أمثلة قليلة ولكن هناك الكثير الذي يمكنك القيام به لتحقيق أقصى استفادة من صفحة متجرك. لمعرفة المزيد ، راجع دليلنا الكامل حول كيفية تخصيص صفحة متجر WooCommerce .

استنتاج

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

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

• باستخدام إعدادات WooCommerce ضمن مُخصص السمة
• باستخدام الرموز القصيرة
• مع وظيفة مخصصة وقليل من CSS لتخصيصها

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

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

• كيفية تحرير WooCommerce Shop Page برمجيًا
• كيفية تخصيص ملفات قالب WooCommerce

هل قمت بتخصيص صفحة متجرك وعرض فئات المنتجات؟ ما الطريقة التي استخدمتها؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

أخيرًا ، إذا كنت تبحث عن طرق أخرى لتحسين صفحة متجرك ، فقم بإلقاء نظرة على المقالات التالية:

• تحرير WooCommerce Shop Page برمجيًا (CSS و PHP)
• كيفية تخصيص صفحة متجر WooCommerce في Elementor
• كيفية إصلاح WooCommerce Shop Page فارغة