Dưới đây là đoạn code thu gọn nội dung mô tả sản phẩm trong module shops

Với đoạn code này bạn có thẻ thu gọn nội dung phần mô tả của danh mục sản phẩm trong module Shops một cách dễ dàng, khi thêm code sẽ xuất hiện nút xem thêm và thu gọn sản phẩm, bạn hoặc khách hàng có thể click để xem nhiều nội dung sản phẩm hơn rất tiện.
Tìm tới file modulesshopstheme.php dòng 389 thay đổi thành 

$tabs_content = '<div class="des">'
.$data_content[NV_LANG_DATA . '_bodytext'].
'<div class="opacity_readmore"></div></div>
<div class="show-more">
	<a class="btn btn-default btn--view-more btn--view-more-1">
		<span class="more-text">Xem đầy đủ</span>
		<span class="less-text">Thu gọn</span>
	</a>
</div>';

Xem Thêm : Hướng dẫn chỉnh sửa giá woocommerce bất động sản wordpress

Thêm css ở file shop.css

.des{
	height: 113px;
	overflow: hidden;
	transition: height 0.2s;
	position: relative;
}
.product-well .show-more {
	position: relative;
}
.product-well .product-well .show-more:before {
	display: block;
	content: "";
	height: 120px;
	position: absolute;
	top: -120px;
	width: 100%;
	left: 0;
	background: rgba(255, 255, 255, 0.6);
	background: linear-gradient(
180deg
, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.33) 33%, rgba(255, 255, 255, 0.8) 83%, #fff);
}
.product-well .show-more .btn--view-more {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 120px;
	margin-left: -60px;
	margin-top: 0px;
	text-align: center;
	background-color: transparent;
	color: #008744;
	font-weight: 400;
	height: 30px;
	border-radius: 3px;
	line-height: 18px;
	font-size: 14px;
	border: 1px solid #008744;
}
.product-well .show-more .btn--view-more span {
	color: #008744 !important;
	text-transform: none !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}
.product-well.expanded .des {
	height: auto;
	-webkit-transition: height 0.2s;
	-moz-transition: height 0.2s;
	transition: height 0.2s
}

.product-well.expanded .less-text {
	display: block
}

.product-well.expanded .more-text {
	display: none
}

.product-well.expanded .show-more::before {
	display: none
}
.product-well .less-text {
	display: none;
}
.opacity_readmore {
    position: absolute;
    bottom: 1px;
    left: 0px;
    width: 100%;
    height: 120px;
    z-index: 2;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

Thêm đoạn jquery ở cuối file detail.tpl của themesdefaultmodulesshops

			$(document).ready(function(e){
				$('.btn--view-more-1').on('click', function(e){
					e.preventDefault();
					var $this = $(this);
					$this.parents('#tab-1').find('.product-well').toggleClass('expanded');
					$(this).toggleClass('active');
					$('.opacity_readmore').toggleClass('hidden');
					return false;
				});
			});

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Website. Hãy nhấn nút like và share  để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.