WooCommerce: تطبيق CSS على منتج واحد فقط

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

1. ادخل إلى موقعك على الويب وانتقل إلى الصفحة أو صفحة المنتج التي تريد “CSS-ify”

إذا كنت تستخدم Google Chrome ، فانقر بزر الماوس الأيمن فوق الماوس وانقر فوق “فحص”. إذا كنت تستخدم Firefox ، فاستخدم Firebug. في كلتا الحالتين، يمكنك ان ترى رمز الصفحة في مصدر HTML وتحديد الطبقة ID PAGE من الجسم بطاقة HTML:

woocommerce-css-target-product-single

“فحص العنصر” في Google Chrome

في هذه الحالة ، وجدنا معرّفًا فريدًا لمنتج يسمى ” postid-745 “. نفس الشيء ينطبق على أي صفحة WooCommerce: بالنظر إلى شفرة المصدر ، يجب أن تكون قادرًا على العثور على معرف فريد مثل ” page-id-9 “.

2. استخدم المعرف الفريد في CSS الخاص بك

على سبيل المثال ، إذا كنت تريد إزالة الصورة من إحدى صفحات منتجك وكان وصفها يغطي الصفحة الكاملة ، فما عليك سوى استخدام معرفها كبادئة:

/**
 * @snippet       Apply CSS changes to one WooCommerce page/product only
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 5.0
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
/* removes the image on product id = 53 */
.postid-53 div.images {
   display:none;
}
 
/* stretches the product description on full width */
.postid-53 div.summary {
   width: 98%;
   float: none;
}

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

WooCommerce: إصلاح خطأ فادح اتصل بوظيفة غير محددة wc_get_order ()

WooCommerce: is_single () لا يعمل [محلول]

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

WooCommerce: تعطيل نشر Jetpack للمنتجات

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

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 بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!