تعرف على كيفية تخصيص صفحات منتج WooCommerce بشكل مرئي باستخدام Elementor.
قم بإنشاء متجر WooCommerce أفضل باستخدام Elementor
لجعل متجر التجارة الإلكترونية الخاص بك متميزًا ولإنشاء تجربة فريدة لعملائك حقًا ، يجب أن تكون قادرًا على تخصيص صفحة منتجك. علاوة على ذلك ، تعد القدرة على تخصيص صفحة منتجك بصريًا أمرًا بالغ الأهمية للحفاظ على نمط واحد في جميع أنحاء متجرك عبر الإنترنت.
لذا ، هل تريد تخصيص صفحات منتج WooCommerce الخاصة بك؟ حسنًا ، أنت محظوظ!
يجعل Elementor من السهل جدًا سحب العناصر المختلفة لصفحات المنتج الفردية وإفلاتها بصريًا ، وتخصيص التصميم كيفما تشاء.
في الماضي ، كانت هذه الأنواع من دروس تصميم WooCommerce تضم عشرات من سطور التعليمات البرمجية.
لحسن الحظ ، لقد ولت تلك الأيام – بفضل Elementor WooCommerce Builder .
الآن ، يمكنك التحكم الكامل في تصميمك وتخطيط صفحة المنتج بقوة Elementor Pro. لا حاجة لدمج الإجراءات أو الخطافات ، أو الخوض في ملفات PHP المختلفة. يتم إجراء كل تخصيص للتصميم في الواجهة الأمامية ، مباشرةً من Elementorpage builder.
قالب منتج WooCommerce الافتراضي
تبدو صفحة منتج WooCommerce الأساسية كما يلي:
صفحة منتج دورة المياه الافتراضية
باستخدام Elementor ، يمكنك اللعب مع تخطيط قالب صفحة المنتج كيفما تشاء. في هذا الدليل ، ستتعلم كيفية إنشاء تصميم صفحة المنتج هذا:
منتجات WooCommerce كأنواع منشورات مخصصة
نظرًا لأنك ستستخدم قالب منتج واحد من Elementor ، فبمجرد الانتهاء من إنشاء النموذج ، ستتمكن من تطبيقه عبر منتجاتك ، وكذلك لفئات معينة أو شروط أخرى.
كيفية تخصيص صفحة منتج WooCommerce
في هذا البرنامج التعليمي ، ينصب التركيز على تخصيص صفحة المنتج ، لذلك سنتخطى إعداد WooCommerce الأساسي وكيفية إضافة منتجات جديدة. تحقق من برنامج WooCommerce التعليمي إذا كنت بحاجة إلى مساعدة في ذلك.
بعد الإعداد ، يجب أن يكون لديك WooCommerce مثبتًا ، وإضافة بعض المنتجات ذات الصلة إلى موقعك.
يجب أيضًا تثبيت Elementor & Elementor Pro للحصول على إمكانات التصميم المرئي.
ملحوظة! إذا لم يتم تنشيط WooCommerce ، فلن تتمكن من الوصول إلى قوالب منتجات Elementor.
الخطوة 1: قم بإنشاء نموذج منتج واحد
إنشاء قالب صفحة المنتج
لبدء تصميم قالب المنتج الفردي في Elementor ، سوف نتبع إجراءً مشابهًا لإنشاء القالب الفردي العادي .
الخطوة 2: اختر قالب صفحة منتج مُصمم مسبقًا ، أو أنشئ واحدًا من البداية
أمثلة على صفحة المنتج
أسهل طريقة للبدء هي استخدام أحد قوالب صفحة المنتج المصممة مسبقًا ، وتخصيصها لتناسب موقعك. هناك العديد من الأنماط المختلفة لصفحات المنتج للاختيار من بينها.
قبل أن تبدأ في إضافة الأدوات ، يمكنك التأكد من أنك تعمل على صفحة منتج كاملة العرض ، من خلال التبديل إلى قالب كامل العرض (تعرف على كيفية القيام بذلك هنا ).
باستخدام Elementor ، لديك تحكم كامل في التخصيص على تخطيط ونمط صفحة المنتج.
الخيار الآخر هو بنائه من الصفر. في لوحة التحرير ، يمكنك رؤية الحاجيات الخاصة للمنتج.
الخطوة 3: أضف Product Widgets التي ستشكل صفحتك
ملحوظة!
ملحوظة! من المهم إدراج العديد من أمثلة المنتجات ، بما في ذلك الحقول المطلوبة – مثل وصف المنتج وزر عربة التسوق والباقي ، حتى تتمكن من معاينتها في قالب المنتج الفردي.
مخطط صفحة منتج WooCommerce
حان الوقت الآن لبناء العناصر التي ستشكل صفحة منتجك. للحصول على القائمة الكاملة لأدوات المنتج ، انتقل إلى وثائقنا حول هذا الموضوع . في هذا البرنامج التعليمي ، ستستخدم عناصر واجهة مستخدم Elementor التالية ولن تستخدم مكونات إضافية أخرى:
القطعة عنوان المنتج
أداة Woo Breadcrumbs
القطعة صورة المنتج
أداة تصنيف المنتج
أداة الوصف المختصر
القطعة سعر المنتج
إضافة إلى القطعة عربة التسوق
أداة تعريف المنتج
علامات تبويب بيانات المنتج
المنتجات ذات الصلة
القطعة Upsells
كما ترى في الفيديو ، لديك الحرية الكاملة للتلاعب بالتخطيط وتحريك العناصر.
يمكنك استخدام أي عنصر واجهة مستخدم آخر لجعل صفحة منتجك أكثر فعالية وجاذبية. أزرار المشاركة وأدوات الحث على اتخاذ إجراء والصورة المميزة والقوائم المنسدلة … حتى الحقول المخصصة يمكن إضافتها إلى القالب باستخدام ميزة المحتوى الديناميكي.
الخطوة 4: معاينة صفحة المنتج بمنتج آخر
منتجات WooCommerce كأنواع منشورات مخصصة
للتأكد من أن قالب المنتج الخاص بك يحتوي على التصميم الصحيح ، يُنصح بمعاينته مع العديد من المنتجات المختلفة.
انقر على أيقونة العين في أسفل اللوحة اليسرى ، ثم الإعدادات. ضمن إعدادات المعاينة ، اختر المنتج المحدد الذي تريد عرضه. الآن ، تقدم بطلب ومراجعة لترى كيف تبدو.
الخطوة 5: اضبط الشروط
شروط العرض
هذه هي المرحلة التي تحدد فيها الشروط التي تحدد مكان ظهور نموذج المنتج الخاص بك. بشكل افتراضي ، سيؤثر النموذج على جميع صفحات المنتج على موقعك. يمكنك أيضًا تحديد فئة معينة من المنتجات.
انقر فوق “نشر” – ويتم نشر منتجك الفردي!
كيفية استخدام WooCommerce Product Table مع Elementor
المكافأة: تخصيص صفحة متجر المنتج الخاص بك
قالب صفحة منتج WooCommerce
لإكمال المهمة ، صمم صفحة كتالوج للمنتجات التي ستؤثر على جميع المنتجات على الموقع أو حسب الفئة. لذلك أولاً ، ارجع إلى Elementor> My Templates ، وأنشئ قالب أرشيف منتج.
بعد ذلك ، حدد نموذجًا موجودًا ، أو أنشئ واحدًا.
أضف أداة منتجات الأرشيف وعنوان الأرشيف ، وخصص تصميمهما.
لتكييفه مع التصميم الذي قمت به بالفعل في قالب منتج واحد ، استخدم وظيفة نمط النسخ التي تعمل بين الصفحات. ارجع إلى صفحة المنتج ، وانقر بزر الماوس الأيمن فوق نسخ. مرة أخرى في منتج الأرشيف ، انقر بزر الماوس الأيمن فوق لصق النمط.
في إعدادات أرشيف المنتجات ، ضمن الاستعلام> المصادر ، اختر أحدث المنتجات. ثم ضمن فئة المنتج ، اختر الحلقات. بهذه الطريقة ، ستظهر فئة الحلقة فقط.
مرر على ترقيم الصفحات إذا كانت لديك قائمة طويلة من المنتجات للفئة.
في علامة تبويب النمط ، يمكنك تصميم المسافة بين الأعمدة والصفوف. اضبط الألوان والخطوط والمزيد.
قبل النشر ، اختر الشروط لتحديد مكان ظهور الأرشيف ، تمامًا كما فعلت مع قالب المنتج الفردي.
اضغط على النشر ، وستصبح صفحة الأرشيف الخاصة بك مباشرة.
استنتاج
يمنحك WooCommerce Builder Elementor مرونة التصميم لإنشاء صفحات المنتج وضبطها بصريًا. هذا يوفر لك الوقت ، ويقلل بشكل كبير من الوقت الذي تستغرقه للانتقال من فكرة لديك ، إلى متجر WooCommerce مباشر وكامل الوظائف عبر الإنترنت.