چطور عنوان محصولات را در فروشگاه ووکامرس کوتاه تر کنیم؟

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

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

برای انجام این کاره یعنی نمایش کوتاه تر عنوان محصولات اصلا نیازی به نصب افزونه نیست و فقط با استفاده از چند تکه کد ساده php و یا css می توانید این تغییرات را اعمال کنید. برای محدودیت در تعداد کاراکترهای عنوان محصول باید از تکه کد php استفاده کنید و مثل تکه هایی که در محتواهای قبلی مربوط به توسعه فروشگاه اینترنتی در بخش توابع پوسته بارگذاری نمایید.

مشاهده آموزش های رایگان توسعه فروشگاه اینترنتی

 اگر با مراحل استفاده از تکه کد ها آشنایی ندارید، کافیست طبق موارد زیر عمل کنید:

• وارد بخش پیشخوان وردپرس خود شوید
•  از سمت راست گزینه «نمایش» و سپس پس« ویرایشگر پوسته» را انتخاب نمایید.
•  حال از منوی سمت چپ دنبال گزینه ی« توابع پوسته» بگردید و روی آن کلیک کنید.
• کد مورد نظر را در انتهای این قسمت جایگذاری کنید.

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

add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 15 ); // میتوانید به جای 15 عدد دیگری را به دلخواه خود جایگذاری نمایید
} else {
return $title;
}
}

پس از جایگذاری تغییرات بدین شکل خواهد بود:

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

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

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

حال دقت کنید که عنوان شما درون چه تگی قرار دارد. H2 یا h3 یا h4 ؟

حال تکه کد زیر را در بخش «css اضافی» سایت خود قرار دهید. اگر نمی دانید که «css اضافی» دقیقاً در کدام بخش است نگران نباشید و طبق راهنمایی زیر عمل کنید:

• وارد بخش پیشخوان وردپرس خود شوید
•  از سمت راست گزینه «نمایش» و سپس پس«سفارشی سازی» را انتخاب نمایید.
•  حال از منوی سمت راست دنبال گزینه ی«css اضافی» بگردید و روی آن کلیک کنید.
• کد مورد نظر را در انتهای این قسمت جایگذاری کنید.

 .woocommerce ul.products li.product h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

برای ایجاد محدودیت در نمایش عنوان محصولات صفحه فروشگاه ووکامرس، به جای h3 تگی که عنوان شما در آن قرار دارد را جایگذاری کنید.

طبق روشی که در کمی قبل تر گفتیم، می توانید تگ مربوط به عنوان محصولات را پیدا کنید.

پس از جایگذاری تغییرات بدین شکل خواهد بود:

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

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

این کار به کمک یک قطعه کد php انجام می شود که باید آنرا در بخش ویرایشگر پوسته (که در ابتدای محتوا توضیح داده ایم) جایگذاری نمایید.

add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
if (get_post_type( $id ) === 'product' ) {
  return wp_trim_words( $title, 4, '...' ); // شما میتوانید عدد دلخواه خود را به جای 4 جایگذاری کنید.
} else {
return $title;
}
}

پس از جایگذاری تغییرات بدین شکل خواهد بود:

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