كيف تجعل موقع WooCommerce الخاص بك جاهزًا للجوال من خلال 9 خطوات بسيطة

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

تعمل WooCommerce على ما يزيد عن 28.19٪ من جميع المتاجر عبر الإنترنت. 22٪ من أفضل مليون موقع للتجارة الإلكترونية تستخدم WooCommerce.

استضافة المحكمة

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

حسنا، نحن هنا للمساعدة. ستكون هذه المدونة هي الدليل النهائي لتطوير WooCommerce على الهاتف المحمول. هيا بنا نبدأ.

ما الذي يجعل موقع WooCommerce جاهزًا للجوال

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

بريان كوالي ، كيسي للطباعة

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

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

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

صعود التجارة عبر الجوال وأهمية WooCommerce على الهاتف المحمول

كان من المتوقع أن يصل عدد مستخدمي الهواتف الذكية في جميع أنحاء العالم إلى 3.5 مليار في العام الماضي. وهو في طريقه للوصول إلى 3.8 مليار في عام 2021. إذا قارنت الرقم ، فقد كان 2.7 مليار في عام 2017.

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

توقع موقع Business Insider أنه بحلول نهاية عام 2020 ، ستصل التجارة عبر الهاتف المحمول إلى 284 مليار دولار. والتي تغطي ما يقرب من 45٪ من إجمالي سوق التجارة الإلكترونية في الولايات المتحدة. لذلك ، فإن حقبة ما بعد الجائحة تحدث تغييرات في سلوك التسوق لدى الناس.

إذا رأيت الرسم البياني أعلاه ، يمكنك بسهولة فهم النسبة المئوية لمبيعات تجارة التجزئة الإلكترونية التي سترتفع إلى 18.1٪ من 14.5٪ العام الماضي. توقعت شركة Insider Intelligence أن يصل حجم التجارة عبر الهاتف المحمول إلى 25.5٪ معدل نمو سنوي مركب (CAGR) يمثل 44٪ من إجمالي مبيعات التجارة الإلكترونية بحلول عام 2024.

وبالتالي ، فإن كل هذه الإحصائيات والبيانات تعني شيئًا واحدًا فقط.

إذا كان لديك موقع ويب WooCommerce ، وتريد أن يتمكن جميع زوار الجوال من التسوق بسهولة في متجرك عبر الإنترنت ، فما هي أفضل طريقة؟ يجب عليك تطوير تجربة جاهزة للجوال لهم.

كيفية تطوير موقع WooCommerce الجاهز للجوال

1. لنجري فحصًا سريعًا على Google Mobile-Friendly Test
2. ابدأ في تحسين صورك
3. أعد التفكير في النافذة المنبثقة لجيل الرصاص
4. ابدأ في استخدام سمة WordPress المتوافقة مع الجوّال
5. تطوير قائمة بسيطة والتنقل في الموقع
6. انتقل إلى البرنامج المساعد WordPress لتحسين الهاتف المحمول
7. زيادة سرعة الصفحة الخاصة بك
8. حافظ على بساطة تصميم موقعك
9. أنت بحاجة إلى أبسط عملية دفع

1. لنجري فحصًا سريعًا على Google Mobile-Friendly Test

أول شيء هو معرفة مدى جاهزية موقع WooCommerce للجوّال الآن. ومن ثم ، فإن أسهل طريقة هي إجراء اختبار مجاني متوافق مع الجوّال من Google. هذا بسيط للغاية.

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

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

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

2. ابدأ في تحسين صورك

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

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

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

أفضل طريقة للتخلص من هذه المشكلة هي استخدام أداة تحسين الصورة. بالنسبة لمواقعنا الإلكترونية ، نستخدم مُحسِّن صور بسيطًا وقويًا للغاية Tiny PNG.

ومع ذلك ، هناك العديد من الطرق الأخرى لتطبيق تحسين الصورة على WooCommerce على الهاتف المحمول. يمكنك تثبيت برنامج WordPress الإضافي المُحسِّن للصور تلقائيًا. أيضًا ، قد تحصل على مساعدة من Lazy Loading. عندما يأتي أي من زوار موقعك إلى موقع الويب الخاص بك ، فإن الميزة تخبر متصفح المستخدم بعدم تحميل أي صور حتى تكون ضرورية. يساعد هذا المستخدم على تجربة صفحة مقصودة أسرع ، والحصول على الصور في الوقت المناسب للتحميل.

ستجد عددًا قليلاً من ملحقات التحميل البطيئة الموثوقة في مستودع WordPress.

3. إعادة التفكير في النوافذ المنبثقة لجيل الرصاص

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

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

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

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

4. ابدأ في استخدام سمة WordPress الملائمة للجوّال

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

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

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

5. قم بتطوير قائمة بسيطة لجعل موقع WooCommerce جاهزًا للجوال

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

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

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

6. انتقل إلى البرنامج المساعد WordPress لتحسين الجوّال

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

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

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

وبالتالي ، ستجد الكثير من المكونات الإضافية في هذا الصدد. بعض الأسماء الشائعة - Jetpack ، و WordPress Mobile Pack ، و AMP for WP ، و Respive Mobile Menu ، إلخ.

7. زيادة سرعة صفحتك لمستخدمي الجوال

السرعة هي بالتأكيد عامل الترتيب؟ نعم.

جون مولر ، جوجل

يجب أن تتخذ خطوات مباشرة لزيادة سرعة صفحة متاجر WooCommerce الخاصة بك. في المتوسط ​​، غادر 53٪ من زوار الجوال موقع الويب إذا استغرق تحميله أكثر من 3 ثوانٍ. من وجهة نظر مختلفة ، يمكن أن يؤدي التأخير لمدة ثانيتين إلى زيادة معدل الارتداد بنسبة تصل إلى 87٪.

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

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

Google PageSpeed ​​Insights

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

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

GTMetrix

تمنحك هذه الأداة نطاقًا أوسع من مجموعة البيانات عندما تقوم بتحليل موقع WooCommerce الخاص بك بها. يمكن أن يكون بديلاً متوافقًا مع Google PageSpeed ​​Insights.

8. حافظ على تصميم الموقع بسيطًا

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

للقيام بذلك ، يمكنك اتباع النصائح التالية -

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

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

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

قد يعجبك أيضًا: أفضل مواقع الويب التي تستخدم WooCommerce للتجارة الإلكترونية

9. أنت بحاجة إلى أبسط عملية دفع للحصول على WooCommerce جاهز للجوال

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

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

أساسيات عملية السداد الشفافة

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

تطوير نظام الخروج للتجارة الإلكترونية المتوافق مع الأجهزة المحمولة

وجد Derek Nelson ، المدير الإبداعي لـ Clique وأحد المساهمين في مجلة Smash ، عددًا قليلاً من الطرق التي يمكن أن تساعدك على تطوير عملية دفع أفضل لـ WooCommerce على مستخدمي الأجهزة المحمولة.

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

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

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

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

إغلاق باب تطوير موقع WooCommerce جاهز للجوال

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

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

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