WooCommerce: قم بتغيير رمز “إزالة هذا العنصر” @ Cart

لدي قائمة طويلة جدا للكتابة . من المحتمل أن يكون لدي محتوى كافٍ لمدة عامين آخرين 🙂

ومع ذلك ، في اليوم الآخر ، سألني طالب WooCommerce متميز عن بعض التعليقات حول CSS المخصص الخاص به – لذلك كان علي أن أعطيها الأولوية! كان الطلب هو: ما هي أسهل طريقة لتغيير الرمز / الزر الصغير في صفحة سلة التسوق التي لها وظيفة إزالة العناصر من العربة (نعم ، هذا الصليب الأبيض القبيح على دائرة حمراء)؟

كيفية تغيير رمز “إزالة هذا العنصر” في صفحة WooCommerce Cart

كيفية تغيير رمز “إزالة هذا العنصر” في صفحة WooCommerce Cart

– – – – – – – – – – – – – –

جدول المحتويات

قم بتغيير رمز “إزالة هذا العنصر” – WooCommerce الافتراضي

قم بتغيير رمز “إزالة هذا العنصر” – مظهر واجهة المتجر

قم بتغيير رمز “إزالة هذا العنصر” – سمات أخرى

– – – – – – – – – – – – – –

قم بتغيير رمز “إزالة هذا العنصر” – WooCommerce الافتراضي

في WooCommerce الافتراضي ، وباستخدام سمة لا تطبق أسلوبها الخاص على عربة التسوق (على سبيل المثال ، نسق 2017) ، فإن أيقونة “إزالة” هي … ليست أيقونة!

في الواقع ، إنه حرف “x” بسيط (حسب الحرف “x”) بحد 1 بكسل ونصف قطر حد 100٪ ، مما يجعله يبدو مثل “x” مع دائرة حوله:

الحرف “x” بحد 1 بكسل ونصف قطر حد 100٪ “لتزييف” رمز الإزالة @ WooCommerce Cart

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

/* Hide the "x" */
 
a.remove {
    text-indent: -9999px;
    border: 0;
}
 
/* Add a Fontawesome icon instead */
/* Learn More in the Following Paragraphs */
 
a.remove:before {
    font-family: FontAwesome;
    content: "\f1f8";
    float: left;
    text-indent: 0;
}

إذا كنت لا ترى الرمز ، فهذا يعني أن Fontawesome لم يتم تثبيته في موقع الويب الخاص بك حتى الآن. لتحقيق ذلك ، تحتاج إلى إضافة بعض التعليمات البرمجية إلى ملف header.php الخاص بقالبك: https://fontawesome.io/get-started

قم بتغيير رمز “إزالة هذا العنصر” – مظهر واجهة المتجر

قبل إعطائك الحل ، أود أن أعرض عليك سلسلة من لقطات الشاشة. بهذه الطريقة ، يمكنك معرفة كيفية تغيير رمز “Menu Cart” ، ورمز “Add to cart” (إن وجد) وجميع الرموز الأخرى التي تمت إضافتها بواسطة قالبك أو مكوناتك الإضافية!

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

1. دعنا “نفحص” رمز “إزالة هذا العنصر” عبر Google Chrome

أولاً ، نريد أن نفهم ما الذي يولد هذه الأيقونة بالفعل. هل هو HTML؟ ربما خدعة CSS بدلاً من ذلك؟

“افحص” رمز “إزالة هذا العنصر” لمعرفة ما الذي ينشئ الرمز

“افحص” رمز “إزالة هذا العنصر” لمعرفة ما الذي ينشئ الرمز

2. “إزالة هذا العنصر” عبارة عن ارتباط (“href”) مع بعض أنماط CSS ؛ لكن لا توجد علامة على الرمز / الصورة!

يسمح لنا “فحص” بدراسة HTML و CSS للعنصر الذي تم فحصه. ومع ذلك ، لا يبدو أن هناك شيئًا يخبرنا من أين أتت “الدائرة الحمراء للصليب الأبيض”.

رابط “إزالة هذا العنصر”: HTML & CSS

رابط “إزالة هذا العنصر”: HTML & CSS

3. انتظر – ألق نظرة على ذلك “:: before” داخل “a href”. مرحبًا بك في عالم العناصر الزائفة لـ CSS 🙂

هذا ما يحدث عندما أبرز “:: before” في نافذة HTML بدلاً من ذلك. ألق نظرة على CSS:

CSS :: من قبل

CSS :: من قبل

4. “محتوى” CSS ومجموعة الخطوط

حسنًا ، في بضع كلمات ، يتم إنشاء الرمز بواسطة استدعاء “محتوى” CSS:

content: “\f057”;

وبعد ذلك ، يأخذ العنصر نفسه font-family = “FontAwesome”:

font: normal normal normal 1em/1 FontAwesome;

هذان الخطان مسؤولان عن توليد هذا الصليب الأبيض القبيح … ماذا لو أردنا استبدال هذا الرمز بـ “سلة المهملات”؟ أو أي شيء آخر؟

5. FontAwesome

لذلك ، في مكان ما حول WooCommerce HTML (أو موضوعي ، Storefront) ، يتم استدعاء FontAwesome هذا. هذا يعني أنه يمكننا إعادة استخدام هذا ومعرفة ما إذا كان يوفر المزيد من الرموز!

لذلك ، دعنا ننتقل إلى https://fontawesome.io/icons/ ونبحث عن رموز “إزالة”:

البحث عن رموز “إزالة” أخرى على موقع FontAwesome

البحث عن رموز “إزالة” أخرى على موقع FontAwesome الإلكتروني

دعنا نختار واحدًا ، على سبيل المثال رمز “سلة المهملات”:

مواصفات رمز FontAwesome “المهملات”

مواصفات رمز FontAwesome “المهملات”

واكتب “Unicode”: f1f8

6. CSS مخصص: تجاوز الرمز الأصلي … بسطر واحد من التعليمات البرمجية!

الآن بعد أن اخترت الرمز وتعرف على Unicode الخاص به ، انتقل إلى CSS المخصص وأضف هذا السطر الواحد:

/* Change WooCommerce "Remove this item" Icon */
/* Original call was --> content: "\f057"; */
/* Just replacing the Unicode...: */
 
a.remove:before {
     content: "\f1f8";
}

وسيمنحك سطر واحد من كود CSS هذه النتيجة النهائية 🙂

أصبح رمز “إزالة هذا العنصر” الآن سلة مهملات

أصبح رمز “إزالة هذا العنصر” الآن سلة مهملات

7. CSS مخصص: قم أيضًا بتغيير لون الرمز … بخط آخر!

/* Change WooCommerce "Remove this item" Icon Color */
/* Original call was --> color: #e2401c; */
/* Just replacing the color code...: */
 
a.remove:before {
     color: #222222;
}

قم بتغيير رمز “إزالة هذا العنصر” – سمات أخرى

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

المنشورات ذات الصلة:

WooCommerce: أضف منتجًا إلى عربة التسوق عند الزيارة برمجيًا

WooCommerce: عرض إجمالي الخصم / التوفير في سلة التسوق والدفع

WooCommerce: أضف CSS لطلب رسائل البريد الإلكتروني

منطق WooCommerce الشرطي – العلامات والأمثلة و PHP

WooCommerce: أضف محتوى إلى صفحة سلة التسوق الفارغة

WooCommerce: قم بتغيير كمية إضافة إلى عربة التسوق في قائمة اختيار المنسدلة

WooCommerce: التسعير الديناميكي المجمع بدون مكون إضافي

WooCommerce: جدول عربة التسوق “منقسم” (عناوين A> Z)

WooCommerce: عرض SKU @ Cart ، الخروج ، الطلب ورسائل البريد الإلكتروني

WooCommerce: عرض صفحة مخزون المنتج في سلة التسوق

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

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