Hướng dẫn tạo hiệu ứng “Xem thêm / Thu gọn” cho phần mô tả sản phẩm
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
|
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 94 95 96 |
// Hướng dẫn tạo hiệu ứng "Xem thêm / Thu gọn" cho phần mô tả sản phẩm function webdy_readmore_flatsome(){ ?> <style> .single-product div#tab-description { overflow: hidden; position: relative; padding-bottom: 25px; } .fix_height{ max-height: 800px; overflow: hidden; position: relative; } .single-product .tab-panels div#tab-description.panel:not(.active) { height: 0 !important; } .webdy_readmore_flatsome { text-align: center; cursor: pointer; position: absolute; z-index: 10; bottom: 0; width: 100%; background: #fff; } .webdy_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; } .webdy_readmore_flatsome a { color: #318A00; display: block; } .webdy_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; } border-left: 6px solid transparent; border-right: 6px solid transparent; .webdy_readmore_flatsome_less a:after { border-top: 0; border-bottom: 6px solid #318A00; } .webdy_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 = 2500; if(current_height > your_height){ wrap.addClass('fix_height'); wrap.append(function(){ return '<div class="webdy_readmore_flatsome webdy_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>'; }); wrap.append(function(){ return '<div class="webdy_readmore_flatsome webdy_readmore_flatsome_less" style="display: none;"><a title="Xem thêm" href="javascript:void(0);">Thu gọn</a></div>'; }); $('body').on('click','.webdy_readmore_flatsome_more', function(){ wrap.removeClass('fix_height'); $('body .webdy_readmore_flatsome_more').hide(); $('body .webdy_readmore_flatsome_less').show(); }); $('body').on('click','.webdy_readmore_flatsome_less', function(){ wrap.addClass('fix_height'); $('body .webdy_readmore_flatsome_less').hide(); $('body .webdy_readmore_flatsome_more').show(); }); } } }); }); })(jQuery); </script> <?php } |
Quý khách cần tư vấn thiết kế web giá rẻ, vui lòng nhấn nút bên dưới:
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
- MG Mỹ Đình – Thương hiệu xe hơi đến từ Anh quốc
- Hướng dẫn thêm chữ “Giá: ” vào trước giá sản phẩm trên trang sản phẩm và giỏ hàng
- Dao Phúc Sen – Làng nghề truyền thống Phúc Sen – Cao Bằng
- SEO Từ Khóa: Làm Thế Nào Để Nhét Từ Khóa Vào Bài Viết Một Cách Tự Nhiên?
- Hướng dẫn tùy chỉnh mô tả danh mục sản phẩm hiển thị sau danh sách sản phẩm thay vì phía trên
