الموقع معروض للبيع Domain Authority 25 / Page Authority 46 / No Spam / عدد المقالات 180 مقاله. للإتفاق على السعر وطرق الدفع > راسلنا

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

هل تريد إنشاء عرض قائمة منتجات WooCommerce على موقع الويب الخاص بك؟ من الشائع جدًا عرض مزيد من المعلومات حول منتج لعملائك على صفحة المتجر نفسها. لذلك ، سنقدم لك برنامجًا تعليميًا خطوة بخطوة للتبديل إلى عرض قائمة المنتجات في هذا البرنامج التعليمي. ولكن قبل أن نمر بالعملية ، دعنا نرى ماذا نفعل قد تحتاج إلى إنشاء عرض قائمة المنتجات. لماذا إنشاء عرض قائمة المنتجات في WooCommerce؟ بشكل افتراضي ، يتم عرض المنتجات الموجودة على صفحة متجرك بنمط الشبكة. نعم ، فهم يعتمدون كليًا على الموضوع النشط لموقع الويب الخاص بك أيضًا. ولكن في حالة معظم السمات ، يتم عرضها مع تمثيل شبكي بمنتج واحد تلو الآخر مثل المربعات. ولكن في طريقة عرض القائمة ، يتم عرض المنتجات بمزيد من التفاصيل. يتم عرض كل منتج بعد الآخر في قائمة عمودية بمعلومات إضافية مثل تفاصيل الشحن ووصف المنتج والمزيد. على سبيل المثال ، دعنا نقارن عرض الشبكة وعرض القائمة لمتجر Best Buy على الإنترنت. طريقة عرض الشبكة الافتراضية الخاصة بـ المنتجات الموجودة بالموقع ممثلة كالتالي: ومع ذلك ، لا يمكنك التبديل مباشرة إلى عرض القائمة على موقع الويب. ولكن إذا كنت ترغب في عرض المزيد من المنتجات ، فسيتم عرض المنتجات في عرض القائمة بالتخطيط التالي: يمكننا أن نرى بوضوح أن المزيد من تفاصيل المنتج معروضة في عرض القائمة أكثر من تلك الموجودة في عرض الشبكة. يمكن للعملاء بسهولة رؤية تفاصيل الشحن ونموذج المنتج وأرقام SKU والمقارنة وخيارات قائمة الرغبات وما إلى ذلك في عرض القائمة. بينما في عرض الشبكة ، لا يمكن إضافة هذه المعلومات لأنها ستجعل موقع الويب يبدو مزدحمًا. في الواقع ، إذا كنت تدير متجرًا عبر الإنترنت مع منتجات بالجملة ، أو كتالوجات المنتجات ، أو نظام طلب المطاعم ، يكون عرض القائمة أكثر ملاءمة لعملائك. يمكن توفير جميع التفاصيل اللازمة لعملائك في صفحة واحدة. وبالتالي ، لن يضطروا إلى النقر فوق صفحات المنتجات الفردية لعرض المعلومات الإضافية. كيفية إنشاء منتج WooCommerce عرض القائمة؟ أسهل طريقة لإنشاء WooCommerce يتم عرض قائمة المنتجات عن طريق باستخدام البرنامج المساعد . تساعد مكونات WordPress الإضافية موقع الويب الخاص بك على زيادة الوظائف وزيادة مرونته. وبالمثل ، يمكن استخدامها لعرض المنتجات في القائمة أيضًا. في حين أن هناك العديد من المكونات الإضافية التي تسمح لك بإنشاء منتج عرض القائمة ، وهنا بعض من أفضلها: عرض الشبكة / القائمة لـ WooCommerce عرض الشبكة / القائمة لـ WooCommerce هي واحدة من أفضل المكونات الإضافية المجانية لإنشاء عرض قائمة المنتجات. إنه سهل الاستخدام للغاية ويضيف فقط مفتاح تبديل لتمكين إما عرض القائمة أو عرض الشبكة على صفحة متجر WooCommerce الخاصة بك. يوفر لك المكون الإضافي أيضًا قائمة متنوعة ونمط منتج شبكي خيارات التخصيص. يوفر لك خيارات متقدمة لتعديل زر تبديل الشبكة / القائمة الذي يمكنك من خلاله تغيير موضعه. وبالمثل ، يمكن أيضًا تغيير المنتجات لكل صفحة حسب رغبتك بمساعدة هذا البرنامج المساعد. دلائل الميزات: زر تبديل القائمة والشبكة التخصيص المتقدم لزر الجلاد خيارات المنتجات لكل صفحة ودية الرمز القصير التوافق مع ملحقات WooCommerce الرئيسية السعر: عرض الشبكة / القائمة لـ WooCommerce هو مكون إضافي مجاني. وهي متوفرة في مستودع الإضافات الرسمية لـ WordPress. WooCommerce Product Table WooCommerce Product Table هو مكون إضافي متميز يمكن أن يساعدك في إنشاء عرض قائمة المنتجات. في البداية ، يعد أحد مكونات WooCommerce الإضافية لتصميم جدول على موقع الويب الخاص بك. ولكن يمكن تعديله بسهولة لعرض منتجاتك في عرض قائمة جدولي. من السهل جدًا إعداد المكون الإضافي ويسمح للمستخدمين بطلب منتجات متعددة في وقت واحد. كما يوفر خيار بحث وفرز مضمنين لعرض القائمة. يمكن أن تكون هذه ميزة ملائمة جدًا لمستخدميك حيث يمكنهم العثور على المنتجات المطلوبة بسهولة بالغة. دلائل الميزات: خيار عرض قائمة جدولي للمنتجات البحث الفوري عن المنتج وخيارات الفرز طلب سريع من صفحة واحدة واجهة سهلة الاستخدام سريع “إضافة إلى عربة التسوق” أزرار السعر: WooCommerce Product Table عبارة عن مكون إضافي مميز يبدأ في 484 دولار أمريكي في السنة. ويشمل 20 تراخيص الموقع ب – ضمان استرداد الأموال اليومي ودعم الأولوية. الآن بعد أن ألقينا نظرة على بعض المكونات الإضافية ، دعنا ننتقل إلى كيفية استخدامها أيضًا. ولكن قبل أن نبدأ ، يرجى التأكد من قيامك بإعداد WooCommerce بشكل صحيح دون فقدان أي خطوات واستخدام أحد سمات WooCommerce المتوافقة. إنشاء WooCommerce عرض قائمة المنتجات باستخدام البرنامج المساعد لإنشاء عرض قائمة منتجات WooCommerce ، سنستخدم عرض الشبكة / القائمة لـ WooCommerce في هذا العرض التوضيحي. إنه مجاني وسهل الاستخدام للغاية وهو حل مباشر لإنشاء عرض قائمة للمنتجات. ولكن لكي تبدأ في استخدام أي مكون إضافي ، عليك تثبيته وتفعيله أولاً. 1. تثبيت وتفعيل الإضافة لتثبيت البرنامج المساعد ، انتقل إلى الملحقات> إضافة جديدة من لوحة معلومات WordPress الخاصة بك. بعد ذلك ، ابحث عن الكلمات الأساسية للمكوِّن الإضافي وانقر على التثبيت الآن بعد أن تجده. يكتمل التثبيت بعد فترة. أخيرًا قم بتفعيل الإضافة بعد تثبيتها. إذا كنت تريد استخدام مكون إضافي مميز ، فسيتعين عليك تحميله وتثبيته يدويًا. يرجى إلقاء نظرة على دليلنا التفصيلي لتثبيت إضافة WordPress يدويًا لمزيد من المعلومات. 2. تكوين إعدادات البرنامج المساعد بمجرد تنشيط المكون الإضافي ، يمكنك تكوين إعداداته لإنشاء عرض قائمة منتجات WooCommerce. افتح BeRocket> عرض الشبكة / القائمة من لوحة معلومات 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 لإنشاء قالب فرعي. بعد تنشيط السمة الخاصة بك ، انتقل إلى المظهر> Theme File Editor وافتح ملف jobs.php لموضوعك . بعد ذلك ، يمكنك البدء في إضافة مقتطفات التعليمات البرمجية في نهاية المحرر و تحديث الملف . ال تعتمد ملفات السمات على الموضوع النشط لموقعك على الويب. لقد استخدمنا سمة Divi هنا حتى يبدو محررك مختلفًا بعض الشيء. أولاً ، تحتاج إلى إزالة زر الإضافة إلى سلة التسوق و ثم إخفاء أسعار المنتجات. لذلك ، عليك إضافة مقتطفات التعليمات البرمجية التالية في المحرر. 1. إزالة زر إضافة إلى عربة التسوق أنت يمكن استخدام البرنامج النصي التالي لإخفاء زر الإضافة إلى عربة التسوق لصفحة المتجر وصفحة المنتج. لذا ، قم بلصقه في ملف jobs.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’ ، ) ؛ ستزيل هذه الوظيفة الإضافة إلى صفحة عربة التسوق لكل من صفحة منتج 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 ()) يُرجع السعر بالدولار ؛ يُرجع ؛ } بالإضافة إلى ذلك ، يمكنك أيضا إخفاء المنتجات في صفحة المتجر فقط إذا لزم الأمر. كل ما عليك فعله هو لصق مقتطف الشفرة التالي في ملف functions.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’، )؛ } أحسنت! يمكنك الآن إنشاء عرض قائمة منتجات WooCommerce وتمكين وضع الكتالوج بشكل صحيح على موقع الويب الخاص بك. إذا كنت تريد طرقًا بديلة لعرض وضع الكتالوج ، فلدينا دليل مفصل لتمكين وضع الكتالوج في WooCommerce. وبالمثل ، إذا كنت بحاجة إلى مزيد من المعلومات لإزالة زر الإضافة إلى عربة التسوق ، أو إخفاء الأسعار في WooCommerce ، فقد قمنا بتغطيتها أيضًا. استنتاج نأمل أن تتمكن من إنشاء قائمة منتجات WooCommerce لمتجرك عبر الإنترنت الآن. يمكنك بسهولة استخدام مكون إضافي مخصص للسماح لعملائك بالتبديل إلى عرض قائمة المنتجات. تسمح لهم المكونات الإضافية بالرجوع إلى عرض الشبكة إذا لزم الأمر بالإضافة إلى الكثير من خيارات التخصيص الأخرى. لقد قدمنا ​​لك أيضًا بعض الأساسيات خطوات لتخصيص صفحة المتجر لتمكين وضع الكتالوج على موقع الويب الخاص بك حيث يمكنك إظهار عرض قائمة المنتجات أيضًا. إذا كنت ترغب في إجراء تغييرات على المزيد من صفحات WooCommerce ، فيمكنك أيضًا تخصيص صفحة عربة التسوق أو صفحة الفئة أو حتى صفحة الخروج باستخدام مكونات إضافية مثل WooCommerce Checkout Manager. إذن ، هل يمكنك إضافة عرض قائمة المنتجات في متجرك عبر الإنترنت دون أي مشاكل؟ هل جربت ذلك أبدا؟ يرجى إخبارنا في التعليقات. وفي الوقت نفسه ، إليك بعض المقالات الأخرى التي قد تكون مهتمًا بها: كيفية تخصيص معرض منتجات WooCommerce تغيير رسالة عدم وجود منتجات في سلة التسوق كيفية إضافة صورة المنتج إلى WooCommerce Checkout