M
N
U

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

🏠 » المدونة » تخصيص زر (الإضافة إلى عربة التسوق) في WooCommerce
تخصيص زر (الإضافة إلى عربة التسوق) في WooCommerce

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

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


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

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

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

1. تغيير نص الزر

أول خطوة في تخصيص زر "الإضافة إلى عربة التسوق" هي تغيير النص الافتراضي. يمكن القيام بذلك عبر إضافة كود PHP إلى ملف الوظائف (functions.php) في قالب الووردبريس الخاص بك:

php

function custom_add_to_cart_text() {
return __('أضف إلى السلة', 'woocommerce');
}
add_filter('woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text'); // للأزرار الفردية
add_filter('woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text'); // لأزرار الأرشيف
```

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

2. تغيير ألوان الزر

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

css

.single_add_to_cart_button {
background-color: #FF6347; /* تغيير لون الخلفية */
color: #FFFFFF; /* تغيير لون النص */
border: 1px solid #FF4500; /* تغيير لون الحدود */
}

.single_add_to_cart_button:hover {
background-color: #FF4500; /* لون الخلفية عند التحويم */
color: #FFFFFF; /* لون النص عند التحويم */
}

يمكنك تعديل الألوان لتناسب الهوية البصرية الخاصة بعلامتك التجارية.

3. إضافة تأثيرات CSS

يمكنك تحسين تجربة المستخدم عن طريق إضافة تأثيرات CSS للزر، مثل تأثير الظل أو تغيير الحجم عند التحويم:

css

.single_add_to_cart_button {
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.single_add_to_cart_button:hover {
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

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

4. إضافة وظائف جافاسكريبت مخصصة

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

javascript

jQuery(document).ready(function($) {
$('.single_add_to_cart_button').on('click', function(event) {
event.preventDefault();

var button = $(this);
button.addClass('loading');

$.ajax({
type: 'POST',
url: wc_add_to_cart_params.ajax_url,
data: {
action: 'woocommerce_add_to_cart',
product_id: button.val(),
},
success: function(response) {
if(response.error) {
alert('حدث خطأ، يرجى المحاولة مرة أخرى.');
} else {
alert('تم إضافة المنتج إلى السلة بنجاح!');
// تحديث عناصر السلة هنا إذا لزم الأمر
}
button.removeClass('loading');
}
});
});
});
```

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

5. تخصيص الزر بناءً على نوع المنتج

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

php

function custom_product_add_to_cart_text($text, $product) {
if ($product->is_featured()) {
return __('اشتري الآن', 'woocommerce');
}
return $text;
}
add_filter('woocommerce_product_add_to_cart_text', 'custom_product_add_to_cart_text', 10, 2);
```

هذا الكود يقوم بتغيير نص الزر إلى "اشتري الآن" للمنتجات المميزة فقط.

 

 

الخاتمة

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

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

chevron-down