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

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

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

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

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

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

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

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

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

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

AD 4nXfMzTIGRwbEhDjzkyjB8uCwmUlazMHez52Cj9qBK L0VfogQk1aAWq5ZTJAoB2l9C4xq ibeXYMqtt0YkegTSFSeKDaXUM VT0wcmKwUcsJ3p25MUQZIdp0Tw0jLPLPef4jXESETw
قوالب ووردبريس على منصة بيكاليكا

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

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

AD 4nXekpU1Nuj1sMWXKSG8r9wPZlWUItyw fkdatHFeLmePnVlvNhPIbxiw gPAVYLjzfs6uUY cXt7ofi12e
قالب إمبراطور على منصة بيكاليكا

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

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

AD 4nXcTOTvkQoZh33GtyX2bO0EuGNAXPlX8P27OLvPYhCHs1VWLLKlaw5DS7Kzj CUwkjjdbUhnBx6Q677p4U OzP4KV4nOHfwqwK lDQGRg5Q0fMJoSAm0tVa zNm0wX s LS466d
شراء قالب إمبراطور من منصة بيكاليكا

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

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

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

AD 4nXfN7rqXqvbZv1RmUNaK9wp2rPywHlF8pOvBXMZjAJDfXyKn 8fPqTji083Y8dI9mZXl6EADutv7SxLCLeGzXBvhMVsM1x2eHnqFidkpGy HoF0h5Q8985OtJPhSAjIpjiEJ sDqkw
تحميل ملفات القالب

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

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

AD 4nXeEjrqT8d VNL3XPpiisPirhudUWWlyx4 rdSvg9fbKOzbKmWifot0flM7HNXzBKb4UQJ6sILEKqB0h8z2Mtbxn1TXGIX
رفع قالب جديد على ووردبريس

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

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

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

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

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

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

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

AD 4nXfeMn 6l8bb JAr43SmGvSVE42x04wNBkafviQKEwBWzT F8LkQmI8nAcE8yfa44cmyt4xRDkLSfUGpzud96Ee5 bfDRd vDtBsUtilI
بدء استيراد نموذج الهواتف على المتجر

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

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

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

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

AD 4nXfg8MX2GlRNzrbzzQd6b2eWYGZVdfkh3 ZWQCyjE60Jg0EqJwVDzNQG3 I8LMbW uqf4HkBYSt0rJ1gyZLCE sjGlT4kxGZkOPf34QSOeufC
التعديل على صفحة المتجر الرئيسية

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

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

AD 4nXfddwWRibfBZixumHS0swIzSxCKMHe3 JQ2Z39DS2gYixAGtYftIvq1nsBdLAz7RwFxsk aQ
التعديل على نصوص الواجهة الرئيسية

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

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

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

AD 4nXduPteY05c 2jI XKCQB18 kyz6zxBxv7KP0vsB9LZTTOA6lwzKGLyB z inVYs xz5rMvxDKAI3aTOqKZHy24Cz2otTNyliQvMnpYKYHfCyZVAYuei
تحديد المنتجات المطلوب ظهورها على المتجر

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

AD 4nXf7o8zu1kl9BGYv7qdpF6OteP6puoa5 tvn5wN2cBQS3ICjBkYaYEULsvFOc2Fe1hsgGqkBMsayoCyLIpjSE1uuyrpSelO mrfbw9pvwEcsBAZg6U0qDhAnVY74DbQYRVAMC98B
التعديل على طريقة عرض المنتجات على المتجر

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

AD 4nXeu1qmOAVGydHw3b UfWHEL7T j8PrcjqHsQfPktLTz01bsP dhntDa2 XBc8T4zMqYeudPIXsKikpx MPhewWso6cXEj NT3qbeovAMZM8Ka55aMkogX4wd42gyocTehRaZg2RzQ
إضافة أقسام جديدة إلى واجهة المتجر

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

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

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

AD 4nXeZ3Md2a33CMUBznPhE2p7uQvEo99ZS0rXgPmufq53bLK J eRxusSjt7K4gNRsBQMPqpuqwrXtA2WCb6hmGuL5l1 0virboWmTyhijW55Sxzaaw0zZB i7TrCIm1huWKVC1RM
التعديل على ألوان الهوية من إعدادات القالب

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

AD 4nXeUHEaLx3YyYt1sFlEBYRcmaktf58d9Fsa49PwCnrD0NOaCQSGWm64eNdnXLPpV0VAyBUH03Cjy9W04xg3Fe SM4D 8dpWpOVKVEzi2US3CWGnZqaNeK
الألوان العامة في محرر القالب

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

AD 4nXchM6YFbQx4hxiUuAVwag3lkDrH qu4 bjSpXOu8PDsdupTOmsdWrynTTo8SVgKeCSodtL4L5JeQdtq0o97pCS0PZBx5or3Znyh1NrnfmFgvn5oi UCkrDabdiFUU6UrKm2pzw jA
التعديل على ألوان الهوية من إعدادات محرر القالب

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

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

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

AD 4nXf lYKkPvaB5efnWRHxOwm33FL4vFd1fPRl
التعديل على اعدادات القالب

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

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

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

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

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

AD 4nXdQNs9mjXqNfy3mzLHBwhT0m5tQb4ghO3 SNC4nPe6qLQX6pVsY3i2JwAhcuE9lo o1cn68KI8O7 uVC IO 0

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

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

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

انضم إلى قائمتنا البريدية لتبقى على اطلاع دائم بكل جديد.

يرجى إدخال عنوان بريدك الإلكتروني هنا للاشتراك في نشرتنا الإخبارية.

شاركنا رأيك

تفاصيل فائقة الدقة

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

سرعة التنفيذ

نلتزم بسرعة التنفيذ والتسليم في المواعيد المحددة.

أفضل أنظمة الحماية ضد الهجمات

نحن نوفر حماية متقدمة لموقعك وبيانات زوارك لضمان أمانهم وسلامتهم.