كيفية إنشاء عرض قائمة منتجات WooCommerce

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

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

لماذا إنشاء عرض قائمة المنتجات في WooCommerce؟

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

ولكن في عرض القائمة ، يتم عرض المنتجات بمزيد من التفاصيل. يتم عرض كل منتج بعد الآخر في قائمة عمودية مع معلومات إضافية مثل تفاصيل الشحن ووصف المنتج والمزيد. على سبيل المثال ، دعنا نقارن عرض الشبكة وعرض القائمة لمتجر Best Buy عبر الإنترنت.

يتم تمثيل عرض الشبكة الافتراضي للمنتجات على موقع الويب على النحو التالي:

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

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

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

كيفية إنشاء عرض قائمة منتجات WooCommerce؟

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

في حين أن هناك العديد من المكونات الإضافية التي تسمح لك بإنشاء عرض قائمة المنتجات ، فإليك بعضًا من أفضلها:

عرض الشبكة / القائمة لـ WooCommerce

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

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

دلائل الميزات:

• زر تبديل القائمة والشبكة
• التخصيص المتقدم لزر الجلاد
• خيارات المنتجات لكل صفحة
• ودية قصيرة الرمز
• التوافق مع ملحقات WooCommerce الرئيسية

السعر:

عرض الشبكة / القائمة لـ WooCommerce هو مكون إضافي مجاني. وهي متوفرة في مستودع المكونات الإضافية الرسمي لـ WordPress.

جدول منتج WooCommerce

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

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

دلائل الميزات:

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

السعر:

WooCommerce Product Table عبارة عن مكون إضافي مميز يبدأ من 499 دولارًا أمريكيًا في السنة. يتضمن 20 ترخيصًا للموقع مع ضمان استرداد الأموال لمدة 30 يومًا ودعمًا ذا أولوية.

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

قم بإنشاء عرض قائمة منتجات WooCommerce باستخدام البرنامج المساعد

لإنشاء عرض قائمة منتجات WooCommerce ، سنستخدم عرض الشبكة / القائمة لـ WooCommerce في هذا العرض التوضيحي. إنه مجاني وسهل الاستخدام للغاية وهو حل مباشر لإنشاء عرض قائمة للمنتجات.

ولكن لبدء استخدام أي مكون إضافي ، يجب عليك تثبيته وتنشيطه أولاً.

1. تثبيت وتنشيط البرنامج المساعد

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

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

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

2. تكوين إعدادات البرنامج المساعد

بمجرد تنشيط المكون الإضافي ، يمكنك تكوين إعداداته لإنشاء عرض قائمة منتجات WooCommerce. افتح BeRocket> Grid / List View من لوحة معلومات WordPress الخاصة بك. ستكون قادرًا على جميع خيارات التخصيص لعرض قائمة المنتجات الخاصة بك هنا.

تتضمن التخصيصات الرئيسية الثلاثة الأزرار وعدد المنتجات و CSS المخصص.

2.1. خيارات الزر

يوفر لك المكون الإضافي الكثير من التخصيصات لأزرارك لتبديل الشبكة أو عرض القائمة للمنتجات.

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

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

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

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

قم بإجراء جميع التعديلات اللازمة التي تحتاجها وانقر فوق حفظ التغييرات .

2.2. خيارات عدد المنتجات

يمكنك أيضًا ضبط خيارات عدد المنتجات باستخدام عرض الشبكة / عرض القائمة لمكوِّن WooCommerce الإضافي عند إنشاء عرض قائمة المنتجات. أولاً ، يمكنك إما تمكين أو تعطيل استخدام عدد المنتجات.

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

2.3 CSS / JavaScript مخصص

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

يمكنك أيضًا تعطيل ملفات Font Awesome CSS من هنا أو تحديد إصدار Font Awesome.

بعد إضافة CSS أو JavaScript المخصص المطلوب ، لا تنس حفظ التغييرات .

بمجرد معاينة صفحة متجرك ، ستتمكن من رؤية زر التبديل للتبديل بين الشبكة وعرض القائمة. يتم عرض عدد المنتجات هنا أيضًا ويتم تضمين وصف المنتج أيضًا مع المنتجات.

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

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

هذا هو! هذه هي الطريقة التي يمكنك بها إنشاء عرض قائمة منتجات WooCommerce والسماح لعملائك بالتبديل بين الشبكة وعرض القائمة.

المكافأة: تمكين وضع الكتالوج في WooCommerce

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

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

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

تعتمد ملفات السمات على الموضوع النشط لموقعك على الويب. لقد استخدمنا سمة Divi هنا حتى يبدو محررك مختلفًا بعض الشيء.

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

1. إزالة زر إضافة إلى عربة التسوق

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

 remove_action ('woocommerce_after_shop_loop_item'، 'woocommerce_template_loop_add_to_cart') ؛
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_add_to_cart'، 30) ؛

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

إذا كنت ترغب في جعل المنتجات غير قابلة للشراء ، يمكنك إضافة مقتطف الشفرة التالي أيضًا.

 add_filter ('woocommerce_is_purchasable'، '__return_false') ؛

كما سيتم استبدال الزر "إضافة إلى عربة التسوق" بزر "قراءة المزيد".

2. إخفاء أسعار المنتج

يمكنك إخفاء أسعار المنتجات بطرق مختلفة في WooCommerce. يمكن إخفاؤها لجميع المستخدمين أو للجميع باستثناء المسؤول.

إذا كنت تريد إخفاء أسعار المنتجات لجميع المستخدمين ، فاستخدم البرنامج النصي التالي:

 add_filter ('woocommerce_get_price_html'، 'QuadLayers_remove_price') ؛
الوظيفة QuadLayers_remove_price (السعر بالدولار) {
إرجاع ؛
}

بدلاً من ذلك ، إذا كنت تريد إخفاء الأسعار للجميع باستثناء المسؤول ، فاستخدم المقتطف التالي:

 add_filter ('woocommerce_get_price_html'، 'QuadLayers_remove_price') ؛
الوظيفة QuadLayers_remove_price (السعر بالدولار) {
إذا (is_admin ()) أرجع السعر بالدولار ؛
إرجاع ؛
} 

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

 add_filter ('woocommerce_after_shop_loop_item_title'، 'remove_woocommerce_loop_price'، 2) ؛
الوظيفة remove_woocommerce_loop_price () {
إذا (! is_shop ()) يعود ؛ // إخفاء الأسعار فقط على صفحة المتجر
remove_action ('woocommerce_after_shop_loop_item_title'، 'woocommerce_template_loop_price'، 10) ؛
}

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

خاتمة

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

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

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

في غضون ذلك ، إليك المزيد من مقالاتنا التي قد تكون مهتمًا بها:

• كيفية تخصيص معرض منتجات WooCommerce
• تغيير لا توجد منتجات في رسالة سلة التسوق
• كيفية إضافة صورة المنتج إلى WooCommerce Checkout