كل ما تحتاج لمعرفته حول وحدات منتجات Divi 5's WooCommerce

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

في هذا المنشور ، سنقوم بتغطية الميزات الرئيسية للوحدات النمطية ونظهر لك كيفية استخدامها لموقع Divi 5 Ecrommerce التالي. دعنا نغوص.

ما هي وحدات منتج WooCommerce؟

وحدات منتج WOO هي عناصر محتوى متخصصة ضمن Divi 5 ، مصممة لتخصيص صفحات المنتج والفئة للمتاجر التي تعمل بالطاقة WOO. تحل هذه الوحدات محل قوالب WooCommerce التي تأتي قياسية مع المكون الإضافي ، مما يتيح لك إنشاء تخطيطات قابلة للتخصيص. على عكس هذه القوالب التقليدية ، تسمح وحدات Divi 5 بالحرية الإبداعية مع الحفاظ على التوافق مع وظائف WooCommerce الأساسية.

إن إطلاق 17 وحدات WooCommerce في Divi 5 يمثل علامة فارقة كبيرة. لم تعد هذه الوحدات ، التي تغطي جميع جوانب تصميم الصفحة والفئة ، في الوضع القديم ، مما يعني أنها جميعها مُحسّنة بالكامل للهندسة المعمارية الحديثة لـ Divi 5. مع هذا الانتقال إلى أساس أكثر كفاءة ، يعمل Divi 5 بشكل أفضل ، وأكثر قابلية للتطوير ، وهو متوافق مع مستقبل WordPress.

من المتوقع أن يتم طرح وحدات WOO الثمانية المتبقية ، التي تركز على صفحات العربة والخروج ، قريبًا.

الميزات الرئيسية لوحدات منتجات WooCommerce's Divi 5

دعنا نتغلب على الميزات الرئيسية التي يمكنك توقعها الآن أن يتم دمج وحدات منتجات WooCommerce في Divi 5.

مجموعة الوحدة الشاملة

تتضمن الدفعة الأولى من وحدات منتجات WooCommerce الخاصة بـ Divi 5 أدوات مصممة للتعامل مع جانب محدد من تصميم صفحات المنتج والفئة. هذه الوحدات هي:

• Woo Breadcrumbs: يعرض مسارات الخبز الملاحية لمساعدة المستخدمين على التنقل بسهولة في المتجر.
• إشعار وو: يعرض رسائل النظام مثل تحديثات العربة أو الأخطاء أو التأكيدات.
• Woo Product Add to Cart: يجعل زر إضافة إلى CART مع عناصر تحكم كمية اختيارية.
• وصف منتج WOO: يخرج وصف المنتج الرئيسي الطويل.
• معرض Woo Product: يعرض صور منتج إضافية بتنسيقات الشبكة أو شريط التمرير.
• صور منتج Woo: يعرض صورة المنتج الرئيسية أو معرض الصور.
• معلومات المنتج: يعرض تفاصيل المنتج مثل الوزن أو الأبعاد أو السمات.
• Woo Product Meta: يعرض المنتج SKU ، والفئات ، والعلامات.
• سعر المنتج: يعرض سعر المنتج ، بما في ذلك أسعار البيع.
• WOO تصنيف المنتج: يوضح متوسط ​​تصنيف النجوم ومراجعة عدد المراجعة.
• مراجعات منتجات WOO: يتيح للعملاء عرض مراجعات المنتج وتقديمه.
• Woo Stock: يشير إلى توفر المنتج ومستويات الأسهم.
• علامات تبويب WOO: تعرض علامات تبويب المنتج الافتراضية للوصف والمعلومات الإضافية والمراجعات.
• عنوان منتج WOO: يخرج اسم المنتج كعنصر قابل للتخصيص.
• Woo Product Upsell: يعزز منتجات Upsell لتشجيع عمليات الشراء ذات القيمة العليا.
• منتجات وو: إنشاء شبكات منتجات قابلة للتخصيص لصفحات الفئة.
• المنتجات ذات الصلة WOO: يعرض المنتجات ذات الصلة على أساس الفئات أو العلامات.

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

الحرية الإبداعية

وحدات منتج WooCommerce Divi 5 من قيود قوالب WooCommerce القياسية. باستخدام هذه الوحدات ، يمكنك التحكم بشكل كامل في تصميم صفحات المنتج الخاصة بك ، والهيكل والتصميم ، وخلق تجارب فريدة.

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

خيارات التخصيص

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

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

تتيح لك هذه الإعدادات إنشاء صفحات المتاجر المتماسكة ذات العلامات التجارية بسهولة.

قوالب ديناميكية مع باني السمة

يتيح لك منشئ موضوع Divi 5 تبني الإمكانات الكاملة لوحدات منتجات WooCommerce من خلال السماح لك بإنشاء قوالب عالمية لصفحات المنتج والفئة. مع باني السمة ، يمكنك تصميم قالب واحد ينطبق على جميع المنتجات والفئات في متجرك ، مما يضمن مظهرًا ثابتًا ومتماسكًا.

Builder Loop لمحتوى WooCommerce الديناميكي

يوفر Divi 5 Loop Builder طريقة بديلة لبناء محتوى Woo الديناميكي. باستخدام Loop Builder ، يمكنك الاستعلام عن منتجات WooCommerce وتصميم حلقات منتجات مرنة باستخدام أي عنصر Divi ، وإنشاء تخطيطات ، وقوائم ، و Carousels التي تتجاوز الهيكل الثابت لمواقع المنتجات المخصصة. لتخطيطات المنتجات الفردية ، استخدم وحدات منتج WOO ؛ لمجموعات المنتجات والمحفوظات ، استخدم Loop Builder.

كيفية استخدام وحدات منتج Divi 5's WooCommerce

سيمشي هذا القسم من خلال إنشاء صفحة منتج في منشئ موضوع Divi 5 باستخدام وحدات منتجات WooCommerce الجديدة.

إنشاء قالب منشئ موضوع جديد

انتقل إلى Divi> منشئ السمة في لوحة معلومات WordPress. انقر فوق + إضافة قالب جديد .

انقر فوق بناء قالب جديد عندما يظهر مربع الحوار.

بعد ذلك ، سنحتاج إلى تعيين قالبنا لمنتجاتنا. ضمن المنتجات ، حدد جميع المنتجات لتعيين القالب.

انقر فوق إنشاء قالب لتعيينه.

انقر فوق إضافة جسم مخصص . سيسمح لنا ذلك ببناء جسم قالب صفحة منتجاتنا.

اختر بناء جسم مخصص عند ظهور مربع الحوار.

بناء قالب المنتج

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

انقر فوق أيقونة Green + لإضافة صف جديد.

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

قم بالتمرير لأسفل للكشف عن خيار وحدات منتج WOO . بمجرد النقر ، سيكون لديك 17 وحدة Divi 5 Woo و 8 وحدات Legacy (Divi 4).

أضف وحدة صور منتج WOO

ابحث عن وحدة صور منتج WOO وحددها وأضفها إلى العمود الأول.

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

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

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

يمكنك أيضًا تصميم شارة البيع من خلال تعيين لون الخلفية والنص والحدود والمزيد.

أضف وحدة عنوان منتج WOO

في العمود الثاني ، انقر فوق وحدات منتج WOO والتمرير لتحديد وحدة عنوان منتج WOO .

استخدم القائمة المنسدلة في حقل المنتج في علامة التبويب المحتوى لتحديد منتج ومعاينة كيف سيبدو في القالب.

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

أضف وحدة سعر منتج WOO

تحت عنوان المنتج ، انقر لإضافة وحدة جديدة. حدد وحدات منتج WOO وقم بالتمرير لتحديد وحدة سعر منتج WOO .

في علامة تبويب التصميم ، يمكنك تصميم كل جانب من جوانب سعر المنتج ، بما في ذلك النص ونص البيع ونص السعر الجديد والمزيد.

أضف وحدة تصنيف منتج WOO

بعد ذلك ، سنضيف وحدة تصنيف منتجات WOO تحت وحدة سعر WOO.

في علامة تبويب المحتوى ضمن عناصر ، يمكنك اختيار إظهار أو إخفاء تصنيف النجوم ومراجعات العملاء.

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

تتضمن خيارات التصميم الأخرى تعيين اللون وحجم النص وتباعد الأحرف للنجوم وخيارات التصميم لنص التصنيف.

أضف وحدة وصف منتج WOO

تحت وحدة تصنيف Woo Star ، انقر لإضافة وحدة Woo جديدة. هذه المرة ، سنختار وحدة وصف منتج WOO . في علامة تبويب المحتوى ، اختر أي وصف للعرض (الوصف أو الوصف القصير).

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

أضف منتج WOO إضافة إلى وحدة CART

بعد ذلك ، سنضيف إضافة منتج WOO إلى وحدة CART . سيسمح لعملائك بإضافة المنتج إلى عرباتهم واختيار أي اختلافات مخصصة للمنتج.

تتيح لك العناصر التي تبديل في علامة تبويب المحتوى إظهار أو إخفاء حقل الكمية والمخزون المتاح. ملاحظة سريعة: لكي يتم عرض كمية المخزون ، يجب عليك التحقق من إدارة الأسهم في منتج WOO نفسه.

يمكنك تصميم ملصقات الحقل ، والنص ، وقوائم القائمة المنسدلة (للتغيرات) ، والزر لمطابقة علامتك التجارية في علامة التبويب التصميم .

استمر في إضافة الوحدات النمطية ، مثل وحدة Meta Product لعرض أرقام وفئات SKU.

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

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

حفظ القالب

بمجرد الانتهاء من إضافة الوحدات النمطية ، قم بإجراء أي تغييرات إضافية تحتاجها ، ثم احفظ القالب بالنقر فوق الزر " حفظ" في الزاوية اليمنى العليا من منشئ السمة.

بعد ذلك ، انقر فوق زر الخروج للعودة إلى لوحة معلومات منشئ السمة.

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

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

قم بتنزيل الملفات

تنزيل مجانًا

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

تحميل

لقد اشتركت بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والوصول إلى حزم تخطيط Divi الأسبوعية المجانية!

ما هو التالي لتكامل WooCommerce Divi 5؟

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

إلى جانب توافق WooCommerce وتكامله ، يستمر Divi 5 في التطور مع الميزات الحديثة مثل وحدة مجموعة Carousel لإنشاء متزلجات ديناميكية للمنتجات ، ووحدة Lottie لإضافة رسوم متحركة خفيفة الوزن ، ونظام تخطيط Flexbox جديد للتحكم في تخطيط التخطيط المحسن. تكمل هذه الإضافات وحدات WOO ، مما يوفر إمكانيات أكثر إبداعًا لمواقع التجارة الإلكترونية.

جرب وحدات منتج Woo Divi 5 اليوم

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

هل أنت مستعد للغوص في Divi 5؟ قم بتنزيل أحدث Divi 5 Public Alpha لاستكشاف هذه الوحدات ومعرفة كيف يمكنها تحويل موقع WooCommerce الخاص بك. نود أن نسمع أفكارك. شارك ملاحظاتك في التعليقات أو تواصل معنا على قنوات التواصل الاجتماعي الخاصة بنا.