كيف صممت متجر إلكتروني للهواتف على ووكومرس بالاعتماد على قالب جاهز

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

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

كيف صممت متجر إلكتروني للهواتف على ووكومرس

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

1- اختيار قالب مناسب لهوية المتجر

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

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

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

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

لكن يُفضل قبل شراء القالب معاينة النسخة الفعلية له من خلال الضغط على زر "عرض مباشر".

قالب إمبراطور على منصة بيكاليكا

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

إذا كان القالب مناسبًا لمتجرك، اشترِ القالب بالضغط على زر "أضف المنتج للسلة".

شراء قالب إمبراطور من منصة بيكاليكا

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

إتمام خطوات شراء القالب من بيكاليكا

بعد إتمام عملية الدفع، انتقل إلى صفحة المشتريات، ثم حمّل ملفات القالب على جهازك.

تحميل ملفات القالب

02 - رفع وتثبيت القالب على المتجر 

لتثبيت القالب على متجرك، انتقل إلى لوحة تحكم ووردبريس الرئيسية، ثم اختر من القائمة الجانبية "المظهر >> قوالب". بعد ذلك، اضغط على زر "Add Theme" كما هو موضح في الصورة التالية:

رفع قالب جديد على ووردبريس

ثم اتبع الخطوات الآتية:

  1. اضغط على زر "رفع قالب".
  2. حدد ملف القالب من جهازك باستخدام زر "Choose File".
  3. ثبت القالب على المتجر بالضغط على زر "Install Now".
تثبت قالب إمبراطور على المتجر

بعد الانتهاء من التثبيت، فعّل القالب على متجرك.

03- استيراد النموذج الهواتف المحمولة

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

استيراد النماذج الجاهزة على المتجر

حدد النموذج المناسب، ثم اضغط على زر "استيراد النموذج" كما هو موضح في الصورة التالية:

بدء استيراد نموذج الهواتف على المتجر

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

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

04- التعديل على الصفحة الرئيسية

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

التعديل على صفحة المتجر الرئيسية

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

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

التعديل على نصوص الواجهة الرئيسية

نفس الأمر، يمكنك تحديد الصور ثم استبدالها بالصور المناسبة من متجرك.

التعديل على صور الواجهة الرئيسية

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

تحديد المنتجات المطلوب ظهورها على المتجر

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

التعديل على طريقة عرض المنتجات على المتجر

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

إضافة أقسام جديدة إلى واجهة المتجر

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

05- التعديل على الهوية البصرية

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

التعديل على ألوان الهوية من إعدادات القالب

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

الألوان العامة في محرر القالب

بعدها، عدّلت ألوان عناصر القالب لتتناسب أيضًا مع الهوية البصرية المطلوبة. بعد الانتهاء، اضغط على زر "حفظ التغييرات" ليتم تطبيق التعديلات على القالب.

التعديل على ألوان الهوية من إعدادات محرر القالب

06- الإعدادات الإضافية

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

لذلك، انتقلت إلى إعدادات القالب وعدّلت جميع تلك الخيارات بما يتوافق مع متطلبات العميل.

التعديل على اعدادات القالب

07- إطلاق المتجر 

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

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

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

بعد الانتهاء من اختبار القالب، سلّمتُ المتجر للعميل، وقد كانت لديه بعض الملاحظات على التخطيط العام للمتجر والنصوص الدعائية. وبعد إجراء التعديلات المطلوبة، تمكنت من تسليم المشروع بنجاح.

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

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

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

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