كيفية تفعيل واستخدام إضافة Sale Badges and Product Labels لعرض شارات المنتجات

القسم الثاني:  Badges

• يُعد قسم Badges هو القسم الأساسي في الإضافة، ومن خلاله يتم إنشاء الشارات الخاصة بالمنتجات والتحكم في محتواها ومظهرها وسلوك عرضها.

إضافة شارة جديدة (Add New)

عند الضغط على Add New يمكن إنشاء شارة جديدة، وتشمل الإعدادات التالية:

• : Nameاسم الشارة للتمييز داخل لوحة التحكم.
• : Badgeمحتوى الشارة الذي يظهر على المنتج.
• : Statusتفعيل أو تعطيل الشارة.

CSS Labels

يُستخدم هذا القسم لتخصيص الشارات النصية من حيث المحتوى والتصميم.

• : Labelالنص الظاهر داخل الشارة مثل: Sale
• : Placeholdersمتغيرات ديناميكية لعرض بيانات تلقائية مثل
  {price} {regular_price} {sale_price} {saved_percent} {saved_price} {sale_ends} {qty} {currency} {sku}
  مثال:
  Sale {saved_percent} ← تظهر للمستخدم: Sale 20%
• : Translateترجمة نص الشارة.
• : Percentage Discount Amountعرض الخصم كنسبة مئوية.
• : Text Colorتحديد لون النص.

Label Styles

إعدادات تنسيق وتصميم الشارة:

• : Label Colorلون خلفية الشارة.

:Archive Page Styles
التحكم في مظهر الشارة داخل صفحات الأرشيف (حجم الخط، ارتفاع السطر، سماكة الخط، العرض، الارتفاع).

:Product Page Styles
التحكم في مظهر الشارة داخل صفحة المنتج (حجم الخط، ارتفاع السطر، سماكة الخط، العرض، الارتفاع).

Border Radius

التحكم في استدارة زوايا الشارة (أعلى يسار، أعلى يمين، أسفل يسار، أسفل يمين).

Extra Styles

إعدادات متقدمة لتنسيق الشارة:

• z-index:أولوية ظهور الشارة.
• Opacity:درجة الشفافية.
• Rotation:تدوير الشارة.
• Reverse Text:عكس اتجاه النص أفقيًا أو رأسيًا.

CSS Label Position

تحديد موضع ظهور الشارة:

• : On Imageعرض الشارة فوق صورة المنتج.
• : Label Positionتحديد الاتجاه (أعلى، أسفل، يمين، يسار).
• :Label Position (Pixel) تحديد الموضع بدقة باستخدام البكسل.
• :Shadow / Shadow Color إضافة ظل وتحديد لونه.

القسم الثالث: الإعدادات العامة (General)

يتضمن هذا القسم الإعدادات العامة الخاصة بسلوك الشارات داخل المتجر.

• Hide WooCommerce On Sale Badges :
  إخفاء شارة الخصم الافتراضية الخاصة بووكومرس.
• Negative Sign :
  إضافة علامة السالب قبل نسبة الخصم.
• Preload Dynamic Styles on Archive Pages :
  تحميل التنسيقات الديناميكية مسبقًا في صفحات الأرشيف، وهو خيار مفيد عند استخدام التحميل اللانهائي أو طلبات AJAX.

مواضع الشارات في صفحات الأرشيف.

• Badge and Countdown Timer On Image Position On Archive Page :
  عرض الشارة فوق صورة المنتج في صفحات الأرشيف.
• Badge and Countdown Timer Out Of Image Position On Archive Page :
  عرض الشارة بعد عنوان المنتج في صفحات الأرشيف.
• Archive Loop Custom Hooks :
  تحديد موضع مخصص للشارة باستخدام Hooks.

مواضع الشارات في صفحة المنتج

• Badge and Countdown Timer On Image Position On Product Page :
  عرض الشارة قبل صور المنتج.
• Badge and Countdown Timer Out of Image Position On Product Page :
  عرض الشارة بعد عنوان المنتج.
• Single Product Custom Hooks :
  تحديد موضع مخصص للشارة باستخدام Hooks.

القسم الرابع: إعدادات صفحة المنتج (Product Page)

إعدادات خاصة بعرض الشارات داخل صفحة المنتج.

• Show Badge on Product Page :
  تفعيل أو تعطيل عرض الشارة في صفحة المنتج.
• Product Image Container CSS Selector :
  تحديد CSS Selector الخاص بحاوية صور المنتج، لضمان ظهور الشارة في الموضع الصحيح داخل صفحة المنتج.