اذهب إلى المحتوى

دليل شامل لمكونات ووكومرس


Ali Alrohia

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

مكونات ووكومرس الموجودة في إضافة ووكومرس

001_woocommerce_blocks.png

إن البحث عن كلمة Woo ضمن محرر المكونات يكشف الستار عن 20 مكونًا لووكومرس، إذ توجد هذه المكونات ضمن إضافة ووكومرس، وتُثبت عند تثبيتها.

002_woocommerce_blocks.png

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

مكون عوامل فرز المنتجات النشطة

003_woocommerce_blocks.png

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

مكون جميع المنتجات

004_woocommerce_blocks.png

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

مكون جميع المراجعات

005_woocommerce_blocks.png

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

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

006_woocommerce_blocks.png

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

مكون تصنيف مميز

007_woocommerce_blocks.png

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

مكون منتج مميز

008_woocommerce_blocks.png

يعرض هذا المكون منتجًا واحدًا اخترته من القائمة ليسمح لك بعرضه وتمييزه عن بقية المنتجات.

مكون فرز المنتجات حسب السمات

009_woocommerce_blocks.png

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

مكون فرز المنتجات حسب السعر

010_woocommerce_blocks.png

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

مكون تصفية المنتجات حسب المخزون

011_woocommerce_blocks.png

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

مكون المنتجات المختارة بعناية

012_woocommerce_blocks.png

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

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

013_woocommerce_blocks.png

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

مكون المنتجات التي يسري عليها خصومات

014_woocommerce_blocks.png

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

مكون قائمة تصنيفات المنتجات

015_woocommerce_blocks.png

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

مكون البحث عن منتج

016_woocommerce_blocks.png

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

مكون المنتجات حسب السمة

017_woocommerce_blocks.png

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

مكون المنتجات حسب التصنيف

018_woocommerce_blocks.png

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

مكون المنتجات حسب الوسم

019_woocommerce_blocks.png

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

مكون مراجعات حسب المنتج

020_woocommerce_blocks.png

يعرض هذا المكون مراجعات منتج معين تستطيع اختياره من قائمة منتجاتك.

مكون مراجعات حسب التصنيف

021_woocommerce_blocks.png

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

مكون المنتجات الأعلى تقييما

022_woocommerce_blocks.png

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

إضافة WooCommerce Blocks

023_woocommerce_blocks_plugin.png

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

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

السلة

024_woocommerce_blocks.png

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

إتمام الطلب

025_woocommerce_blocks.png

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

ميزات جديدة في مكونات ووكومرس الحالية

ثلاث من مكونات ووكومرس الحالية تمتلك ميزات جديدة أو مختلفة.

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال WooCommerce Blocks: a Complete Guide لصاحبه Randy A. Brown.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...