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

Nhập mã webantamgiam30% được giảm 30% khi đăng ký hosting hay vps tại inet.vn

Mục lục

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 !!!

Nhập mã webantamgiam30% được giảm 30% khi đăng ký hosting hay vps tại inet.vn

Nhà cung cấp host uy tín Việt Nam
Nhà cung cấp host uy tín Việt Nam

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

.
.