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

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

علاوة على ذلك ، قد ترغب أيضًا في الحفاظ على اتساق تجربة المتجر ، وجعل جميع عناوين منتجات WooCommerce بنفس الطول. هذا هو كيف نفعل ذلك. يتمتع!

كتب مريم الدخيل لاكاديمية الثراء.  تقصير عنوان المنتج على صفحة المتجر

كتب مريم الدخيل لاكاديمية الثراء. تقصير عنوان المنتج على صفحة المتجر

Snippet 1 (CSS): قصر كل عناوين منتجات WooCommerce على سطر واحد فقط

// Note: this is simple CSS that can be placed in your custom.css file
// This CSS also adds 3 dots ... at the end of each product title
 
.woocommerce ul.products li.product h3 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

Snippet 2 (PHP): حدد جميع عناوين منتجات WooCommerce بأقصى عدد من الأحرف

/**
 * @snippet       Product Title Char Limit @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// Note: this is simple PHP that can be placed in your functions.php file
// Note: substr may give you problems, please check Option 3
 
add_filter( 'the_title', 'bbloomer_shorten_woo_product_title', 9999, 2 );
 
function bbloomer_shorten_woo_product_title( $title, $id ) {
   if ( is_shop() && get_post_type( $id ) === 'product' ) {
      return substr( $title, 0, 15 ); // last number = characters
   } else {
      return $title;
   }
}

Snippet 3 (PHP): حدد جميع عناوين منتجات WooCommerce بأقصى عدد من الكلمات

شكرا لك لطيف على هذا المقتطف!

/**
 * @snippet       Product Title Word Limit @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
function bbloomer_shorten_woo_product_title( $title, $id ) {
   if ( is_shop() && get_post_type( $id ) === 'product' ) {
      return wp_trim_words( $title, 4 ); // last number = words
   } else {
      return $title;
   }
}

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

WooCommerce: أضف نصًا أسفل كل صفحة متجر في كل منتج

WooCommerce: إخفاء الأسعار في صفحات المتجر والفئة

WooCommerce: أضف إلى رابط عربة التسوق لفتحه في علامة تبويب متصفح جديدة

WooCommerce: إزالة أو إعادة تسمية SALE! شارة

WooCommerce: اعرض الحقل المخصص للمنتج في صفحات الفئات

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

WooCommerce: تحقق مما إذا كان المستخدم قد اشترى المنتج

WooCommerce: عرض الأسهم المتباينة في صفحة المتجر

WooCommerce: عرض فئات المنتجات الفارغة

WooCommerce: إخفاء صور الفئة @ Shop

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

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