سألني أحد محبي Business Bloomer سؤالًا مثيرًا للاهتمام هذا الأسبوع: كيفية تطبيق CSS على صفحة منتج واحد بناءً على فئة المنتج؟ حسنًا ، الإجابة بسيطة جدًا: إذا كنا قادرين على إضافة اسم الفئة إلى “نص” HTML ، فيمكن بعد ذلك استهدافه في CSS المخصص الخاص بك. لذا ، دعونا نرى كيف يتم ذلك!
WooCommerce: أضف اسم فئة المنتج إلى فئات Body CSS
لحسن الحظ ، كان هناك بالفعل بعض الأدبيات المتاحة على GitHub ، وعلى الرغم من أن عمرها 5 سنوات ، فإنها لا تزال تعمل مثل السحر. لذلك، شكرا جزيلا مايكل كراب 🙂
/**
* @snippet Product Category > Body CSS Class @ Single Product
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.9
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'body_class', 'bbloomer_wc_product_cats_css_body_class' );
function bbloomer_wc_product_cats_css_body_class( $classes ){
if ( is_singular( 'product' ) ) {
$current_product = wc_get_product();
$custom_terms = get_the_terms( $current_product->get_id(), 'product_cat' );
if ( $custom_terms ) {
foreach ( $custom_terms as $custom_term ) {
$classes[] = 'product_cat_' . $custom_term->slug;
}
}
}
return $classes;
}WooCommerce: صورة مميزة بعرض كامل @ صفحة منتج واحدة
WooCommerce: كيفية تقصير عناوين المنتج
WooCommerce: عرض معرض المنتجات عموديًا (صفحة منتج واحدة)
WooCommerce: أضف CSS لطلب رسائل البريد الإلكتروني
WooCommerce: تعطيل نشر Jetpack للمنتجات
WooCommerce: قم بتغيير كمية إضافة إلى عربة التسوق في قائمة اختيار المنسدلة
WooCommerce: تحرير عنوان URL لصورة المنتج الخارجية
WooCommerce: أضف حقلًا مخصصًا إلى تنويعات المنتج
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 في حالة حدوث خطأ!
