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

11 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.

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

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!

Thủ thuật Css Tạo Hiệu Ứng Line Effect Khi Rê Chuột Vào Bài Viết WordPress

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một hiệu ứng line effect độc đáo và bắt mắt khi rê chuột...
1001 Lưu Ý Cẩn Thận Trong SEO 2025 Trên Google

SEO (Search Engine Optimization) luôn là một lĩnh vực không ngừng thay đổi, và vào năm 2025, Google đã có những cập nhật quan trọng...
Tối Ưu Hóa SEO Cho Các Doanh Nghiệp Nhỏ Năm 2025 Mới Nhất

Trong kinh doanh hiện đại, sự hiện diện trực tuyến không chỉ là một lợi thế mà còn là điều cần thiết cho sự thành...
Code chức năng wordpress yêu cầu thay đổi mật khẩu định kỳ

Dưới đây là code hoàn chỉnh để yêu cầu người dùng WordPress thay đổi mật khẩu định kỳ mỗi 6 tháng. Chức năng chính của...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Hướng Dẫn Làm Sạch Header WordPress Để Tăng Tốc Độ Tải Trang Và Cải Thiện SEO

Khi sử dụng WordPress, nhiều người dùng không để ý rằng phần Header của website chứa rất nhiều mã không cần thiết. Những đoạn mã...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

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ận1. Giới Thiệu Code Tự động Cập Nhật Giá Khi...
Hướng Dẫn Chi Tiết Viết Bài Chuẩn SEO Từ A Đến Z Dễ Hiểu Và Hiệu Quả

SEO có thể là một thế giới rộng lớn với vô vàn thuật ngữ và chiến lược, nhưng đừng lo! Nếu bạn muốn bài viết...
Hướng Dẫn Cách Thiết Kế Giao Diện Người Dùng (UI) Hiệu Quả

Trong thời đại số hóa mạnh mẽ hiện nay, thiết kế giao diện người dùng (UI) không chỉ đơn thuần là việc trang trí một...
Tại Sao Tối Ưu Hóa Tìm Kiếm Giọng Nói Là Một Xu Hướng Mới?

Ngày nay, việc tìm kiếm thông tin qua giọng nói đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày của nhiều...
Tại Sao Tốc độ Tải Trang Lại Quan Trọng Cho SEO?

Tốc độ tải trang không chỉ là một yếu tố kỹ thuật mà còn ảnh hưởng trực tiếp đến thành công của một website trong...
Hướng dẫn mã hóa code khi người dùng viewsource

Khi phát triển ứng dụng web, bảo mật luôn là một yếu tố quan trọng cần được chú trọng. Một trong những vấn đề phổ...
Hướng dẫn tạo code icon bố cục 10 cột giống tiki wordpress

Để tạo một bố cục tương tự như trên, với 10 cột và các icon được bố trí giống Tiki trong WordPress, bạn cần sử...
Những Lợi Ích Của Việc Sử Dụng Hình Ảnh Trong Nội Dung Website

Việc sử dụng hình ảnh trong nội dung không chỉ đơn thuần là một lựa chọn mà đã trở thành một yêu cầu thiết yếu....
Thông tin cần thiết để thiết kế website cá nhân hiệu quả

Trong thế giới số hóa hiện nay, sở hữu một website cá nhân là một trong những cách tốt nhất để xây dựng thương hiệu...
Cách Xây Dựng Một Danh Sách Email Chất Lượng Tại Website

Trong thời kỳ công nghệ số hiện nay, việc xây dựng một danh sách email chất lượng trở thành một nhiệm vụ thiết yếu cho...