تشكل Elementor و WooCommerce معًا واحدة من أكثر التركيبات مرونة لبناء متاجر إلكترونية مخصصة على WordPress. بينما تتعامل WooCommerce مع وظائف التجارة الإلكترونية (المنتجات، السلة، الدفع، المدفوعات)، تمنحك Elementor السيطرة المرئية على كيفية ظهور صفحات المتجر ووظيفتها. في هذا الدليل، نستعرض كيفية بناء الصفحات الأساسية لـ WooCommerce باستخدام Elementor، بما في ذلك صفحات المنتجات، أرشيف المتجر، وتجربة السلة.
يفترض هذا الدليل أنك قد قمت بتثبيت WordPress و WooCommerce و Elementor Pro. يتطلب استخدام عناصر واجهة WooCommerce وجود Elementor Pro - النسخة المجانية من Elementor لا تتضمنها.
ما تحتاجه قبل البدء
| المتطلب | لماذا هو مطلوب | أين تحصل عليه |
|---|---|---|
| WordPress 6.x+ | منصة CMS الأساسية | wordpress.org |
| WooCommerce (مجاني) | وظائف التجارة الإلكترونية | دليل إضافات WordPress |
| Elementor Pro | عناصر واجهة WooCommerce ومولد القوالب | PluginTheme.net |
| ثيم متوافق | أساس لمتجرك | دليل اختيار الثيمات |
| منتجات نموذجية | محتوى لتصميم القوالب | WooCommerce → أدوات → استيراد بيانات نموذجية |
فهم مولد WooCommerce في Elementor
يتضمن Elementor Pro مولد WooCommerce مخصص داخل نظام مولد الثيمات الخاص به. يتيح لك ذلك إنشاء قوالب مخصصة لـ:
- صفحة منتج فردي: التحكم في تخطيط صفحات المنتجات الفردية
- أرشيف المنتجات: تخصيص صفحة المتجر وصفحات الفئات
- صفحة السلة: تصميم تخطيط سلة مخصص
- صفحة الدفع: تخصيص تخطيط نموذج الدفع
- صفحة حسابي: إعادة تصميم لوحة تحكم حساب العميل
تستخدم كل قالب عناصر واجهة WooCommerce المحددة التي تسحب البيانات الديناميكية من منتجاتك. هذا يعني أنك تصمم التخطيط مرة واحدة، ويطبق على جميع المنتجات (أو فئات محددة) تلقائيًا.
بناء صفحة منتج مخصصة
الخطوة 1: إنشاء القالب
- انتقل إلى القوالب → مولد الثيمات في لوحة تحكم WordPress الخاصة بك
- انقر على "إضافة جديد" واختر "منتج فردي" كنوع القالب
- اختر قالب صفحة منتج مسبق البناء أو ابدأ من لوحة فارغة
- سيفتح محرر Elementor مع عناصر واجهة WooCommerce المتاحة في اللوحة
الخطوة 2: إضافة عناصر واجهة WooCommerce
عناصر واجهة WooCommerce الأساسية لصفحات المنتجات:
| عنصر الواجهة | ما يعرضه | خيارات التخصيص |
|---|---|---|
| صور المنتج | معرض مع مصغرات وصندوق عرض | تخطيط المعرض، موضع المصغرات، تبديل التكبير |
| عنوان المنتج | اسم المنتج (H1) | الخط، اللون، المحاذاة |
| سعر المنتج | السعر العادي وسعر التخفيض | الخط، لون شارة التخفيض، التخطيط |
| تقييم المنتج | تقييم النجوم من المراجعات | لون النجوم، الحجم، المحاذاة |
| إضافة إلى السلة | محدد الكمية + زر إضافة إلى السلة | أسلوب الزر، الألوان، تخطيط الكمية |
| وصف قصير للمنتج | ملخص قصير للمنتج | الخط، المسافات |
| بيانات المنتج | SKU، الفئات، العلامات | التخطيط، الخط، الفاصل |
| علامات بيانات المنتج | الوصف، المراجعات، علامات المعلومات الإضافية | أسلوب العلامة، الحدود، المسافات |
| منتجات ذات صلة | منتجات من نفس الفئة | الأعمدة، العدد، الترتيب |
| الترقيات | ترقيات مرتبطة يدويًا |
الخطوة 3: أفضل ممارسات التخطيط
تتبع صفحة المنتج ذات التحويل العالي نمط تخطيط تم اختباره:
- في الجزء العلوي: صور المنتج (يسار، 50-60% عرض) + العنوان، السعر، التقييم، الوصف القصير، وزر الإضافة إلى السلة (يمين، 40-50% عرض)
- في الجزء السفلي: علامات بيانات المنتج (الوصف الكامل، المواصفات، المراجعات)
- القسم السفلي: المنتجات ذات الصلة والعروض الإضافية في شبكة (3-4 أعمدة)
- عناصر الثقة: معلومات الشحن، سياسة الإرجاع، شارات الأمان بالقرب من زر الإضافة إلى السلة
احتفظ بزر الإضافة إلى السلة مرئيًا دون التمرير على كل من سطح المكتب والجوال. استخدم ألوان متباينة للزر لجذب الانتباه.
تخصيص صفحة المتجر (أرشيف المنتجات)
الخطوة 1: إنشاء قالب أرشيف
- اذهب إلى القوالب → منشئ القوالب → أرشيف المنتجات
- أضف قالبًا جديدًا واختر "أرشيف المنتجات" كنوع
- حدد شروط العرض (جميع الأرشيفات، فئات محددة، أو صفحات العلامات)
الخطوة 2: تكوين شبكة المنتجات
يعرض عنصر واجهة المستخدم أرشيف المنتجات قائمة منتجاتك مع هذه الخيارات:
- الأعمدة: 2-6 أعمدة (3-4 تعمل بشكل جيد لمعظم المتاجر)
- المنتجات لكل صفحة: 12-24 هو المعيار لتجربة المستخدم
- التصفح: صفحات مرقمة، زر "تحميل المزيد"، أو التمرير اللانهائي
- قائمة فرز: السماح للعملاء بفرز حسب السعر، الشعبية، أو التقييم
- شعار التخفيض: تخصيص موقع شعار التخفيض، اللون، والنص
للمتاجر التي تحتوي على العديد من المنتجات، أضف تصفية الفئات فوق الشبكة. يمكنك استخدام عنصر واجهة المستخدم Menu من Elementor أو إضافة تصفية المنتجات مثل JetWooBuilder لخيارات تصفية متقدمة.
تصميم صفحة السلة
يتيح لك Elementor Pro تخصيص تخطيط صفحة السلة. يجب أن تحتوي صفحة السلة الجيدة على:
- عرض صور المنتجات، الأسماء، الأسعار، والكميات في جدول نظيف
- عرض المجموع الإجمالي بشكل بارز
- تضمين زر "متابعة التسوق" الذي يعود إلى صفحة المتجر
- عرض حاسبة الشحن حتى يتمكن العملاء من تقدير تكاليف التوصيل
- عرض منتجات البيع المتقاطع أسفل جدول السلة
يستبدل عنصر واجهة المستخدم Cart من Elementor تخطيط سلة WooCommerce الافتراضي بمحرر مرئي حيث يمكنك تنسيق كل عنصر—حدود الجدول، ألوان الأزرار، الطباعة، والمسافات.
تخصيص صفحة الدفع
تؤثر صفحة الدفع بشكل مباشر على معدل التحويل الخاص بك. يوفر عنصر واجهة المستخدم Checkout من Elementor Pro التحكم في:
- تخطيط النموذج: نموذج فواتير/شحن عمود واحد أو عمودين
- موضع ملخص الطلب: جنبًا إلى جنب مع النموذج أو فوق/تحت
- تنسيق الزر: لون زر الطلب، الحجم، والنص
- قسم الدفع: زر راديو أو تخطيط علامات لطرق الدفع
- شارات الثقة: إضافة رموز الأمان ونص الضمان بالقرب من نموذج الدفع
للحصول على نصائح تحسين تحويل الدفع، راجع دليل تحسين الدفع في WooCommerce.
اعتبارات الأداء
يضيف Elementor CSS وJavaScript إلى صفحاتك. بالنسبة لمتجر WooCommerce، يرتبط الأداء مباشرة بالتحويلات. احتفظ بهذه النصائح في اعتبارك:
- استخدم حاويات Flexbox بدلاً من الأقسام/الأعمدة لعدد أقل من عناصر DOM
- تحسين صور المنتجات: استخدم تنسيق WebP، الأبعاد المناسبة، والتحميل الكسول. راجع دليل تحسين الصور
- حدد عدد الأدوات: كل أداة تضيف تعليمات برمجية؛ استخدم فقط ما تحتاجه
- تفعيل ميزات أداء Elementor: تحسين تحميل الأصول، تحسين تحميل CSS
- استخدم إضافة للتخزين المؤقت: WP Rocket تعمل بشكل جيد مع إعدادات Elementor WooCommerce
الإضافات الأساسية لـ Elementor WooCommerce
هذه الإضافات لـ Elementor توسع من قدرات بناء WooCommerce:
| الإضافة | الميزات الرئيسية لـ WooCommerce |
|---|---|
| JetWooBuilder | شبكات منتجات متقدمة، قوالب أرشيف مخصصة، تخطيطات منتجات فردية مع منطق شرطي |
| Essential Addons Pro | شبكة منتجات، دوار منتجات، صفحة إنهاء الطلب لـ WooCommerce |
| Happy Elementor Addons | شبكة فئات المنتجات، سلة التسوق الصغيرة، دوار المنتجات |
الأسئلة الشائعة
هل أحتاج إلى Elementor Pro لـ WooCommerce، أم أن النسخة المجانية تعمل؟
يتطلب الأمر Elementor Pro للأدوات الخاصة بـ WooCommerce (صور المنتجات، إضافة إلى السلة، علامات بيانات المنتج، السلة، إنهاء الطلب، إلخ). النسخة المجانية من Elementor لا تتضمن هذه الأدوات. يمكنك استخدام النسخة المجانية لتصميم الصفحات العادية، ولكن القوالب المخصصة لـ WooCommerce تتطلب Elementor Pro.
هل يمكنني استخدام Elementor لصفحة إنهاء الطلب؟
نعم. يتضمن Elementor Pro أداة إنهاء الطلب التي تحل محل تخطيط إنهاء الطلب الافتراضي لـ WooCommerce. يمكنك تخصيص حقول النموذج، ملخص الطلب، قسم الدفع، والتخطيط العام. ومع ذلك، كن حذرًا مع التخصيصات الثقيلة التي قد تؤدي إلى كسر تكامل بوابات الدفع - اختبر دائمًا تدفق الشراء الكامل بعد إجراء التغييرات.
كيف يمكنني إنشاء تخطيطات صفحات منتجات مختلفة لفئات مختلفة؟
في منشئ القوالب الخاص بـ Elementor، يمكنك تعيين شروط العرض لكل قالب. أنشئ قالب صفحة منتج واحد للملابس (مع محددات الحجم/اللون)، وآخر للمنتجات الرقمية (بدون معلومات الشحن)، وهكذا. ينطبق كل قالب فقط على المنتجات في الفئات المحددة.
هل يبطئ Elementor من WooCommerce؟
يضيف Elementor تحميل CSS وJavaScript إلى أي صفحة. في صفحات المنتجات التي تحتوي على العديد من الأدوات، يمكن أن تزيد أوقات التحميل بمقدار 0.5-1.5 ثانية مقارنة بالقوالب الافتراضية لـ WooCommerce. يساعد استخدام ميزات الأداء المدمجة في Elementor، وتحسين الصور، واستخدام إضافة للتخزين المؤقت في التخفيف من هذا التأثير. بالنسبة للمتاجر التي تتطلب أداءً عاليًا، ضع في اعتبارك استخدام ثيم أخف مثل GeneratePress.
هل يمكنني استخدام قوالب Elementor WooCommerce مع أي ثيم؟
تعمل معظم قوالب Elementor WooCommerce مع أي ثيم يدعم WooCommerce. ومع ذلك، قد تحتوي بعض الثيمات على تصميمات خاصة بصفحات المنتجات تتعارض مع قوالب Elementor. تم تصميم ثيمات مثل Astra وGeneratePress وOceanWP للعمل بسلاسة مع Elementor وتوفير أنظف قماش للقوالب المخصصة.
احصل على Elementor Pro لبناء متجر WooCommerce
احصل على جميع أدوات WooCommerce، منشئ القوالب، وأكثر من 100 قالب Pro. قم ببناء صفحات منتجات مخصصة، أرشيفات المتجر، وتخطيطات إنهاء الطلب بصريًا.
تصفح Elementor Pro →
