نظرة عامة على البرنامج المساعد الجديد WooCommerce Blocks

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

البرنامج المساعد كتل WooCommerce

WooCommerce Blocks هي وظيفة إضافية جديدة لـ WooCommerce تضيف 7 كتل إلى Gutenberg:

1. المنتج المميز
2. منتجات منتقاة بعناية
3. أفضل المنتجات مبيعا
4. المنتجات الأعلى تقييماً
5. أحدث المنتجات
6. على بيع المنتجات
7. المنتجات حسب الفئة

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

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

تتضمن الكتل أيضًا علامة تبويب Gutenberg Advanced القياسية مع حقول CSS المخصصة.

قم بتنشيط مجموعة المنتجات

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

يمكنك تنشيط الحظر في قائمة المكونات الإضافية أو عن طريق النقر فوق الزر الموجود أعلى لوحة تحكم WordPress.

استخدام كتل WooCommerce

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

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

دعونا نلقي نظرة على كل كتلة.

المنتج المميز

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

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

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

منتجات منتقاة بعناية

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

يؤدي تحديد المنتجات إلى إضافتها إلى التخطيط داخل الشبكة.

أفضل المنتجات مبيعا

لا تسمح لك أفضل المنتجات مبيعًا باختيار أي شيء من المجموعة ، ولكن لا يزال بإمكانك إجراء جميع التخصيصات الخاصة بك في الإعدادات على اليمين. هنا ، يمكنك تحديد عدد الأعمدة والصفوف (اختر من 1 إلى 6 لكل منها) ، والتصفية حسب الفئة ، وضبط CSS.

في هذا المثال ، اخترت 6 أعمدة وصفين وفئة الملابس.

المنتجات الأعلى تقييماً

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

أحدث المنتجات

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

على بيع المنتجات

تقوم "المنتجات المعروضة للبيع" تلقائيًا بتحميل كافة المنتجات المعروضة للبيع. يتضمن أيضًا خيارات التخطيط للأعمدة والصفوف وفلتر المنتج و CSS. يضيف هذا الخيار خيار Order By حتى تتمكن من الطلب حسب الحداثة أو السعر أو التصنيف أو المبيعات أو العنوان أو ترتيب القائمة. في هذا المثال ، قمت بتعيين الأعمدة على 2 والصفوف على 4. تركت فئة المنتج على الوضع الافتراضي.

المنتجات حسب الفئة

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

في هذا المثال ، قمت بتحديد الفئات الخاصة بي ، وقمت بتعيين الأعمدة على 4 ، والصفوف على 2 ، وقمت بترتيب المنتجات أبجديًا.

أمثلة على الصفحات باستخدام كتل WooCommerce

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

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

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

إليك عبارة CTA قصيرة تضيف كتلة منتقاة يدويًا وكتلة نصية في عمود مزدوج.

الصفحة بسيطة ولكنها عملية.

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

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

لهذا ، أضفت تخطيطًا من عمودين وأضفت كتلة نصية وكتلة أفضل المنتجات مبيعًا مع عمودين وصفين.

خواطر ختامية

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

أرغب في رؤية المزيد من ميزات التصميم (خاصة بالنسبة للأزرار والنص وتراكبات التمرير). ظللت أرغب في التخصيص مثلما كنت أفعل مع Divi (أعتقد أن Divi قد أفسدني). إنه يتضمن حقول فئة CSS التي ستساعد أولئك الذين يستخدمون CSS. حتى بدون الكثير من التخصيصات ، أحببت استخدام الكتل. إذا كنت تريد تضمين منتجات WooCommerce في صفحات ومنشورات Gutenberg ، فإن WooCommerce Blocks تستحق المحاولة.

نريد أن نسمع منك. هل جربت حظر WooCommerce؟ أخبرنا عن تجربتك في التعليقات.

صورة مميزة عبر Jomic / shutterstock.com