كيفية إضافة WooCommerce Quick View بدون البرنامج المساعد

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

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

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

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

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

1. قم بتثبيت سمة Botiga WooCommerce

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

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

للبدء ، قم بتنزيل السمة وتثبيتها من Appearance> Themes> Add New> Upload Theme menu:

بدلاً من ذلك ، يمكنك أيضًا الانتقال إلى المظهر> السمات> إضافة جديد ، واكتب "botiga" في شريط البحث.

عندما تظهر السمة ، انقر فوق زر التثبيت :

بعد تثبيت السمة على موقعك ، انقر فوق الزر تنشيط .

2. استيراد موقع Starter (اختياري)

موقع المبتدئين عبارة عن عرض توضيحي تم إنشاؤه مسبقًا يمكنك استيراده إلى موقع الويب الخاص بك ببضع نقرات.

تمتلك Botiga حاليًا موقعًا واحدًا مجانيًا (للجمال) وأربعة مواقع بدء تشغيل متميزة (ملابس ، أثاث ، مجوهرات ، منتج فردي). في هذا البرنامج التعليمي ، سأستخدم عرض Beauty المجاني - يمكنك التحقق من جميع مواقع البدء هنا.

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

للعثور على مواقع البدء ، انقر فوق المظهر> قائمة مواقع بدء التشغيل في لوحة معلومات WordPress الخاصة بك.

قم بتمرير المؤشر فوق العرض التوضيحي الذي تريد تثبيته وانقر فوق الزر معاينة العرض التوضيحي لمعاينته.

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

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

لديك خيار رفض استيراد أي من المكونات الإضافية والمحتوى ، لكني أوصي باستيراد كل شيء:

3. افتح أداة التخصيص

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

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

4. قم بتمكين زر العرض السريع لمنتجاتك

يفتح Customizer على الجانب الأيسر من الشاشة. يوجد في Botiga الكثير من الخيارات هنا يمكنك الاختيار من بينها.

للوصول إلى ميزة العرض السريع ، انتقل إلى WooCommerce> كتالوج المنتجات> عام :

في علامة التبويب " عام " ، سترى خيار بطاقة المنتج . حدده ، وسيتم توسيع العنصر:

الآن ، قم بالتمرير لأسفل إلى خيار العرض السريع .

كما ترى في لقطة الشاشة أدناه ، تم تمكين زر العرض السريع بالفعل على موقعك:

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

مرر مؤشر الماوس فوق أي من صور المنتج ، وسيظهر زر العرض السريع:

يظهر زر العرض السريع عندما يتم عرض مجموعة من المنتجات في نفس الصفحة.

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

نظرًا لأن Botiga عبارة عن سمة سريعة الاستجابة ، يعمل زر العرض السريع أيضًا على الهاتف المحمول - ستظهره نقرة خفيفة على صورة المنتج:

5. اختر تخطيطًا لأزرار العرض السريع

يجب أن تكون قد لاحظت أن هناك ثلاثة خيارات لتخطيط العرض السريع:

الأول يزيل تمامًا أزرار العرض السريع من موقعك.

يعرض الخيار الثاني الزر في منتصف صورة المنتج (هذا هو الإعداد الافتراضي):

والخيار الثالث يعرض زر Quick View أسفل صورة المنتج:

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

6. قم بإضافة أو إزالة العناصر في مربع العرض السريع

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

إذا كنت لا ترى بعض هذه العناصر في مربع العرض السريع الخاص بك ، فيمكنك إضافتها من خيار Card Elements ، والذي يمكن العثور عليه أسفل إعداد العرض السريع مباشرة.

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

تعمل إزالة العناصر بنفس الطريقة. انقر فوق أيقونة العين لتعطيل عنصر ، وسيختفي من مربع العرض السريع:

7. أضف المزيد من المنتجات إلى متجرك

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

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

املأ العنوان والوصف وصورة المنتج ومعرض المنتج وفئات المنتجات وعلامات المنتج وحقول بيانات المنتج / البيانات الوصفية:

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

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

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

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

استنتاج

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

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

بالإضافة إلى وظيفة العرض السريع ، يتضمن Botiga الكثير من ميزات التجارة الإلكترونية المفيدة.

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

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

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