Chia sẻ code tạo nút xem thêm rút gọn dành cho mô tả sản phẩm | code flatsome

Xin chào các bạn!

Cách sử dụng

Tạo child-theme nếu chưa có (để tránh mất code khi update theme).
Mở file functions.php của child-theme (hoặc theme đang dùng nếu bạn biết chắc).
Sao chép và dán đoạn code sau (hoặc đoạn tương tự từ các bài hướng dẫn) vào cuối file functions.php. Ví dụ đoạn cho phần mô tả chi tiết sản phẩm:

add_action('wp_footer','nh_readmore_flatsome');
function nh_readmore_flatsome(){
    ?>
    <style>
        .single-product .tab-panels {
            overflow: hidden;
            position: relative;
            padding-bottom: 25px;
        }
        .fix_height{
            max-height: 800px;
            overflow: hidden;
            position: relative;
        }
        .nh_readmore_flatsome {
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 10;
            bottom: 0;
            width: 100%;
            background: #fff;
        }
        .nh_readmore_flatsome:before {
            height: 55px;
            margin-top: -45px;
            content: "";
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
            display: block;
        }
        .nh_readmore_flatsome a {
            color: #14529b;
            display: block;
        }
        .nh_readmore_flatsome a:after {
            content: '';
            border-top: 6px solid #14529b;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            display: inline-block;
            margin-left: 5px;
        }
        .nh_readmore_flatsome_less a:after {
            border-top: 0;
            border-bottom: 6px solid #14529b;
        }
        .nh_readmore_flatsome_less:before {
            display: none;
        }
    </style>
    <script>
        (function($){
            $(window).on('load', function(){
                let wrap = $('.single-product .tab-panels'); // <-- đổi selector
                if(wrap.length){
                    let current_height = wrap.height();
                    let your_height = 800;
                    if(current_height > your_height){
                        wrap.addClass('fix_height');
                        wrap.append('<div class="nh_readmore_flatsome nh_readmore_flatsome_more"><a href="javascript:void(0);">Xem thêm</a></div>');
                        wrap.append('<div class="nh_readmore_flatsome nh_readmore_flatsome_less" style="display:none;"><a href="javascript:void(0);">Thu gọn</a></div>');

                        $('body').on('click','.nh_readmore_flatsome_more', function(){
                            wrap.removeClass('fix_height');
                            $('.nh_readmore_flatsome_more').hide();
                            $('.nh_readmore_flatsome_less').show();
                        });
                        $('body').on('click','.nh_readmore_flatsome_less', function(){
                            wrap.addClass('fix_height');
                            $('.nh_readmore_flatsome_less').hide();
                            $('.nh_readmore_flatsome_more').show();
                            $('html,body').animate({scrollTop: wrap.offset().top - 150}, 400);
                        });
                    }
                }
            });
        })(jQuery);
    </script>
    <?php
}

add_action('wp_footer','nh_readmore_flatsome');

function nh_readmore_flatsome(){

<style>

.single-product .tab-panels {

overflow: hidden;

position: relative;

padding-bottom: 25px;

}

.fix_height{

max-height: 800px;

overflow: hidden;

position: relative;

}

.nh_readmore_flatsome {

text-align: center;

cursor: pointer;

position: absolute;

z-index: 10;

bottom: 0;

width: 100%;

background: #fff;

}

.nh_readmore_flatsome:before {

height: 55px;

margin-top: -45px;

content: "";

background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

display: block;

}

.nh_readmore_flatsome a {

color: #14529b;

display: block;

}

.nh_readmore_flatsome a:after {

content: '';

border-top: 6px solid #14529b;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

display: inline-block;

margin-left: 5px;

}

.nh_readmore_flatsome_less a:after {

border-top: 0;

border-bottom: 6px solid #14529b;

}

.nh_readmore_flatsome_less:before {

display: none;

}

</style>

(function($){

$(window).on('load', function(){

let wrap = $('.single-product .tab-panels'); // <-- đổi selector

if(wrap.length){

let current_height = wrap.height();

let your_height = 800;

if(current_height > your_height){

wrap.addClass('fix_height');

wrap.append('<div class="nh_readmore_flatsome nh_readmore_flatsome_more"><a href="javascript:void(0);">Xem thêm</a></div>');

wrap.append('<div class="nh_readmore_flatsome nh_readmore_flatsome_less" style="display:none;"><a href="javascript:void(0);">Thu gọn</a></div>');

$('body').on('click','.nh_readmore_flatsome_more', function(){

wrap.removeClass('fix_height');

$('.nh_readmore_flatsome_more').hide();

$('.nh_readmore_flatsome_less').show();

});

$('body').on('click','.nh_readmore_flatsome_less', function(){

wrap.addClass('fix_height');

$('.nh_readmore_flatsome_less').hide();

$('.nh_readmore_flatsome_more').show();

$('html,body').animate({scrollTop: wrap.offset().top - 150}, 400);

});

}

});

})(jQuery);

</script>

<?php

}

Bạn có thể thay 800 thành số phù hợp với chiều cao bạn muốn hiển thị trước khi người dùng click “Xem thêm”.

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

Để thu gọn nội dung mô tả chi tiết cho danh mục sản phẩm theme Flatsome bạn tiến hành dán đoạn code sau vào file functions.php của theme Flatsome bạn đang kích hoạt

add_action('wp-footer','devvn_readmore_taxonomy_flatsome');
function devvn_readmore_taxonomy_flatsome(){
    if(is_woocommerce() && is_tax('product_cat')):
        ?>
        <style>
        .term-description {
            overflow: hidden;
            position: relative;
            margin-bottom: 20px;
            padding-bottom: 25px;
        }
        /* … style khác … */
        </style>
        <script>
        (function($){
            $(window).on('load', function(){
                if($('.term-description').length > 0){
                    var wrap = $('.term-description');
                    var current_height = wrap.height();
                    var your_height = 200; /* chỉnh theo nhu cầu */
                    if(current_height > your_height){
                        wrap.css('height', your_height+'px');
                        wrap.append(...); /* thêm nút Xem thêm */
                        ...
                    }
                }
            });
        })(jQuery);
        </script>
        <?php
    endif;
}

add_action('wp-footer','devvn_readmore_taxonomy_flatsome');

function devvn_readmore_taxonomy_flatsome(){

if(is_woocommerce() && is_tax('product_cat')):

<style>

.term-description {

overflow: hidden;

position: relative;

margin-bottom: 20px;

padding-bottom: 25px;

}

/* … style khác … */

</style>

(function($){

$(window).on('load', function(){

if($('.term-description').length > 0){

var wrap = $('.term-description');

var current_height = wrap.height();

var your_height = 200; /* chỉnh theo nhu cầu */

if(current_height > your_height){

wrap.css('height', your_height+'px');

wrap.append(...); /* thêm nút Xem thêm */

...

}

});

})(jQuery);

</script>

<?php

endif;

}

Tùy chỉnh & Lưu ý

Chiều cao (max-height / your_height): Số bạn đặt quyết định phần hiển thị trước khi nút “Xem thêm”. Bạn nên thử nhiều giá trị để phù hợp với nội dung site bạn.
Class và selector: Nếu theme bạn dùng có cấu trúc khác (ví dụ dùng tab dạng “section” hoặc tên class khác), bạn cần thay .single-product div#tab-description thành đúng selector của bạn. (Ví dụ: .product-page-sections .product-section:nth-child(1) > .row > .large-10)
Theme child: Nên dùng child theme để chèn code để tránh mất khi update.
Kiểm tra trên mobile/tablet: Đảm bảo việc hiển thị và nút “Xem thêm” vẫn hoạt động tốt.
Tương thích plugin/JS khác: Nếu site bạn có plugin đang làm lazy-load mô tả hoặc custom template, có thể cần điều chỉnh thêm.

thiết kế website

Chia sẻ code tạo nút xem thêm rút gọn dành cho mô tả sản phẩm | code flatsome

Cách sử dụng

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

Tùy chỉnh & Lưu ý

Để lại một bình luận Hủy

ĐĂNG KÝ DỊCH VỤ

ĐĂNG KÝ NHẬN TƯ VẤN VÀ BÁO GIÁ

Cách sử dụng

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

Tùy chỉnh & Lưu ý

Để lại một bình luận Hủy

ĐĂNG KÝ NHẬN TƯ VẤN VÀ BÁO GIÁ

Login