Trang chủCode functionBài viết
Code function

Hướng dẫn tạo hiệu ứng “Xem thêm / Thu gọn” cho phần mô tả sản phẩm

19/03/2025 1083 lượt xem admin Cập nhật: 04/12/2025
5/5 - (518 bình chọn)

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:

// 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
}

 

Chào ! Bạn thấy nội dung này thế nào?
webdy.vn
webdy.vn

Tạo web nhanh dùng thử miễn phí.

Chia sẻ ↗

Bài liên quan

×