WooCommerce: Làm thế nào để rút ngắn tiêu đề sản phẩm

Một vấn đề rất phổ biến: đôi khi tiêu đề sản phẩm WooCommerce quá dài. Trên hết, bạn cũng có thể muốn duy trì trải nghiệm cửa hàng nhất quán và làm cho tất cả các tiêu đề sản phẩm WooCommerce có cùng độ dài. Đây là cách bạn làm điều đó. Vấn đề: Tiêu

Một vấn đề rất phổ biến: đôi khi tiêu đề sản phẩm WooCommerce quá dài. Trên hết, bạn cũng có thể muốn duy trì trải nghiệm cửa hàng nhất quán và làm cho tất cả các tiêu đề sản phẩm WooCommerce có cùng độ dài. Đây là cách bạn làm điều đó.

Vấn đề: Tiêu đề sản phẩm của WooCommerce quá dài – hãy đặt giới hạn độ dài ký tự trên trang danh mục sản phẩm

WooCommerce: Làm thế nào để rút ngắn tiêu đề sản phẩm

Tùy chọn 1 (CSS): Giới hạn tất cả các tiêu đề sản phẩm WooCommerce chỉ một dòng bằng cách chỉnh sửa css

 

[php]// 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;
}[/php]

Tùy chọn 2 (PHP): Giới hạn tất cả các tiêu đề sản phẩm của WooCommerce với số lượng ký tự tối đa

[php] // 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’, ‘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 ); // change last number to the number of characters you want
} else {
return $title;
}
}
[/php]

Tùy chọn 3 (PHP): Giới hạn tất cả các tiêu đề sản phẩm của WooC Commerce với số lượng từ tối đa

[php] 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;
}
}
[/php]

Nơi để đặt đoạn code này?

Bạn có thể để đoạn php tại cuối file function.php (trước “?>” Nếu có kí tự này). Bạn có thể tùy chỉnh CSS và class để cho đoạn code trông bắt mắt hơn.

Nếu đoạn mã này không còn hoạt động

Xin vui lòng cho tôi biết dưới bình luận nếu đoạn code trên không hoạt động. Tôi sẽ rất vui khi sửa lại đoạn trích nếu bạn báo cáo (vui lòng cung cấp ảnh chụp màn hình).

Bài viết liên quan

Vô hiệu hóa WooCommerce 3.+ Lightbox

Đây là cách nhanh nhất để vô hiệu hóa WooCommerce 3.+ default lightbox. Bạn chỉ c

Vô hiệu hóa WooCommerce 3.+ Zoom

WooCommerce 3.+ Có một tính năng mới thú vị đó là: zoom! Khi bạn di chuột vào hìn

Làm cách nào để KHÔNG điền trước các trường thanh toán WooCommerce

Mặc định các trường thanh toán của WooCommerce luôn được điền sẵn khi đơn h

WooCommerce: Hiển thị sản phẩm liên quan vào Tab sản phẩm

Đây là một đoạn mã đơn giản sẽ cho phép bạn di chuyển các Sản phẩm liên qu