تخصيص تصميم زر (أضف إلى السلة) في متجر ووكومرس لإكمال تصميم هوية متجرك

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

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

كيف سيتم تعديل وتخصيص زر أضف إلى السلة

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

هناك عدة تعديلات يمكنك تخصيصها في زر أضف السلة لمتجرك كما يلي:

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

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

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

تأثيرات الحركة (hover): كذلك تستطيع إضافة تأثيرات معيّنة بمجرد تمرير الماوس من أجل لفت انتباه الزائر، فيمكن مثل تغيير لون خلفية زر أضف إلى السلة بمجرد أن يكوم الزبائن بتمرير المؤشر عليه.

والآن دعنا نتحدث عن بعض الإضافات التي تساعدك على هذا التخصيص.

إضافة Custom Add to Cart

من خلال إضافة Custom Add to Cart تستطيع عمل بعض التعديلات البسيطة على زر أضف إلى السلة

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

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

في المثال التالي حيث قمنا بتغيير النصف الافتراضي إلى جملة (اشتري بثقة الآن):

كذلك يمكنك النقر على خيار إظهار الأيقونةليتم إظهار أيقونة سلة الشراء إلى جوار النص المضاف

بالإضافة إلى خيار إخفاء النص الخاص بزر أضف إلى السلة، والتي يمكنك اختياره في حال رغبتك في إخفاء النص الخاص بزر أضف إلى السلة بصورة كاملة:

إضافة Ultimate custom Add to cart

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

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

سيتم توجيهك إلى صفحة الإعدادات العامة للإضافة، والتي تجد بها العديد من خيارات التعديل على الزر بصورة كبيرة، حيث تجد في تبويب (الإعدادات العادية) مجموعة من خيارات التعديل على النص الخاص بالزر في العديد من الحالات:

1. نص بسيط: يظهر هذا النص على صفحة المنتجات العادية التي ليست عبارة عن منتج متغير أو منتج مجمع أو غيرها من الأنواع الأخرى من المنتجات.
2. نص زر المنتج الخارجي: وهذا النص يظهر على صفحات المنتجات التي يتم استدعائها من مصادر أو متاجر خارجية، ومن أمثلتها الحالات الخاصة بالتسويق بالعمولة التي يتم فيها التسويق المنتجات من مصدر خارجي أو متاجر أخرى.
3. نص الزر المتغير: وهذا النص يظهر على المنتجات المتغيرة أو المنتجات متعددة الأنواع مثل الملابس التي تحتوي على أنواع مختلفة من الألوان والمقاسات وغيرها من المتغيرات.
4. نص زر حجز المنتج: ويظهر هذا النص على المنتجات التي تكون متاحة في المتجر بنظام الحجز، وتحدثنا عن طريقة إنشاء هذا النوع في مقالة إنشاء كتالوج المنتجات داخل ووكومرس.
5. نص الزر المجمّع: ويظهر هذا النص على المنتجات المجمّعة التي يتم شرائها معاً.

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

أيضا تبويب (أيقونة الزر) والذي يوفر لك مجموعة من الأيقونات التي يمكنك الاختيار من بينها ليتم عرضها إلى جوار النص الخاص بزر أضف إلى السلة:

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

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

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

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

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

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

لكن من الأفضل أن تقوم بإنشاء تصميم ومظهر للزر مميّز تمامًا ومعبرًا عنك.

إضافة Custom Add to Cart Button for WooCommerce

كذلك يمكنك الحصول على إضافة Custom Add to Cart Button for WooCommerce من خلال متجر إضافات ووكومرس الرسمي، وسعرها 29$ تقريباً، وهي متوافقة مع ووكومرس، وتوفر لك الكثير من خيارات التخصيص، ومن أهم الخيارات التي توفرها ما يلي:

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

خاتمة

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

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