Bài Viết, Tất cả bài viết, Thủ thuật wordpress

Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Đăng vào Tháng 4 2, 2025Tháng 4 2, 2025 bởi admin

02/04/2025

3 Phút đọc

59 Lượt xem

Đánh giá

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung dài của sản phẩm trên trang chi tiết sản phẩm của WooCommerce (hoặc bất kỳ trang đơn sản phẩm nào). Khi người dùng nhấn nút “Xem thêm”, nội dung sẽ được hiển thị đầy đủ, và khi nhấn “Thu gọn”, nội dung sẽ trở lại trạng thái ban đầu.

Các bước hướng dẫn:

1. Cài đặt đoạn mã vào trang web WordPress

Để bắt đầu sử dụng đoạn mã, bạn cần thực hiện các bước sau:

Bước 1: Thêm đoạn mã vào functions.php

Mở tệp functions.php trong theme WordPress của bạn.
Thêm đoạn mã sau vào cuối tệp:

add_action('wp_footer', 'muathemewpgiare_readmore_flatsome');
function muathemewpgiare_readmore_flatsome() {
    ?>
    <style>
        /* CSS cho phần hiển thị nội dung sản phẩm */
        .single-product .panel.entry-content {
            overflow: hidden;
            position: relative;
            padding-bottom: 25px;
            font-family: 'Arial', sans-serif;
            transition: all 0.3s ease;
        }

        /* Thu gọn nội dung khi chiều cao vượt quá giới hạn */
        .fix_height {
            max-height: 250px;
            overflow: hidden;
            position: relative;
            transition: max-height 0.5s ease;
        }

        /* Style cho nút "Xem thêm" */
        .muathemewpgiare_readmore_flatsome {
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 10;
            bottom: 0;
            width: 100%;
            padding-bottom: 20px;
            background: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            border-radius: 25px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        /* Hover nút "Xem thêm" */
        .muathemewpgiare_readmore_flatsome:hover {
            background-color: #3498db;
            color: #fff;
        }

        /* Nút "Xem thêm" với mũi tên */
        .muathemewpgiare_readmore_flatsome a {
            color: #3498db;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 16px;
            transition: color 0.3s ease;
        }

        .muathemewpgiare_readmore_flatsome a:after {
            content: '\f105'; /* Font Awesome chevron-right */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            margin-left: 10px;
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        /* Nút "Thu gọn" */
        .muathemewpgiare_readmore_flatsome_less {
            display: none;
            position: absolute;
            z-index: 10;
            bottom: 0;
            width: 100%;
            padding-bottom: 20px;
            background: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            border-radius: 25px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        .muathemewpgiare_readmore_flatsome_less a {
            color: #e67e22;
        }

        .muathemewpgiare_readmore_flatsome_less a:after {
            content: '\f104'; /* Font Awesome chevron-left */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            margin-left: 10px;
            font-size: 18px;
        }

        /* Hover nút "Thu gọn" */
        .muathemewpgiare_readmore_flatsome_less:hover {
            background-color: #e67e22;
            color: #fff;
        }
    </style>

    <script>
        (function($) {
            $(document).ready(function() {
                $(window).on('load', function() {
                    if ($('.single-product .panel.entry-content').length > 0) {
                        let wrap = $('.single-product .panel.entry-content');
                        let current_height = wrap.height();
                        let your_height = 250;

                        if (current_height > your_height) {
                            wrap.addClass('fix_height');
                            wrap.append(function() {
                                return '<div class="muathemewpgiare_readmore_flatsome muathemewpgiare_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
                            });
                            wrap.append(function() {
                                return '<div class="muathemewpgiare_readmore_flatsome muathemewpgiare_readmore_flatsome_less" style="display: none;"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
                            });

                            // Sự kiện click nút "Xem thêm"
                            $('body').on('click', '.muathemewpgiare_readmore_flatsome_more', function() {
                                wrap.removeClass('fix_height');
                                $('.muathemewpgiare_readmore_flatsome_more').fadeOut(200);
                                $('.muathemewpgiare_readmore_flatsome_less').fadeIn(200);
                            });

                            // Sự kiện click nút "Thu gọn"
                            $('body').on('click', '.muathemewpgiare_readmore_flatsome_less', function() {
                                wrap.addClass('fix_height');
                                $('.muathemewpgiare_readmore_flatsome_less').fadeOut(200);
                                $('.muathemewpgiare_readmore_flatsome_more').fadeIn(200);
                            });
                        }
                    }
                });
            });
        })(jQuery);
    </script>
    <?php
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

add_action('wp_footer', 'muathemewpgiare_readmore_flatsome');

function muathemewpgiare_readmore_flatsome() {

<style>

/* CSS cho phần hiển thị nội dung sản phẩm */

.single-product .panel.entry-content {

overflow: hidden;

position: relative;

padding-bottom: 25px;

font-family: 'Arial', sans-serif;

transition: all 0.3s ease;

}

/* Thu gọn nội dung khi chiều cao vượt quá giới hạn */

.fix_height {

max-height: 250px;

overflow: hidden;

position: relative;

transition: max-height 0.5s ease;

}

/* Style cho nút "Xem thêm" */

.muathemewpgiare_readmore_flatsome {

text-align: center;

cursor: pointer;

position: absolute;

z-index: 10;

bottom: 0;

width: 100%;

padding-bottom: 20px;

background: rgba(255, 255, 255, 0.9);

font-size: 16px;

border-radius: 25px;

font-weight: bold;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

transition: background-color 0.3s ease;

}

/* Hover nút "Xem thêm" */

.muathemewpgiare_readmore_flatsome:hover {

background-color: #3498db;

color: #fff;

}

/* Nút "Xem thêm" với mũi tên */

.muathemewpgiare_readmore_flatsome a {

color: #3498db;

font-weight: 600;

text-transform: uppercase;

font-size: 16px;

transition: color 0.3s ease;

}

.muathemewpgiare_readmore_flatsome a:after {

content: '\f105'; /* Font Awesome chevron-right */

font-family: 'Font Awesome 5 Free';

font-weight: 900;

margin-left: 10px;

font-size: 18px;

transition: transform 0.3s ease;

}

/* Nút "Thu gọn" */

.muathemewpgiare_readmore_flatsome_less {

display: none;

position: absolute;

z-index: 10;

bottom: 0;

width: 100%;

padding-bottom: 20px;

background: rgba(255, 255, 255, 0.9);

font-size: 16px;

border-radius: 25px;

font-weight: bold;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

transition: background-color 0.3s ease;

}

.muathemewpgiare_readmore_flatsome_less a {

color: #e67e22;

}

.muathemewpgiare_readmore_flatsome_less a:after {

content: '\f104'; /* Font Awesome chevron-left */

font-family: 'Font Awesome 5 Free';

font-weight: 900;

margin-left: 10px;

font-size: 18px;

}

/* Hover nút "Thu gọn" */

.muathemewpgiare_readmore_flatsome_less:hover {

background-color: #e67e22;

color: #fff;

}

</style>

(function($) {

$(document).ready(function() {

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

if ($('.single-product .panel.entry-content').length > 0) {

let wrap = $('.single-product .panel.entry-content');

let current_height = wrap.height();

let your_height = 250;

if (current_height > your_height) {

wrap.addClass('fix_height');

wrap.append(function() {

return '<div class="muathemewpgiare_readmore_flatsome muathemewpgiare_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';

});

wrap.append(function() {

return '<div class="muathemewpgiare_readmore_flatsome muathemewpgiare_readmore_flatsome_less" style="display: none;"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';

});

// Sự kiện click nút "Xem thêm"

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

wrap.removeClass('fix_height');

$('.muathemewpgiare_readmore_flatsome_more').fadeOut(200);

$('.muathemewpgiare_readmore_flatsome_less').fadeIn(200);

});

// Sự kiện click nút "Thu gọn"

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

wrap.addClass('fix_height');

$('.muathemewpgiare_readmore_flatsome_less').fadeOut(200);

$('.muathemewpgiare_readmore_flatsome_more').fadeIn(200);

});

}

});

})(jQuery);

</script>

<?php

}

2. Lợi ích của tính năng

Cải thiện trải nghiệm người dùng: Người dùng không phải cuộn trang dài dòng, giúp họ dễ dàng xem thông tin sản phẩm mà không bị quá tải bởi nội dung dài.
Tăng tốc độ tải trang: Giảm bớt lượng nội dung tải ban đầu giúp tăng tốc độ tải trang, tạo trải nghiệm người dùng mượt mà hơn.
Thẩm mỹ: Chức năng này giúp tạo ra giao diện sạch sẽ và dễ nhìn hơn, đặc biệt đối với các website có nhiều nội dung.

Kết luận

Đoạn mã này mang đến tính năng tiện lợi để thu gọn và mở rộng nội dung sản phẩm trên website WordPress của bạn. Với một số tùy chỉnh đơn giản và tích hợp vào functions.php, bạn có thể nhanh chóng cải thiện giao diện và trải nghiệm người dùng cho các trang sản phẩm trên trang web của mình.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

10 Mẫu Tiêu Đề SEO Cực Hút Click

Viết tiêu đề SEO như thế nào để người dùng phải nhấp vào bài viết của bạn ngay lập tức?Đây là câu hỏi quan trọng...
Chèn icon trong bài viết SEO là lợi hay hại

Trong quá trình tối ưu nội dung chuẩn SEO, nhiều người viết thường sử dụng icon (emoji, biểu tượng hình ảnh nhỏ) với mong muốn...
Top Những Sai Lầm Khi Viết Tiêu Đề SEO – Tránh Ngay!

Mục Lục1. Cài đặt đoạn mã vào trang web WordPress2. Lợi ích của tính năngKết luậnViết tiêu đề sai – Mất top, mất traffic! Tiêu...
Top 10 Framework JavaScript Phổ Biến Nhất 2025 – Bạn Phù Hợp Với Cái Nào?

Chào bạn, người đang tìm kiếm công cụ phù hợp để phát triển web trong năm 2025! Nếu bạn đang phân vân giữa các framework...
Tự Học JavaScript Từ Con Số 0: Lộ Trình Học, Tài Nguyên, Mẹo Học Dễ Nhớ

Nếu bạn là sinh viên CNTT, hay đơn giản là một người mới bắt đầu học lập trình, thì JavaScript chính là lựa chọn lý...
Tất tần tật về ngôn ngữ lập trình javaScript

Chào mừng bạn đến với bài viết chuyên sâu về JavaScript – ngôn ngữ lập trình không thể thiếu trong mọi trang web hiện đại....
JavaScript SEO: Cách Giúp Website JS Nặng Trình Vẫn Lên Top Google

Khi nói đến việc phát triển website hiện đại, JavaScript đã trở thành công cụ chủ lực. Tuy nhiên, một trong những thách thức lớn...
JavaScript Là Gì? Và Vì Sao Website Thời Nay Không Thể Thiếu Nó?

Nếu ví một trang web là một cơ thể sống, thì HTML là khung xương, CSS là quần áo và ngoại hình, còn JavaScript chính...
Bật tính năng đánh giá sản phẩm WooCommerce chỉ với vài dòng code

Nếu bạn đang sử dụng WooCommerce để xây dựng website bán hàng và muốn bật tính năng đánh giá sản phẩm cho tất cả sản...
Cách Chống Spam Bình Luận Trong WordPress Hiệu Quả Và Chuyên Nghiệp [2025]

Mục Lục1. Cài đặt đoạn mã vào trang web WordPress2. Lợi ích của tính năngKết luậnTại sao cần chống spam bình luận trong WordPress? Nếu...
Ưu điểm và Nhược điểm của Plugin Nulled WordPress

Trong quá trình xây dựng website bằng WordPress, chắc hẳn bạn đã từng nghe đến cụm từ “plugin nulled WordPress” hay còn gọi là plugin...
Mua Theme WordPress Chính Hãng – Tìm Hiểu Các Loại Theme Hàng Đầu Cho Website Của Bạn

Khi bắt đầu xây dựng một website, việc chọn lựa theme phù hợp là bước đầu tiên cực kỳ quan trọng. Theme không chỉ giúp...
Hướng Dẫn Thêm Mã Script Vào Theme Flatsome Một Cách Khoa Học

Một website tốt không chỉ đẹp – mà còn phải hiểu được chính mình.Để hiểu, bạn cần dữ liệu. Và dữ liệu đến từ đâu?Từ...
Top theme WordPress bất động sản đẹp, chuyên nghiệp và dễ dùng nhất 2025

Trong thời đại mà mọi khách hàng đều “google trước khi gọi”, một website bất động sản đẹp chính là “mặt tiền online” không thể...
🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Bạn đang sử dụng theme Flatsome cho website WordPress? Bạn muốn tối ưu hiệu năng, giao diện và trải nghiệm người dùng mà không cần...
WordPress 6.8 có gì mới? Đánh giá chi tiết & thực tế sau khi trải nghiệm bản cập nhật mới nhất

Tóm tắt nhanh: WordPress 6.8 ra mắt với hàng loạt cải tiến về hiệu suất, bảo mật và trải nghiệm người dùng. Trải nghiệm thực...