Thêm nút xem thêm và thu gọn cho danh mục chi tiết sản phẩm WooCommerce

Hôm nay Web An Tâm sẽ chia sẽ cho các bạn đoạn code thu gọn nội dung mô tả của danh mục sản phẩm

Cách Xử Lý

bạn chỉ cần cho đoạn code dưới đây vào file funtion.php của ( child theme ) sau đó lưu lại và xóa cache đi là xong nhé !

// Them nut xem them va thu gon phan mo ta danh muc san pham
add_action('wp_footer','webantam_readmore_taxonomy_flatsome');
function webantam_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;
}
.webantam_readmore_taxonomy_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.webantam_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;
}
.webantam_readmore_taxonomy_flatsome a {
color: #00578f;
display: block;
border: 1px solid #00578f;
border-radius: 5px;
margin: 0 auto;
max-width: 216px;
padding: 10px 5px;
text-align: center;
}
.webantam_readmore_taxonomy_flatsome a:after {
content: '';
width: 0;
right: 0;
border-top: 6px solid #00578f;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.webantam_readmore_taxonomy_flatsome_less:before {
display: none;
}
.webantam_readmore_taxonomy_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #00578f;
}
</style>
<script>
jQuery(document).ready(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 = 180;
if(current_height > your_height){
wrap.css('height', your_height+'px');
wrap.append(function(){
return '<div class="webantam_readmore_taxonomy_flatsome webantam_readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
wrap.append(function(){
return '<div class="webantam_readmore_taxonomy_flatsome webantam_readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click','.webantam_readmore_taxonomy_flatsome_show', function(){
wrap.removeAttr('style');
$('body .webantam_readmore_taxonomy_flatsome_show').hide();
$('body .webantam_readmore_taxonomy_flatsome_less').show();
});
$('body').on('click','.webantam_readmore_taxonomy_flatsome_less', function(){
wrap.css('height', your_height+'px');
$('body .webantam_readmore_taxonomy_flatsome_show').show();
$('body .webantam_readmore_taxonomy_flatsome_less').hide();
});
}
}
});
</script>
<?php
endif;
}


Chúc các bạn thành công !!!