WooCommerce: اقتطاع الوصف المختصر مع تبديل “قراءة المزيد”

يمكنك تطبيق مقتطف jQuery البسيط هذا على أي جزء من محتوى WooCommerce.

في هذا المثال ، سنرى كيفية اقتطاع الوصف المختصر لمنتج واحد من WooCommerce ووضع رابط “قراءة المزيد” للكشف عن المحتوى المخفي … ومع ذلك يمكنك أيضًا تطبيق هذا على الوصف الطويل ، وعلامة تبويب المنتج المخصصة ، ومعرض المنتج ، وكل ما يمكن اقتطاعه.

يتمتع!

بعد تطبيق الكود أدناه ، أصبح “الوصف المختصر” … يقتصر الآن على 40 حرفًا ويظهر رابط “قراءة المزيد” الجديد تمامًا. عند النقر ، يتم الكشف عن النص المخفي.

مقتطف PHP: اقتطاع وصف قصير برمجيًا واستبداله بـ “قراءة المزيد” Link @ WooCommerce Single Product Page

ملاحظة: المتغير ” show_char ” يحدد عدد الأحرف المرئية في الوصف المختصر. في المثال أدناه أستخدم 40.

/**
 * @snippet       Truncate Short Description @ WooCommerce Single
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.9
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
 
add_action( 'woocommerce_after_single_product', 'bbloomer_woocommerce_short_description_truncate_read_more' );
 
function bbloomer_woocommerce_short_description_truncate_read_more() { 
   wc_enqueue_js('
      var show_char = 40;
      var ellipses = "... ";
      var content = $(".woocommerce-product-details__short-description").html();
      if (content.length > show_char) {
         var a = content.substr(0, show_char);
         var b = content.substr(show_char - content.length);
         var html = a + "<span class=\'truncated\'>" + ellipses + "<a class=\'read-more\'>Read more</a></span><span class=\'truncated\' style=\'display:none\'>" + b + "</span>";
         $(".woocommerce-product-details__short-description").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".woocommerce-product-details__short-description .truncated").toggle();
      });
   ');
}

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

WooCommerce: إظهار الوصف المختصر المخصص عند إفراغه

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

WooCommerce: إزالة علامات تبويب المنتج ، وإظهار الوصف الطويل

WooCommerce: عرض معرض المنتجات عموديًا (صفحة منتج واحدة)

WooCommerce: نموذج الاستفسار عن المنتج @ صفحة منتج واحد (CF7)

WooCommerce: أضف ملصق “كمية” أمام زر إضافة إلى عربة التسوق

WooCommerce: أضف رمزًا إلى أزرار إضافة إلى عربة التسوق

WooCommerce: أعد تسمية زر “إضافة إلى عربة التسوق” إذا كان المنتج بالفعل @ سلة التسوق

WooCommerce: إعادة تسمية وصف المنتج Tab Label @ Single Product Page

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