Thu gọn nội dung chi tiết sản phẩm Woocommerce

Trong bài viết này, tôi sẽ hướng dẫn các bạn cách tạo nút “Xem thêm” và “Thu gọn” cho phần mô tả sản phẩm trong WooCommerce. Tính năng này đặc biệt hữu ích khi sản phẩm của bạn có phần mô tả dài, giúp trang sản phẩm trông gọn gàng hơn và cải thiện trải nghiệm người dùng.

Tại sao nên sử dụng nút “Xem thêm”?

• Cải thiện UX: Người dùng có thể chủ động quyết định xem thêm thông tin chi tiết
• Tối ưu không gian: Trang sản phẩm trông gọn gàng, tập trung hơn
• Tăng tốc độ trang: Giảm chiều cao ban đầu của trang, giúp trang tải nhanh hơn
• Thu hút chú ý: Tạo điểm nhấn và khuyến khích người dùng khám phá thông tin sản phẩm

Cách triển khai

Đây là đoạn code hoàn chỉnh để thêm tính năng nút “Xem thêm” và “Thu gọn” cho mô tả sản phẩm trong WooCommerce:

Cách sử dụng

Để thêm mã này vào website WordPress của bạn, hãy làm theo các bước sau:

1. Thêm vào file functions.php: Bạn có thể thêm đoạn code trên vào file functions.php của theme con (child theme) như hình bên dưới

1. Tùy chỉnh chiều cao: Trong code, dòng var maxHeight = 800; xác định chiều cao tối đa (tính bằng pixel) trước khi hiển thị nút “Xem thêm”. Bạn có thể điều chỉnh giá trị này để phù hợp với thiết kế website của mình.
2. Tùy chỉnh màu sắc: Bạn có thể thay đổi màu sắc của nút và mũi tên bằng cách sửa giá trị màu trong CSS (hiện tại là #0057b8).
3. Tùy chỉnh văn bản: Để thay đổi văn bản “Xem thêm” và “Thu gọn”, hãy sửa trong phần tạo nút:

   // Thay "Xem thêm" bằng văn bản bạn muốn
   var $readMoreBtn = $('<div class="wat-description-toggle-button wat-read-more-button"><a href="javascript:void(0);">Xem thêm</a></div>');
   
   // Thay "Thu gọn" bằng văn bản bạn muốn
   var $readLessBtn = $('<div class="wat-description-toggle-button wat-read-less-button" style="display: none;"><a href="javascript:void(0);">Thu gọn</a></div>');
   

Các tính năng đặc biệt

1. Tự động phát hiện chiều cao: Code sẽ tự động kiểm tra nội dung mô tả và chỉ hiển thị nút “Xem thêm” khi cần thiết.
2. Hiệu ứng mờ dần: Phần cuối của mô tả sẽ có hiệu ứng mờ dần tạo điểm nhấn cho nút “Xem thêm”.
3. Cuộn trang tự động: Khi nhấn nút “Thu gọn”, trang sẽ tự động cuộn lên đầu phần mô tả để người dùng không bị lạc.
4. Tối ưu hiệu suất: Code chỉ chạy trên trang sản phẩm đơn lẻ, không ảnh hưởng đến các trang khác.

Kết luận

Với đoạn code này, bạn đã có thể tạo nút “Xem thêm” và “Thu gọn” chuyên nghiệp cho phần mô tả sản phẩm trong WooCommerce. Tính năng này không chỉ giúp trang sản phẩm của bạn trông gọn gàng hơn mà còn cải thiện trải nghiệm người dùng, đặc biệt khi bạn có nhiều thông tin chi tiết về sản phẩm.

Hãy thử nghiệm và tùy chỉnh theo nhu cầu của bạn. Chúc bạn thành công!