CSS giới hạn ký tự tiêu đề sản phẩm trong Woocommere

CSS giới hạn ký tự tiêu đề sản phẩm trong Woocommere – Để giới hạn ký tự hiển thị tiêu đề sản phẩm trong Woocommerce có rất nhiều cách khác nhau. Có thể bạn sử dụng plugin wordpress có sẵn hoặc những đoạn mã rút ngắn trong function.

Rút ngắn ký tự tiêu đề sản phẩm bằng CSS

Sử dụng CSS là cách đơn giản nhất và hiệu quả tốt hơn khi bạn hover chuột vào tiêu đề rút gọn sẽ hiện ra thông tin đây đủ. Dưới đây là đoạn mã css, hãy copy và sử dụng nhé!

/* CSS rút ngắn tiêu đề */
.class-tieu-de-blog {
    padding-top: 5px;
    text-align: center;
    color: #000;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //là số dòng mà bạn muốn rút ngắn
}

Hoặc có thể sử dụng đoạn mã CSS sau

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

Giới hạn số lượng ký tự bằng PHP

Sử dụng đoạn mã phía dưới copy vào file function.php

/* Giới hạn số lượng ký tự bằng PHP - thangoi.com */
add_filter( 'the_title', 'mx_shorten_product_title', 10, 2 );
function mx_shorten_product_title( $title, $id ) {
  if ( is_shop() && get_post_type( $id ) === 'product' ) {
     return substr( $title, 0, 15 ); // Thay đổi số ký tự muốn giới hạn
  } else {
     return $title;
  }
}

Giới hạn số lượng từ bằng PHP

/* Giới hạn số lượng từ bằng PHP - thangoi.com */
add_filter( 'the_title', 'mx_shorten_product_title', 10, 2 );
function mx_shorten_product_title( $title, $id ) {
  if ( is_shop() && get_post_type( $id ) === 'product' ) {
    return wp_trim_words( $title, 4 ); // Thay đổi số lượng Từ mà bạn muốn hiển thị
   } else {
    return $title;
   }
}