Code rút gọn chi tiết sản phẩm & mô tả danh mục WordPress

Chú ý: 

1. Chỉ làm việc với Theme Flatsome
2. Với cách này bạn chỉ cần gán code vào functions.php của theme là được. Nhưng nếu bạn nào không thích gán vào functions.php thì có thể tách css và js ra để vào các file tương ứng cũng được nhé.

Code thu gọn nội dung chi tiết sản phẩm

Copy và paste đoạn code sau vào cuối file functions.php của theme flatsome của bạn đang kích hoạt là được.

/*
add_action('wp_footer', 'readmore_description_flatsome');
function readmore_description_flatsome(){
    ?>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20.single-product%20%23tab-description%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.desc-collapsed%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-height%3A%20600px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.readmore-btn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23318A00%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.readmore-btn%3Aafter%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%20%E2%96%BC%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.readmore-btn.less%3Aafter%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%20%E2%96%B2%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-style" width="20" height="20" alt="&lt;style&gt;" />

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20(function(%24)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(window).on('load'%2C%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20desc%20%3D%20%24('.single-product%20%23tab-description')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20maxHeight%20%3D%20600%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(desc.length%20%26%26%20desc.height()%20%3E%20maxHeight)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20desc.addClass('desc-collapsed')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20desc.after('%3Cdiv%20class%3D%22readmore-btn%22%3EXem%20th%C3%AAm%3C%2Fdiv%3E')%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('body').on('click'%2C'.readmore-btn'%2C%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(desc.hasClass('desc-collapsed'))%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20desc.removeClass('desc-collapsed')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(this).addClass('less').text('Thu%20g%E1%BB%8Dn')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20desc.addClass('desc-collapsed')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(this).removeClass('less').text('Xem%20th%C3%AAm')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)(jQuery)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="&lt;script&gt;" />
    <?php
}

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

Các bạn có thể thu gọn phần mô tả của danh mục sản phẩm trên flatsome theme bằng đoạn code sau. Chỉ cần copy vào dán đoạn code này vào file functions.php của theme đang active là được nha (Flatsome)

 /*
 * Custom: Read more taxonomy description - Flatsome
 * Chức năng: Thu gọn mô tả danh mục sản phẩm + nút Xem thêm / Thu gọn
 */

add_action('wp_footer', 'flatsome_taxonomy_readmore');
function flatsome_taxonomy_readmore(){
    if ( !is_woocommerce() || !is_tax('product_cat') ) return;
    ?>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20.term-description%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2025px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-bottom%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.fs-tax-limit%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-height%3A%20300px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.fs-tax-readmore%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20left%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20z-index%3A%205%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.fs-tax-readmore%3Abefore%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2050px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%20-40px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20linear-gradient(to%20bottom%2C%20rgba(255%2C255%2C255%2C0)%2C%20%23fff)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.fs-tax-readmore%20span%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23318A00%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.fs-tax-readmore%20span%3Aafter%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%20%E2%96%BC%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.fs-tax-readmore.less%20span%3Aafter%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%20%E2%96%B2%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-style" width="20" height="20" alt="&lt;style&gt;" />

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20(function(%24)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(window).on('load'%2C%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20box%20%20%20%20%20%20%20%3D%20%24('.term-description')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20maxHeight%20%3D%20300%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(box.length)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20realHeight%20%3D%20box.outerHeight()%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(realHeight%20%3E%20maxHeight)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20box.addClass('fs-tax-limit')%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20box.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Cdiv%20class%3D%22fs-tax-readmore%20more%22%3E%3Cspan%3EXem%20th%C3%AAm%3C%2Fspan%3E%3C%2Fdiv%3E'%20%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Cdiv%20class%3D%22fs-tax-readmore%20less%22%20style%3D%22display%3Anone%22%3E%3Cspan%3EThu%20g%E1%BB%8Dn%3C%2Fspan%3E%3C%2Fdiv%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('body').on('click'%2C'.fs-tax-readmore.more'%2C%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20box.removeClass('fs-tax-limit')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('.fs-tax-readmore.more').hide()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('.fs-tax-readmore.less').show()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('body').on('click'%2C'.fs-tax-readmore.less'%2C%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20box.addClass('fs-tax-limit')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('.fs-tax-readmore.less').hide()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('.fs-tax-readmore.more').show()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)(jQuery)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="&lt;script&gt;" />
    <?php
}

Việc rút gọn nội dung chi tiết sản phẩm trong theme Flatsome là một giải pháp đơn giản nhưng mang lại hiệu quả rõ rệt về giao diện, trải nghiệm người dùng và khả năng chuyển đổi. Thay vì để nội dung dài gây rối mắt, cách hiển thị thu gọn kèm nút “Xem thêm” giúp trang sản phẩm gọn gàng hơn, dễ theo dõi hơn mà vẫn đảm bảo cung cấp đầy đủ thông tin khi khách hàng cần.

Hy vọng với hướng dẫn trong bài viết, bạn có thể áp dụng thành công để tối ưu trang sản phẩm Flatsome một cách chuyên nghiệp và hiệu quả hơn.

Chúc bạn thực hiện thành công!