كيفية تخصيص صفحة عربة WooCommerce

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

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

لماذا تحرير صفحة عربة التسوق؟

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

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

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

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

وإليك كيف يبدو مع موضوع Twenty-One الافتراضي.

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

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

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

كيفية تخصيص صفحة عربة WooCommerce

هناك طرق مختلفة لتخصيص صفحة عربة التسوق في متجر WooCommerce الخاص بك:

1. باستخدام كتل WooCommerce الافتراضية
2. باستخدام الإضافات
3. مع بناة الصفحة
4. برمجيا

دعنا نلقي نظرة فاحصة على كل طريقة حتى تتمكن من اختيار أفضل طريقة لك.

1. كتل WooCommerce الافتراضية

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

1.1) إضافة كتلة جميع المنتجات

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

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

1.2) إضافة أحدث المنتجات بلوك

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

1.3) إضافة منتجات منتقاة يدويًا

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

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

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

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

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

2. الإضافات لتخصيص صفحة عربة التسوق

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

2.1) كتل WooCommerce

WooCommerce Blocks هو مكون إضافي للوصول المبكر إلى كتل WooCommerce التجريبية. يسمح لك بتجربة كتل WooCommerce الجديدة قبل إصدارها في محرر الكتلة الافتراضي.

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

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

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

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

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

سمات

• تجربة الكتل الجديدة لأغراض الاختبار
• جرب عربة التسوق وكتل الخروج
• الإبلاغ عن الأخطاء والأخطاء إن وجدت

التسعير

هذا هو البرنامج المساعد المجاني.

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

2.2) StoreCustomizer

StoreCustomizer عبارة عن حزمة شاملة تتيح لك تخصيص متجر WooCommerce بالكامل. يمكنك تخصيص أي شيء من صفحات المنتج إلى صفحة المتجر وصفحة الحساب وصفحة عربة التسوق وصفحة الخروج.

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

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

أخيرًا ، تم دمج جميع الخيارات بشكل ملائم في أداة تخصيص السمات. نتيجة لذلك ، فإنه يجعل تخصيص متجر WooCommerce سلسًا وغير مؤلم.

سمات

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

التسعير

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

2.3) البرنامج المساعد WooCommerce Fast Cart

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

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

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

سمات

• إضافة عربة منبثقة وصفحة الخروج للتحويلات الفورية
• قم بتعيين عربة التسوق فقط أو الخروج أو كلتا الصفحتين في النافذة المنبثقة
• عالية للتخصيص
• خفيف الوزن ومحسّن
• يعمل مع جميع بوابات الدفع الشائعة مثل PayPal و stripe و amazon

التسعير

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

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

تخصيص صفحة سلة التسوق باستخدام StoreCustomizer

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

تثبيت وتنشيط البرنامج المساعد

أولاً ، انتقل إلى لوحة تحكم مسؤول WordPress وانتقل إلى الإضافات> إضافة جديد. ابحث عن المكون الإضافي StoreCustomizer ، وانقر فوق الزر Install Now ، ثم قم بتنشيطه.

تخصيص صفحة عربة التسوق

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

يقوم StoreCustomizer بتضمين أدوات التخصيص والميزات الخاصة به في أداة تخصيص السمات. ما عليك سوى الانتقال إلى StoreCustomizer> Cart Page من قائمة أداة تخصيص السمات وستجد جميع الخيارات لتحرير صفحة عربة التسوق.

التخصيصات الأساسية

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

إضافة العودة إلى زر التسوق

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

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

إظهار الخصم / المبلغ المحفوظ

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

عمليات البيع المتقاطعة وإجماليات سلة التسوق

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

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

بصرف النظر عن عمليات البيع المتقاطعة ، يمكنك تغيير عنوان قسم إجماليات سلة التسوق.

تحرير صفحة عربة التسوق الفارغة

تعرض الصفحة الافتراضية لعربة التسوق الفارغة رسالة تخبر المستخدم أن سلة التسوق فارغة. يتيح لك StoreCustomizer إنشاء رسالتك المخصصة لدعوة المستخدم لاستكشاف المتجر.

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

تخصيص جدول عربة التسوق والمضي قدما في أزرار الخروج

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

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

3. مع بناة الصفحة

تُعد أدوات إنشاء الصفحات حلاً مقاسًا واحدًا يناسب الجميع لجميع احتياجات تعديل موقعك. معظم منشئي الصفحات المشهورين لديهم قسم WooCommerce مخصص يسمح لك بتخصيص متجرك بالكامل.

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

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

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

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

في حالة Divi ، يمكنك الوصول إلى 17 كتلة WooCommerce. Divi هو منشئ الصفحات المتميز ، لذلك سيتعين عليك الدفع للوصول إلى هذه الميزات.

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

4. برمجيا

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

بعد تكوين السمة الفرعية الخاصة بك ، انتقل إلى WP Admin Dashboard> Appearance> Theme Editor. هنا ، يمكنك إضافة مقتطفات تعليمات برمجية مخصصة في نهاية ملف function.php لموضوع طفلك.

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

الآن دعنا نرى بعض مقتطفات التعليمات البرمجية التي يمكنك استخدامها لتخصيص صفحة عربة WooCommerce الخاصة بك.

4.1) رسالة مخصصة على صفحة عربة التسوق

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

 // إضافة رسالة مخصصة إلى صفحة عربة WooCommerce
add_action ('woocommerce_before_cart_table'، 'shop_message'، 20) ؛
وظيفة shop_message () {
echo '<p class = "woocommerce-message"> هذا نصي المخصص </ p>'؛ // تغيير هذا النص
}

فعله! سيعرض هذا رسالة مخصصة على صفحة عربة التسوق الخاصة بك.

4.2) محتوى مخصص لإفراغ صفحة سلة التسوق

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

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

 // يضيف محتوى مخصصًا إلى صفحة عربة التسوق الفارغة Woocommerce

add_action ('woocommerce_cart_is_empty'، 'blank_cart_custom_content') ؛
دالة blank_cart_custom_content () {
echo '<h4> لم تقم بإضافة أي عنصر إلى سلة التسوق الخاصة بك. تحقق من مخزوننا وسوف تحب منتجاتنا </h4> '؛ // استبدل الرسالة برسالتك الخاصة
صدى do_shortcode ('
 ') ؛
} 

4.3) زر عربة التسوق فارغة في صفحة السلة

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

لإضافة زر سلة فارغة ، ما عليك سوى استخدام مقتطف الشفرة التالي.

 // زر "عربة فارغة" في صفحة عربة Woocommerce

add_action ('woocommerce_cart_coupon'، 'woocommerce_empty_cart_button') ؛
الوظيفة woocommerce_empty_cart_button () {
صدى '<a href = "". esc_url (add_query_arg (' blank_cart '،' yes ')).' "class =" button cart "
title = "". esc_attr ('سلة فارغة'، 'woocommerce'). '">'. esc_html ("عربة فارغة" ، "woocommerce"). "</a>" ؛
}

add_action ('wp_loaded'، 'woocommerce_empty_cart_action'، 20) ؛
الوظيفة woocommerce_empty_cart_action () {
if (isset ($ _GET ['blank_cart']) && 'yes' === esc_html ($ _GET ['blank_cart'])) {
WC () -> عربة التسوق-> blank_cart () ؛
المرجع $ = wp_get_referer ()؟ esc_url (remove_query_arg ('blank_cart')): wc_get_cart_url () ؛
wp_safe_redirect (مرجع $) ؛
}
}

إذا لم يتم فصل الزر عن أزرار جدول سلة التسوق الأخرى ، فقد تحتاج إلى إضافة هذا إلى أداة التخصيص> CSS الإضافية.

 a.button.cart {
الهامش الأيسر: 10 بكسل ؛
} 

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

حتى الآن ، رأينا طرقًا مختلفة لتخصيص صفحة عربة WooCommere: بالخيارات الافتراضية ، مع المكونات الإضافية ، ومنشئي الصفحات ، وبرمجيًا.

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

كيفية تخطي صفحة عربة التسوق

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

لتخطي صفحة عربة التسوق ، انتقل إلى WP Admin Dashboard وانتقل إلى WooCommerce> الإعدادات. ضمن علامة تبويب المنتجات ، حدد الإعدادات العامة في القائمة الفرعية وحدد خيار "إعادة التوجيه إلى صفحة سلة التسوق بعد الإضافة الناجحة" . بعد ذلك ، تذكر حفظ التغييرات.

بعد ذلك ، انتقل إلى علامة التبويب خيارات متقدمة وحدد إعداد الصفحة . قم بتغيير صفحة عربة التسوق الافتراضية إلى Checkout واحفظ التغييرات.

فعله! يمكنك الآن الانتقال إلى الواجهة الأمامية لموقع الويب الخاص بك والتحقق منه بنفسك.

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

المكافأة: كيفية التغيير انتقل إلى نص الخروج

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

في هذه المقالة ، أوضحنا بالفعل كيفية تحرير الزر والنص " Proceed to Checkout " باستخدام المكون الإضافي StoreCustomizer. في هذا القسم ، سنرى طريقة أخرى لتغيير نص "المتابعة إلى Checkout" باستخدام مقتطف رمز مخصص.

على سبيل المثال ، دعنا نلقي نظرة على المقتطف التالي لاستبدال زر Proceed to Checkout بـ "Take me to checkout". ما عليك سوى تغيير نص " خذني إلى الخروج " بأي شيء تريده.

 // تغيير المضي قدما إلى نص الخروج

remove_action ('woocommerce_proceed_to_checkout' ، 'woocommerce_button_proceed_to_checkout ، 20) ؛
add_action ('woocommerce_proceed_to_checkout'، 'custom_button_proceed_to_checkout'، 20) ؛

الوظيفة custom_button_proceed_to_checkout () {
صدى "<a href="'.esc_url(wc_get_checkout_url()).'" class="checkout-button button alt wc-forward"> '.
__ ("خذني إلى الخروج" ، "woocommerce"). "</a>" ؛ // استبدل "Take me to Checkout" بالنص الخاص بك 

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

استنتاج

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

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

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

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

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