تدور التجارة الإلكترونية حول تجربة المستخدم ، وتسهيل إضافة الأشخاص إلى سلة التسوق والدفع بسلاسة. يعد تقليل عدد حقول الخروج فكرة رائعة على سبيل المثال – بالإضافة إلى توصيل هدفك رقم 1 بيانياً: “الرجاء الإضافة إلى عربة التسوق الآن!”.
لذا ، كيف يمكنك إضافة رمز (أو رمز HTML) إلى أزرار الإضافة إلى سلة التسوق في WooCommerce؟ يمكن القيام بذلك بطريقتين – عبر CSS إذا كنت تريد إظهار أيقونات Fontawesome أو عبر PHP إذا كنت تفضل استخدام رمز HTML بسيط unicode.
دعونا نلقي نظرة على كلتا الطريقتين!
يمكنك العثور على قائمة رموز HTML هنا: https://www.w3schools.com/html/html_symbols.asp . في الأساس ، باستخدام بعض كيانات HTML ، يمكنك طباعة رمز على الشاشة مثل -> € <- (لمعلوماتك ، لقد استخدمت للتو “&” و “اليورو” و “؛” بدون مسافات لطباعة الرمز).
في هذا المثال ، أريد إظهار رمز بسيط يسمى ” raquo ” (لا تنس إضافة “&” والنهائي “؛” لإنشاء الرمز فعليًا).
/**
* @snippet Add HTML Symbol to Add to Cart Button - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5.
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_product_single_add_to_cart_text', 'bbloomer_add_symbol_add_cart_button_single' );
function bbloomer_add_symbol_add_cart_button_single( $button ) {
$button_new = '» ' . $button;
return $button_new;
}النتيجة النهائية:
أضف رمز HTML إلى أزرار إضافة إلى عربة التسوق
إذا كنت تريد مجموعة أفضل من الرموز ، فإن موضوع Storefront يستخدم بالفعل مكتبة من الرموز من FontAwesome لطباعة أيقونات خاصة على الشاشة. إذا كان المظهر الخاص بك لا يدعم FontAwesome ، فيمكنك ببساطة إضافة برنامج نصي في العنوان لتحميل الخط الخاص.
في هذا المثال ، أرغب في إضافة رمز “Shopping Cart +” المقدم من Fontawesome ، والذي يأتي مصحوبًا بالرمز “\ f217”.
button.single_add_to_cart_button:before {
display: inline-block;
font-family: FontAwesome;
float: left;
content: "\f217";
font-weight: 300;
margin-right: 1em;
}ها هي النتيجة النهائية:
أضف أيقونة FontAwesome إلى أزرار الإضافة إلى عربة التسوق
WooCommerce: إخفاء السعر وإضافته إلى عربة التسوق للمستخدمين الذين قاموا بتسجيل الخروج
WooCommerce: إزالة / تحرير رسالة “تمت الإضافة إلى عربة التسوق”
WooCommerce: تحرير إضافة إلى عربة التسوق الحد الأدنى والحد الأقصى والخطوة الكمية
WooCommerce: أعد تسمية زر “إضافة إلى عربة التسوق” إذا كان المنتج بالفعل @ سلة التسوق
WooCommerce: أضف إلى سلة التسوق أزرار زائد وناقص الكمية
WooCommerce: كيفية تقصير عناوين المنتج
WooCommerce: أضف منتجًا إلى عربة التسوق عند الزيارة برمجيًا
موضوع واجهة المتجر: كيفية تخصيص تخطيط الصفحة الرئيسية
WooCommerce: أضف حقلًا مخصصًا إلى تنويعات المنتج
WooCommerce + Storefront: إخفاء عنوان “الصفحة الرئيسية” @ الصفحة الرئيسية
يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”
يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.
إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂
تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!
