Tạo nút rút gọn, hiển thị thông tin popup ở trang single product

Hôm nay mình sẽ chia sẽ các bạn cách làm thu gọn nội dung ở trang single product và sau khi xem thêm sẽ hiển thị popup, nhằm tạo cho người dùng tập trung hơn vào việc đọc nội dung.

Copy đoạn code bên dưới bỏ vào file functions.php của theme đang dùng.

// Tạo nút rút gọn, show popup singleproduct
function click_show(){
 ?>
<div class="closed-popup-info-single">
    <span>Đóng</span>
</div>
    <style>
        .closed-popup-info-single:before{
            transform: rotate(45deg);
        }
        .closed-popup-info-single:after{
            transform: rotate(-45deg);
        }
        .closed-popup-info-single:before, .closed-popup-info-single:after{
            background-color: #333;
            content: "";
            left: 13px;
            height: 14px;
            position: absolute;
            top: 10px;
            width: 1px;
        }
        .closed-popup-info-single{
            position: absolute;
            top: 0;
            right: 0;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            color: #333;
            cursor: pointer;
            float: right;
            line-height: 21px;
            padding: 7px;
            text-align: right;
            width: 67px;
        }
        .single-product div.woocommerce-tabs {
            overflow: hidden;
            position: relative;
            height:100%;
        }
        .single-product .tab-panels div.woocommerce-tabs .panel:not(.active) {
            height: 0 !important;
        }
        .nmn_readmore_flatsome, .nmn_readmore_flatsome_img {
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 10;
            bottom: 0;
            width: 100%;
            background: #fff;
        }
        .nmn_readmore_flatsome:before, .nmn_readmore_flatsome_img: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;
        }
        .nmn_readmore_flatsome a, .nmn_readmore_flatsome_img a {
            border: 1px solid #007e4b;
            border-radius: 5px;
            color: #007e4b;
            display: block;
            margin: 0 auto;
            max-width: 340px;
            padding: 10px 5px;
            text-align: center;
        }
        .nmn_readmore_flatsome a:after, .nmn_readmore_flatsome_img 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;
        }
        .popup-info{
            position:fixed;
            width:100%;
            left:0;
            height:100%;
            background-color:#000000;
            top:0;
            z-index:999999;
        }
        
        .popup-info .full-intro {
            max-width: 760px;
    		margin: 0 auto;
            height:100%;
        }
        .full-intro .nav>li.active>a, 	.full-intro .nav>li a:hover{
            color:yellow !important;
        }
        .full-intro .nav>li.active>a:before, .full-intro .nav>li:hover a:before,  .social-icons{
            display:none;
        }
        .full-intro .woocommerce-tabs .tab-panels{
            overflow: scroll !important;
            background-color: #fff;
            padding: 5%;
            display: block;
            height: 100%;
        }
        .closed-popup-info-single{
            display:none;
        }
        .popup-info .closed-popup-info-single{
            display:block !important;
        }
        .full-intro .product-tabs a{
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            line-height: 19px;
            margin: 0 6px;
            padding: 10px 12px;
            font-weight:400;
        }
        @media only screen and (max-width: 48em) {
             .product-tabs {
                display: flex;
                flex-direction: row;
            }
            .product-tabs li a{
                padding: 5px;
                color:#000000;
                font-size:16px;
                font-weight:600;
            }
            .product-tabs li{
                width: max-content;
            }
            .popup-info .closed-popup-info-single >span{
                display:none;
            }
            .closed-popup-info-single{
                height: 30px;
   				width: 30px;
            }
            .closed-popup-info-single:before, .closed-popup-info-single:after {
                top: 8px;
            }
        }
    </style>
    <script>
        (function($){
            $(document).ready(function(){
            
                 $(window).on('load', function(){
                    if($('.single-product div#tab-description').length > 0){
                        var wrap = $('.single-product div.woocommerce-tabs');
                        var current_height = wrap.height();
                        var your_height = 500;
                        if(current_height > your_height){
                            wrap.css('height', your_height+'px');
                            wrap.append(function(){
                                return '<div class="nmn_readmore_flatsome"><a title="Xem thêm thông tin" href="javascript:void(0);">Xem thêm thông tin</a></div>';
                            });
                            $('body').on('click','.nmn_readmore_flatsome', function(){
                                $('.product-main .row .product-info ').wrap('<div class="popup-info"></div>');
                               wrap.removeAttr('style');
                               $('body .nmn_readmore_flatsome').remove();
                               $(".product-info ").addClass("full-intro")
                            });
                        }
                    }
                     $('body').on('click','.closed-popup-info-single', function(){
                         $('.product-main .row .product-info ').unwrap('.popup-info');
                         wrap.css('height', your_height+'px');
                         wrap.append(function(){
                            return '<div class="nmn_readmore_flatsome"><a title="Xem thêm thông tin" href="javascript:void(0);">Xem thêm thông tin</a></div>';
                                });
                        $(".product-info ").removeClass("full-intro")
                     });
                     
                    
                });
            })
        })(jQuery)
    </script>
    <?php
}

add_action( 'woocommerce_product_after_tabs', 'click_show', 1 );