إعادة تصميم عملية دفع WooCommerce بأسلوب Shopify لمتجر RWB Auto Shop

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

يتعاون عميلي، باك مايكل، مع Harun Studio منذ ديسمبر 2024. لقد عملنا معًا في العديد من المشاريع، بما في ذلك maistroaudio.com، وautozilla.id، وpresisi3d.com، وrwbautoshop.com. وهو أيضًا أحد العملاء الأكثر مشاركة منذ البداية، حيث يساعد في الإطارات السلكية وبنية المحتوى والتحقق من صحة التصميم النهائي.

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

ملخص قصير والوجبات السريعة الرئيسية

هل تريد أن تشعر عملية الدفع في WooCommerce بمزيد من التركيز على التحويل؟ ابدأ باستشارة مجانية وسوف نحدد عنق الزجاجة الرئيسي أولاً.

لماذا تحتاج خدمة WooCommerce Checkout الافتراضية إلى إعادة تصميم

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

السمات الشائعة للدفع الافتراضي لـ WooCommerce:

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

Shopify الخروج، من ناحية أخرى، عادة ما يكون:

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

لذلك لم يكن الهدف مجرد جعل الأمر “أبسط”، بل إنشاء تدفق للدفع يحقق ما يلي:

1. يشعر بمزيد من التركيز على التحويل.
2. يشعر بأنه أقوى من الناحية النفسية، فيشعر المستخدمون وكأنهم على وشك الانتهاء.
3. يعمل بشكل أفضل على الهاتف المحمول، لأن معظم الطلبات تأتي الآن من الهواتف.

الإستراتيجية: لماذا لا نبني مكونًا إضافيًا مخصصًا من الصفر؟

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

• وقت التطوير سيكون أطول
• تكلفة التنفيذ ستكون أعلى
• الصيانة طويلة المدى ستكون أثقل أيضًا

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

بعد تقييم العديد من مكونات الدفع الإضافية في WordPress.org، اخترت Fluid Checkout Lite كطبقة أساسية لـ rwbautoshop.com.

لماذا؟

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

التنفيذ الفني

تم وضع جميع التعليمات البرمجية المخصصة في السمة الفرعية بحيث يظل المشروع قابلاً للصيانة وآمنًا أثناء تحديثات السمة.

رأس الخروج مع عناصر GeneratePress

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

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

طبقات التنفيذ التي عملت عليها:

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

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

3. تخصيص CSS تحسين التسلسل الهرمي المرئي، والتباعد، والطباعة، وتصميم المكونات بحيث تبدو الصفحة وكأنها عملية دفع بأسلوب Shopify: نظيفة وحديثة وجديرة بالثقة.

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

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

قبل مقابل بعد

عرض سطح المكتب

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

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

عرض الجوال

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

ما الذي تغير في الممارسة العملية

على الرغم من أن المشروع يغطي صفحة واحدة فقط، إلا أن التأثير على تجربة الدفع كان فوريًا:

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

الدروس المستفادة من المشروع

1. إن Checkout عبارة عن صفحة أعمال، وليست مجرد صفحة نموذج.
2. عادةً ما يكون إعادة إنشاء “إحساس” Shopify في WooCommerce أكثر عملية باستخدام إستراتيجية مختلطة بدلاً من إعادة بناء كل شيء من الصفر.
3. غالبًا ما يكون أساس المكون الإضافي الصحيح بالإضافة إلى الطبقة المخصصة الدقيقة هو المزيج الأكثر كفاءة.

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

هل تريد إعادة تصميم خدمة WooCommerce Checkout الخاصة بك بهذه الطريقة؟

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

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