Focus Keywords:
Thu gọn nội dung chi tiết sản phẩm trong Flatsome
Slug:
thu-gon-noi-dung-chi-tiet-san-pham-trong-flatsome
Meta Description:
Hướng dẫn cách thu gọn nội dung chi tiết sản phẩm trong theme Flatsome với mã code và CSS tùy chỉnh. Tối ưu hóa giao diện sản phẩm một cách chuyên nghiệp.
Alt Text Image:
Hình ảnh minh họa cách thu gọn nội dung chi tiết sản phẩm trong Flatsome
Sub-keywords:
Flatsome theme, WordPress, WooCommerce, thu gọn nội dung, CSS tùy chỉnh, JavaScript, tối ưu hóa giao diện, trải nghiệm người dùng, tab mô tả sản phẩm, mã code PHP
Title:
Tối Ưu Giao Diện Với Thu Gọn Nội Dung Chi Tiết Sản Phẩm Trong Flatsome
Thu Gọn Nội Dung Chi Tiết Sản Phẩm Trong Flatsome
Việc hiển thị toàn bộ nội dung chi tiết sản phẩm có thể khiến trang sản phẩm trở nên dài dòng và khó đọc. Để giải quyết vấn đề này, bạn có thể thu gọn nội dung và thêm nút “Xem thêm” để cải thiện trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn cách thực hiện điều này trong theme Flatsome bằng mã code PHP, CSS và JavaScript.
Lợi ích của việc thu gọn nội dung chi tiết sản phẩm
Thu gọn nội dung chi tiết sản phẩm mang lại nhiều lợi ích đáng kể. Đối với khách hàng, việc chỉ hiển thị một phần nội dung giúp họ dễ dàng nắm bắt thông tin quan trọng mà không bị choáng ngợp bởi lượng văn bản dài.
Đối với doanh nghiệp, đây là một cách tuyệt vời để tối ưu hóa giao diện sản phẩm, tạo cảm giác gọn gàng và chuyên nghiệp. Ngoài ra, tính năng “Xem thêm” còn kích thích sự tò mò của khách hàng, khuyến khích họ tương tác nhiều hơn với sản phẩm.
Cách hoạt động của tính năng thu gọn nội dung
Theme Flatsome sử dụng các tab để hiển thị thông tin sản phẩm, bao gồm mô tả, đánh giá và thông số kỹ thuật. Mặc định, toàn bộ nội dung trong tab mô tả sẽ được hiển thị ngay lập tức.
Để thu gọn nội dung, chúng ta sẽ sử dụng mã code PHP và JavaScript để giới hạn chiều cao của tab mô tả và thêm nút “Xem thêm”. Khi người dùng nhấp vào nút này, nội dung sẽ được mở rộng hoàn toàn.
Mã code để thu gọn nội dung chi tiết sản phẩm
Dưới đây là đoạn mã PHP và JavaScript cụ thể để thêm tính năng thu gọn nội dung chi tiết sản phẩm trong Flatsome. Bạn có thể thêm mã này vào file functions.php của theme con hoặc sử dụng plugin như “Code Snippets”.
add_action('wp_footer', 'devvn_readmore_flatsome');
function devvn_readmore_flatsome() { ?>
<style>
.single-product div#tab-description {
overflow: hidden;
position: relative;
}
.single-product .tab-panels div#tab-description.panel:not(.active) {
height: 0 !important;
}
.devvn_readmore_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 9999;
bottom: 0;
width: 100%;
background: #fff;
}
.devvn_readmore_flatsome:before {
height: 55px;
margin-top: -45px;
content: "";
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0);
display: block;
}
.devvn_readmore_flatsome a {
color: #318A00;
display: block;
}
.devvn_readmore_flatsome a:after {
content: '';
width: 0;
right: 0;
border-top: 6px solid #318A00;
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() {
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="devvn_readmore_flatsome"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
$('body').on('click', '.devvn_readmore_flatsome', function() {
wrap.removeAttr('style');
$('body .devvn_readmore_flatsome').remove();
});
}
}
});
})(jQuery);
</script>
<?php }Khi áp dụng mã này, nội dung chi tiết sản phẩm sẽ được thu gọn thành chiều cao 300px và hiển thị nút “Xem thêm” ở cuối phần nội dung.
Tùy chỉnh giao diện với CSS
Để đảm bảo nút “Xem thêm” hiển thị đẹp mắt, bạn có thể sử dụng đoạn CSS sau:
/* Thu gọn nội dung chi tiết sản phẩm */
.single-product div#tab-description {
overflow: hidden;
position: relative;
}
.single-product .tab-panels div#tab-description.panel:not(.active) {
height: 0 !important;
}
.devvn_readmore_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 9999;
bottom: 0;
width: 100%;
background: #fff;
}
.devvn_readmore_flatsome:before {
height: 55px;
margin-top: -45px;
content: "";
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0);
display: block;
}
.devvn_readmore_flatsome a {
color: #318A00;
display: block;
}
.devvn_readmore_flatsome a:after {
content: '';
width: 0;
right: 0;
border-top: 6px solid #318A00;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}Đoạn mã này tạo ra một hiệu ứng gradient mờ dần ở cuối nội dung và nút “Xem thêm” với màu sắc hài hòa, giúp tăng tính thẩm mỹ cho trang sản phẩm.
FAQs
Làm thế nào để thêm mã code vào WordPress?
Bạn có thể thêm mã code vào file functions.php của theme con hoặc sử dụng plugin “Code Snippets”.
Liệu mã code này có tương thích với tất cả các theme không?
Mã code này được thiết kế đặc biệt cho theme Flatsome. Nếu sử dụng theme khác, bạn cần điều chỉnh mã cho phù hợp.
Tôi có thể thay đổi chiều cao thu gọn không?
Có, bạn có thể thay đổi giá trị your_height trong mã JavaScript để điều chỉnh chiều cao mong muốn.
Làm thế nào để thay đổi màu sắc của nút “Xem thêm”?
Bạn có thể chỉnh sửa thuộc tính color và border-top trong CSS để thay đổi màu sắc của nút.
Tại sao nội dung không thu gọn khi tôi đã thêm mã code?
Kiểm tra xem mã code đã được thêm đúng cách và chắc chắn rằng bạn đang sử dụng theme Flatsome.
Có thể áp dụng tính năng này cho các tab khác không?
Có, bạn có thể thay đổi selector #tab-description trong mã code để áp dụng cho các tab khác.
Kết Luận
Thu gọn nội dung chi tiết sản phẩm trong Flatsome không chỉ giúp tối ưu hóa giao diện mà còn cải thiện trải nghiệm người dùng. Với các đoạn mã code và hướng dẫn chi tiết trên, bạn hoàn toàn có thể tự mình thực hiện thay đổi này một cách dễ dàng. Hãy thử nghiệm và tận hưởng kết quả tuyệt vời mà nó mang lại!
