كيفية إنشاء موقع ويب للتجارة الإلكترونية في WordPress في عام 2022

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

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

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

كل ما تحتاجه هو حساب استضافة ويب وقليل من الجهد وستكون قادرًا على إنشاء موقع ويب للتجارة الإلكترونية في أي وقت من الأوقات.

هيا بنا نبدأ!

الأشياء التي تحتاجها لإنشاء موقع التجارة الإلكترونية

• الاستضافة. أوصي SiteGround.
• اسم المجال.
• وورد موضوع. في هذا البرنامج التعليمي ، نستخدم سمة Astra المجانية.
• WordPress Page Builder. لهذا ، نستخدم منشئ صفحة Elementor المجاني.
• WooCommerce ، أفضل مكون إضافي للتجارة الإلكترونية ووردبريس. يضيف ميزات التجارة الإلكترونية إلى WordPress

الخطوة 1. شراء استضافة الويب واسم المجال.

إذا كنت جديدًا في مجال إنشاء مواقع الويب بالكامل ، دعني أوضح أولاً ماهية استضافة الويب واسم المجال ولماذا تحتاج إليهما.

ما هو الاستضافة واسم المجال؟

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

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

SiteGround ، خدمة استضافة الويب المفضلة لدي

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

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

فيما يلي الميزات الرئيسية لـ SiteGround:

• شهادة SSL مجانية
• دعم سريع حسن الاطلاع
• بيئة التدريج في ووردبريس
• هجرات الموقع المجانية
• 30 يومًا من النسخ الاحتياطية

SiteGround هو اختيار قوي لاحتياجات استضافة الويب الخاصة بك. إنهم يلبيون مواقع WordPress ويقدمون موارد أقل من منافسيهم ولكن موثوقية أعلى.

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

اختر استضافة WordPress وانقر فوق البدء. سترى بعد ذلك ثلاث خطط تسعير:

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

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

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

الخطوة الثانية. قم بتثبيت WordPress.

في هذا القسم ، سنوضح لك كيفية إنشاء موقع التجارة الإلكترونية في WordPress.

لكن لماذا WordPress؟

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

يأتي SiteGround بالفعل مع تثبيت WordPress بنقرة واحدة يقوم بكل العمل الشاق لتثبيت WordPress وإعداده لك.

بمجرد شراء الاستضافة ، سيكون لديك خيار تثبيت WordPress ، هناك.
للقيام بذلك ، تابع الخطوات التالية:

1. حدد Start New Website

2. حدد بعد ذلك نظام إدارة المحتوى الذي تريد استخدامه. سيكون لديك خيارات متعددة ، ولكن الآن استخدم WordPress فقط.

3. أدخل عنوان بريدك الإلكتروني وكلمة المرور اللذين تريد استخدامهما لتسجيل الدخول إلى WordPress

4. بمجرد اكتمال عملية الإعداد ، سترى الشاشة التالية

4. انقر فوق خيار تسجيل الدخول المسؤول لتسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك

يمكنك أيضًا تسجيل الدخول عن طريق كتابة "yourdomain.com/wp-admin" في شريط URL الخاص بك.

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

على سبيل المثال ، إذا كان مجالك هو onlinestore.com ، فستكون صفحة تسجيل الدخول إلى WordPress الخاصة بك هي onlinestore.com/wp-admin.

تبدو شاشة تسجيل الدخول كما يلي:

أدخل اسم المستخدم وكلمة المرور اللذين أعددتهما لتسجيل الدخول إلى لوحة إدارة WordPress.

الخطوة الثالثة. قم بتثبيت سمة Astra ومواقع Astra.

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

Astra هو موضوع WordPress مجاني يتمتع بسرعة وبساطة ممتازين. هناك أيضًا إصدار Pro متاح يجعل Astra الخيار الأمثل.

قم بإقرانه مع المكون الإضافي Starter Templates ويمكنك الحصول على موقع ويب جميل وعالي التحويل.

أفضل جزء هو أنه يمكنك تثبيت قالب موقع جاهز للعمل ببضع نقرات!

سنستخدم أحد قوالب Astra Starter المصممة للتجارة الإلكترونية لخفض وقت إنشاء موقع الويب إلى النصف.

تثبيت البرنامج المساعد للمستورد

لاستخدام قوالب البداية ، انتقل إلى خيارات Astra في علامة تبويب المظهر .

من هنا ، حدد Install Importer Plugin.

سترى صفحة مثل الصفحة أدناه.

انقر فوق إنشاء موقع الويب الخاص بك الآن .

اختيار منشئ الصفحة الخاص بك

بعد ذلك ، حدد مُنشئ الصفحة الذي تريد بنائه بواسطته. في هذه الحالة ، دعنا نذهب مع Elementor.

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

ميزات العنصر الرئيسي:

• محرر الصفحة الأمامية المباشرة
• ميزات تخصيص الموقع
• مكتبة القوالب والكتل
• خيارات واسعة للاستجابة للجوّال
• أقوى منشئ النوافذ المنبثقة
• PRO: إنشاء رؤوس / تذييلات مخصصة
• PRO: إنشاء تخطيطات نوع المنشور

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

اختر موقع قالب البدء الخاص بك

بمجرد تحديد Elementor ، ستصل إلى صفحة Starter Template كما يلي:

هناك عدد من القوالب الجميلة التي يمكنك استخدامها. خذ وقتك في اختيار النموذج الذي تريده.

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

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

لتثبيت النموذج ، ما عليك سوى النقر فوقه. هنا يمكنك اختيار تخصيص الألوان والشعار الآن.

ولكن في هذا البرنامج التعليمي ، انقر فوق تخطي ومتابعة .

ستصادف مربعًا يطلب منك ملء التفاصيل الخاصة بك (يمكنك اختيار تركها فارغة) وتثبيت البيانات المخصصة التي تمت إضافتها إلى موقع الويب.

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

الآن سيقوم مستورد Astra بتثبيت جميع المكونات الإضافية المطلوبة للموضوع ليبدو كما هو بالضبط.

بالنسبة لسمة الطباعة المخصصة ، ستقوم بتثبيت Elementor و WooCommerce و WPForms. هذا يوفر لي الكثير من الوقت لأنني لن أضطر إلى تثبيت هذه المكونات الإضافية واحدة تلو الأخرى بعد الآن.

كل شيء تم القيام به من أجلي.

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

الخطوة 4. تخصيص موقع الويب الخاص بك.

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

اختيار لوحة الألوان

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

لاختيار لوحة ألوان موقع الويب ، أستخدم أداتين. الأول هو Coolors.co حيث يمكنك تصفح لوحات الألوان المختلفة واختيار ما تريد استخدامه على موقع الويب الخاص بك.

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

هذه الأكواد السداسية هي ما تحتاجه لاستخدام هذه الألوان على موقع الويب الخاص بك. سأوضح لك لاحقًا كيفية استخدام أكواد Hex هذه على الواجهة الخلفية لـ WordPress.

أداة رائعة أخرى هي Colorzilla ، وهو امتداد Google Chrome الذي يتيح لك الحصول على رمز Hex لأي لون تراه على أي موقع ويب حتى تتمكن من استخدامه بنفسك. إذا كنت ترغب في الحصول على امتداد Colorzilla ، انقر هنا. ثم انقر فوق إضافة إلى Chrome.

قد يستغرق الأمر بعض الوقت ، ولكن بمجرد الانتهاء ، سترى هذا الرمز على شريط الأدوات الخاص بك:

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

تخصيص الطباعة

تريد أيضًا استخدام أسلوب الطباعة الخاص بك لإبراز موقع الويب الخاص بك. عادة ما تحتوي مواقع الويب على 2-3 خطوط. سيكون لديك خط للعناوين الرئيسية أو القائمة ، وخط للجسم ، و "خط منبثق" إضافي. مثل الألوان ، لا يمكنك استخدام أي خط فقط. تحتاج إلى التأكد من أنها تبدو جيدة معًا وإرسال الرسالة الصحيحة حول علامتك التجارية.

أحب استخدام Fontpair.co وهو موقع ويب يوضح لك كيف يبدو خطان مختلفان معًا.

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

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

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

الحصول على شعار

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

يأتي Canva بالعديد من قوالب الشعارات التي يمكنك تعديلها لتكوين شعارك الخاص. ومع ذلك ، لاحظ أنه إذا كنت ترغب في تصدير الشعار بخلفية شفافة ، فسيتعين عليك الترقية إلى Pro (الذي يحتوي على نسخة تجريبية مجانية مدتها شهر واحد). يمكنك دائمًا الانتقال إلى Photoshop أو Photopea لإزالة الخلفية ، ولكن هذا يضيف خطوة واحدة إضافية إلى العملية.

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

تخصيص موقع الويب الخاص بك

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

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

هكذا تبدو أداة تخصيص السمات:

الألوان الأساسية هي لون السمة والرابط والنص والارتباط لموقع الويب الخاص بك.

إذا كنت تريد تغيير لون النسق ، فحدد اللون على يمينه.

سترى طريقتين لتحديد لون.

أولاً ، يمكنك لصق رمز سداسي عشري في صندوق. لذلك إذا وجدت لونًا في Coolors.co أو أي مكان آخر ، يمكنك لصق الكود السداسي هنا.

يمكنك أيضًا تحديد لون في أداة التحديد المضمنة.

لتغيير أسلوب طباعة موقعك ، انتقل إلى عام> أسلوب الطباعة . ستتمكن من تغيير اللون الأساسي ومسارات التنقل والمحتوى وطباعة المدونة.

التالي هو إضافة شعارك. لتحميل شعارك ، انتقل إلى Header Builder> Site Title and Logo .

بعد ذلك ، ضمن قسم الشعار ، انقر فوق الزر تغيير الشعار وقم بتحميل شعارك.

تتيح لك Astra أيضًا ضبط عرض شعارك حتى تتمكن من تغيير حجم الشعار الذي تريده أو صغر حجمه.

إذا قمت بالتمرير لأسفل ، فستتمكن أيضًا من تغيير عنوان موقعك وإضافة سطر وصف للموقع وأيقونة موقع أو رمز مفضل.

يمكنك القيام بالكثير في منطقة التخصيص في Astra مثل تغيير عرض محتوى موقعك ، وتغيير بنية منشور المدونة ، وتخصيص التذييل والعنوان وغير ذلك.

استكشف خياراتك هنا لترى أفضل ما تفضله لموقعك على الويب.

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

الخطوة 5. تخصيص موقع الويب الخاص بك باستخدام Elementor

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

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

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

هناك طريقتان لتحرير الصفحة باستخدام Elementor. أولاً ، إذا كنت في الواجهة الخلفية لـ WordPress ، فانقر فوق الصفحات وسترى قائمة بجميع صفحات موقع الويب الخاص بك بما في ذلك تلك التي تم إنشاؤها تلقائيًا باستخدام قالب موقع Astra. سيتم تصنيف الصفحات التي تم إنشاؤها باستخدام مُنشئ صفحات معين (مثل Elementor) على هذا النحو:

لتحرير صفحة باستخدام مُنشئ الصفحات الخاص بك ، حرك مؤشر الماوس فوقها وانقر فوق تحرير باستخدام (مُنشئ الصفحة). في حالتي ، سيكون التحرير باستخدام Elementor.

بمجرد النقر فوق ذلك ، سيتم نقلك داخل Elementor.

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

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

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

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

داخل Elementor ، يمكنك أيضًا تغيير نصوص الأزرار وتخصيص منطقة الشهادات وإضافة المزيد من العناصر / الكتل مثل النصوص والصور والأزرار ومقاطع الفيديو والمزيد.

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

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

الخطوة 5. إعداد WooCommerce.

حان الوقت الآن لإعداد WooCommerce. تساعد WooCommerce في إضافة وظائف التجارة الإلكترونية إلى بيئة WordPress. إنه يحول أي موقع ويب إلى متجر عبر الإنترنت.

يتيح لك إضافة منتجات وقبول المدفوعات عبر الإنترنت وإنشاء قسائم وتعيين الشحن والضرائب وغير ذلك الكثير.

تم تثبيت WooCommerce بالفعل بالنسبة لي من خلال سمة Custom Print Astra Site ، لذا يتعين علي الآن الدخول وإعداده. إذا لم يكن WooCommerce مثبتًا لديك حتى الآن ، فانتقل إلى الإضافات > إضافة جديد وابحث عن WooCommerce.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إذا كنت تريد أن تكون قادرًا على قبول مدفوعات Stripe ، فيمكنك تثبيت مكون إضافي يسمى Checkout Plugins - Stripe for WooCommerce. ما عليك سوى الانتقال إلى الإضافات > إضافة جديد والبحث عن المكون الإضافي. سيؤدي تثبيت هذا المكون الإضافي وتنشيطه إلى تمكين طريقة دفع Stripe في WooCommerce ، ولكن عليك الانتقال إلى WooCommerce > الإعدادات > المدفوعات لإعدادها.

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

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

أخيرًا ، تتيح لك علامة التبويب Advanced ، التي حلت محل علامة التبويب API ، تكوين المزيد من التفاصيل الفنية مثل إعدادات الصفحة حيث يمكنك إخبار WooCommerce بالصفحة التي ستعمل كصفحة عربة التسوق أو صفحة الخروج.

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

الخطوة 6. أضف المنتجات.

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

دعنا الآن نلقي نظرة على كيفية تغيير ذلك وإضافة منتجاتنا الخاصة على الواجهة الخلفية.

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

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

يتيح لك WooCommerce إضافة هذه الأنواع من المنتجات:

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

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

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

في المخزون ، ستتمكن من إضافة SKU ، وتوفير عدد محدد من الأسهم لهذا المنتج المعين ، وتعيين حالة المخزون ، والمزيد.

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

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

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

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

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

بمجرد الانتهاء من كل شيء هنا ، انقر فوق تحديث لحفظ جميع التغييرات.

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

الخطوة 7. تخصيص الخروج الخاص بك.

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

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

إذا كنت تريد معرفة المزيد حول كيفية إنشاء مسار مبيعات باستخدام CartFlows.

الخطوة 8. البقاء على قمة التخلي عن عربة التسوق.

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

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

لحسن الحظ ، هناك مكون إضافي يسمى WooCommerce Cart Abandonment Recovery plugin الذي يتتبع ويرسل تلقائيًا رسائل بريد إلكتروني للمتابعة للعملاء الذين لديهم عربات مهجورة - كل ذلك مجانًا!

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

سيتم إنشاء خيار جديد ضمن WooCommerce يسمى Cart Abandonment. إذا قمت بالنقر فوق هذا ، فستتمكن من رؤية نظرة عامة على عدد عربات التسوق المتروكة ، وعدد العربات التي تم استردادها ، وعدد العربات المفقودة.

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

سيتم نقلك بعد ذلك إلى محرر البريد الإلكتروني:

تغليف

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

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

بالتأكيد هناك الكثير لنتعلمه وتنفيذه. ولكن هذه هي الطريقة التي تبدأ بها مشروع التجارة الإلكترونية الأول أو التالي.

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

1. SiteGround

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

ميزات SiteGround الرئيسية:

• شهادة SSL مجانية
• دعم سريع حسن الاطلاع
• بيئة التدريج في ووردبريس
• هجرات الموقع المجانية
• النسخ الاحتياطية اليومية

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

2. موضوع استرا

Astra هو موضوع WordPress مجاني يركز على السرعة. اختياريًا ، يمكنك شراء إصدار Pro مقابل 59 دولارًا والذي يضيف بعض الإعدادات والخيارات الإضافية.

ميزات سمة Astra الرئيسية:

• موضوع وورد سريع متعدد الأغراض
• الكثير من المواقع التجريبية المجانية والمدفوعة
• تمت إضافة رأس / تذييل الصفحة حديثًا
• ميزة قائمة ميجا مرنة
• خيارات التخطيطات المخصصة
• دعم WooCommerce

Astra Theme هو خيار عادل لأي مشروع تصميم ويب WordPress. أفترض أن السؤال الأكبر هو ما إذا كنت تحتاج حتى إلى شراء موضوع هذه الأيام حيث يقوم منشئو الصفحات بكل الأشياء نفسها التي قد تحتاج إلى موضوع لها.

There are still some good reasons to purchase a pro theme, but for most people, they most likely will be fine with a free theme.

Astra being over 3 years old, in a sense, operates similar to Apple Computers. They wait for others to innovate and bring new ideas, then when a certain feature becomes expected, they implement it there way. This is not a bad thing in any way, when you are responsible for over 1 million websites, it good to be cautious.

Astra's free version offers very limited customizations when compared to other similar themes. So if you were not wanting to purchase a theme, you may want to look elsewhere if you want more options.

Astra Pro on the other hand is a solid choice of theme.

3. العنصر

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

ميزات العنصر الرئيسي:

• محرر الصفحة الأمامية المباشرة
• ميزات تخصيص الموقع
• مكتبة القوالب والكتل
• خيارات واسعة للاستجابة للجوّال
• أقوى منشئ النوافذ المنبثقة
• PRO إنشاء رؤوس / تذييلات مخصصة
• PRO إنشاء تخطيطات نوع المنشور

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

يعد Elementor Pro قيمة مذهلة بالنظر إلى جميع الوحدات الإضافية وميزات الطاقة التي يتضمنها.

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

4. CartFlows

CartFlows هو منشئ مسار تحويل المبيعات لـ WordPress. يتيح لك إنشاء مسارات تحويل للمبيعات بسرعة وسهولة باستخدام أداة إنشاء الصفحات التي تختارها.

ميزات عربة التسوق الرئيسية:

• قوالب مصممة باحتراف
• أ / ب اختبار الانقسام
• عرض مطبات الطلب والضغط مرة واحدة فوق البيع
• استخدم مُنشئ الصفحة المفضل لديك
• قابل للتمديد على عكس مسارات تحويل النقرات
• تحسينات الميزات الشهرية المتسقة

إذا كنت تريد منشئ مسار تحويل المبيعات لـ WordPress وكنت جيدًا في استضافة نفسك ، أو باستخدام استضافة WordPress المُدارة ، فإن CartFlows إذا كان خيارًا رائعًا لأنه سهل الاستخدام للغاية ولكنه قوي جدًا.