3 طرق فعالة لتخصيص وتحرير صفحة الخروج من WooCommerce

هل تبحث عن أفضل طريقة لتحرير صفحة الخروج من WooCommerce ؟

يتيح لك تعلم كيفية تخصيص صفحة الخروج من WooCommerce مزيدًا من التحكم في تصميمها ويزيد من احتمالية زيادة المبيعات.

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

سننتقل أيضًا إلى جميع الميزات المضمنة التي تقدمها WooCommerce لتخصيص تجربة السداد.

هيا بنا نبدأ…

أسباب تحرير صفحة الخروج من WooCommerce

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

ولكن قد تلاحظ أيضًا عيوبه. فيما يلي الأسباب الرئيسية التي قد تجعلك ترغب في تحرير صفحة الخروج من WooCommerce :

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

كيفية تحرير صفحة الخروج من WooCommerce

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

أدناه ، سنستعرض ثلاثة من أفضل الطرق:

1. إعدادات WooCommerce الأصلية - تتضمن WooCommerce الكثير من الخيارات المضمنة لتخصيص عملية الدفع ، والتي سنشرحها بالتفصيل في الطريقة الأولى. قد يقدم المظهر الخاص بك أيضًا خياراته الخاصة لتخصيص تصميم صفحة الخروج.
2. يقدم Elementor Pro - Elementor Pro الآن أداة الدفع الخاصة به والتي تتيح لك تخصيص تصميم صفحة الخروج بالكامل. يعد هذا خيارًا رائعًا إذا كنت تريد على وجه التحديد تعديل تصميم الصفحة.
3. Checkout Field Editor - يعد هذا خيارًا رائعًا إذا كنت تريد تحرير حقول النموذج التي تظهر في صفحة الخروج. يمكنك استخدامه لإضافة حقول جديدة وإزالة الحقول الافتراضية وإعادة ترتيب كل شيء حسب الحاجة.

دعنا نذهب من خلالهم ..

الطريقة الأولى: استخدم إعدادات الدفع الافتراضية لـ WooCommerce

تقدم WooCommerce إعدادات مضمنة لتحرير وحدة الخروج الخاصة بك ، وقد يوفر موضوع WordPress الخاص بك بالفعل أدوات لضبط بعض الحقول وإعدادات الخروج في مُخصص WordPress.

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

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

الخطوة 1: أضف حسابات الضرائب وحقل القسيمة عند الخروج

يحتوي WooCommerce على إعدادات مضمنة لأتمتة حسابات الضرائب وقبول القسائم عند الخروج.

للتبديل بين التشغيل / الإيقاف ، انتقل إلى WooCommerce> الإعدادات في WordPress.

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

حدد المربع لتمكين استخدام أكواد القسيمة لإظهار حقل حيث يمكن للعملاء كتابة أكواد الخصم.

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

الخطوة 2: عرض أسعار المنتج مع أو بدون ضريبة

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

بشكل عام ، يُظهر هذا مزيدًا من الشفافية ، بدلاً من زيادة السعر مع الضريبة قبل أن يدفع العميل مباشرةً.

لتضمين الضريبة مع الأسعار في عملية السداد ، انتقل إلى WooCommerce> الإعدادات> الضرائب .

قم بالتمرير لأسفل على الصفحة للعثور على حقل "عرض الأسعار أثناء سلة التسوق والدفع".

اختر من القائمة المنسدلة:

• متضمن للضريبة
• لا تشمل الضريبة

انقر فوق حفظ التغييرات .

الخطوة 3: حدد عناصر الشحن التي تظهر عند الخروج

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

ما عليك سوى الانتقال إلى علامة التبويب " الشحن " وضبط:

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

انقر فوق حفظ التغييرات .

الخطوة 4: إدارة الحسابات والخصوصية عند الخروج

أثناء البقاء ضمن WooCommerce> الإعدادات ، انتقل إلى علامة التبويب الحسابات والخصوصية .

في الجزء العلوي من الصفحة ، سترى حقلين:

• خروج الضيف: قم بتضمين / إزالة إعارات الضيف وتسجيل الدخول إلى الحساب الحالي
• إنشاء الحساب: السماح للعملاء بإنشاء حساب أو بدء الاشتراك أثناء الخروج

تابع أسفل صفحة الحسابات والخصوصية للعثور على منطقة سياسة الخصوصية .

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

الخطوة 5: اختر صفحة الخروج الفعلية والإعدادات المتقدمة الأخرى

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

بشكل افتراضي ، تنشئ WooCommerce صفحات Cart و Checkout و My Account و Terms and Terms ، والتي يمكنك العثور عليها بالانتقال إلى Pages> All Pages on WordPress.

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

هناك خيار آخر في علامة التبويب خيارات متقدمة وهو فرض الدفع الآمن ، والذي يتطلب شهادة SSL.

الخطوة 6: قم بتغيير تصميم الخروج الخاص بالقالب الخاص بك في مُخصص WordPress

غالبًا ما تقوم سمات WordPress المزودة بوظيفة WooCommerce بتثبيت أدوات WordPress Customizer لضبط تصميم الخروج بسهولة.

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

للبدء ، انتقل إلى المظهر> تخصيص على WordPress.

إذا كان متوفرًا ، يجب أن يعرض المظهر الخاص بك زر WooCommerce في مكان ما في مُخصص WordPress. انقر فوق ذلك.

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

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

• حقل اسم الشركة
• حقل سطر العنوان 2
• مجال الهاتف

من الممكن أيضًا تمييز الحقول المطلوبة بعلامة النجمة.

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

الطريقة 2: استخدم أداة إنشاء الصفحات لتحرير حقول سحب WooCommerce والنمط العام

يقدم منشئو الصفحات مثل Elementor و Beaver Builder و Themify أدوات محتوى WooCommerce لتجاوز ما هو موجود حاليًا في صفحة الخروج من WooCommerce.

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

بعد قولي هذا ، يمنحك مُنشئ الصفحات تحكمًا كاملاً تقريبًا في صفحة الخروج الخاصة بك ، لذا فهي طريقة سهلة لتحرير تسجيل الخروج من WooCommerce دون معرفة الترميز ، وحوالي 50 إلى 100 دولار فقط في السنة.

في هذا البرنامج التعليمي ، سنوضح لك كيف يعمل تخصيص السداد عمومًا مع مُنشئ الصفحة ، باستخدام Elementor.

الخطوة 1: افتح صفحة الخروج المحددة في Elementor

لتحرير WooCommerce checkout في Elementor ، يجب أن تذهب إلى صفحة Checkout التي تم إنشاؤها تلقائيًا بواسطة WooCommerce. ابحث عن ذلك ضمن Pages> All Pages .

افتح الصفحة المسماة "صفحة الخروج" ، ثم انقر فوق تحرير باستخدام Elementor .

الخطوة 2: إزالة رمز WooCommerce المختصر للدفع

أضافت WooCommerce تلقائيًا "WooCommerce checkout "في المحرر ، والذي يعرض وحدة دفع WooCommerce الافتراضية.

الهدف هو استبدال ذلك بوحدة تسجيل الخروج من مُنشئ الصفحة الخاص بك. لذلك ، احذف رمز WooCommerce المختصر للدفع.

الخطوة 3: قم بإسقاط عنصر واجهة المستخدم Elementor Checkout

حان الوقت الآن للعثور على أداة الدفع الخاصة بباني الصفحة. يقدم Elementor واحدًا يسمى Checkout ، والذي يمكنك العثور عليه باستخدام شريط البحث أو عن طريق التصفح أسفل عنوان WooCommerce. انقر واسحب أداة Checkout إلى الصفحة الفارغة ، حيث تظهر عبارة "Drag Widget Here".

ملاحظة: قد لا ترى أداة Checkout إذا لم تقم بالترقية إلى الإصدار Premium من Elementor. هذا هو الحال بالنسبة لمعظم بناة الصفحات.

الخطوة 4: تخصيص المحتوى والأسلوب والميزات المتقدمة

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

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

تشمل علامات تبويب التخصيص الأخرى ما يلي:

• تفاصيل الفاتورة
• معلومات إضافية
• طلبك
• قسيمة
• دفع

هناك أيضًا طرق لا حصر لها لتحرير WooCommerce checkout ضمن علامة تبويب النمط .

استخدم علامات التبويب هذه:

• الأقسام
• الطباعة
• نماذج
• ملخص الطلب
• زر الشراء

على سبيل المثال ، قمنا بتبديل زر الشراء الأزرق إلى زر أخضر.

أخيرًا ، توفر علامة التبويب خيارات متقدمة أدوات أكثر قوة للتعديل:

• التخطيطات
• تأثيرات الحركة
• تحويلات
• الخلفيات
• الحدود
• أقنعة
• إستجابة
• صفات
• لغة تنسيق ويب حسب الطلب

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

الطريقة الثالثة: قم بتثبيت مكون إضافي مخصص لتعديل الحقول

توجد العديد من مكونات أداة تخصيص الدفع لـ WooCommerce ، مثل:

توفر معظم ملحقات الدفع لـ WooCommerce أدوات تخصيص إضافية لتعديل الحقول وإضافتها ، ولكن هناك القليل منها لتجديد التصميم بالكامل ، مثل البرنامج الإضافي Multi-Step Checkout.

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

الخطوة 1: قم بتثبيت وتفعيل المكون الإضافي Checkout Field Editor

قم بتثبيت المكون الإضافي Checkout Field Editor ، ثم تابع عملية تنشيط المكون الإضافي.

بمجرد تنشيط البرنامج المساعد ، يضيف علامة تبويب جديدة على WordPress ، والتي يمكنك الوصول إليها بالانتقال إلى WooCommerce> Checkout Form .

الخطوة 2: قم بتحرير الحقول الحالية

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

يمكنك تحرير:

• حقول الفواتير
• مجالات الشحن
• حقول إضافية

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

في نافذة تحرير الحقل ، يمكنك تعديل خيارات الحقل ، مثل:

• مُلصَق
• عنصر نائب
• القيمة الافتراضية
• فصل
• تصديق

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

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

كما ترى ، قمنا بإزالة حقل اسم الشركة من منطقة الدفع.

وقد اختفى من الواجهة الأمامية للخروج.

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

يكشف حقل "الاسم الأول" الموجود في عملية الدفع الآن عن نص عنصر نائب جديد.

الخطوة 3: أضف حقلاً جديدًا إلى تسجيل الخروج من WooCommerce

لإضافة حقل جديد تمامًا ، انقر فوق الزر " إضافة حقل" .

اختر نوع الحقل ، واختر من بين خيارات مثل:

• نص
• رقم
• مختفي
• كلمة المرور
• هاتف
• خانة اختيار
• شهر
• URL
• و أكثر من ذلك بكثير

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

تأكد من تحديد المربع ممكّن ، ثم انقر فوق حفظ وإغلاق .

الخطوة 4: اعرض النتائج

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

ويظهر الحقل الجديد أيضًا في وحدة الدفع للواجهة الأمامية.

قم بإنشاء صفحة الخروج المثالية اليوم

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

ما هي أسئلتك الرئيسية حول كيفية تحرير WooCommerce checkout؟ مشاركة أفكارك في التعليقات!