Tối ưu hiển thị tiêu đề sản phẩm trong WooCommerce bằng code
Trong vận hành website thương mại điện tử, việc tiêu đề sản phẩm có độ dài không đồng nhất thường dẫn đến tình trạng vỡ bố cục (layout) tại các trang danh mục hoặc trang chủ. Điều này không chỉ gây mất thẩm mỹ mà còn ảnh hưởng trực tiếp đến trải nghiệm người dùng. Tại STAR WAR Digital Solutions, chúng tôi ưu tiên các giải pháp kỹ thuật tinh gọn, can thiệp trực tiếp vào mã nguồn thay vì sử dụng các plugin cồng kềnh nhằm đảm bảo hiệu suất tối ưu cho website.
Giải pháp rút ngắn tiêu đề sản phẩm tự động
Để kiểm soát độ dài tiêu đề hiển thị trên giao diện, bạn có thể sử dụng hàm wp_trim_words kết hợp với bộ lọc the_title của WordPress. Phương pháp này cho phép giới hạn số lượng từ hiển thị một cách tự động mà không làm thay đổi tiêu đề gốc trong cơ sở dữ liệu.
Bạn hãy thêm đoạn code dưới đây vào file functions.php của theme đang sử dụng (khuyến khích thực hiện trên Child Theme để đảm bảo an toàn khi cập nhật giao diện):
add_filter( 'the_title', 'short_title_product', 10, 2 );
function short_title_product( $title, $id ) {
if ( get_post_type( $id ) === 'product' && !is_single() ) {
return wp_trim_words( $title, 5 ); // Thay đổi số 5 thành số từ bạn muốn hiển thị
} else {
return $title;
}
}
Các lưu ý kỹ thuật quan trọng:
- Hàm
!is_single(): Đảm bảo tiêu đề chỉ bị rút gọn tại trang danh mục, trang chủ hoặc các trang lưu trữ. Tiêu đề đầy đủ vẫn sẽ hiển thị chính xác khi khách hàng truy cập vào trang chi tiết sản phẩm. - Tùy chỉnh tham số: Bạn có thể thay đổi số nguyên
5trong đoạn code trên để phù hợp với độ rộng cột hiển thị thực tế của theme đang sử dụng.
Mở rộng: Tối ưu hiển thị mô tả ngắn
Tương tự như tiêu đề, phần mô tả ngắn (short description) cũng thường xuyên làm lệch hàng các khối sản phẩm nếu độ dài không đồng nhất. Bạn có thể áp dụng logic tương tự để giới hạn số từ cho phần mô tả này:
add_filter( 'the_excerpt', 'shorten_excerpt_length' );
function shorten_excerpt_length( $excerpt ) {
return wp_trim_words( $excerpt, 14 ); // Thay đổi số 14 thành số lượng từ mong muốn
}
Lời khuyên từ STAR WAR Digital Solutions
Việc can thiệp trực tiếp vào code giúp website vận hành nhẹ nhàng và chuyên nghiệp hơn so với việc cài đặt quá nhiều plugin hỗ trợ. Tuy nhiên, trước khi chỉnh sửa file functions.php, hãy luôn đảm bảo bạn đã có bản sao lưu (backup) dữ liệu để tránh các rủi ro không đáng có.
Nếu bạn cần tùy chỉnh giao diện chuyên sâu hoặc tối ưu hóa hiệu suất website thương mại điện tử, đội ngũ kỹ thuật tại STAR WAR Digital Solutions luôn sẵn sàng đồng hành cùng bạn. Hãy liên hệ với chúng tôi để được tư vấn các giải pháp kỹ thuật tối ưu nhất.