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
// 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;
}
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
// 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;
}
}
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
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;
}
}
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).