WooCommerce و Divi: كيفية تجاوز CSS المهم

أنا معجب كبير بالسمات الأنيقة ، لكن الكثير من أنماط CSS (بشكل رئيسي في Divi) تحتوي على “! مهم” لتجاوز أنماط WooCommerce عند استخدام الاثنين في مجموعة. الآن ، المشكلة الكبرى هي أننا لا نستطيع تجاوز! المهم بآخر! المهم. ديفي سيفوز. ولكن بغض النظر عما إذا تم تطوير Divi بطريقة جيدة أم لا ، فهناك شيء يمكننا القيام به. (ملاحظة: استخدام! مهم أمر مروع في CSS. استخدمه على مسؤوليتك الخاصة)

مثال: رسالة الإضافة إلى عربة التسوق في Divi / WooCommerce

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

.woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce input.button.alt, .woocommerce-page input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-page #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button, <strong>.woocommerce-message</strong>, .woocommerce-error, .woocommerce-info {
background: #71b1d6 !important;
}

CSS هو:

woocommerce-divi-css-important-override

WooCommerce + Divi = مشاكل CSS!

بالتأكيد ، الأمر بسيط جدًا إذن! دعونا نتجاوز Divi! CSS المهم …

في ورقة أنماط قالب الطفل أو CSS المخصص ، قد تعتقد أن ما يلي كافٍ:

.woocommerce-message {
background: WHITE !important;
}

… لكن لا ، لا يعمل. لسوء الحظ ، المهم لا “يتفوق”! مهم لأن موضوع الوالدين سيفوز في هذه الحالة.

دعونا نغير الملفات الأساسية أو نتجاوز! المهم …

الحل المثالي طويل الأجل هو: يجب على Divi تغيير كيفية تطبيق CSS الخاص بهم. ولكن في غضون ذلك ، دعنا نتجاوز الأمر المهم بخدعة صغيرة في CSS.

// THIS WON'T WORK
 
.woocommerce-message {
background: WHITE !important;
}
 
// BUT THIS WILL WORK!
 
.woocommerce .woocommerce-message {
background: WHITE !important;
}

كما ترى ، يمكنك تجاوز! مهم بآخر! مهم ، ولكن فقط إذا أضفت عنصر CSS أكثر تحديدًا. في مثالنا ، استخدمنا “.woocommerce” أمام “.woocommerce-message”.

هذا سيفي بالغرض!

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

وورد بريس: كيفية إضافة CSS إلى عنوان URL لصفحة معينة

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

WooCommerce: تعطيل WooCommerce CSS الافتراضي

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

WooCommerce: صنف كـ “Body” Class @ Single Product Page

WooCommerce: صورة مميزة بعرض كامل @ صفحة منتج واحدة

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 في حالة حدوث خطأ!