Thêm nút xem thêm và thu gọn cho danh mục, chi tiết sản phẩm WooCommerce trên theme Flatsome 3
Wordpress Snippets,  Wordpress Themes

Thêm nút xem thêm và thu gọn cho danh mục, chi tiết sản phẩm WooCommerce trên theme Flatsome

Hướng dẫn thêm nút xem thêm và thu gọn cho danh mục, chi tiết sản phẩm WooCommerce wordpress, với đoạn code này bạn có thể rút gọn nội dung cho sản phẩm, danh mục, bài viết hoặc thậm chí tất cả đoạn nào muốn làm ngắn lại trong wordpress.

Hình minh họa sau khi thêm thành công:

Thêm nút xem thêm và thu gọn cho danh mục, chi tiết sản phẩm WooCommerce trên theme Flatsome 4

 

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

Với đoạn code này bạn có thẻ thu gọn nội dung phần mô tả của danh mục sản phẩm WooCommerce một cách dễ dàng, khi thêm code sẽ xuất hiện nút xem thêm và thu gọn sản phẩm, bạn hoặc khách hàng có thể click để xem nhiều nội dung danh mục hoặc sản phẩm hơn rất tiện.

/*
 * CODE THU GỌN MÔ TẢ DANH MỤC SẢN PHẨM FLATSOME
 * 
*/
add_action('wp_footer','mdsco_readmore_taxonomy_flatsome');
function mdsco_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;
            }
            .mdsco_readmore_taxonomy_flatsome {
                text-align: center;
                cursor: pointer;
                position: absolute;
                z-index: 10;
                bottom: 0;
                width: 100%;
                background: #fff;
            }
            .mdsco_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;
            }
            .mdsco_readmore_taxonomy_flatsome a {
                color: #318A00;
                display: block;
            }
            .mdsco_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;
            }
            .mdsco_readmore_taxonomy_flatsome_less:before {
                display: none;
            }
            .mdsco_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="mdsco_readmore_taxonomy_flatsome mdsco_readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
                                });
                                wrap.append(function(){
                                    return '<div class="mdsco_readmore_taxonomy_flatsome mdsco_readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
                                });
                                $('body').on('click','.mdsco_readmore_taxonomy_flatsome_show', function(){
                                    wrap.removeAttr('style');
                                    $('body .mdsco_readmore_taxonomy_flatsome_show').hide();
                                    $('body .mdsco_readmore_taxonomy_flatsome_less').show();
                                });
                                $('body').on('click','.mdsco_readmore_taxonomy_flatsome_less', function(){
                                    wrap.css('height', your_height+'px');
                                    $('body .mdsco_readmore_taxonomy_flatsome_show').show();
                                    $('body .mdsco_readmore_taxonomy_flatsome_less').hide();
                                });
                            }
                        }
                    });
                });
            })(jQuery);
        </script>
    <?php
    endif;
}

Code thu gọn nội dung của mô tả sản phẩm

Với đoạn code này bạn có thể thu gọn nội dung phần mô tả  sản phẩm WooCommerce một cách dễ dàng

/*
* CODE THU GỌN NỘI DUNG SẢN PHẨM CHO THEME FLATSOME
*/
add_action('wp_footer','mdsco_readmore_flatsome');
function mdsco_readmore_flatsome(){
    ?>
    <style>
        .single-product div#tab-description {
            overflow: hidden;
            position: relative;
        }
        .single-product .tab-panels div#tab-description.panel:not(.active) {
            height: 0 !important;
        }
        .mdsco_readmore_flatsome {
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 9999;
            bottom: 0;
            width: 100%;
            background: #fff;
        }
        .mdsco_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;
        }
        .mdsco_readmore_flatsome a {
            color: #318A00;
            display: block;
        }
        .mdsco_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;
        }
    </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="mdsco_readmore_flatsome"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
                            });
                            $('body').on('click','.mdsco_readmore_flatsome', function(){
                                wrap.removeAttr('style');
                                $('body .mdsco_readmore_flatsome').remove();
                            });
                        }
                    }
                });
            });
        })(jQuery);
    </script>
    <?php
}

 

Chúc các bạn thành công 🙂

Avatar of jamesblackvn

Tui là jamesblackvn!

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.