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

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

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

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

لماذا تخصيص زر WooCommerce Add-to-Cart؟

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

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

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

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

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

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

الطريقة الأولى: إضافة زر "إضافة إلى عربة التسوق" المخصص باستخدام SeedProd

بالنسبة للطريقة الأولى ، سنستخدم SeedProd ، أفضل أداة إنشاء مواقع ويب لـ WordPress.

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

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

الخطوة 1. تثبيت وتنشيط SeedProd

أولاً ، توجه إلى صفحة أسعار SeedProd واختر خطة SeedProd الخاصة بك. للوصول إلى ميزات WooCommerce ، ستحتاج إلى خطة SeedProd Elite .

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

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

بعد تثبيت SeedProd ، انتقل إلى SeedProd »صفحة الإعدادات والصق مفتاح الترخيص الذي حفظته مسبقًا.

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

ملاحظة: يتيح لك SeedProd إضافة أزرار مخصصة للإضافة إلى عربة التسوق إلى WooCommerce بطريقتين:

• باستخدام صفحة الهبوط
• إنشاء سمة WooCommerce مخصصة

في هذا البرنامج التعليمي ، سننشئ سمة WooCommerce مخصصة لأنها تنشئ جميع صفحات متجر WooCommerce تلقائيًا.

الخطوة 2. اختر مجموعة أدوات الموقع

للخطوة التالية ، انتقل إلى صفحة SeedProd »Theme Builder . هذا هو المكان الذي يمكنك فيه بناء الأجزاء المختلفة من قالب WooCommerce وتخصيص تصميم كل قالب.

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

لاختيار Website Kit ، انقر فوق الزر Themes .

في الشاشة التالية ، سترى مجموعات مواقع الويب المتاحة. سيكون للمجموعات المتوافقة مع WooCommerce "WooCommerce" بجوار عناوينها.

يمكنك بعد ذلك التمرير فوق التصميم الذي تريده والنقر فوق رمز علامة الاختيار لاستيراده إلى منشئ السمة الخاص بك.

في هذا الدليل ، نستخدم مجموعة أدوات موقع Pottery Shop WooCommerce .

بعد استيراد مجموعة أدوات موقع الويب الخاصة بك ، سترى الأجزاء الفردية من قالبك في قائمة مثل هذه:

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

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

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

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

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

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

سيتم فتح صفحة متجر WooCommerce الخاصة بك في أداة إنشاء صفحات السحب والإفلات الخاصة بـ SeedProd ، حيث يمكنك تخصيص تصميمك بدون رمز.

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

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

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

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

ضمن قسم الأزرار ، يمكنك تخصيص زر WooCommerce للإضافة إلى عربة التسوق ببضع نقرات. على سبيل المثال ، ضمن القائمة المنسدلة "نمط الزر" ، يمكنك اختيار:

• مسطحة
• 2 د
• كلاسيكي
• شبح
• نهاية لهذه الغاية

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

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

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

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

هذه المرة ، سترى تفاصيل المنتج الفردي داخل المحرر المرئي لـ SeedProd.

بشكل افتراضي ، سيعرض:

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

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

يمكنك أيضًا تغيير محاذاة الزر وإضافة رمز من مكتبة أيقونات Font Awesome.

ستتيح لك علامة التبويب خيارات متقدمة تغيير ألوان الزر والطباعة والظلال والتباعد كما كان من قبل.

تحرير زر عربة أرشيفات المنتج

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

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

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

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

• الاستعلام بالسمة
• حدد حسب العلامات
• حدد حسب الفئة
• حدد حسب المنتج SKU
• حدد حسب المجموعة
• حدد حسب الرؤية

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

إضافة زر إضافة مخصص إلى عربة التسوق في صفحة المدونة

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

للقيام بذلك باستخدام SeedProd ، ابحث عن قالب صفحة المدونة وانقر فوق الارتباط تحرير التصميم .

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

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

بعد ذلك ، اختر كتلة الصورة وأضف صورة المنتج.

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

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

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

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

تذكر أن تنقر فوق الزر " حفظ " لحفظ التغييرات.

الخطوة 4. احفظ التغييرات وانشرها

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

دعنا نلقي نظرة على بعض الصفحات التي قمنا بتخصيصها:

صفحة التسوق

صفحة المنتج

صفحة الأرشيف

صفحة المدونة

الطريقة 2: إضافة زر "إضافة إلى عربة التسوق" مخصص مع رمز

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

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

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

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

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

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

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

للقيام بذلك ، قم بإنشاء مقتطف رمز مخصص في WPCode والصق رمز PHP التالي:

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

احفظ التغييرات ، فعند عرض منتج واحد ، سترى نص زر إضافة إلى سلة التسوق الجديد.

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

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

الآن قم بلصق كود CSS التالي:

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

يمكنك أن تفعل الشيء نفسه لصفحات أرشيف المنتج الخاص بك عن طريق لصق مقتطف رمز CSS التالي:

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

ها أنت ذا!

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

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

هل أنت مستعد لتخصيص أزرار WooCommerce للإضافة إلى عربة التسوق؟

شكرا للقراءة. يرجى متابعتنا على YouTube و Twitter و Facebook لمزيد من المحتوى المفيد لتنمية أعمالك.