[Hướng dẫn] Thu gọn tiêu đề sản phẩm thành 2 dòng siêu nhanh

Thu gọn tiêu đề sản phẩm thành 2 dòng

Thu gọn tiêu đề sản phẩm thành 2 dòng siêu nhanh: Tên sản phẩm hoặc bài viết đôi khi khá dài, không đều dẫn tới bố cục trang web nhấp nhô, trông không được đẹp mắt. Để khắc phục tình trang này có nhiều cách nhưng Flatsomea-z sẽ chia sẻ cho bạn 02 cách vô cùng hiệu quả.

Thu gọn tiêu đề sản phẩm thành 2 dòng
Thu gọn tiêu đề sản phẩm thành 2 dòng

Cách 1: Sử dụng CSS

Code này không chỉ áp dụng cho tiêu đề sản phẩm, mà cho bất cứ tiêu đề nào chỉ cần bạn xác định được class tương ứng của nó!

Copy và paste đoạn CSS sau vào file style.css hoặc theo đường dẫn (Giao diện > Tuỳ biến > Add CSS)

p.name.product-title a {
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ưu ý: Sửa các thông tin sau theo ý của bạn

  • -webkit-line-clamp: 2; là số dòng các bạn muốn cắt, nếu chỉ muốn cắt thành 1 dòng thì thay bằng số 1,..
  • font-weight: là độ dày của chữ, các bạn muốn nó thanh mảnh hơn thì giảm còn 600

Cách 2: Sử dụng code

Copy và paste đoạn code sau vào file functions.php nhé

add_filter( 'the_title', ' short_woocommerce_product_title', 10, 2 );
function short_woocommerce_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 10 ); // change last number to the number of characters you want
} else {
return $title;
}
}

Lưu ý: Thay đổi số 10 thành số lượng ký tự mà bạn muốn!

Hoặc sử dụng đoạn code sau:

function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return wp_trim_words( $title, 4 ); // change last number to the number of WORDS you want
} else {
return $title;
}
}

**Thay số 4 thành số từ mà bạn muốn hiển thị

Riêng Flatsomea-z thì thấy cách số 1 có vẻ thẩm mỹ hơn, nên tuỳ theo nhu cầu bạn có thể cân nhắc sử dụng 1 trong 2 cách nha.

Chúc các bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai.