Bài Viết

[Thủ Thuật WordPress] Code thu gọn bài viết trong WordPress cực đẹp, đơn giản

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

admin

02/01/2025

8 Phút đọc

69 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Nếu bạn đang tìm cách tối ưu hóa giao diện mô tả sản phẩm trên website WordPress sử dụng Woocommerce, bài viết này sẽ cung cấp cho bạn một giải pháp đơn giản và nhanh chóng để thu gọn phần mô tả sản phẩm, giúp website của bạn gọn gàng và dễ nhìn hơn, đặc biệt trên thiết bị di động. Hãy cùng Mua Theme WordPress Giá Rẻ xem qua thủ thuật wordpress dưới đây nhé

Hướng Dẫn Thu Gọn Mô Tả Sản Phẩm Woocommerce Trong WordPress

code thu gon bai viet trong wordpress cuc dep don gian — Code thu gọn bài viết trong WordPress cực đẹp, đơn giản

Code Thu Gọn Nội Dung Sản Phẩm Woocommerce Trong WordPress

Để tạo ra một trang sản phẩm đẹp mắt và tối ưu hóa không gian hiển thị, bạn có thể sử dụng một đoạn code thu gọn mô tả sản phẩm Woocommerce. Dưới đây là hướng dẫn chi tiết về cách thức triển khai.

Lưu Ý Quan Trọng Trước Khi Sửa Code

Trước khi thực hiện bất kỳ thay đổi nào, bạn cần lưu ý những điều sau:

Phương pháp này chỉ áp dụng cho chế độ hiển thị mô tả sản phẩm dưới dạng Tabs (tab mặc định trong Woocommerce). Nếu bạn đang sử dụng một theme đặc biệt như Flatsome, có thể sẽ có những tùy chọn khác như Accordion hay Sections, khi đó mã này sẽ không hoạt động.
Sao lưu trang web: Trước khi thay đổi mã nguồn, hãy chắc chắn sao lưu trang web để tránh mất dữ liệu trong trường hợp có sự cố.
Sử dụng Child Theme: Để tránh việc mất code sau mỗi lần cập nhật theme chính, bạn nên sử dụng child theme. Điều này giúp bạn dễ dàng cập nhật theme chính mà không lo ảnh hưởng đến các tùy chỉnh.

Cách Cài Đặt Code Thu Gọn Mô Tả Sản Phẩm Woocommerce

Để thu gọn mô tả sản phẩm trong Woocommerce, bạn chỉ cần thêm một đoạn mã đơn giản vào tệp functions.php trong child theme của bạn.

Dưới đây là đoạn mã cần thêm:

/*
* Code rút gọn nội dung mô tả chi tiết sản phẩm Woocommerce cho muathemewpgiare
*/

function muathemewpgiare_readmore_button_woo($content){
    if (is_product()){
        // Thêm nút "Xem thêm" cho mô tả sản phẩm
        $content .= '<div class="muathemewpgiare_readmore_woo"><span title="Xem thêm">Xem thêm</span></div>';
    }
    return $content;
}
add_filter( 'the_content', 'muathemewpgiare_readmore_button_woo', 100 );

add_action('wp_footer','muathemewpgiare_readmore_woocommerce');
function muathemewpgiare_readmore_woocommerce(){
    if (is_product()){
    ?>
    <style>
        /* Chỉnh sửa giao diện mô tả sản phẩm */
        .single-product div#tab-description {
            overflow: hidden;
            position: relative;
            max-height: 600px; /* Điều chỉnh chiều cao tối đa của phần mô tả */
        }

        .muathemewpgiare_readmore_woo {
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 9999;
            bottom: 0;
            width: 100%;
            background: #fff;
        }

        /* Tạo hiệu ứng mờ phía dưới khi phần mô tả bị ẩn */
        .muathemewpgiare_readmore_woo: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;
        }

        .muathemewpgiare_readmore_woo span {
            color: #6c6d70;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Thêm hiệu ứng hover cho nút xem thêm */
        .muathemewpgiare_readmore_woo:hover span {
            color: #000;
            text-decoration: underline;
        }
    </style>
    <script>
        // JavaScript để xử lý sự kiện nhấn vào "Xem thêm"
        jQuery(document).ready(function($){
            $(".muathemewpgiare_readmore_woo").click(function(){
                var $tabDescription = $('div#tab-description');
                // Tăng chiều cao để hiển thị toàn bộ nội dung
                $tabDescription.css('max-height', 'none');
                $(this).fadeOut(); // Ẩn nút "Xem thêm" khi nội dung được mở rộng
            });
        });
    </script>
    <?php }
}

* Code rút gọn nội dung mô tả chi tiết sản phẩm Woocommerce cho muathemewpgiare

function muathemewpgiare_readmore_button_woo($content){

if (is_product()){

// Thêm nút "Xem thêm" cho mô tả sản phẩm

$content .= '<div class="muathemewpgiare_readmore_woo"><span title="Xem thêm">Xem thêm</span></div>';

}

return $content;

}

add_filter( 'the_content', 'muathemewpgiare_readmore_button_woo', 100 );

add_action('wp_footer','muathemewpgiare_readmore_woocommerce');

function muathemewpgiare_readmore_woocommerce(){

if (is_product()){

<style>

/* Chỉnh sửa giao diện mô tả sản phẩm */

.single-product div#tab-description {

overflow: hidden;

position: relative;

max-height: 600px; /* Điều chỉnh chiều cao tối đa của phần mô tả */

}

.muathemewpgiare_readmore_woo {

text-align: center;

cursor: pointer;

position: absolute;

z-index: 9999;

bottom: 0;

width: 100%;

background: #fff;

}

/* Tạo hiệu ứng mờ phía dưới khi phần mô tả bị ẩn */

.muathemewpgiare_readmore_woo: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;

}

.muathemewpgiare_readmore_woo span {

color: #6c6d70;

font-size: 14px;

font-weight: bold;

text-transform: uppercase;

letter-spacing: 1px;

}

/* Thêm hiệu ứng hover cho nút xem thêm */

.muathemewpgiare_readmore_woo:hover span {

color: #000;

text-decoration: underline;

}

</style>

// JavaScript để xử lý sự kiện nhấn vào "Xem thêm"

jQuery(document).ready(function($){

$(".muathemewpgiare_readmore_woo").click(function(){

var $tabDescription = $('div#tab-description');

// Tăng chiều cao để hiển thị toàn bộ nội dung

$tabDescription.css('max-height', 'none');

$(this).fadeOut(); // Ẩn nút "Xem thêm" khi nội dung được mở rộng

});

</script>

<?php }

}

Cách Sử Dụng Child Theme Để Thêm Code

Để thêm đoạn mã trên vào child theme, bạn làm theo các bước sau:

Truy cập vào Cpanel hoặc FTP của bạn và mở thư mục theme hiện tại.
Tìm và mở tệp functions.php trong child theme của bạn.
Dán đoạn mã trên vào cuối tệp functions.php.
Lưu thay đổi và kiểm tra kết quả trên trang sản phẩm của bạn.

Lợi Ích Của Việc Thu Gọn Nội Dung Mô Tả Sản Phẩm

Việc thu gọn phần mô tả sản phẩm mang lại nhiều lợi ích:

Cải thiện trải nghiệm người dùng: Giao diện trang sản phẩm trở nên dễ nhìn và không bị rối mắt, đặc biệt trên màn hình di động.
Tăng khả năng chuyển đổi: Khi người dùng không phải kéo xuống quá nhiều để xem thông tin, họ sẽ dễ dàng đưa ra quyết định mua hàng nhanh chóng.
Tối ưu hóa tốc độ tải trang: Giảm lượng nội dung hiển thị sẽ giúp trang web tải nhanh hơn, từ đó nâng cao trải nghiệm người dùng và cải thiện thứ hạng SEO.

Tại Sao Tối Ưu Hiển Thị Mô Tả Sản Phẩm Trên Mobile Quan Trọng?

Trong kỷ nguyên di động hiện nay, việc tối ưu hóa giao diện cho thiết bị di động là yêu cầu bắt buộc. Nhiều người dùng truy cập web từ điện thoại di động, và nếu trang web của bạn không hiển thị tốt trên các thiết bị này, khả năng họ rời đi ngay lập tức là rất cao.

Việc thu gọn mô tả sản phẩm không chỉ giúp làm gọn trang mà còn giúp cải thiện tốc độ tải trang trên mobile, điều này có thể ảnh hưởng trực tiếp đến SEO và trải nghiệm người dùng.

Kết Luận

Thu gọn mô tả sản phẩm trong Woocommerce không chỉ giúp tối ưu hóa giao diện trang sản phẩm mà còn đóng vai trò quan trọng trong việc nâng cao trải nghiệm người dùng và tăng tỷ lệ chuyển đổi. Thực hiện các thay đổi này không hề khó khăn và sẽ mang lại hiệu quả rõ rệt, đặc biệt khi bạn sử dụng child theme để bảo vệ các tùy chỉnh của mình.

Chúc các bạn thành công 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!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

SEO là gì? Tổng hợp tất cả kiến thức về Search Engine Optimize

Mỗi khi bạn tìm kiếm một thông tin trên Google hoặc bất kỳ công cụ tìm kiếm nào, kết quả hiển thị đều được sắp...
KHUYẾN MÃI THÁNG 02/2025 – MUA THEME WORDPRESS GIÁ RẺ CHUẨN SEO

🎉 KHUYẾN MÃI THÁNG 02/2025 – MUA THEME WORDPRESS GIÁ RẺ CHUẨN SEO 🎉 🔥 Ưu đãi đặc biệt tại Muathemewpgiare.com: ✅ Giảm ngay 20%...
Cách Tùy Chỉnh, Thêm, Xóa Tab Sản Phẩm trong WooCommerce Dễ Dàng!

WooCommerce là một nền tảng tuyệt vời để xây dựng cửa hàng trực tuyến, và một trong những tính năng giúp nâng cao trải nghiệm...
Chức năng hỗ trợ traffic cho website WordPress

Để tối ưu hóa chức năng hỗ trợ traffic cho website WordPress một cách hiệu quả, bạn cần thực hiện một số bước chiến lược...
Cách tách Product Tabs trong WooCommerce thành các section riêng biệt

Hãy tưởng tượng bạn đang lướt qua một trang sản phẩm trên một website WooCommerce, và bạn nhìn thấy các thông tin như mô tả,...
Widget là gì? Tất cả 100% kiến thức cần biết về Widget WordPress

Nếu bạn là một nhà thiết kế web hoặc đã từng làm việc với WordPress, chắc chắn bạn không còn xa lạ với thuật ngữ...
Cách Tạo Các Cuộc Thi Online Để Tăng Truy Cập Website Mới Nhất 2025

Trong thời đại số hóa hiện nay, việc tăng cường truy cập website trở nên cực kỳ quan trọng. Một trong những chiến lược hiệu...
Cách Đo Lường Hiệu Quả Chiến Dịch Marketing Nội Dung

Trong bối cảnh cạnh tranh ngày càng gay gắt, việc đo lường hiệu quả của các chiến dịch marketing nội dung trở thành yếu tố...
Cách Tạo Ra Một Trang Giới Thiệu Ấn Tượng WordPress

Trong bối cảnh cạnh tranh ngày càng gia tăng trên không gian trực tuyến, việc tạo ra một trang giới thiệu ấn tượng là vô...
Hướng Dẫn Xóa Tab WooCommerce Khỏi Trang Sản Phẩm Một Cách Dễ Dàng

Bạn đang sử dụng WooCommerce cho cửa hàng trực tuyến của mình và cảm thấy trang sản phẩm của mình có quá nhiều tab không...
Hướng Dẫn Chi Tiết Cách Sửa Lỗi WordPress Không Được Google Index

Chắc hẳn bạn đang gặp phải tình trạng website WordPress của mình không xuất hiện trên Google, phải không? Điều này không chỉ khiến bạn...
Cách Tạo Biểu Mẫu Đăng Ký Đơn Giản Cho Website Cực Dễ 2025

Trong thế giới số hóa hiện nay, việc tạo một biểu mẫu đăng ký đơn giản cho website là vô cùng cần thiết để thu...
Chương Trình Khuyến Mãi Mua Theme Tháng 01/2025

Chào đón năm mới 2025, Muathemewpgiare.com hân hạnh mang đến chương trình khuyến mãi mua theme wordpress đặc biệt trong suốt tháng 1 với nhiều...
Mua Website Có Sẵn Mới Nhất 2025

Với sự phát triển mạnh mẽ của internet và thương mại điện tử, việc sở hữu một website trở thành yếu tố then chốt giúp...
Chiến Lược Phát Triển SEO Top 1 Google 2025 Dành Cho Người Mới

SEO (Search Engine Optimization) là một trong những chiến lược quan trọng nhất để đưa website của bạn lên vị trí cao trên Google. Đặc...
Cách Thiết Kế Website Bán Hàng Đạt Hiệu Quả Cao

Việc thiết kế website bán hàng chất lượng không chỉ giúp doanh nghiệp nâng cao uy tín thương hiệu mà còn hỗ trợ mở rộng...