Hướng Dẫn Thêm Nút Xem Thêm Cho Mô Tả Sản Phẩm Và Danh Mục Flatsome

Trong quá trình tối ưu SEO cho website sử dụng theme Flatsome, việc viết nội dung mô tả sản phẩm và danh mục dài là điều bắt buộc để cải thiện thứ hạng từ khóa. Tuy nhiên, nội dung quá dài thường làm giảm trải nghiệm người dùng (UX) và làm mất tính thẩm mỹ của giao diện. Giải pháp tối ưu nhất là tích hợp nút “Xem thêm” (Read more) bằng code để thu gọn nội dung nhưng vẫn đảm bảo Google có thể lập chỉ mục (index) đầy đủ văn bản.

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

• Tăng tính thẩm mỹ: Giúp trang sản phẩm và danh mục gọn gàng, chuyên nghiệp hơn.
• Tối ưu UX: Khách hàng không phải cuộn trang quá nhiều để xem các sản phẩm hoặc thông tin phía dưới.
• Giữ nguyên giá trị SEO: Toàn bộ nội dung vẫn nằm trong mã nguồn, giúp bot tìm kiếm dễ dàng quét dữ liệu.
• Tương thích Mobile: Đặc biệt hiệu quả trên các thiết bị di động với không gian hiển thị hạn chế.

Cách thực hiện

Bạn chỉ cần copy đoạn code dưới đây và dán vào file functions.php của Child Theme (hoặc sử dụng plugin Code Snippets).

1. Code thêm nút Xem thêm cho trang Chi tiết sản phẩm

Đoạn mã này áp dụng cho tab mô tả sản phẩm (Product Description). Nếu chiều cao nội dung vượt quá 400px, hệ thống sẽ tự động thêm nút “Xem thêm” kèm hiệu ứng Gradient mờ che phần cuối nội dung.

add_action('wp_footer','readmore_flatsome');
function readmore_flatsome(){
?>
<style>
.single-product div#tab-description {
overflow: hidden;
position: relative;
padding-bottom: 25px;
}
.single-product .tab-panels div#tab-description.panel:not(.active) {
height: 0 !important;
}
.readmore_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: -1px;
width: 100%;
background: #fff;
height: 50px;
}
.readmore_flatsome:before {
height: 45px;
margin-top: -45px;
content: "";
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
display: block;
}
.readmore_flatsome a {
color: white;
/* display: block; */
background-color: var(--primary-color);
padding: 8px 37px;
width: 200px;
margin: auto;
border-radius: 99px;
box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
}
.readmore_flatsome a:after {
content: '';
width: 0;
right: 0;
border-top:6px solid
#ffffff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.readmore_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
}
.readmore_flatsome_less:before {
display: none;
}
.readmore_flatsome_less a:after {
content: '';
width: 0;
right: 0;
border-bottom: 6px solid
#ffffff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
</style>
<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 = 400;
if(current_height > your_height){
wrap.css('height', your_height+'px');
wrap.append(function(){
return '<div class="readmore_flatsome readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
wrap.append(function(){
return '<div class="readmore_flatsome readmore_flatsome_less" style="display: none;"><a title="Thu ngọn" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click','.readmore_flatsome_more', function(){
wrap.removeAttr('style');
$('body .readmore_flatsome_more').hide();
$('body .readmore_flatsome_less').show();
});
$('body').on('click','.readmore_flatsome_less', function(){
wrap.css('height', your_height+'px');
$('body .readmore_flatsome_less').hide();
$('body .readmore_flatsome_more').show();
});
}
}
});
});
})(jQuery);
</script>
<?php
}

2. Code thêm nút Xem thêm cho trang Danh mục (Category)

Trang danh mục sản phẩm (Category) trong Flatsome thường sử dụng class .term-description. Đoạn code dưới đây sẽ xử lý phần mô tả này để tối ưu không gian hiển thị cho danh sách sản phẩm.

add_action('wp_footer','readmore_taxonomy_flatsome');
function readmore_taxonomy_flatsome(){
if(is_woocommerce() && is_tax('product_cat')):
?>
<style>
.term-description {
overflow: hidden;
position: relative;
margin-bottom: 20px;
padding-bottom: 25px;
}
.readmore_taxonomy_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: -1px;
width: 100%;
background: #fff;
height: 50px;
}
.readmore_taxonomy_flatsome:before {
height: 45px;
margin-top: -45px;
content: "";
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
display: block;
}
.readmore_taxonomy_flatsome a {
color: white;
background-color: var(--primary-color);
padding: 8px 37px;
width: 200px;
margin: auto;
border-radius: 99px;
box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
}
.readmore_taxonomy_flatsome a:after {
content: '';
width: 0;
right: 0;
border-top: 6px solid #ffffff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.readmore_taxonomy_flatsome_less:before {
display: none;
}
.readmore_taxonomy_flatsome_less a:after {
content: '';
width: 0;
right: 0;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 0;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
</style>
<script>
(function($){
$(window).on('load', function(){
if($('.term-description').length > 0){
var wrap = $('.term-description');
var current_height = wrap.height();
var your_height = 600;
if(current_height > your_height){
wrap.css('height', your_height+'px');
wrap.append(function(){
return '<div class="readmore_taxonomy_flatsome readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
wrap.append(function(){
return '<div class="readmore_taxonomy_flatsome readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click','.readmore_taxonomy_flatsome_show', function(){
wrap.removeAttr('style');
$('body .readmore_taxonomy_flatsome_show').hide();
$('body .readmore_taxonomy_flatsome_less').show();
});
$('body').on('click','.readmore_taxonomy_flatsome_less', function(){
wrap.css('height', your_height+'px');
$('body .readmore_taxonomy_flatsome_show').show();
$('body .readmore_taxonomy_flatsome_less').hide();
});
}
}
});
})(jQuery);
</script>
<?php
endif;
}

Lưu ý sau khi cài đặt

• Xóa Cache: Sau khi thêm code, hãy nhớ xóa cache trình duyệt hoặc cache plugin (WP Rocket, LiteSpeed…) để thấy kết quả.
• Tùy chỉnh chiều cao: Bạn có thể thay đổi con số 400 hoặc 250 trong đoạn script để phù hợp với độ dài mong muốn của mình.
• Màu sắc: Thay đổi mã màu #446084 trong phần CSS để trùng với màu chủ đạo của website bạn.

Chúc các bạn thành công! Nếu có bất kỳ khó khăn nào trong quá trình cài đặt cho website Flatsome của mình, hãy để lại bình luận phía dưới nhé.