Bài viết này sẽ giúp bạn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục khi sử dụng WooCommerce. Đôi khi, mô tả sản phẩm hoặc danh mục quá dài có thể khiến trang web trông rối mắt và làm giảm trải nghiệm người dùng. Với hướng dẫn này, bạn sẽ biết cách thu gọn nội dung hiển thị để trang web trông gọn gàng hơn. Người dùng có thể nhấn “Xem thêm” để xem toàn bộ nội dung nếu họ muốn, giúp website trở nên chuyên nghiệp và tối ưu cho trải nghiệm mua sắm.
Thu gọn nội dung chi tiết sản phẩm
Mặc định, WooCommerce hiển thị toàn bộ nội dung mô tả sản phẩm, dẫn đến trang sản phẩm dài dòng và rối mắt, đặc biệt nếu bạn có nhiều thông tin chi tiết. Điều này có thể khiến khách hàng choáng ngợp và bỏ qua các phần quan trọng khác như hình ảnh hoặc nút mua hàng.
Giải pháp là thu gọn nội dung, chỉ hiển thị một phần và cho phép người dùng nhấn “Xem thêm” nếu muốn. Cách này giúp trang sản phẩm gọn gàng hơn và tập trung vào các yếu tố chính, giúp tăng trải nghiệm mua sắm.

Code thu gọn nội dung chi tiết sản phẩm. Thêm code sau vào file functions.php
<?php
add_action('wp_footer', 'custom_toggle_product_description', 20);
function custom_toggle_product_description() {
if ( is_product() ) {
?>
<script>
(function($) {
$(document).ready(function() {
$(window).on('load', function() {
if ($('.single-product div#tab-description').length > 0) {
var wrap = $('.single-product div#tab-description');
var current_height = wrap.height();
var your_height = 300;
if (current_height > your_height) {
wrap.css('height', your_height + 'px');
wrap.append(function() {
return '<div class="btn_readmore_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
wrap.append(function() {
return '<div class="btn_readmore_less" style="display: none;"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click', '.btn_readmore_more', function() {
wrap.removeAttr('style');
$('body .btn_readmore_more').hide();
$('body .btn_readmore_less').show();
});
$('body').on('click', '.btn_readmore_less', function() {
wrap.css('height', your_height + 'px');
$('body .btn_readmore_less').hide();
$('body .btn_readmore_more').show();
});
}
}
});
});
})(jQuery);
</script>
<?php
}
}
Thêm css để làm đẹp nút xem thêm
.btn_readmore_more,
.btn_readmore_less {
position: absolute;
bottom: 0;
background: linear-gradient(rgba(255, 255, 255, 0), rgb(255 255 255 / 84%) 15%, #fff);
width: 100%;
text-align: center;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.btn_readmore_more a:after {
content: '';
width: 0;
right: 0;
border-top: 6px solid #c31425;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.btn_readmore_more:hover a:after {
border-top: 6px solid #fff;
}
.btn_readmore_more a,
.btn_readmore_less a {
border: 1px solid #c31425;
padding: 4px 20px;
border-radius: 4px;
}
.btn_readmore_less a:after {
content: '';
width: 0;
right: 0;
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #c31425;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.btn_readmore_more:hover a,
.btn_readmore_less:hover a {
background: #c31425;
color: #fff;
}
.btn_readmore_more a,
.btn_readmore_less a {
font-weight: 600;
color: #c31425;
}
Thu gọn nội dung mô tả danh mục WooCommerce
Tương tự như trên cũng làm cho danh mục sản phẩm Woo, thêm code sau vào functions.php
<?php
add_action('woocommerce_archive_description', 'custom_category_description', 10);
function custom_category_description()
{
if (is_product_category()) {
$term_description = term_description();
if (! empty($term_description)) {
echo '<a href="javascript:;" class="read-more-btn">Xem thêm <i class="icon-angle-down" aria-hidden="true"></i></a>';
?>
<style>
.term-description {
max-height: 100px;
overflow: hidden;
position: relative;
transition: max-height 0.3s ease;
}
.term-description.expanded {
max-height: none;
}
.read-more-btn {
display: block;
text-align: center;
margin: 30px 0;
color: #0073aa;
cursor: pointer;
text-decoration: none;
}
.read-more-btn:hover {
text-decoration: underline;
}
</style>
<script>
jQuery(document).ready(function($) {
let readMoreBtn = $('.read-more-btn');
let termDescription = $('.term-description');
if (readMoreBtn.length && termDescription.length) {
readMoreBtn.on('click', function(e) {
e.preventDefault();
termDescription.toggleClass('expanded');
if (termDescription.hasClass('expanded')) {
$(this).html('Thu gọn <i class="icon-angle-up" aria-hidden="true"></i>');
} else {
$(this).html('Xem thêm <i class="icon-angle-down" aria-hidden="true"></i>');
}
});
}
});
</script>
<?php
}
}
}
Hy vọng với hướng dẫn trên, bạn có thể thu gọn nội dung chi tiết sản phẩm và danh mục sản phẩm trên website WooCommerce của mình một cách dễ dàng và hiệu quả. Chúc bạn thực hiện thành công và cải thiện trải nghiệm người dùng cho cửa hàng trực tuyến của mình!
Nếu bạn gặp khó khăn hoặc có bất kỳ thắc mắc nào, đừng ngần ngại liên hệ mình. Mình luôn sẵn sàng hỗ trợ miễn phí để giúp bạn hoàn thành tốt nhất. Chúc bạn thành công! 🚀