دليل المصممين إلى WooCommerce

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

هذا البرنامج المساعد هو أداة سهلة الاستخدام ومرنة للغاية. ومع ذلك ، لن يتم دعم جميع مواقع الويب. باستخدام الميزات والأساليب التي يدعمها WooCommerce ، يمكنك تسريع عملية التصميم والتطوير.

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

الأول هو صفحات المنتج. هذه الصفحات لها نوعان ، وهما: صفحات أرشيف المنتج وصفحات المنتج الفردية.

تعرض صفحات أرشيف المنتج صورًا مصغرة لفئات المنتجات المتاحة. تعرض هذه صفحة أرشيف منتج أخرى عند النقر فوق الصورة المصغرة للفئة. ثم يعرض المنتج الفردي عند النقر فوق الصورة المصغرة للمنتج.

النوع الآخر هو منتج صفحات فردية. هنا ، تعرض هذه المنتجات الفردية وتجمع بين صور المنتج ومعلومات رأس المنتج والمعلومات التفصيلية للمنتج والمنتجات ذات الصلة وعمليات البيع التبادلية والمبيعات.

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

أنواع مختلفة من المنتجات

تحتوي هذه الأداة على أنواع مختلفة من المنتجات ؛

الأول هو رأس المنتج الذي ينقسم إلى خمسة أجزاء. وهذه هي:

1. اسم المنتج - يتم عرض هذه في صفحات الملخص / الأرشيف والصفحات الفردية
2. ميزة المنتج - سترى على صفحات الملخص / الأرشيف وصفحات الفردي
3. صورة - يتم عرض الصور المميزة في الملخص والصور الإضافية على صفحة منتج واحد
4. وصف طويل - يظهر هذا في منطقة وصف المنتج أسفل صفحة المنتج الفردية
5. وصف قصير - يظهر هذا في أعلى صفحة منتج واحد

ستسمح هذه الأداة أيضًا للمستخدم بالمنتج.

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

بالإضافة إلى ذلك ، ضمن صفحات المنتج ، يتم إنشاؤها تلقائيًا بما يلي:

صور المنتج - هذه صور مميزة وصور تكميلية للمنتج. عنوان المنتج ، وسعر المنتج ، والوصف المختصر للمنتج ، والكمية المراد إضافتها إلى سلة التسوق (مع + وعناصر التحكم) ، وإضافة إلى زر سلة التسوق ، و SKU للمنتج (وحدة حفظ المخزون) ، والفئات والعلامات.

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

Upsells - هذا هو الشيء "الذي قد يعجبك أيضًا" متبوعًا بالإبهام / العناوين لزيادة المبيعات.

عمليات البيع المتقاطعة - هذه هي المنتجات ذات الصلة تليها الصور المصغرة.

عرض المنتج ، الخيارات هي العرض القياسي والاختياري. يعرض المعيار الصورة المميزة في الجزء العلوي من صفحة المنتج ، مع الصور المصغرة الإضافية أسفلها في 3 أعمدة من الصور المصغرة. في المقابل ، يعرض العرض التقديمي الاختياري الصورة المميزة بدون صور مصغرة أسفلها ويعرض جميع الصور في علامة التبويب الوصف.

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

لن تظهر أدوات بحث "خيارات البحث في فئة المنتج" إلا عند عرض أرشيفات فئة المنتج التي تم إنشاؤها تلقائيًا. الأول هو التنقل متعدد الطبقات. يتيح ذلك للمستخدم تحسين المنتجات بناءً على السمات ويساعد المستخدم بشكل فعال فيما يبحث عنه. عامل تصفية سعر المنتج - يعرض مقياسًا منزلقًا يسمح بترشيح المنتجات إلى نطاق سعري. الأكثر مبيعًا - يعرض هذا العنوان / الإبهام / السعر لقائمة مختارة تلقائيًا من المنتجات الأكثر مبيعًا. يعرض المنتج المميز العنوان / الإبهام / السعر للمنتجات التي تم تحديدها على أنها منتجات مميزة. للبيع: يعرض المنتجات التي تم إدخال سعر بيع عليها بالإضافة إلى سعرها.

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

يظهر أيضًا على الأداة "ملصق البيع" الذي تظهر عليه كلمة "بيع" فوق إبهام المنتج عند البيع - يمكن استخدام نمط CSS: لون الخلفية ولون الخط ولون الحدود. عرض الحد ، حد متصل / متقطع ، نصف قطر حد.

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

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

اقرأ المزيد عن ثيمات Woocommerce WordPress هنا.