دو تکه کد کاربری برای توضیحات محصول ووکامرس

شاید شما هم قصد داشته باشید که امکانات خاصی را به سایت خود اضافه کنید، اما همانطور که می دانید هر چه کمتر از افزونه ها بابت این توسعه ها و شخصی سازی ها کمک بگیرید، بهتر است. در نتیجه می توانید از تکه کد های مربوط به سفارشی سازی سایت کمک بگیرید. این مقاله یکی از ده ها مقاله کاربردی ووکامرس در زمینه توسعه سایت می باشد. در ادامه دو تکه کد کاربردی به شما معرفی می‌کنیم که بتوانید به راحتی توضیحات محصول را در صفحه فروشگاه خود نمایش دهید و به کمک تکه کد دیگر،  این قابلیت برای شما فراهم شود که برای توضیحات کوتاه محصول که کمی طولانی تر هستند، دکمه «بیشتر بخوانید» نمایش دهید.

نمایش توضیحات محصول در برگه فروشگاه ووکامرس

شاید بخواهید قسمتی از توضیحات محصول خود را در برگه فروشگاه نمایش دهید تا بدین وسیله توجه کاربران به محصولات موجود در سایتتان، جلب کنید. برای انجام اینکار فقط کافی است از کد زیر استفاده کنید.

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerceir_ins_woocommerce_product_excerpt', 35, 2 );
 
function woocommerceir_ins_woocommerce_product_excerpt() {
     the_excerpt();
}

بعد از استفاده از تکه کد فوق تغییرات در صفحه فروشگاه بدین شکل خواهد بود:

نمایش «بیشتر بخوانید» برای توضیحات کوتاه در برگه محصول ووکامرس

اگر توضیحات کوتاه محصول شما طولانی است و موجب می شود که سایت شما ظاهر نا مناسبی داشته باشد، می توانید به کمک این تکه کد که یکی از ده ها تکه کد آموزش ووکامرس است، این مورد را در سایت خود پیاده سازی کنید که کاربر برای مشاهده کامل متن روی بیشتر بخوانید کلیک کند و بعد از کلیک روی این دکمه متن به طور کامل به آن نمایش داده شود. مانند شکل زیر:

تکه کد مورد نظر به شرح زیر است:

add_action( 'woocommerce_after_single_product', 'woocommerceir_woocommerce_short_description_truncate_read_more' );
 
function woocommerceir_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\'>بیشتر بخوانید</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();
      });
   ');
}

چطور از این تکه کدها استفاده کنیم؟

برای استفاده از این تکه کدها که در واقع کد PHP هستند باید آن ها را در انتهای بخش توابع پوسته خود جایگذاری کنید. برای دسترسی به این بخش باید از «نمایش> ویرایشگرپوسته> توابع پوسته» اقدام کنید. برای اطلاعات بیشتر مقاله زیر را بخوانید.

چطور تکه کدها را به سایت خود اضافه کنیم؟

آیا این تکه کد با قالب شما سازگار است؟

این تکه کد روی قالب وودمارت که یکی از پرطرفدارترین قالب های ووکامرس است تست شده است و عملکرد درستی داشته است. اگر این تکه کد با قالب شما سازگار بود حتما در کامنت ها نام قالب را ذکر کنید و همچنین برعکس. اگر سوالی پیرامون این نوشته دارید یا درخواست یک تکه کد خاص دارید، در بخش کامنت ها مشتاقانه منتظر شما دوستان هستیم.