WooCommerce: Display٪ Discount @ Shop & Loop Pages

تُظهر WooCommerce الافتراضية شارة “البيع” إذا كان العنصر معروضًا للبيع – ولكن ماذا عن إظهار نسبة البيع الدقيقة أيضًا؟

لقد نفذت هذا لأحد عملائي المستقلين ، لذا ها هي الحل السهل!

إظهار نسبة الخصم في حلقة WooCommerce

مقتطف WooCommerce: عرض نسبة الخصم على @ Loop Pages – WooCommerce

/**
 * @snippet       Display Discount Percentage @ Loop Pages - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=21997
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_before_shop_loop_item_title', 'bbloomer_show_sale_percentage_loop', 25 );
  
function bbloomer_show_sale_percentage_loop() {
   global $product;
   if ( ! $product->is_on_sale() ) return;
   if ( $product->is_type( 'simple' ) ) {
      $max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
   } elseif ( $product->is_type( 'variable' ) ) {
      $max_percentage = 0;
      foreach ( $product->get_children() as $child_id ) {
         $variation = wc_get_product( $child_id );
         $price = $variation->get_regular_price();
         $sale = $variation->get_sale_price();
         if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
         if ( $percentage > $max_percentage ) {
            $max_percentage = $percentage;
         }
      }
   }
   if ( $max_percentage > 0 ) echo "<div class='sale-perc'>-" . round($max_percentage) . "%</div>"; 
}

وقليلا من CSS:

.sale-perc {
background-color: #D9534F;
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
color: #fff;
text-align: center;
border-radius: .25em;
}

“لا أكود – هل هناك مكون إضافي موثوق به؟”

نظرًا لأن العديد من القراء يرغبون في كتابة الكود ولكنهم لا يشعرون بالثقة بنسبة 100 ٪ به ، فقد قررت البحث عن مكون إضافي موثوق به يحقق نفس النتيجة (أو حتى أفضل).

في هذه الحالة ، أوصي باستخدام البرنامج المساعد YITH WooCommerce Badge Management . علاوة على عرض شارات نصية مخصصة (إصدار مجاني) ، يمكنك أيضًا إنشاء CSS وصورة وشارات متقدمة وتعيين شارات منتج لمنتجات و / أو فئات محددة واختيار موضع الشارة وغير ذلك الكثير.

ولكن في حالة رغبتك في الترميز ، استمر في القراءة 🙂

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

WooCommerce: تعطيل نطاق سعر المنتج المتغير $$$ – $$$

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

WooCommerce: المجموع الفرعي لسلة التسوق المقطوعة في حالة القسيمة @ السلة

WooCommerce: عرض المنتجات في نموذج طلب جدول

WooCommerce: عرض الأسعار كـ “Was $$$ – Now $$$ – Save $$$”

WooCommerce: تعيين / تجاوز سعر المنتج برمجيًا

WooCommerce: كيفية تقصير عناوين المنتج

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