4.3WooCommerce Builder: المتجر وبطاقة المنتج
الأساسي في 30 ثانية
- WooCommerce هو إضافة التجارة الإلكترونية المرجعية لـ WordPress (محرّك المتجر).
- WooCommerce Builder (Pro) يُصمّم بصريًا صفحات المتجر وبطاقة المنتج.
- مسار الشراء (متجر → منتج → سلّة → دفع) يجب أن يكون واضحًا وسلسًا.
الخيط الناظم — نادية تفتح متجرًا
يريد النجّار بيع بعض المنتجات على الإنترنت (أثاث صغير، إكسسوارات). تُثبّت نادية WooCommerce (محرّك التجارة الإلكترونية)، ثم تستخدم WooCommerce Builder في Pro للعناية بصفحة المتجر (شبكة منتجات) وبطاقة المنتج (صور، سعر، زر «أضف إلى السلّة»). تحرص على مسار شراء بلا احتكاك.
تكملة 4.2 — من المحتوى إلى التجارة.
1. WooCommerce والـ Builder
WooCommerce هو إضافة التجارة الإلكترونية المرجعية لـ WordPress (مجانية): هو محرّك المتجر (منتجات، سلّة، طلبات، دفع). وWooCommerce Builder في Elementor Pro يتيح التصميم البصريّ لصفحات المتجر: صفحة المنتج (single product) وصفحات القوائم (متجر، فئات)، غالبًا عبر Loop Builder (4.2).
تُخصّص نادية بطاقة المنتج (معرض صور، عنوان، سعر، وصف، زر «أضف إلى السلّة») وشبكة المتجر، بهويّة النجّار.
2. مسار الشراء
الرهان: مسار شراء واضح — من المتجر إلى المنتج، إلى السلّة، إلى الدفع (checkout). يجب أن تكون كل مرحلة مقروءة وبلا احتكاك: سعر ظاهر، زر إضافة بديهيّ، سلّة ودفع مُطمئنان.
تُبقي نادية المسار بسيطًا: مراحل قليلة، معلومات واضحة (توصيل، دفع)، وتختبر شراءً من الطرف إلى الطرف قبل التسليم.
🔎 مثال ملموس — متجر النجّار (حالة نادية)
WooCommerce مُثبَّت (محرّك: منتجات، سلّة، دفع).
WooCommerce Builder:
- بطاقة المنتج: معرض + عنوان + سعر + «أضف إلى السلّة».
- المتجر: شبكة منتجات (Loop) بهويّة الموقع.
المسار مُختبَر: متجر → منتج → سلّة → دفع.النتيجة: متجر مُعتنى به ومتّسق.
الدرس: مسار واضح، مُختبَر من الطرف إلى الطرف.
مفردات القسم
- WooCommerce
- إضافة التجارة الإلكترونية المرجعية لـ WordPress: محرّك المتجر.
مثال بسيط: يُدير منتجات، سلّة، طلبات، دفع.
ما ليس كذلك: ظنّ أن Elementor يُدير التجارة وحده.
رد فعل: WooCommerce = محرّك تجارة؛ Elementor = تصميم.
- WooCommerce Builder (Pro)
- أداة Elementor Pro لتصميم صفحات المتجر والمنتج بصريًا.
مثال بسيط: تخصيص بطاقة المنتج.
ما ليس كذلك: خلطه بـ WooCommerce (المحرّك).
رد فعل: تصميم صفحات التجارة → WooCommerce Builder.
- صفحة المنتج (single)
- قالب بطاقة منتج (صور، عنوان، سعر، وصف، زر إضافة).
مثال بسيط: بطاقة أثاث صغير بمعرض وسعر.
ما ليس كذلك: بطاقة منتج مُربِكة، سعر مخفيّ.
رد فعل: سعر ظاهر + زر إضافة بديهيّ.
- المتجر / الفئات
- الصفحات التي تسرد المنتجات (شبكات)، غالبًا عبر Loop Builder.
مثال بسيط: شبكة منتجات المتجر.
ما ليس كذلك: قائمة منتجات خام غير مُعتنى بها.
رد فعل: قائمة منتجات → Loop Builder.
- مسار الشراء
- من المتجر إلى المنتج، إلى السلّة، إلى الدفع: واضح وبلا احتكاك.
مثال بسيط: مراحل قليلة، معلومات واضحة، دفع مُطمئن.
ما ليس كذلك: قمع شراء مُربِك يجعل الزبون يتخلّى.
رد فعل: اختبر الشراء من الطرف إلى الطرف قبل التسليم.
في التطبيق — تخصيص متجر
- ثبّت WooCommerce (محرّك التجارة) وأضف منتج اختبار.
- بـ WooCommerce Builder، صمّم بطاقة المنتج (معرض، سعر، زر إضافة).
- صمّم صفحة المتجر في شبكة (Loop) بهويّة الموقع.
- اختبر المسار الكامل: متجر → منتج → سلّة → دفع.
نصّ جاهز للقول — تقديم المتجر للزبون (20 ث)
«متجرك على الإنترنت جاهز: شبكة واضحة لمنتجاتك، بطاقة مفصّلة بصور وسعر وزر شراء، ثم سلّة ودفع مُطمئنان. اختبرتُ شراءً من الطرف إلى الطرف للتأكّد من أن زبائنك يستطيعون الطلب دون أي صعوبة.»
أصرّي على المسار المُختبَر من الطرف إلى الطرف.
قالب للنسخ واللصق — تحقّق المتجر
WOOCOMMERCE مُثبَّت (محرّك): نعم / لا
بطاقة المنتج: معرض ___ سعر ظاهر ___ زر إضافة ___
المتجر: شبكة منتجات (Loop) بالهويّة: نعم / لا
المسار مُختبَر (متجر→منتج→سلّة→دفع): نعم / لا
معلومات مفتاحية (توصيل، دفع) واضحة: نعم / لامتجر صغير
بعض المنتجات: بطاقة مُعتنى بها، مسار بسيط جدًا.
فئات
عدّة عائلات منتجات: شبكات حسب الفئة (Loop).
الجوّال
شراء مُختبَر على الجوّال: زر الإضافة والدفع سهلان بالإصبع.
ثقة
اعرض بوضوح التوصيل والمهل ووسائل الدفع.
✓ ممارسات جيدة
- ميّز WooCommerce (محرّك) والـ Builder (تصميم).
- اجعل السعر وزر الإضافة بديهيَّين.
- اختبر الشراء من الطرف إلى الطرف، على الجوّال أيضًا.
✗ أخطاء شائعة
- خلط WooCommerce والـ WooCommerce Builder.
- مسار شراء مُربِك (تخلٍّ).
- التسليم دون اختبار شراء حقيقيّ.
النقاط الأساسية
- WooCommerce = محرّك تجارة (مجانيّ).
- WooCommerce Builder (Pro) = تصميم الصفحات.
- بطاقة منتج واضحة (معرض، سعر، إضافة).
- مسار شراء بسيط، مُختبَر من الطرف إلى الطرف.
تحدّي 48 ساعة — طبّق غدًا
ثبّت WooCommerce، أضف منتج اختبار، صمّم بطاقة منتج بالـ Builder، ثم اختبر مسار متجر → منتج → سلّة → دفع، بما فيه على الجوّال. 30 دقيقة.
- أميّز WooCommerce والـ Builder.
- أُصمّم بطاقة منتج واضحة.
- أختبر مسار الشراء الكامل.
أسئلة شائعة
هل WooCommerce مدفوع؟
لا: WooCommerce إضافة مجانية (محرّك التجارة). وWooCommerce Builder، الذي يخدم تصميم الصفحات، جزء من Elementor Pro.
ماذا يمكن تخصيصه؟
بطاقة المنتج (معرض، عنوان، سعر، وصف، زر إضافة) وصفحات القوائم (متجر، فئات)، بهويّة الموقع، غالبًا عبر Loop Builder.
هل يجب اختبار الشراء؟
نعم، إلزامًا: اختبر المسار الكامل (متجر → منتج → سلّة → دفع)، بما فيه على الجوّال، قبل التسليم. قمع مُربِك يجعل الزبون يتخلّى.
تريد نادية تصميم بطاقة منتج النجّار. ما الإطار الذهنيّ الصحيح؟