كيفية تخصيص الزر "إضافة إلى عربة التسوق" في WooCommerce

 add_action ('woocommerce_single_product_summary'، 'QL_add_text_above_add_to_cart'، 20) ؛
الوظيفة "QL_add_text_above_add_to_cart" () {
  صدى "ضمان استعادة الأموال لمدة 14 يومًا" ؛
}

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

 add_action ('woocommerce_after_add_to_cart_button'، 'QL_add_text_under_add_to_cart') ؛
الوظيفة QL_add_text_under_add_to_cart () {
  صدى "اتصل بنا للمشتريات بالجملة" ؛
} 

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

3) قم بتغيير لون الزر "إضافة إلى عربة التسوق"

الآن ، دعنا نرى كيفية تحرير الزر Add to Cart عن طريق تغيير لونه. على الرغم من أن معظم سمات WordPress و WooCommerce تأتي بألوان افتراضية للأزرار ، إلا أنه يجب عليك التأكد من تطابقها مع أسلوب متجرك.

لتخصيص لون الزر Add to Cart في WooCommerce ، ستحتاج إلى إضافة مقتطف رمز CSS إلى ملف style.css . يمكنك الوصول إليه باستخدام عميل FTP أو من لوحة معلومات WordPress بالانتقال إلى المظهر> تخصيص> CSS إضافية . يوجد هنا خياران:

1. قم بتغيير لون الزر "إضافة إلى عربة التسوق" في المنتجات الفردية
2. قم بتغيير لون الزر "إضافة إلى عربة التسوق" في "صفحات الأرشيف"

3.1) تغيير لون المنتجات الفردية

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

 منتج واحد. product. single_add_to_cart_button.button {
لون الخلفية: # FF0000 ؛
اللون: # C0C0C0 ؛
}

3.2) تغيير لون زر إضافة إلى عربة التسوق في صفحة الأرشيف

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

 .woocommerce .product .add_to_cart_button.button {
لون الخلفية: # FF0000 ؛
اللون: # C0C0C0 ؛
} 

4) قم بإزالة زر إضافة إلى عربة التسوق وأضف زر الشراء المباشر في صفحة المتجر

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

في هذا القسم ، سنوضح لك كيفية إزالة الزر Add to Cart واستبداله بعملية شراء مباشرة باستخدام Direct Checkout لـ WooCommerce . يحتوي هذا البرنامج المساعد على إصدارات مجانية ومميزة ويأتي مع العديد من الميزات لمساعدتك في تبسيط عملية الدفع. بالإضافة إلى ذلك ، يسمح لك بتخطي صفحة سلة التسوق وإعادة توجيه المستخدمين مباشرة إلى صفحة الخروج ، مما يجعل عملية الشراء أقصر. لذا ، دعنا نرى كيفية إزالة الزر "إضافة إلى عربة التسوق" تمامًا واستبداله بزر شراء مباشر.

قم بتغيير وظيفة الزر Add to Cart

أولاً ، تحتاج إلى تثبيت وتفعيل Direct Checkout. يمكنك تنزيل الإصدار المجاني من هذا الرابط أو إلقاء نظرة على إحدى الخطط المميزة التي تبدأ من 19 دولارًا أمريكيًا (الدفع لمرة واحدة).

بعد تنشيط المكون الإضافي ، في لوحة معلومات WordPress الخاصة بك ، انتقل إلى WooCommerce> Direct checkout> General واملأ الخيارات على النحو التالي:

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

قم بتغيير نص الزر "إضافة إلى عربة التسوق"

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

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

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

5) قم بتخصيص الزر "إضافة إلى عربة التسوق" وإضافة زر "الشراء المباشر" في صفحة المنتج

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

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

كيفية تخصيص رسالة "تمت الإضافة إلى عربة التسوق"

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

 add_filter ('wc_add_to_cart_message_html'، 'quadlayers_custom_add_to_cart_message') ؛
الدالة quadlayers_custom_add_to_cart_message () {
   $ message = 'تمت إضافة منتجك إلى سلة التسوق. شكرا للتسوق معنا!' ؛
   إرجاع رسالة $؛
}

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

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

 add_filter ('wc_add_to_cart_message'، 'quadlayers_custom_wc_add_to_cart_message'، 10، 2) ؛ 
 
الدالة quadlayers_custom_wc_add_to_cart_message ($ message، $ product_id) { 
    $ message = sprintf (esc_html __ (تمت إضافة٪ s إلى سلة التسوق الخاصة بك. شكرًا لك على التسوق! '،' tm-organik ') ، get_the_title ($ product_id)) ؛ 
    إرجاع رسالة $؛ 
} 

هذه مجرد أمثلة قليلة ولكن هناك الكثير الذي يمكنك القيام به وإضافة روابط وأزرار إلى الرسالة. لمزيد من المعلومات حول ذلك ، راجع دليلنا حول كيفية تغيير رسالة WooCommerce Add-to-Cart.

المكافأة: قم بتغيير نص الزر "إضافة إلى عربة التسوق" لفئات مختلفة

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

للقيام بذلك ، يجب عليك استخدام نفس الوظيفة التي استخدمناها في النقطة 1. add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

تحتاج إلى الحصول على فئات كل منتج ثم استخدام شرط شرطي لتغيير النص اعتمادًا على التصنيف على النحو التالي:

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

زر "إضافة إلى عربة التسوق" الخاص بي لا يعمل. ماذا افعل؟

قد يكون هناك عدة أسباب وراء عدم عمل الزر "إضافة إلى عربة التسوق". الأكثر شيوعًا هي:

• البرنامج المساعد / عدم توافق الموضوع
• المنتجات التي تحتوي على معلومات غير كاملة
• مشاكل مع ذاكرة التخزين المؤقت
• نقاط نهاية الخروج
• الروابط الثابتة
• قضايا ModSecurity
• و اكثر

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

ملحوظات

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

استنتاج

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

• قم بتغيير نص الزر "إضافة إلى عربة التسوق"
• أضف نصًا أعلى أو أسفل الزر "إضافة إلى عربة التسوق"
• قم بتغيير لون الزر "إضافة إلى عربة التسوق"
• قم بإزالة زر إضافة إلى عربة التسوق وأضف زر الشراء المباشر في صفحة التسوق
• قم بتخصيص الزر "إضافة إلى عربة التسوق" وأضف زر "الشراء المباشر" في صفحة المنتج