Cách thu gọn bài viết trong phần danh mục sản phẩm Woocommerce

Thu gọn nội dung phần danh mục và sản phẩm trên Woocommerce có tác dụng tinh gọn giao diện hơn trong mắt khách hàng mà vẫn đảm bảo đầy đủ yếu tố SEO với chất lượng bài viết đầy đủ. Sau đây, hãy đọc qua các bước hướng dẫn cùng KINGNCT nhé!

Hướng dẫn thu gọn văn bản của danh mục sản phẩm

Để thu gọn nội dung của trang mô tả danh mục sản phẩm, bạn hãy làm theo các bước sau đây:

• Bước 1: Bạn vào admin của website sau đó tại menu Giao diện
• Bước 2: Bạn chọn click vào Theme File Editor
• Bước 3: Bạn chọn giao diện để chỉnh sửa (nhớ là chọn Child theme chứ không phải main theme)
• Bước 4: Bạn bấm vào file Functions.php
• Bước 5: Bạn gián đoạn code sau vào cuối của file Functions.php

/*
* 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','balico_readmore_taxonomy_flatsome');
function balico_readmore_taxonomy_flatsome(){
if(is_woocommerce() && is_tax('product_cat')):
?>
<style>
.term-description {
overflow: hidden;
position: relative;
margin-bottom: 20px;
padding-bottom: 60px;
}
.balico_readmore_taxonomy_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.balico_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;
}
.balico_readmore_taxonomy_flatsome a {
color: #064fa2;
display: block;
}
.balico_readmore_taxonomy_flatsome a:after {
content: '';
width: 0;
right: 0;
border-top: 6px solid #064fa2;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.balico_readmore_taxonomy_flatsome_less:before {
display: none;
}
.balico_readmore_taxonomy_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #064fa2;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(window).on('load', function(){
if($('.term-description').length > 0){
var wrap = $('.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 &#039;&lt;div class=&quot;balico_readmore_taxonomy_flatsome balico_readmore_taxonomy_flatsome_show&quot;&gt;&lt;a title=&quot;Xem thêm&quot; href=&quot;<a class=”wpil_keyword_link” href=”https://balico.com.vn/javascript-seo/” title=”javascript” data-wpil-keyword-link=”linked”>javascript</a>:void(0);&quot;&gt;Xem thêm&lt;/a&gt;&lt;/div&gt;&#039;;
});
wrap.append(function(){
return &#039;&lt;div class=&quot;balico_readmore_taxonomy_flatsome balico_readmore_taxonomy_flatsome_less&quot; style=&quot;display: none&quot;&gt;&lt;a title=&quot;Thu gọn&quot; href=&quot;javascript:void(0);&quot;&gt;Thu gọn&lt;/a&gt;&lt;/div&gt;&#039;;
});
$(&#039;body&#039;).on(&#039;click&#039;,&#039;.balico_readmore_taxonomy_flatsome_show&#039;, function(){
wrap.removeAttr(&#039;style&#039;);
$(&#039;body .balico_readmore_taxonomy_flatsome_show&#039;).hide();
$(&#039;body .balico_readmore_taxonomy_flatsome_less&#039;).show();
});
$(&#039;body&#039;).on(&#039;click&#039;,&#039;.balico_readmore_taxonomy_flatsome_less&#039;, function(){
wrap.css(&#039;height&#039;, your_height+&#039;px&#039;);
$(&#039;body .balico_readmore_taxonomy_flatsome_show&#039;).show();
$(&#039;body .balico_readmore_taxonomy_flatsome_less&#039;).hide();
});
}
}
});
});
})(jQuery);
&lt;/script&gt;
&lt;?php
endif;
}

Kết quả ta sẽ nhận được như hình sau đây:

Xem thêm: WordPress là gì? Phân biệt WordPress.com và WordPress.org

Hướng dẫn thu gọn văn bản của mô tả sản phẩm

Để thu gọn văn bản trong phần mô tả sản phẩm, bạn hãy làm tương tự như phần hướng dẫn thu gọn văn bản của mô tả danh mục sản phẩm, tuy nhiên với bước 5 bạn chèn đoạn code sau đây vào file Functions.php nhé.

/*
* Đoạn code thu gọn nội dung bao gồm cả nút xem thêm và thu gọn lại sau khi đã click vào xem thêm
*/
add_action(‘wp_footer’,’balico_readmore_flatsome’);
function balico_readmore_flatsome(){
?>
<style>
.single-product div#tab-description {
overflow: hidden;
position: relative;
padding-bottom: 60px;
}
.fix_height{
max-height: 800px;
overflow: hidden;
position: relative;
}
.single-product .tab-panels div#tab-description.panel:not(.active) {
height: 0 !important;
}
.balico_readmore_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.balico_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;
}
.balico_readmore_flatsome a {
color: #318A00;
display: block;
}
.balico_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;
}
.balico_readmore_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #318A00;
}
.balico_readmore_flatsome_less:before {
display: none;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(window).on(‘load’, function(){
if($(‘.single-product div#tab-description’).length > 0){
let wrap = $(‘.single-product div#tab-description’);
let current_height = wrap.height();
let your_height = 800;
if(current_height > your_height){
wrap.addClass(‘fix_height’);
wrap.append(function(){
return ‘<div class=”balico_readmore_flatsome balico_readmore_flatsome_more”><a title=”Xem thêm” href=”javascript:void(0);”>Xem thêm</a></div>’;
});
wrap.append(function(){
return ‘<div class=”balico_readmore_flatsome balico_readmore_flatsome_less” style=”display: none;”><a title=”Xem thêm” href=”javascript:void(0);”>Thu gọn</a></div>’;
});
$(‘body’).on(‘click’,’.balico_readmore_flatsome_more’, function(){
wrap.removeClass(‘fix_height’);
$(‘body .balico_readmore_flatsome_more’).hide();
$(‘body .balico_readmore_flatsome_less’).show();
});
$(‘body’).on(‘click’,’.balico_readmore_flatsome_less’, function(){
wrap.addClass(‘fix_height’);
$(‘body .balico_readmore_flatsome_less’).hide();
$(‘body .balico_readmore_flatsome_more’).show();
});
}
}
});
});
})(jQuery);
</script>
<?php
}

Kết quả sau khi chèn Code như sau:

Tương tự bạn chèn đoạn CSS sau vào Custom CSS của theme mà bạn đang dùng.

/*nut doc them mo ta sp*/
.balico_readmore_flatsome a {
color: #318A00;
display: block;
border: 1px solid #2f80ed;
border-radius: 5px;
color: #2f80ed;
display: block;
margin: 0 auto;
max-width: 340px;
padding: 10px 5px;
text-align: center;
}

Toàn bộ hướng dẫn của tôi về cách để bạn có thể thay đổi rút gọn phần danh mục sản phẩm và nội dung trong phần sản phẩm riêng lẻ trên Woocommerce sử dụng Wodpress với Theme Flatsome đến đây là xong. Chúng tôi có cung cấp dịch vụ thiết kế Website bán hàng. Nếu quý khách hàng có nhu cầu sử dụng dịch vụ vui lòng liên hệ KINGNCT qua số Hotline: 0898485578 (rất vui để hỗ trợ bạn).

Xem thêm các tin hữu ích khác:

• 11 Lỗi thường gặp khi thiết kế Website cần tránh năm 2024
• Hướng dẫn cách Migrate dữ liệu trên AAPANEL
• Thiết kế Website nội thất chuyên nghiệp giá rẻ

Nội dung bài viết được tham khảo thêm từ: https://balico.com.vn/thu-gon-van-ban-cua-danh-muc-san-pham-va-mo-ta-san-pham/

Chí Toàn Nguyễn

Sinh ngày 19/03 tại huyện Chợ Mới, tỉnh An Giang. Ngay từ nhỏ tôi đã đã niềm đam mê với quảng cáo. Hành trình SEO của tôi bắt đầu vào năm 2016 khi tôi lần đầu tiên từ An Giang lên Sài Gòn để theo học ngành Kinh doanh quốc tế tại ĐH Tôn Đức Thắng. Năm 2018 – 2019, được sự giới thiệu của một người bạn tôi đã đến làm việc tại một Cổng Thông Tin về Tài Chính – Chứng Khoán và phụ trách mảng SEO. Trong quá trình này, tôi đã trao dồi thêm nhiều kỹ năng SEO khác ngoài kỹ năng viết Content và tối ưu các thẻ meta. Đến năm 2022 tôi bắt đầu thành lập Doanh nghiệp và đó cũng là lúc hành trình kinh doanh nghề SEO của chúng tôi bắt đầu.