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

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

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

لماذا اخترت WP Simple Pay بدلاً من WooCommerce؟

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

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

اقرأ أيضًا: 4 إضافات ووردبريس تمكّنك من إنشاء متجر إلكتروني غير ووكومرس

تجهيز وتصميم الموقع وتنصيب إضافة WP Simple Pay

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

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

ربط حساب Stripe الخاص بالعميل

كانت الخطوة الأولى هي ربط الإضافة بحساب سترايب الخاص بالعميل، وذلك لكي يتلقى المدفوعات عليه، لذلك توجهت إلى WP Simple Pay ثم Settings ثم Stripe، ونقرت على Connect with Stripe.

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

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

إنشاء نموذج الشراء والدفع

بعد الربط مع حساب سترايب، انتقلت إلى WP Simple Pay، ثم Add New Payment Form، ثم نقرت على زر Use Template الخاص بقالب Product Purchase Form لإنشاء نموذج جديد لشراء منتج.

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

بعد ذلك انتقلت إلى تبويب Payment وحددت السعر الذي سيدفعه العميل من قسم Price Options، إذ نقرت على زر Add Price، ثم حددت طريقة الدفع بـ One Time أي دفعة واحدة.

ثم انتقلت إلى تبويب Form Fields، وكانت توجد به الحقول الافتراضية لنموذج شراء منتج، مثل الكمية والقياس واللون.

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

إنشاء صفحة المنتج وتضمين النموذج فيها

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

وأدخلت ضمن مكون الكود القصير الكود القصير الخاص بنموذج الدفع، والذي حصلت عليه من خلال الانتقال إلى WP Simple Pay ثم Payment Forms، ثم النقر على زر Copy Shortcode الخاص بالنموذج.

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

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

بعد ذلك تأكدت من عمل النموذج عبر تجريبه، وكررت تنفيذ الخطوات نفسها للمنتجات الأخرى (بنطال - قبعة، وغيرها).

ثم ألغيت تفعيل الوضع التجريبي Test Mode عبر الانتقال إلى WP Simple Pay ثم Settings ثم Stripe، واختيار Disabled في قسم Test Mode.

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

اقرأ أيضًا: دليل المبتدئين إلى لغة CSS | كيفية كتابتها وتعلمها واستخدامها

خلاصة التجربة ونصائح إضافية

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

إضافة إلى ذلك، كانت بعض الكلمات والعبارات في الواجهة الأمامية ضمن النموذج غير ظاهرة باللغة العربية، مثل كلمة (Optional)، وهذا ما دفعني إلى استخدام إضافة Loco Translate لترجمة هذه الكلمات والعبارات.

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

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