كيفية عرض "You Save x٪" أدناه أسعار البيع للمنتجات البسيطة والمتغيرة في WooCommerce

نعلم جميعًا كيف تجذب الخصومات العملاء وتزيد المبيعات. لكن إظهار أنك تبيع عنصرًا بسعر أقل ليس كافيًا هذه الأيام ، حيث يقدم جميع تجار التجزئة ومواقع التجارة الإلكترونية خصومات في نفس الوقت. عندما يتم عرض الأسعار القديمة والجديدة فقط ، يُترك العميل لإجراء العمليات الحسابية لحساب المبلغ الذي يدخره بالفعل. أفضل طريقة للتعامل مع هذا هو عرض النسبة المئوية للمبلغ الذي يوفره العميل عند قيامه بعملية الشراء. يمنحهم هذا فكرة أفضل وطريقة أسهل لتقرير ما إذا كانوا سيقومون بعملية الشراء أم لا. دعونا نرى كيف يمكنك عرض "You Save x٪" بجوار أسعار البيع لكل من المنتجات البسيطة والمتغيرة في WooCommerce.

كيفية عرض وفر٪ أقل من أسعار البيع للمنتجات البسيطة

يعد عرض النسبة المئوية للمبلغ المدخر أمرًا سهلاً بالنسبة للمنتجات البسيطة بمجرد معرفة السعر العادي وسعر البيع. في الحالات العادية ، يتم عرض هذه الأسعار لمنتج بسيط على النحو التالي:

ستؤدي إضافة الكود أدناه إلى ملف function.php لموضوع طفلك إلى عرض "You Save x٪" أدنى من سعر المنتج البسيط ، بحيث يحصل المستخدم على الفور على فكرة عن مدى جودة الصفقة أو سوءها.

 الوظيفة ts_you_save () {
  
  منتج $ عالمي ؛
  
   if ($ product-> is_type ('simple') || $ product-> is_type ('external') || $ product-> is_type ('grouped')) {
      
     	$ normal_price = get_post_meta ($ product-> get_id ()، '_ النظام_السعر'، صحيح)؛ 
        $ sale_price = get_post_meta ($ product-> get_id ()، '_sale_price'، true)؛
     
     	إذا (! فارغ ($ sale_price)) {
  
              المبلغ_الموفر بالدولار = السعر العادي بالدولار - السعر_المخفَّض بالدولار ؛
              $ currency_symbol = get_woocommerce_currency_symbol () ؛

              النسبة المئوية بالدولار = الجولة (((السعر_المنتظم بالدولار - السعر_المخفَّض بالدولار) / السعر العادي بالدولار) * 100) ؛
              ؟>
              <p> <b> أنت تحفظ: <؟ php echo number_format ($ percentage، 0، ''، ''). '٪'؛ ؟> </b> </p>				
              <؟ php		
        }
   }
}

add_action ('woocommerce_single_product_summary'، 'ts_you_save'، 11) ؛

في مقتطف الشفرة هذا ، أضفنا دالة ts_you_save () إلى خطاف WooCommerce المدمج woocommerce_single_product_summary ، والذي يشير إلى المنطقة الموجودة أسفل عنوان المنتج. تحدد الوظيفة ts_you_save () نوع المنتج وتحسب النسبة المئوية للمبلغ المحفوظ إذا كان المنتج معروضًا للبيع. بإضافة بعض CSS ، يمكنك طباعة هذا بالطريقة التي تريد:

إذا كنت ترغب في عرض المبلغ المحفوظ جنبًا إلى جنب مع النسبة المئوية ، يمكنك تعديل مقتطف الشفرة نفسه قليلاً بالطريقة التالية:

 الوظيفة ts_you_save () {
  
  منتج $ عالمي ؛
  
   if ($ product-> is_type ('simple') || $ product-> is_type ('external') || $ product-> is_type ('grouped')) {
      
     	$ normal_price = get_post_meta ($ product-> get_id ()، '_ النظام_السعر'، صحيح)؛ 
        $ sale_price = get_post_meta ($ product-> get_id ()، '_sale_price'، true)؛
     
     	إذا (! فارغ ($ sale_price)) {
  
              المبلغ_الموفر بالدولار = السعر العادي بالدولار - السعر_المخفَّض بالدولار ؛
              $ currency_symbol = get_woocommerce_currency_symbol () ؛

              النسبة المئوية بالدولار = الجولة (((السعر_المنتظم بالدولار - السعر_المخفَّض بالدولار) / السعر العادي بالدولار) * 100) ؛
              ؟>
              <p> <b> أنت تحفظ: <؟ php echo number_format ($ amount_saved، 2، '.'، ''). "(". number_format ($ percentage، 0، ''، ''). "٪)" ؛ ؟> </b> </p>						
              <؟ php		
        }
   }
}

add_action ('woocommerce_single_product_summary'، 'ts_you_save'، 11) ؛

دالة number_format هي دالة PHP مدمجة تقبل 4 وسيطات:

1. الرقم أو في حالتنا ، المبلغ المحفوظ والنسبة المئوية على التوالي (استخدمنا الوظيفة مرتين).
2. عدد المنازل العشرية. لقد قمنا بتعيينه على 2 للمبلغ المحفوظ ، و 0 للنسبة المئوية لأننا لا نرغب في عرض أي قيم عشرية للنسبة المئوية.
3. الفاصل العشري الذي ترغب في استخدامه. لقد قمنا بتعيين هذا على نقطة (.) للمبلغ المحفوظ وقيمة فارغة للنسبة المئوية.
4. فاصل الألف. إذا تجاوز المبلغ المحفوظ 1000 ، يمكنك استخدام هذه الوسيطة. لقد وضعناها فارغة في الوقت الحاضر.

سيتم الآن عرض المبلغ المحفوظ وكذلك النسبة المئوية أسفل السعر:

كيفية عرض وفر٪ أقل من أسعار البيع للمنتجات المتغيرة

عندما يتعلق الأمر بالمنتجات المتغيرة ، يصبح هذا الأمر صعبًا لأن كل شكل للمنتج يمكن أن يكون له سعر مختلف. على سبيل المثال ، قد يكون سعر التيشيرت أعلى بالنسبة للحجم الأكبر بينما قد يكون السعر أقل لنفس التيشيرت بحجم أصغر. في مثل هذه الحالات ، تعرض WooCommerce نطاق سعر البيع أسفل عنوان المنتج ، بينما يتم عرض الأسعار العادية وأسعار البيع لكل شكل من أشكال المنتج أعلى الزر Add to Cart عند تحديد الاختلاف. وقد تم توضيح ذلك من خلال الصور أدناه:

في هذه الحالة ، سنقوم بطباعة نص "You Save" جنبًا إلى جنب مع النسبة المئوية المحفوظة أسفل السعر المعروض للصيغة المعينة. ستحتاج إلى إضافة مقتطفات التعليمات البرمجية إلى كل من ملفات function.php و footer.php لموضوع طفلك .

يحتوي مقتطف الشفرة التالي الذي ستضيفه في ملف footer.php على دالة يتم تشغيلها عند تغيير التباين. في حالتنا ، يتم تشغيل هذا عند تحديد تباين الحجم أو تغييره باستخدام قائمة الحجم المنسدلة. تلتقط هذه الوظيفة معرف التباين المعين وترسله إلى function.php عبر استدعاء أجاكس.

 <script>
jQuery (مستند) .ready (الوظيفة ($) {
             
  $ ('input.variation_id'). change (function () {
    	
    إذا (''! = $ ('input.variation_id'). val ()) {
                     
        	        var_id = $ ('input.variation_id'). val () ؛ // معرّف الاختلاف المحدد
      .ajax $ ({
        url: "https: // <your_woocommerce_site_url> /wp-admin/admin-ajax.php" ،
        		        البيانات: {'action': 'ts_calc_percentage_saved'، 'vari_id': var_id}،
        		        نجاح: وظيفة (بيانات) {

              إذا (البيانات> 0)
          {
            $ (".woocommerce-variation-price") .append ("<p> أنت تحفظ:" + بيانات + "٪ </p>")؛
          }
        		         } ،
        		        خطأ: الوظيفة (errorThrown) {
           			        console.log (errorThrown) ،
        		         }
    		        }) ؛                       
          }
   }) ؛
}) ؛
</script>

تحتاج إلى استبدال <your_woocommerce_site_url> بعنوان URL الأساسي لموقع WooCommerce الخاص بك.

يحتوي مقتطف الشفرة التالي الذي ستضيفه في ملف function.php على دالة ts_calc_percentage_saved التي تجلب السعر العادي وسعر البيع للمنتج بناءً على معرّف التباين ، وتحسب النسبة المئوية وتعيد نفس الشيء إلى وظيفة ajax في التذييل. php.

 // هذه هي الطريقة التي تربط بها وظيفة تسمى من قبل ajax ، في WordPress
add_action ("wp_ajax_ts_calc_percentage_saved"، "ts_calc_percentage_saved") ؛

// يتم استدعاء الوظيفة أدناه عبر برنامج نصي أجاكس في footer.php
الوظيفة ts_calc_percentage_saved () {
          // يحتوي $ _REQUEST على جميع البيانات المرسلة عبر ajax
   		إذا (مجموعة ($ _ الطلب)) {
       		        النسبة المئوية بالدولار = 0 ؛
     			variation_id = sanitize_text_field ($ _ REQUEST ['vari_id']) ؛
                        $ variable_product = wc_get_product ($ variation_id) ؛
                        Regular_price = سعر_المتغير $ $> get_norm_price ()؛
                        السعر sale_price $ = متغير_المنتج $ $> get_sale_price ()؛
     
       			إذا (! فارغ ($ sale_price)) {
  
                             المبلغ_الموفر بالدولار = السعر العادي بالدولار - السعر_المخفَّض بالدولار ؛
                             $ currency_symbol = get_woocommerce_currency_symbol () ؛

                             النسبة المئوية بالدولار = الجولة (((السعر_المنتظم بالدولار - السعر_المخفَّض بالدولار) / السعر العادي بالدولار) * 100) ؛
     			}
     			يموت (نسبة مئوية) ؛
   		}
}

وظيفة sanitize_text_field () هي وظيفة WordPress تساعد في تعقيم المدخلات التي نتلقاها من جانب العميل.

وبالتالي ، سترى الآن "أنت توفر" ، جنبًا إلى جنب مع النسبة المئوية للمبلغ المدخر ، أقل من سعر التباين.

يمكنك نمط هذا كما تريد ، داخل وظيفة ajax نفسها ، عن طريق إضافة HTML و CSS داخل وظيفة الإلحاق في هذا السطر:

$ (“.woocommerce-variation-price”). append (“<p> يمكنك حفظ:“ + data + ”٪ </p>”)؛

عرض "حفظ٪" أسفل عنوان المنتج بدلاً من فوق الزر "إضافة إلى عربة التسوق" للمنتجات المتغيرة

إذا كنت ترغب في ذلك ، يمكنك عرض نص You Save جنبًا إلى جنب مع النسبة المئوية المحفوظة أسفل عنوان المنتج بدلاً من أعلى الزر "إضافة إلى عربة التسوق" عن طريق إضافة المزيد من مقتطفات التعليمات البرمجية إلى تلك المذكورة أعلاه.

يجب إضافة هذا الجزء من الكود إلى ملف function.php الخاص بالقالب الفرعي الخاص بك ، بالإضافة إلى مقتطفات التعليمات البرمجية المذكورة أعلاه (في ملفي footer.php و function.php).

 // الكود أدناه هو تغيير السعر

الوظيفة ts_shuffle_variable_product_elements () {
    إذا (is_product ()) {
        وظيفة $ العالمية ؛
        $ product = wc_get_product ($ post-> ID) ؛
        إذا ($ product-> is_type ('متغير')) {
            remove_action ('woocommerce_single_variation'، 'woocommerce_single_variation'، 10) ؛
            add_action ('woocommerce_before_variations_form'، 'woocommerce_single_variation'، 20) ؛

            remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_title'، 5) ؛
            add_action ('woocommerce_before_variations_form'، 'woocommerce_template_single_title'، 10) ؛

            remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_excerpt'، 20) ؛
            add_action ('woocommerce_before_variations_form'، 'woocommerce_template_single_excerpt'، 30) ؛
        }
    }
}
add_action ('woocommerce_before_single_product'، 'ts_shuffle_variable_product_elements') ؛

ما يفعله هذا الرمز بشكل أساسي هو إزالة العناصر (بما في ذلك العنوان) وإعادة ترتيبها بالطريقة التي تريدها. والنتيجة هي حذف النطاق السعري وعرض سعر الاختلاف عند تحديد أحد الأشكال ، جنبًا إلى جنب مع نص "الحفظ" الموجود أسفله ، كما هو موضح: