Code Woocommerce thu gọn nội dung chi tiết sản phẩm sẽ giúp cho website của bạn trông đẹp và gọn gàng hơn. Ngoài ra, giúp website của bạn tải nhanh hơn giúp gia tăng trải nghiệm người dùng. Hiển thị những nội dung quan trọng trước tiên và sau đó, người dùng sẽ có hành động tiếp theo để xem thêm nội dung sản phẩm.
Nhiều bạn đang hỏi về đoạn code Woocommerce thu gọn nội dung chi tiết sản phẩm này. Hôm nay mình chia sẻ để anh chị em nào cần thì lấy về sử dụng nhé. Nó hoàn toàn miễn phí và làm nhanh trong vài bước với một đoạn code ngắn đơn giản.
Bên dưới là 2 đoạn code gồm: Code woocommerce thu gọn nội dung chi tiết sản phẩm và code woocommerce thu gọn nội dung mô tả sản phẩm.
Code 1: Code Woocommerce thu gọn nội dung chi tiết sản phẩm
Mã code Woocommerce thu gọn nội dung chi tiết sản phẩm. Bạn coppy và làm theo hướng dẫn bên dưới
/*
* Thêm nút Xem thêm vào phần mô tả của bài viết sản phẩm
* Author: Võ Chí Thành - https://vochithanh.com
*/
add_action('wp_footer','hal_readmore_flatsome');
function hal_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;
}
.hal_readmore_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 9999;
bottom: 0;
width: 100%;
background: #fff;
}
.hal_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;
}
.hal_readmore_flatsome a {
color: #318A00;
display: block;
}
.hal_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(){
$(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="hal_readmore_flatsome"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
$('body').on('click','.hal_readmore_flatsome', function(){
wrap.removeAttr('style');
$('body .hal_readmore_flatsome').remove();
});
}
}
});
});
})(jQuery);
</script>
<?php
}Bạn coppy đoạn mã trên. Sau đó tìm đến file function.php của theme hoặc child theme đang kích hoạt rồi dán vào. Để tìm file function.php, bạn vào giao diện -> sửa giao diện -> tìm file có tên function.php cột bên phải. Click chọn sau đó dán vào file funciton.php, cuối cùng lưu lại là xong.
Để tùy biến phần hiển thị nhiều hay ít nội dung. Bạn tìm đến dòng var your_height = 300;” và thao đổi giá trị 300 thành ít hay nhiều tùy bạn nhé.
Code 2: Code woocommerce thu gọn danh mục sản phẩm
Mã code woocommerce thu gọn danh mục sản phẩm. Bạn coppy và làm theo bên dưới nhé
/*
* Thêm nút Xem thêm vào phần mô tả của danh mục sản phẩm
* Author: Võ Chí Thành - https://vochithanh.com
*/
add_action('wp_footer','hal_readmore_taxonomy_flatsome');
function hal_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;t
padding-bottom: 25px;
}
.hal_readmore_taxonomy_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.hal_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;
}
.hal_readmore_taxonomy_flatsome a {
color: #318A00;
display: block;
}
.hal_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;
}
.hal_readmore_taxonomy_flatsome_less:before {
display: none;
}
.hal_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="hal_readmore_taxonomy_flatsome hal_readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
wrap.append(function(){
return '<div class="hal_readmore_taxonomy_flatsome hal_readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click','.hal_readmore_taxonomy_flatsome_show', function(){
wrap.removeAttr('style');
$('body .hal_readmore_taxonomy_flatsome_show').hide();
$('body .hal_readmore_taxonomy_flatsome_less').show();
});
$('body').on('click','.hal_readmore_taxonomy_flatsome_less', function(){
wrap.css('height', your_height+'px');
$('body .hal_readmore_taxonomy_flatsome_show').show();
$('body .hal_readmore_taxonomy_flatsome_less').hide();
});
}
}
});
});
})(jQuery);
</script>
<?php
endif;
}Cách làm vẫn tương tự như trên. Bạn coppy đoạn mã trên. Sau đó tìm đến file function.php của theme hoặc child theme đang kích hoạt rồi dán vào. Sau đó lưu lại là xong.
Để tùy biến phần hiển thị nhiều hay ít nội dung. Bạn tìm đến dòng var your_height = 300;” và thao đổi giá trị 300 thành ít hay nhiều tùy bạn nhé. Vẫn làm giống như trên nhé.
Đưa mô tả danh mục sản phẩm xuống dưới
Code tùy chỉnh
//* Đưa mô tả danh mục xuống dưới.
remove_action('woocommerce_archive_description','woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );Bạn thêm vào file function.php và lưu lại nhé. Chúc các bạn làm theo hướng dẫn và thành công.
