Chào mừng bạn đã ghé thăm leekhoa.com. Hôm nay mình sẽ hướng dẫn các bạn thu gọn nội dung mô tả sản phẩm và nội dung mô tả danh mục (category description) trong flatsome có sử dụng woocommerce chỉ với một vài thao tác đơn giản.
Tại sao cần thu gọn mô tả chi tiết sản phẩm
Thực ra trong chúng ta ai cũng hiểu, một trang web bán hàng thì thường chỉ tập trung vào phần hình ảnh + giá + mô tả ngắn cho sản phẩm. Bởi có rất nhiều sản phẩm người dùng chỉ quan tâm đến những thông tin tổng quát về sản phẩm cần mua, nhiều loại sản phẩm thì phần mô tả chi tiết không thực sự cần thiết (có cũng được không có cũng không sao).

Nhưng dù gì thì mỗi sản phẩm chúng ta đều nên viết chi tiết để khách hàng cần có thể biết được thông tin đầy đủ về sản phẩm và một phần nữa là tốt cho SEO. Một bài viết bán hàng muốn on top google không phải là điều dễ dàng, bên cạnh rất nhiều yếu tố thì content là yếu tố quan trọng nhất. Cũng vì lẽ đó mà nhiều sản phẩm bạn sẽ viết rất dài, điều này vô tình làm rối người mua hàng.
Vì vậy, để đảm bảo các yếu tố được giữ nguyên và giá trị website vẫn an toàn thì chúng ta cần thu gọn nội dung phần mô tả chi tiết sản phẩm. Với các bước Copy + Paste sau đây là bạn đã có thể thu gọn nội dung chi tiết sản phẩm trong woocomerce rồi.
Lưu ý: Cách này chỉ áp dụng cho các website sử dụng Theme Flatsome thôi nhé. Đối với các theme khác thì bạn có thể custom lại hoặc tìm kiếm trên google với từ khóa “readmore html”.
Cách thu gọn mô tả chi tiết sản phẩm trong flatsome
Bước 1: Chúng ta vào phần Giao diện –> Sửa giao diện –> Function.php (Để đảm bảo website không gặp vấn đề khi sửa thì bạn nên sử dụng child theme. Thường thì khi khởi tạo website bằng flatsome, trình khởi tạo đều có hỏi về việc tạo child theme, trong đó có sẵn 2 file là style.css và function.php).
Bước 2: Dán đoạn code này vào function.php của child theme:
Lưu ý: Trong code có đoạn var your_height = 300; đây là chiều dài đoạn văn được hiển thị ra. Bạn có thể giảm bớt hoặc tăng thêm theo ý muốn. Chỉ cần sửa số 300 thành một con số bất kỳ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
/* * Code thu gon mo ta chi tiet san pham trong woocomerce */ add_action('wp_footer','devvn_readmore_flatsome'); function devvn_readmore_flatsome(){ ?> <style> .single-product div#tab-description { overflow: hidden; position: relative; padding-bottom: 25px; } .single-product .tab-panels div#tab-description.panel:not(.active) { height: 0 !important; } .devvn_readmore_flatsome { text-align: center; cursor: pointer; position: absolute; z-index: 10; bottom: 0; width: 100%; background: #fff; } .devvn_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; } .devvn_readmore_flatsome a { color: #318A00; display: block; } .devvn_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; } .devvn_readmore_flatsome_less a:after { border-top: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #318A00; } .devvn_readmore_flatsome_less:before { display: none; } </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="devvn_readmore_flatsome devvn_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>'; }); wrap.append(function(){ return '<div class="devvn_readmore_flatsome devvn_readmore_flatsome_less" style="display: none;"><a title="Xem thêm" href="javascript:void(0);">Thu gọn</a></div>'; }); $('body').on('click','.devvn_readmore_flatsome_more', function(){ wrap.removeAttr('style'); $('body .devvn_readmore_flatsome_more').hide(); $('body .devvn_readmore_flatsome_less').show(); }); $('body').on('click','.devvn_readmore_flatsome_less', function(){ wrap.css('height', your_height+'px'); $('body .devvn_readmore_flatsome_less').hide(); $('body .devvn_readmore_flatsome_more').show(); }); } } }); }) })(jQuery) </script> <?php } |
Thu gọn nội dung mô tả chi tiết danh mục sản phẩm
Cũng giống như phần thu gọn nội dung mô tả sản phẩm, phần danh mục sản phẩm (category) cũng có thể thêm mô tả chi tiết, và bạn cũng có thể thu gọn bằng đoạn code dưới đây:

Bước 1: Chúng ta cũng vào file function.php trong child theme như trên nhé.
Bước 2: Copy và dán đoạn code này vào:
Lưu ý: Trong code có đoạn var your_height = 300; đây là chiều dài đoạn văn được hiển thị ra. Bạn có thể giảm bớt hoặc tăng thêm theo ý muốn. Chỉ cần sửa số 300 thành một con số bất kỳ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
/* * 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','devvn_readmore_taxonomy_flatsome'); function devvn_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; } .devvn_readmore_taxonomy_flatsome { text-align: center; cursor: pointer; position: absolute; z-index: 10; bottom: 0; width: 100%; background: #fff; } .devvn_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; } .devvn_readmore_taxonomy_flatsome a { color: #318A00; display: block; } .devvn_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; } .devvn_readmore_taxonomy_flatsome_less:before { display: none; } .devvn_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="devvn_readmore_taxonomy_flatsome devvn_readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>'; }); wrap.append(function(){ return '<div class="devvn_readmore_taxonomy_flatsome devvn_readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>'; }); $('body').on('click','.devvn_readmore_taxonomy_flatsome_show', function(){ wrap.removeAttr('style'); $('body .devvn_readmore_taxonomy_flatsome_show').hide(); $('body .devvn_readmore_taxonomy_flatsome_less').show(); }); $('body').on('click','.devvn_readmore_taxonomy_flatsome_less', function(){ wrap.css('height', your_height+'px'); $('body .devvn_readmore_taxonomy_flatsome_show').show(); $('body .devvn_readmore_taxonomy_flatsome_less').hide(); }); } } }); }) })(jQuery) </script> <?php endif; } |
Cảm ơn bác đã chia sẻ