كيفية إضافة منتجات WooCommerce المميزة إلى موقع الويب الخاص بك
قد يفاجئك أن إضافة منتج على WooCommerce 🛒 لا يعرض العنصر فعليًا على صفحتك الرئيسية.
بدلاً من ذلك، يجب عليك بالفعل إضافة منتجات WooCommerce المميزة يدويًا؛ وبخلاف ذلك، تظل الصور المصغرة والصفحات الخاصة بالمنتج (مخفية إلى حد ما) على صفحة المتجر الخاصة بك.
الهدف هو إبراز المنتجات 🛍️ حتى يرى العملاء المنتجات المشهورة أو البارزة بمجرد وصولهم إلى موقع الويب الخاص بك.
👉 المنتجات المميزة تأتي في أشكال عديدة:
- معارض المنتجات
- قوائم منسقة ومبنية على القواعد للعناصر الشائعة أو التي تم شراؤها مؤخرًا أو المخفضة
- صور البطل واللافتات الترويجية
- معارض القطعة
- مجموعات المنتجات داخل القوائم
ولا يلزم بالضرورة أن تكون منتجات WooCommerce المميزة موجودة على الصفحة الرئيسية؛ يمكنك إدراج مخزون مميز في منشورات المدونة والأشرطة الجانبية والتذييلات والصفحات المقصودة والمزيد.
بشكل عام، الهدف من تعلم كيفية إضافة منتجات WooCommerce المميزة هو الحصول على نتيجة مثل هذه:
او مثل هذا:
والخبر السار هو أنه من السهل جدًا تعلم 🧑💻 كيفية إضافة منتجات WooCommerce المميزة إلى الصفحة الرئيسية لمتجرك عبر الإنترنت، أو في أي مكان آخر على الموقع. كل ما تحتاجه هو البرنامج المساعد لتحقيق ذلك! اتبع الخطوات التالية:
- كيفية إنشاء لافتة ترويجية باستخدام منتجات WooCommerce المميزة
- إضافة شروط الرؤية إلى منتجات WooCommerce المميزة
- عرض المنتجات في الشريط الجانبي
كيفية إضافة منتجات #WooCommerce المميزة إلى متجر #التجارة_الإلكترونية الخاص بك ➕💸
كيفية إضافة منتجات WooCommerce المميزة
في هذا الدليل، سنستخدم محرر الكتل الافتراضي في WordPress والمكون الإضافي Otter Blocks لإضافة منتجات مميزة إلى متجر عبر الإنترنت. بعد تثبيت WooCommerce، ستتلقى بعض كتل WooCommerce الافتراضية لعرض المنتجات.
تؤدي إضافة المكون الإضافي Otter Blocks إلى فتح العديد من الطرق الأخرى لعرض المنتجات، مثل اللافتات الترويجية وقواعد المنتج المميزة وشروط الرؤية.
✋ قبل أن تفعل أي شيء آخر:
🔌 قم بتثبيت WooCommerce و Otter Blocks وموضوع WooCommerce القابل للتطبيق
ابدأ بتثبيت WooCommerce . بهذه الطريقة، يتحول موقع WordPress الخاص بك إلى متجر عبر الإنترنت مع دعم للمنتجات ومعالجة الدفع.
بعد ذلك، أضف سمة WordPress مع دعم WooCommerce. هناك الكثير للاختيار من بينها، لكننا نوصي بـ Neve كنقطة بداية نظرًا لسرعاته العالية ومكتبته الكبيرة من قوالب البداية.
أخيرًا، قم بتثبيت وتفعيل المكون الإضافي Otter Blocks .
Otter Blocks – Gutenberg Blocks، منشئ الصفحات لمحرر Gutenberg و FSE
هذه العناصر الثلاثة هي ما تحتاجه عند تعلم كيفية إضافة منتجات WooCommerce المميزة.
⚠ ملاحظة: نفترض أيضًا أنك قمت بالفعل بإضافة منتجات إلى متجرك عبر الإنترنت. تعلم كيفية استيراد منتجات متعددة في وقت واحد.
كيفية إنشاء لافتة ترويجية باستخدام منتجات WooCommerce المميزة
في هذا البرنامج التعليمي، سنقوم بإنشاء لافتة ترويجية تعرض صور المنتج وتفاصيله وأزراره للعملاء لمعرفة المزيد/الشراء.
انتقل إلى الصفحات على وورد بريس. افتح خيار الصفحة الرئيسية – الصفحة الأمامية (يمكنك أيضًا إضافة المنتجات المميزة إلى أي صفحة أخرى إذا كنت ترغب في ذلك؛ نحن نستخدم الصفحة الرئيسية فقط كمثال):
يؤدي هذا إلى فتح محرر جوتنبرج. انقر فوق الزر “إضافة كتلة” أو “تبديل أداة إدراج الكتلة”. كلاهما يعرض مكتبة كتل المحتوى المتاحة.
حدد موقع شعار Otter. ضمن قسم الكتل Otter ، ابحث عن كتلة القسم وأدخلها.
قم بإنشاء عمودين متساويين أو مختلفين في الحجم:
سترى عمودين جنبًا إلى جنب مع علامات “+” لإضافة الكتل. انقر فوق واحدة لبدء إدراج كتل المحتوى.
بالنسبة لأحد الأعمدة، ستحتاج إلى كتلة منتج. ابحث عن “المنتجات” لتكشف عن جميع الخيارات المتاحة من WooCommerce و Gutenberg و Otter Blocks.
قد تفكر في هذه الكتل:
- المنتجات حسب الفئة
- المنتجات حسب السمة
- المنتجات حسب العلامة
- منتجات مختارة بعناية
- المنتجات الأكثر مبيعا
يعرض كل خيار من هذه الخيارات منتجًا واحدًا – أو عدة – في المعرض، مع تفاصيل المنتج والصور والتسعير وأزرار الشراء.
في هذا الدليل، سنضيف كتلة المنتجات حس
ب الفئة. للقيام بذلك، يمكنك اختيار فئة المنتج لعرضه. انقر فوق تم بمجرد حصولك على الفئة التي تريدها.
ونتيجة لذلك، يظهر كل منتج من هذه الفئة في العمود. حدد الكتلة، وانتقل إلى علامة التبويب “حظر” الموجودة على اليمين لضبط الإعدادات الخاصة بتلك الكتلة المحددة.
على سبيل المثال، يمكنك تغيير التخطيط لإظهار ثلاثة أعمدة وصف واحد فقط. قد تقرر أيضًا إظهار عناصر المحتوى أو إزالتها مثل صور المنتج أو عناوينه.
الآن بعد أن أصبح لديك معرض المنتجات المطلوب (أو حتى منتج واحد فقط لعرضه)، انقر فوق الزر “إضافة كتلة” في عمود القسم الآخر:
على الرغم من أنه يمكنك إضافة أي كتلة محتوى تريدها، إلا أننا نوصي بالبدء بخيارات العنوان (الأصلي) أو العنوان المتقدم (كتل Otter).
تتيح لك هذه إنشاء عبارة تحث المستخدم على اتخاذ إجراء أو نص شعار لجذب الانتباه. أدخل الكتلة في العمود.
اكتب أي عنوان تريده، ثم انقر فوق مفتاح Enter/Return لبدء سطر جديد من نص الفقرة القياسية. هنا، يمكنك التوسع في العنوان بتفاصيل حول منتجات WooCommerce المميزة.
فيما يلي مثال على العنوان المدمج مع نص الوصف في عمود واحد، متبوعًا بكتلة فئة المنتج في العمود الآخر:
في أي وقت، يمكنك تحديد القسم بأكمله لضبط نمطه. مع تمييز القسم، انتقل إلى Block > Style . إحدى الطرق لإبراز شعار المنتج المميز هي دمج الخلفية. ضمن النمط، استخدم قسم الخلفية والمحتوى لتحديد الصور أو الألوان أو التدرجات اللونية للخلفية:
ومن الحكمة أيضًا تحديد كل عمود قسم لتكوين الإعدادات الخاصة بالعمود. ضمن النمط، نوصي بإضافة بضع وحدات بكسل إلى إعداد الحشو لإعطاء المحتوى الموجود في كل عمود بعض المساحة بعيدًا عن الحواف.
عند الانتهاء من تخصيص شعار المنتج المميز، انقر فوق الزر نشر أو تحديث لإجراء التغييرات مباشرة على موقع الويب الخاص بك.
هذه هي كيفية إضافة منتجات WooCommerce المميزة باستخدام الأعمدة وكتل الفئات والعناوين والخلفية المخصصة!
إضافة شروط الرؤية إلى منتجات WooCommerce المميزة
مع منتجات WooCommerce المميزة، قد ترغب في عرض هذه المنتجات فقط في مواقف معينة، مثل إذا قام المستخدم بتسجيل الدخول أو تسجيل الخروج أو لديه منتجات في سلة التسوق الخاصة به.
للكشف عن المنتجات المميزة في مناسبات محددة فقط، استخدم شروط الرؤية في Otter Blocks.
للبدء، يجب أن يكون لديك بالفعل قسم للمنتجات المميزة مضافًا إلى الصفحة. يمكنك تحقيق ذلك باستخدام الطريقة السابقة، ومع مجموعات مختلفة مثل المنتجات حسب الفئة، والمنتجات الأكثر مبيعًا، والمنتجات المختارة بعناية.
حدد الكتلة التي ترغب في إضافة إعدادات الرؤية إليها. في هذه الحالة، يمكنك النقر فوق معرض منتجات WooCommerce المميز الذي قمت بإنشائه مؤخرًا.
حدد علامة التبويب حظر على اليمين:
قم بالتمرير لأسفل في إعدادات الحظر للعثور على علامة التبويب شروط ا1لرؤية. انقر لفتح علامة التبويب والكشف عن إعداداتها.
هنا، يمكنك إضافة شروط لمجموعة المنتجات المميزة، واختيار الوقت الذي تريد ظهور المنتجات فيه.
انقر فوق إضافة مجموعة قواعد، ثم حدد شرطًا:
يوفر هذا قائمة منسدلة بجميع الشروط المتاحة من خلال Otter Blocks. فيما يلي بعض الشروط المجانية والمتميزة لعرض الكتلة فقط إذا:
- تم تسجيل دخول المستخدم
- تم تسجيل خروج المستخدم
- يتم تعيين نوع المنشور (الذي قمت بنشر الكتلة عليه) على نوع أو فئة منشور محددة
- إنه تاريخ معين
- هناك منتجات في السلة
- لقد وصل العميل إلى إجمالي قيمة الإنفاق
للتعرف على كيفية إضافة منتجات WooCommerce المميزة بشكل مشروط، ما عليك سوى تحديد أحد الشروط. في هذا البرنامج التعليمي، سنختار خيار “المستخدمون الذين قاموا بتسجيل الخروج”.
بهذه الطريقة، نستهدف فقط المستخدمين الذين لم يسجلوا الدخول بالمنتجات، لذلك ربما لا تكون مخصصة للعملاء الأوفياء الذين قاموا بتسجيل الدخول إلى الموقع.
انقر فوق الزر تحديث أو نشر في المنشور/الصفحة لتنشيط الحالة.
لاستخدام قواعد متعددة في نفس الوقت، انقر فوق الزر “إضافة شرط جديد” (مع الاحتفاظ بالشرط الذي تم إنشاؤه مسبقًا).
شرط إضافي ينص على أن الكتلة ستظهر للمستخدمين إذا حدث هذا وذاك. على سبيل المثال، قد نعرض منتجات WooCommerce المميزة فقط إذا قام المستخدم بتسجيل الخروج، وإذا كانت فئة المنشور مدرجة باسم “الموضة”.
من الممكن أيضًا تشغيل شرط “أو”، حيث يتم عرض الكتلة في حالة حدوث هذا أو ذاك.
لإضافة شرط “أو”، يجب عليك النقر فوق الزر “إضافة مجموعة قواعد”، مما يؤدي إلى إنشاء مجموعة منفصلة من القواعد (تتيح لك كل مجموعة تضمين شروط “و” متعددة).
عرض المنتجات في الشريط الجانبي (مع الرسوم المتحركة!)
إن تعلم كيفية إضافة منتجات WooCommerce المميزة يفتح نطاقًا واسعًا من الاحتمالات. ستفكر في طرق مبتكرة لعرض منتجاتك، مثل الشروط أو في الشريط الجانبي.
لتمييز منتجات WooCommerce في الشريط الجانبي، انتقل إلى Appearance > Widgets on WordPress.
طالما أن القالب الخاص بك يدعم الأدوات في الشريط الجانبي (أو في أماكن أخرى مثل التذييل أو الرأس)، يمكنك إضافة منتجات مميزة.
في لوحة عناصر واجهة المستخدم، ابحث عن قسم الشريط الجانبي (أو أي منطقة عنصر واجهة مستخدم ترغب في تحريرها). انقر فوق الزر إضافة كتلة:
اختر واحدة من كتل WooCommerce العديدة التي تعرض المنتجات بتنسيق معرض أو قائمة. في هذه الحالة، سنستخدم كتلة المنتجات المختارة يدويًا ونضع علامة على ثلاثة عناصر. انقر فوق تم.
سترى معاينة للكتلة قيد التنفيذ. حدد الكتلة لتعديل إعداداتها. يمكنك تعديل كل شيء بدءًا من عرض المحتوى وحتى طلب المنتج وشروط الرؤية وحتى الرسوم المتحركة.
عند الحديث عن الرسوم المتحركة، فهي توفر طرقًا بسيطة لإضفاء الإثارة على المنتجات المميزة، وجذب الانتباه عندما يأتي الزوار إلى موقعك. لتحقيق ذلك، افتح علامة التبويب “الرسوم المتحركة” ضمن قسم “الحظر”.
هناك رسوم متحركة للتحميل، ورسوم متحركة للعد، ورسوم متحركة للكتابة. ضع في اعتبارك أن بعض الكتل لا تسمح بالرسوم المتحركة.
كل رسم متحرك له إعداداته الخاصة، مثل تحديد نوع الرسم المتحرك والسرعة والتأخير.
بمجرد أن تصبح الأداة والشريط الجانبي جاهزين، انقر فوق الزر تحديث أو نشر لتفعيلهما. انتقل إلى الواجهة الأمامية لموقعك (منطقة تحتوي على شريط جانبي) لرؤية منتجات WooCommerce المميزة الجديدة أثناء العمل (ومع الرسوم المتحركة إذا استخدمتها).
وهذه هي كيفية إضافة منتجات WooCommerce المميزة! 🎯
الإبداع يؤتي ثماره عند إضافة منتجات WooCommerce المميزة. يمكنك دمج الكتل من WooCommerce، و Otter Blocks، والمكونات الإضافية الأخرى، تلك المتوفرة أصلاً في محرر الكتل، وإضافة المنتجات المميزة إلى أماكن مثل الصفحة الرئيسية، والأشرطة الجانبية، ومتجرك عبر الإنترنت، ومنشورات المدونة.
المصدر: themeisle
قد يهمك:
