Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục

Bài này sẽ giúp các bạn thu gọn nội dung chi tiết sản phẩm cho theme Flatsome. Ví dụ nội dung chi tiết quá dài mà bạn muốn hạn chế lại để khi người dung muốn xem thêm thì click xem thêm còn không thì để gọn lại cho web nó gọn hơn.

Code thu gọn nội dung chi tiết sản phẩm

Các bạn dán đoạn code sau vào functions.php

// code thu gọn nội dung chi tiết sản phẩm
add_action('wp_footer','itcodewp_readmore_flatsome');
function itcodewp_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;
        }
        .itcodewp_readmore_flatsome {
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 10;
            bottom: -1px;
            width: 100%;
            background: #fff;
height: 50px;
        }
        .itcodewp_readmore_flatsome:before {
            height: 45px;
            margin-top: -45px;
            content: "";
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
            display: block;
        }
        .itcodewp_readmore_flatsome a {
color: #484545;
/* display: block; */
background-color: #ffffff;
padding: 8px 70px;
width: 200px;
margin: auto;
border-radius: 6px;
box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
}
        .itcodewp_readmore_flatsome a:after {
            content: '';
            width: 0;
            right: 0;
            border-top: 6px solid #484545;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            display: inline-block;
            vertical-align: middle;
            margin: -2px 0 0 5px;
        }
        .itcodewp_readmore_flatsome_less a:after {
            border-top: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #fff;
        }
        .itcodewp_readmore_flatsome_less:before {
            display: none;
        }
.itcodewp_readmore_flatsome_less a:after {
content: '';
width: 0;
right: 0;
border-bottom: 6px solid #484545;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.itcodewp_readmore_flatsome:hover a {
background: #FEF2F2;
border: 1px solid #D70018;
color: #D70018;
}
.itcodewp_readmore_flatsome_less:hover a:after {
border-bottom: 6px solid #D70018;
}
.itcodewp_readmore_flatsome_more:hover a:after {
border-top: 6px solid #D70018;
}
    </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 = 400;
                        if(current_height > your_height){
                            wrap.css('height', your_height+'px');
                            wrap.append(function(){
                                return '<div class="itcodewp_readmore_flatsome itcodewp_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
                            });
                            wrap.append(function(){
                                return '<div class="itcodewp_readmore_flatsome itcodewp_readmore_flatsome_less" style="display: none;"><a title="Thu ngọn" href="javascript:void(0);">Thu gọn</a></div>';
                            });
                            $('body').on('click','.itcodewp_readmore_flatsome_more', function(){
                                wrap.removeAttr('style');
                                $('body .itcodewp_readmore_flatsome_more').hide();
                                $('body .itcodewp_readmore_flatsome_less').show();
                            });
                            $('body').on('click','.itcodewp_readmore_flatsome_less', function(){
                                wrap.css('height', your_height+'px');
                                $('body .itcodewp_readmore_flatsome_less').hide();
                                $('body .itcodewp_readmore_flatsome_more').show();
                            });
                        }
                    }
                });
            });
        })(jQuery);
    </script>
    <?php
}

Các bạn chú ý tại dòng 91 có giá trị là 400. Đó chính là chiều dài của khung nội dung. Nếu muốn khung nội dung dài hay ngắn thì hãy chỉnh sửa thông số đó cho phù hợp nhé.

Code thu gọn nội dung phần mô tả danh mục sản phẩm

// code thu gọn nội dung chi tiết sản phẩm
add_action('wp_footer','itcodewp_readmore_flatsome');
function itcodewp_readmore_flatsome(){
    if(is_woocommerce() && is_tax('product_cat')):
    ?>
    <style>
        .term-description {
            overflow: hidden;
            position: relative;
            padding-bottom: 25px;
        }
        .term-description {
            height: 0 !important;
        }
        .itcodewp_readmore_flatsome {
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 10;
            bottom: -1px;
            width: 100%;
            background: #fff;
height: 50px;
        }
        .itcodewp_readmore_flatsome:before {
            height: 45px;
            margin-top: -45px;
            content: "";
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
            display: block;
        }
        .itcodewp_readmore_flatsome a {
color: #484545;
/* display: block; */
background-color: #ffffff;
padding: 8px 70px;
width: 200px;
margin: auto;
border-radius: 6px;
box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
}
        .itcodewp_readmore_flatsome a:after {
            content: '';
            width: 0;
            right: 0;
            border-top: 6px solid #484545;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            display: inline-block;
            vertical-align: middle;
            margin: -2px 0 0 5px;
        }
        .itcodewp_readmore_flatsome_less a:after {
            border-top: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #fff;
        }
        .itcodewp_readmore_flatsome_less:before {
            display: none;
        }
.itcodewp_readmore_flatsome_less a:after {
content: '';
width: 0;
right: 0;
border-bottom: 6px solid #484545;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.itcodewp_readmore_flatsome:hover a {
background: #FEF2F2;
border: 1px solid #D70018;
color: #D70018;
}
.itcodewp_readmore_flatsome_less:hover a:after {
border-bottom: 6px solid #D70018;
}
.itcodewp_readmore_flatsome_more:hover a:after {
border-top: 6px solid #D70018;
}
    </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 = 400;
                        if(current_height > your_height){
                            wrap.css('height', your_height+'px');
                            wrap.append(function(){
                                return '<div class="itcodewp_readmore_flatsome itcodewp_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
                            });
                            wrap.append(function(){
                                return '<div class="itcodewp_readmore_flatsome itcodewp_readmore_flatsome_less" style="display: none;"><a title="Thu ngọn" href="javascript:void(0);">Thu gọn</a></div>';
                            });
                            $('body').on('click','.itcodewp_readmore_flatsome_more', function(){
                                wrap.removeAttr('style');
                                $('body .itcodewp_readmore_flatsome_more').hide();
                                $('body .itcodewp_readmore_flatsome_less').show();
                            });
                            $('body').on('click','.itcodewp_readmore_flatsome_less', function(){
                                wrap.css('height', your_height+'px');
                                $('body .itcodewp_readmore_flatsome_less').hide();
                                $('body .itcodewp_readmore_flatsome_more').show();
                            });
                        }
                    }
                });
            });
        })(jQuery);
    </script>
    <?php
    endif;
}

Với cách trên mình đang áp dụng cho theme Flatsome, các bạn chỉ cần dán code vào là hoạt động được ngay.

Với các loại theme khác thực ra cũng không quá khó chỉ cần thay đổi vài chỗ Class cho phù hợp với Class của theme đó là được. Nếu bạn nào dùng theme khác hoặc chưa làm được, comment xuống phía dưới để mình hỗ trợ nhé.

Xem thêm: Cách thêm mục lục cho mô tả danh mục sản phẩm