كيفية إضافة زر إضافة إلى عربة التسوق في صفحات متجر Divi

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

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

لماذا يتم تضمين زر إضافة إلى عربة التسوق في Shop Pages؟

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

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

كيفية إضافة زر الإضافة إلى عربة التسوق في Divi؟

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

الطريقتان الرئيسيتان لإضافة زر إضافة إلى عربة التسوق في صفحات المتجر هما:

1. تعديل ملف jobs.php
2. استخدام البرنامج المساعد Code Snippets

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

قبل أن نبدأ

قبل أن نبدأ ، نوصيك بما يلي:

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

1) قم بتضمين زر إضافة إلى عربة التسوق من jobs.php

إنشاء موضوع الطفل

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

ثم قم بتنشيطه.

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

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

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

بعد تحديد السمة الأصلية وتسمية السمة الفرعية ، اضغط على زر Create Child Theme .

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

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

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

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

قم بتغيير ملف jobs.php

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

 // يضيف هذا الرمز أزرار "إضافة إلى عربة التسوق" إلى صفحة تعرض حلقة المتجر
add_action ('woocommerce_after_shop_loop_item'، 'woocommerce_template_loop_add_to_cart'، 20) ؛

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

لقد قمت بإضافة أزرار إضافة إلى عربة التسوق إلى صفحة المتجر !

2) البرنامج المساعد مقتطفات التعليمات البرمجية

بدلاً من ذلك ، بدلاً من تحديث ملف jobs.php ، يمكنك تضمين الزر Add to Cart في Divi باستخدام مكون إضافي. في تجربتنا مع WordPress والتخصيص ، تعد Code Snippets واحدة من أفضل الأدوات لهذه المهمة.

بادئ ذي بدء ، تحتاج إلى تثبيت وتفعيل المكون الإضافي Code Snippets على موقعك.

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

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

 // سيتضمن هذا الرمز أزرار "إضافة إلى عربة التسوق" إلى صفحة تعرض حلقة المتجر
add_action ('woocommerce_after_shop_loop_item'، 'woocommerce_template_loop_add_to_cart'، 20) ؛

ثم احفظ المقتطف ونشطه.

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

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

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

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

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

لذلك ، للقيام بذلك ، قم بلصق كود PHP أدناه في قسم Code Snippets باعتباره رمزًا جديدًا.

 add_action ('woocommerce_after_shop_loop_item'، 'quadlayers_woocommerce_template_loop_add_to_cart'، 10) ؛
add_action ('woocommerce_after_shop_loop_item_title'، 'quadlayers_woocommerce_template_loop_add_to_cart'، 10) ؛

الدالة quadlayers_woocommerce_template_loop_add_to_cart () {
   woocommerce_template_loop_add_to_cart (صفيف ('class' => 'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')) ؛ 
}

بعد ذلك ، يمكنك استخدام CSS لتعديل الزر. في هذا الكود ، ذكرنا فئات CSS الافتراضية للزر مثل: button product_type_simple add_to_cart_button ajax_add_to_cart . بالإضافة إلى ذلك ، يمكنك إضافة فئة CSS المخصصة الخاصة بك عن طريق استبدال my_class_here .

عندما تقوم بتضمين CSS إضافي إلى قالبك ، يمكنك استخدام شيء مثل: .my_class { option:value !important; } .my_class { option:value !important; } . تأكد من أنك ستستبدل my_class CSS الخاصة بك.

على سبيل المثال ، يمكنك استخدام كود CSS مثل هذا:

 .woocommerce-LoopProduct-link + a {
    / * CSS المخصص الخاص بك هنا * /
}

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

استنتاج

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

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

بالإضافة إلى ذلك ، إذا كنت ترغب في تخصيص متجرك ، نوصيك بمراجعة البرامج التعليمية التالية:

• كيفية تخصيص صفحة متجر WooCommerce؟
• أضف إلى عربة التسوق برمجيًا في WooCommerce
• كيفية تنفيذ زر AJAX add to cart في WooCommerce؟
• كيفية تخصيص صفحة الخروج من WooCommerce؟

أخيرًا ، لتحقيق أقصى استفادة من Divi Theme ، يمكنك إلقاء نظرة على أدلةنا:

• كيفية إخفاء وإزالة التذييل في Divi؟
• نموذج الاتصال Divi لا يعمل؟ إليك كيفية إصلاحه!

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

لمزيد من المعلومات حول كيفية تحسين التحويلات ، تحقق من أفضل مكونات WooCommerce للشراء السريع.