Code Mục Lục Danh Mục Sản Phẩm Woocommerce

Nếu bạn muốn tạo một nút cho phần Mục lục Danh mục sản phẩm có thể mở rộng/thu gọn (toggle) khi người dùng nhấn vào, dưới đây là một cách làm phổ biến và dễ triển khai cho WooCommerce hoặc website WordPress của bạn.

Code Mục lục Danh mục sản phẩm Woocommerce

Tạo Mục lục Danh mục sản phẩm có thể thu gọn/mở rộng

JavaScript cho TOC

Chèn đoạn mã sau vào file functions.php hoặc sử dụng plugin Code Snippets:

Xem thêm bài viết khác

// Thêm JavaScript vào fuctions.php tạo Mục lục danh mục sản phẩm - Tunlamweb.com
function tunlw_add_toc_with_button_script() {
    if (is_product_category()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const tocButton = document.createElement('button');
                tocButton.classList.add('toc-toggle-button');
                tocButton.textContent = "Hiển thị mục lục";

                const tocContainer = document.createElement('div');
                tocContainer.classList.add('category-toc');
                tocContainer.innerHTML = '<h2><i class="fa-solid fa-bars"></i> Mục lục danh mục</h2><ul></ul>';
                tocContainer.style.display = 'none';

                const description = document.querySelector('.term-description');
                const tocList = tocContainer.querySelector('ul');

                if (description) {
                    const headers = description.querySelectorAll('h2, h3, h4');

                    headers.forEach((header, index) => {
                        const id = `toc-header-${index}`;
                        header.setAttribute('id', id);

                        const listItem = document.createElement('li');
                        listItem.innerHTML = `<a href="#${id}">${header.textContent}</a>`;
                        tocList.appendChild(listItem);
                    });

                    if (headers.length > 0) {
                        description.prepend(tocButton);
                        description.prepend(tocContainer);
                    }
                }

                // Toggle TOC visibility
                tocButton.addEventListener('click', function() {
                    if (tocContainer.style.display === 'none') {
                        tocContainer.style.display = 'block';
                        tocButton.textContent = 'Ẩn mục lục';
                    } else {
                        tocContainer.style.display = 'none';
                        tocButton.textContent = 'Hiển thị mục lục';
                    }
                });
            });
        </script>
        <style>
            .toc-toggle-button {
                background-color: #0073aa;
                color: #fff;
                border: none;
                padding: 10px 15px;
                border-radius: 5px;
                cursor: pointer;
                margin-bottom: 10px;
            }

            .toc-toggle-button:hover {
                background-color: #005177;
            }

            .category-toc {
                border: 1px solid #ddd;
                padding: 15px;
                margin-bottom: 20px;
                background-color: #f9f9f9;
            }

            .category-toc h2 {
                font-size: 18px;
                margin-bottom: 10px;
            }

            .category-toc ul {
                list-style-type: none;
                padding-left: 0;
                margin-top: 10px;
            }

            .category-toc li {
                margin-bottom: 5px;
            }

            .category-toc a {
                text-decoration: none;
                color: #0073aa;
            }

            .category-toc a:hover {
                text-decoration: underline;
            }
        </style>
        <?php
    }
}
add_action('wp_footer', 'tunlw_add_toc_with_button_script');

// Thêm JavaScript vào fuctions.php tạo Mục lục danh mục sản phẩm - Tunlamweb.com

function tunlw_add_toc_with_button_script() {

if (is_product_category()) {

document.addEventListener("DOMContentLoaded", function() {

const tocButton = document.createElement('button');

tocButton.classList.add('toc-toggle-button');

tocButton.textContent = "Hiển thị mục lục";

const tocContainer = document.createElement('div');

tocContainer.classList.add('category-toc');

tocContainer.innerHTML = '<h2><i class="fa-solid fa-bars"></i> Mục lục danh mục</h2><ul></ul>';

tocContainer.style.display = 'none';

const description = document.querySelector('.term-description');

const tocList = tocContainer.querySelector('ul');

if (description) {

const headers = description.querySelectorAll('h2, h3, h4');

headers.forEach((header, index) => {

const id = `toc-header-${index}`;

header.setAttribute('id', id);

const listItem = document.createElement('li');

listItem.innerHTML = `<a href="#${id}">${header.textContent}</a>`;

tocList.appendChild(listItem);

});

if (headers.length > 0) {

description.prepend(tocButton);

description.prepend(tocContainer);

}

// Toggle TOC visibility

tocButton.addEventListener('click', function() {

if (tocContainer.style.display === 'none') {

tocContainer.style.display = 'block';

tocButton.textContent = 'Ẩn mục lục';

} else {

tocContainer.style.display = 'none';

tocButton.textContent = 'Hiển thị mục lục';

}

});

</script>

<style>

.toc-toggle-button {

background-color: #0073aa;

color: #fff;

border: none;

padding: 10px 15px;

border-radius: 5px;

cursor: pointer;

margin-bottom: 10px;

}

.toc-toggle-button:hover {

background-color: #005177;

}

.category-toc {

border: 1px solid #ddd;

padding: 15px;

margin-bottom: 20px;

background-color: #f9f9f9;

}

.category-toc h2 {

font-size: 18px;

margin-bottom: 10px;

}

.category-toc ul {

list-style-type: none;

padding-left: 0;

margin-top: 10px;

}

.category-toc li {

margin-bottom: 5px;

}

.category-toc a {

text-decoration: none;

color: #0073aa;

}

.category-toc a:hover {

text-decoration: underline;

}

</style>

<?php

}

add_action('wp_footer', 'tunlw_add_toc_with_button_script');

Giải thích:

JavaScript:
- Tạo một nút bấm (button) với nội dung “Hiển thị mục lục”.
- Mục lục (TOC) sẽ được tự động tạo dựa trên các thẻ tiêu đề (h2, h3, h4) trong mô tả danh mục sản phẩm.
- Khi người dùng nhấn nút, mục lục sẽ mở rộng/thu gọn (toggle).
CSS:
- Tạo kiểu cho nút bấm và mục lục để hiển thị đẹp mắt và dễ sử dụng.

Kết quả:

Trên trang danh mục sản phẩm, sẽ có một nút bấm “Hiển thị mục lục”.
Khi người dùng nhấn vào nút, mục lục sẽ mở ra, và nội dung nút sẽ thay đổi thành “Ẩn mục lục”.
Khi nhấn lại nút, mục lục sẽ thu gọn.

Lưu ý:

Sau khi thêm mã, hãy xóa cache của website nếu bạn sử dụng plugin cache.
Nếu bạn không thấy thay đổi, hãy kiểm tra xem mã đã được thêm vào đúng vị trí trong file functions.php hoặc plugin Code Snippets.

Nếu bạn gặp vấn đề hoặc cần tùy chỉnh thêm, hãy cho mình biết để hỗ trợ chi tiết hơn!

Theo dỗi mình thêm qua Fanpage nhé.

Chúc bạn thành công.