استخدام حزمة Divi's Fashion Layout Pack لإنشاء متجر على الإنترنت باستخدام WooCommerce

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

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

وانشاء

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

1. تثبيت وتنشيط Divi Theme
2. تثبيت وتنشيط WooCommerce
3. قم بتنزيل Fashion Layout Pack واستورد ملف Fashion_All.json إلى مكتبة سمات Divi الخاصة بك.
4. إنشاء صفحات جديدة لكل تخطيط.
5. إنشاء القائمة الأساسية الخاصة بك.

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

بمجرد الانتهاء من الخطوات الخمس المذكورة أعلاه ، تكون جاهزًا للبدء.

النظرة الخاطفة

إليك نظرة خاطفة على بعض صفحات WooCommerce التي ستقوم بإنشائها.

استخدام حزمة Divi's Fashion Layout Pack لإنشاء متجر على الإنترنت باستخدام WooCommerce

اشترك في قناتنا على اليوتيوب

قم بتغيير لون التمييز العام الخاص بك

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

لتغيير لون التمييز العام ، انتقل إلى "مُخصص القوالب" وانتقل إلى " الإعدادات العامة"> "إعدادات التخطيط" وابحث عن خيار "لون التمييز" في الأسفل.

أنا أستخدم هذا اللون الوردي من التخطيط: # fc7086

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

قم بتحديث إعدادات الطباعة في أداة تخصيص السمة

نظرًا لأن WooCommerce يستخدم إعدادات أداة تخصيص السمات الافتراضية الخاصة بك لتصميم النص لكل صفحة من صفحاته ، فستحتاج إلى التأكد من مطابقة الطباعة المستخدمة في التخطيطات الخاصة بك مع إعدادات الطباعة في أداة تخصيص السمات.

لتحديث أسلوب الطباعة ، انتقل إلى Divi> Theme Customizer> General Settings> Typography وقم بتحديث ما يلي:

حجم النص الأساسي: 16 بكسل
ارتفاع خط الجسم: 1.9
حجم نص الرأس: 42
نمط خط الرأس: ب
خط الرأس: عرض Playfair
خط الجسم: بوبينز
لون رابط الجسم: [إذا قمت بتحديث لون التمييز العام ، فيجب أن يظهر هذا اللون هنا]

قم بتعيين صفحة تسوق WooCommerce

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

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

ثم احفظ التغييرات.

أضف منتجات إلى متجرك

ربما لاحظت أن صفحة المتجر الخاصة بك ، على الرغم من وجود وحدتي متجر ، لا تعرض أي منتجات. حسنًا ، من الواضح أنك بحاجة إلى إضافة المنتجات أولاً. لإضافة منتج جديد إلى متجرك ، انتقل إلى لوحة معلومات WordPress الخاصة بك واتبع الخطوات التالية:

1. انتقل إلى المنتجات> إضافة جديد
2. أدخل اسم المنتج
3. أدخل وصف المنتج
4. أدخل سعر المنتج
5. أدخل وصفًا موجزًا ​​للمنتج
6. إضافة ثلاث فئات جديدة (صيفي ، مميز ، ومخفض)
7. حدد فئة منتجك (في هذه الحالة سيكون الصيف)
8. أضف صورة المنتج
9. نشر / تحديث المنتج

قم بتعيين فئات لمنتجاتك

أثناء تكرار الخطوات المذكورة أعلاه لإنشاء المزيد من المنتجات الجديدة ، تأكد من تعيين فئة لكل منها (رقم 7 في الخطوات المذكورة أعلاه). في هذا البرنامج التعليمي ، أضفت 6 منتجات ضمن فئة "الصيف" و 6 منتجات ضمن فئة "مميزة" ومنتج واحد ضمن فئة "للبيع".

قم بتحديث وحدات المتجر في صفحة المتجر

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

انتقل إلى صفحة المتجر وانشر المنشئ المرئي. ثم مرر مؤشر الماوس فوق وحدة المتجر (لا تعرض حاليًا أي منتجات) أسفل الصف الذي يحتوي على عنوان Summer Fashion وانقر على إعدادات الوحدة.

قم بتحديث الإعدادات لتشمل فقط فئة "الصيف".

الآن يجب أن تشاهد جميع المنتجات المضافة مع فئة الصيف.

بعد ذلك ، ابحث عن وحدة المتجر ضمن عنوان المنتجات المميز وقم بتحديث الإعدادات لتضمين الفئة المميزة فقط.

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

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

لنقم بإنشاء قسم آخر لعرض منتجاتنا "المعروضة للبيع".

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

الآن كل ما عليك فعله هو إجراء بعض التحديثات.

في الصف الذي يعرض العنوان ، امض قدمًا وانقر على النص في وحدة النص وغيّر العنوان ليقول "On Sale" بدلاً من "Summer Fashion".

ثم قم بتغيير الصورة في العمود الأيسر إلى شيء أكثر اتساقًا مع منتجات البيع الخاصة بك.

أخيرًا ، قم بتحديث وحدة المتجر لتشمل فقط فئة "للبيع".

صمم صفحات WooCommerce الخاصة بك باستخدام تخطيط الموضة

تنشئ WooCommerce مجموعتها الخاصة من صفحات WooCommerce تلقائيًا عند تثبيت المكون الإضافي. وتشمل هذه ما يلي:

Shop - وهو عنصر نائب لأرشيف نوع المنشور لمنتجاتك.
عربة التسوق - التي تستخدم الرمز القصير [woocommerce_cart] لإنشاء محتويات سلة التسوق
الخروج - الذي يستخدم الرمز القصير [woocommerce_checkout] لإظهار المعلومات.
حسابي - الذي يستخدم الرمز المختصر [woocommerce_my_account] لعرض معلومات محددة للعملاء تتعلق بحساباتهم.

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

إضافة رأس قسم إلى سلة التسوق وصفحات الخروج

دعنا نلقي نظرة على صفحة عربة التسوق أولاً. هذا هو الشكل الذي تبدو عليه قبل أن نفعل أي شيء لها.

لاحظ أنه نظرًا لأننا قمنا بتحديث لون التمييز العالمي الخاص بنا ، فإن روابطنا وأزرارنا تطابق نظام الألوان بالفعل. ونظرًا لأننا قمنا بتحديث إعدادات الطباعة الخاصة بنا في Theme Customizer ، فإن الرؤوس والنص الأساسي تتطابق أيضًا مع موضوعنا.

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

ثم قم بالتمرير لأسفل إلى أسفل الصفحة وابحث عن القسم الأخير الذي يحتوي على اختيار البريد الإلكتروني وتفاصيل الاتصال وحفظه في مكتبتك باسم "قسم تذييل الصفحة".

اذهب الآن لتعديل صفحة عربة التسوق الخاصة بك. من محرر الصفحة الافتراضي ، حدد استخدام Divi Builder ، ثم "استخدام Visual Builder". يجب أن يضع المنشئ الرمز القصير [woocommerce_cart] تلقائيًا في وحدة نصية داخل صف عمود واحد من قسم عادي. إذا لم يكن الأمر كذلك ، فستحتاج إلى إنشاء هذا بنفسك. بعد ذلك ، انقر فوق أيقونة علامة الجمع الزرقاء لإضافة قسم جديد أسفل القسم الحالي ، حدد علامة التبويب "إضافة من المكتبة". ثم حدد القسم الجديد الذي أنشأته للتو باسم "قسم رأس الصفحة".

ثم اسحب هذا القسم إلى أعلى صفحتك وقم بتغيير نص العنوان إلى "عربة التسوق". هذا كل شيء!

يمكنك تكرار هذه العملية لصفحة الخروج أيضًا.

تصميم صفحة حسابي باستخدام Divi Builder

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

قد ترغب في منح هذه الصفحة تصميمًا مميزًا لتوضيح أنها صفحة تدير حسابك. لذا بدلاً من خلفية التدرج الوردي لأقسام الرأس والتذييل ، انتقل إلى إعدادات القسم لكل منها وقم بتغيير ألوان التدرج في الخلفية إلى # 9599e2 و # 8bc6ec.

استخدم إعدادات وحدة النص لتصميم محتوى رمز WooCommerce القصير

نظرًا لأن الرمز المختصر لـ WooCommerce موجود الآن داخل وحدة نصية ، يمكنك استخدام هذا لصالحك لتصميم بعض هذه العناصر داخل إعدادات الوحدة النمطية.

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

ضمن علامة تبويب التصميم ...

حجم نص النص: 20 بكسل
ارتفاع خط النص: 1.6em

انقر الآن على علامة تبويب الارتباط أسفل قسم النص لتصميم الروابط على النحو التالي:

خط الارتباط: Poppins
وزن خط الارتباط: شبه عريض
حجم نص الرابط: 27 بكسل
ارتفاع خط الارتباط: 1.5em

احفظ التغييرات

تحقق الآن من صفحة حسابي.

استخدام Custom CSS لتصميم صفحات أرشيف WooCommerce؟

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

لنلقِ نظرة على صفحة "الفئة المميزة" كمثال.

الآن دعنا نفتح Theme Customizer ونضغط على CSS إضافي ونضيف ما يلي:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

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

افكار اخيرة

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

إذا كان هناك أي شيء ، آمل أن يكون هذا المنشور قد ألهمك لإنشاء شيء مذهل بنفسك.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!