Bài này sẽ giúp các bạn thu gọn nội dung chi tiết sản phẩm cho theme Flatsome. Nội dung quá dài, khách hàng muốn xem chi tiết sẽ click, giúp tối ưu, gọn gàng hơn. Xem kết quả bên dưới!
Chú ý:
- Chỉ làm việc với Theme Flatsome / để custom cho theme khác thay class là được
- Với cách này bạn chỉ cần gán code vào functions.php của theme là được. Nhưng nếu bạn nào không thích gán vào functions.php thì có thể tách css và js ra để vào các file tương ứng cũng được nhé.
Cách thu gọn mô tả chi tiết sản phẩm trong flatsome
Bước 1: Chúng ta vào phần Giao diện –> Sửa giao diện –> Function.php (Để đảm bảo website không gặp vấn đề khi sửa thì bạn nên sử dụng child theme. Thường thì khi khởi tạo website bằng flatsome, trình khởi tạo đều có hỏi về việc tạo child theme, trong đó có sẵn 2 file là style.css và function.php).
Bước 2: Dán đoạn code này vào function.php của child theme:
Lưu ý: Trong code có đoạn var your_height = 300; đây là chiều dài đoạn văn được hiển thị ra. Bạn có thể giảm bớt hoặc tăng thêm theo ý muốn. Chỉ cần sửa số 300 thành một con số bất kỳ.
/*
* Code thu gon mo ta chi tiet san pham trong woocomerce
*/
add_action('wp_footer','hwp_readmore_flatsome');
function hwp_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;
}
.hwp_readmore_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.hwp_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;
}
.hwp_readmore_flatsome a {
color: #318A00;
display: block;
}
.hwp_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;
}
.hwp_readmore_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #318A00;
}
.hwp_readmore_flatsome_less:before {
display: none;
}
</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 = 300;
if(current_height > your_height){
wrap.css('height', your_height+'px');
wrap.append(function(){
return '<div class="hwp_readmore_flatsome hwp_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
wrap.append(function(){
return '<div class="hwp_readmore_flatsome hwp_readmore_flatsome_less" style="display: none;"><a title="Xem thêm" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click','.hwp_readmore_flatsome_more', function(){
wrap.removeAttr('style');
$('body .hwp_readmore_flatsome_more').hide();
$('body .hwp_readmore_flatsome_less').show();
});
$('body').on('click','.hwp_readmore_flatsome_less', function(){
wrap.css('height', your_height+'px');
$('body .hwp_readmore_flatsome_less').hide();
$('body .hwp_readmore_flatsome_more').show();
});
}
}
});
})
})(jQuery)
</script>
<?php
}Thu gọn nội dung mô tả chi tiết danh mục sản phẩm
Cũng giống như phần thu gọn nội dung mô tả sản phẩm, phần danh mục sản phẩm (category) cũng có thể thêm mô tả chi tiết, và bạn cũng có thể thu gọn bằng đoạn code dưới đây:
Bước 1: Chúng ta cũng vào file function.php trong child theme như trên nhé.
Bước 2: Copy và dán đoạn code này vào:
Lưu ý: Trong code có đoạn var your_height = 300; đây là chiều dài đoạn văn được hiển thị ra. Bạn có thể giảm bớt hoặc tăng thêm theo ý muốn. Chỉ cần sửa số 300 thành một con số bất kỳ.
/*
* Thêm nút Xem thêm vào phần mô tả của danh mục sản phẩm
*/
add_action('wp_footer','hwp_readmore_taxonomy_flatsome');
function hwp_readmore_taxonomy_flatsome(){
if(is_woocommerce() && is_tax('product_cat')):
?>
<style>
.tax-product_cat.woocommerce .shop-container .term-description {
overflow: hidden;
position: relative;
margin-bottom: 20px;
padding-bottom: 25px;
}
.hwp_readmore_taxonomy_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.hwp_readmore_taxonomy_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;
}
.hwp_readmore_taxonomy_flatsome a {
color: #318A00;
display: block;
}
.hwp_readmore_taxonomy_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;
}
.hwp_readmore_taxonomy_flatsome_less:before {
display: none;
}
.hwp_readmore_taxonomy_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #318A00;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(window).on('load', function(){
if($('.tax-product_cat.woocommerce .shop-container .term-description').length > 0){
var wrap = $('.tax-product_cat.woocommerce .shop-container .term-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="hwp_readmore_taxonomy_flatsome hwp_readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
wrap.append(function(){
return '<div class="hwp_readmore_taxonomy_flatsome hwp_readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click','.hwp_readmore_taxonomy_flatsome_show', function(){
wrap.removeAttr('style');
$('body .hwp_readmore_taxonomy_flatsome_show').hide();
$('body .hwp_readmore_taxonomy_flatsome_less').show();
});
$('body').on('click','.hwp_readmore_taxonomy_flatsome_less', function(){
wrap.css('height', your_height+'px');
$('body .hwp_readmore_taxonomy_flatsome_show').show();
$('body .hwp_readmore_taxonomy_flatsome_less').hide();
});
}
}
});
})
})(jQuery)
</script>
<?php
endif;
}Trong quá trình thực hiện có vấn đề inbox mình hỗ trợ…. Chúc bạn thành công!
Bài viết liên quan: