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

ملاحظة:

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

الشورت‌كود [products] هو أحد أكثر شورت‌كودات ووكامرس قوة. فهو يسمح لك بعرض المنتجات حسب معرف المنشور (post ID)، وحدة حفظ المخزون (SKU)، التصنيفات، والسمات، مع دعم التصفح عبر الصفحات (pagination)، الترتيب العشوائي، ووسوم المنتجات.

وهذا يلغي الحاجة السابقة لشورت‌كودات متعددة، بما في ذلك:

  • [featured_products]
  • [sale_products]
  • [best_selling_products]
  • [recent_products]
  • [product_attribute]
  • [top_rated_products]

سمات المنتجات المتاحة

السمات التالية متاحة للاستخدام مع الشورت‌كود [products].

سمات عرض المنتجات

تغير هذه السمات طريقة عرض المنتجات وترتيبها وتنسيقها داخل الشورت‌كود [products]:

  • limit: عدد المنتجات المراد عرضها. الافتراضي هو -1 (عرض الكل) عند سرد المنتجات، و -1 (عرض الكل) للتصنيفات.
  • columns: عدد الأعمدة المراد عرضها. الافتراضي هو 4.
  • paginate: تبديل التصفح بين الصفحات. يُستخدم جنباً إلى جنب مع limit. الافتراضي هو false؛ اضبطه على true لتفعيل التصفح.
  • orderby: ترتيـب المنتجات المعروضة حسب خيار واحد أو أكثر. يمكن تمرير خيارات متعددة بإضافة الـ slugs مع مسافة بينها. تشمل الخيارات المتاحة:
    • title: عنوان المنتج. هذا هو وضع الـ orderby الافتراضي إذا لم يتم استخدام أي سمة أخرى.
    • date: تاريخ نشر المنتج.
    • id: معرف المنشور (post ID) الخاص بالمنتج.
    • menu_order: ترتيب القائمة إن وجد (الأرقام الأقل تظهر أولاً).
    • popularity: عدد عمليات الشراء.
    • rand: ترتيب المنتجات عشوائياً عند تحميل الصفحة (قد لا يعمل مع المواقع التي تستخدم التخزين المؤقت caching، لأنه قد يحفظ ترتيباً معيناً).
    • rating: متوسط تقييم المنتج.
  • order: يحدد ما إذا كان ترتيب المنتجات تصاعدياً (ASC) أو تنازلياً (DESC)، باستخدام الطريقة المحددة في orderby. الافتراضي هو ASC.
  • skus: قائمة بـ SKUs للمنتجات تفصل بينها فواصل.
  • category: قائمة بـ slugs التصنيفات تفصل بينها فواصل.
  • tag: قائمة بـ slugs الوسوم تفصل بينها فواصل.
  • class: يضيف فئة غلاف HTML (HTML wrapper class) يمكنك استهدافها وتعديلها باستخدام CSS المخصص.
  • on_sale: استرجاع المنتجات الخاضعة للتخفيض؛ لا يُستخدم بالتزامن مع best_selling أو top_rated.
  • best_selling: استرجاع المنتجات الأفضل مبيعاً؛ يجب ألا يُستخدم بالتزامن مع on_sale أو top_rated.
  • top_rated: استرجاع المنتجات الأعلى تقييماً؛ يجب ألا يُستخدم بالتزامن مع on_sale أو best_selling.

إذا لم تقم بتضمين سمة orderby، فسيعرض النظام المنتجات بترتيب الفرز الافتراضي — أولاً حسب ترتيب القائمة، ثم حسب العنوان.

سمات محتوى المنتجات

تحدد هذه السمات المنتجات التي يتم عرضها في الشورت‌كود [products]:

  • attribute: استرجاع المنتجات باستخدام slug السمة المحدد.
  • terms: قائمة مصطلحات السمة مفصولة بفواصل لاستخدامها مع attribute.
  • terms_operator: عامل لمقارنة مصطلحات السمات. الخيارات المتاحة هي:
    • IN: يعرض المنتجات التي تحتوي على السمة المختارة. هذه هي قيمة terms_operator الافتراضية.
    • NOT IN: يعرض المنتجات التي ليست ضمن السمات المختارة.
    • AND: يعرض المنتجات من جميع السمات المختارة.
  • tag_operator: يُستخدم لمقارنة الوسوم. تشمل الخيارات المتاحة:
    • IN: يعرض المنتجات التي تحتوي على الوسوم المختارة؛ هذه هي قيمة tag_operator الافتراضية.
    • NOT IN: يعرض المنتجات التي ليست ضمن الوسوم المختارة.
    • AND: يعرض المنتجات من جميع الوسوم المختارة.
  • visibility: يعرض المنتجات بناءً على الظهور المحدد. تشمل الخيارات المتاحة:
    • visible: المنتجات الظاهرة على المتجر ونتائج البحث. هذا خيار visibility الافتراضي.
    • catalog: المنتجات الظاهرة على المتجر فقط، وليس في نتائج البحث.
    • search: المنتجات الظاهرة في نتائج البحث فقط، وليس على المتجر.
    • hidden: المنتجات المخفية عن المتجر والبحث معاً، ولا يمكن الوصول إليها إلا عبر رابط مباشر.
    • featured: المنتجات المعلمة كمنتجات مميزة (Featured Products).
  • category: استرجاع المنتجات باستخدام slug التصنيف المحدد.
  • tag: استرجاع المنتجات باستخدام slug الوسم المحدد.
  • cat_operator: عامل مقارنة مصطلحات التصنيف. الخيارات المتاحة هي:
    • IN: سيعرض المنتجات داخل التصنيف المختار. هذه قيمة cat_operator الافتراضية.
    • NOT IN: سيعرض المنتجات التي ليست ضمن التصنيف المختار.
    • AND: سيعرض المنتجات التي تنتمي إلى جميع التصنيفات المختارة.
  • ids: يعرض المنتجات بناءً على قائمة مفصولة بفواصل لمعرفات المنشورات (Post IDs).
  • skus: يعرض المنتجات بناءً على قائمة مفصولة بفواصل لوحدات SKU.

ملاحظة:

إذا كان ينبغي ظهور المنتج ولكنّه لا يظهر في الوقت الحالي، فتأكد من أنه لم يتم تعيينه على "Hidden" في إعدادات "Catalog Visibility".

لعثور على معرف المنتج (Product ID)، اذهب إلى شاشة المنتجات ومرر الماوس فوق صف المنتج. سيظهر معرف المنتج أسفل عنوان المنتج كما هو موضح أدناه.

سمات المنتجات الخاصة

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

  • best_selling: يعرض منتجاتك الأفضل مبيعاً عند ضبطه على true.
  • on_sale: يعرض المنتجات الخاضعة للتخفيض عند ضبطه على true.

أمثلة على سيناريوهات شورت‌كود [products]

تجد أدناه بعض الأمثلة حول كيفية استخدام الشورت‌كود [products] جنباً إلى جنب مع السمات (args).

السيناريو 1: عناصر تخفيض عشوائية

إليك كيفية عرض أربعة منتجات بخصم بشكل عشوائي:

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]

يوضح هذا الشورت‌كود صراحةً 4 منتجات في 4 أعمدة (صف واحد)، عارضاً أكثر عناصر التخفيض شيوعاً. ويضيف أيضاً فئة CSS المسمى quick-sale التي يمكننا استهدافها وتعديلها باستخدام CSS المخصص.

Four on-sale products displayed using the products shortcode.

السيناريو 2: المنتجات المميزة

إليك كيفية عرض المنتجات المميزة، اثنان لكل صف، بحد أقصى أربعة عناصر:

[products limit="4" columns="2" visibility="featured" ]

يحدد هذا الشورت‌كود تحميل ما يصل إلى 4 منتجات في عمودين وأنه يجب أن تكون مميزة. لم نستخدم سمة orderby، لذا سيعرض الشورت‌كود المنتجات بالترتيب الافتراضي (حسب ترتيب القائمة، ثم حسب العنوان، مرتبة من A إلى Z افتراضياً نظراً لعدم استخدام order).

Four featured products displayed using the products shortcode.

السيناريو 3: المنتجات الأكثر مبيعاً

إليك كيفية عرض أفضل 3 منتجات مبيعاً في صف واحد:

[products limit="3" columns="3" best_selling="true" ]
Three best-selling products displayed using the products shortcode.
السيناريو 4: أحدث المنتجات

في هذا المثال، سنعرض أحدث المنتجات أولاً — أربعة منتجات عبر صف واحد. لتحقيق ذلك، سنستخدم Post ID (الذي يزداد تدريجياً مع المنشورات الجديدة ويتم إنشاؤه عند إنشاء صفحة المنتج)، إلى جانب الأمر order و orderby. بما أنه لا يمكنك رؤية معرف المنشور (Post ID) من واجهة المتجر الأمامية، فقد تم دمج أرقام المعرفات فوق الصور.

[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]
Four products displayed with their individual post IDs superimposed over them.

السيناريو 5: تصنيفات محددة

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

[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"]
Products in the 'tshirts' and 'hoodies' categories displayed using the products shortcode.

بدلاً من ذلك، إذا كنت ترغب فقط في عرض المنتجات التي ليست ضمن تلك التصنيفات، فقم بتحديث cat_operator إلى NOT IN.

[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="NOT IN"]

ملاحظة: على الرغم من ضبط الحد (limit) على 8، إلا أن 4 منتجات فقط تطابق هذا المعيار، لذلك يتم عرض 4 منتجات فقط.

Products not in the 'tshirts' and 'hoodies' categories displayed using the products shortcode.

السيناريو 6: عرض السمات

كل قطعة ملابس لها سمة — إما "Spring/Summer" أو "Fall/Winter"، اعتماداً على الموسم المناسب، مع حصول بعض الإكسسوارات على الاثنين معاً لأنها ارتديت طوال العام. في هذا المثال، توجد ثلاثة منتجات لكل صف، تعرض جميع عناصر "Spring/Summer". معرف السمة (slug) هو season؛ وقيم السمة (terms) هي warm و cold. لقد رتبنا المنتجات أيضاً من الأحدث إلى الأقدم.

[products columns="3" attribute="season" terms="warm" orderby="date"]
Products with an attribute of 'warm' displayed using the products shortcode.

بدلاً من ذلك، إذا كنا نريد عرض كل شيء ما عدا منتجات الطقس الدافئ، فيمكننا إضافة NOT IN كـ terms_operator:

[products columns="3" attribute="season" terms="warm" terms_operator="NOT IN"]
Products that do not have an attribute of 'warm' displayed using the products shortcode.


ملاحظة: باستخدام NOT IN، نقوم باستبعاد المنتجات الموجودة في كل من "Spring/Summer" و "Fall/Winter". إذا أردنا إظهار جميع المعدات المناسبة للطقس البارد بما في ذلك هذه الإكسسوارات المشتركة، فسوف نغير المصطلح من warm إلى cold.

السيناريو 7: عرض المنتجات التي تحمل وسم "hoodie" فقط

[products tag="hoodie"]
Products with the 'hoodie' tag displayed using the products shortcode.

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

نطاق الدعم:

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

عند استخدام الشورت‌كود [products]، يمكنك اختيار ترتيب المنتجات حسب القيم المحددة مسبقاً أعلاه. يمكنك أيضاً فرز المنتجات حسب حقول الميتا المخصصة باستخدام الكود أدناه (في هذا المثال نقوم بترتيب المنتجات حسب السعر):

add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );

function woocommerce_shortcode_products_orderby( $args ) {

    $standard_array = array('menu_order','title','date','rand','id');

    if( isset( $args['orderby'] ) && !in_array( $args['orderby'], $standard_array ) ) {
        $args['meta_key'] = $args['orderby'];
        $args['orderby']  = 'meta_value_num'; 
    }

    return $args;
}

ستحتاج إلى وضع هذا المقتطف في ملف functions.php داخل مجلد القالب الخاص بك ثم تخصيصه عن طريق تحرير meta_key.

الأسئلة والدعم

هل لا تزال لديك أسئلة وتحتاج إلى مساعدة؟

هذا التوثيق يتعلق بالإضافة المجانية core WooCommerce plugin، والتي يتم توفير الدعم لها في منتديات المجتمع على WordPress.org. من خلال البحث في هذا المنتدى، ستجد غالباً أن سؤالك قد سُئل وأُجيب عليه من قبل.

إذا لم تقم بإنشاء حساب على WordPress.org لاستخدام المنتديات، إليك الطريقة.

  • إذا كنت تبحث عن توسيع الوظائف الأساسية المعروضة هنا، فنحن نوصي بمراجعة الإضافات المتاحة في WooCommerce Marketplace.
  • هل تحتاج إلى دعم متقدم مستمر أو تخصيص مبني لووكامرس؟ قم بتوظيف Woo Agency Partner.
  • هل أنت مطور تبني تكاملك أو امتدادك الخاص لووكامرس؟ تحقق من Developer Resources.
هل كانت المقالة مفيدة ؟ 0 أعضاء وجدوا هذه المقالة مفيدة (0 التصويتات)