Hướng dẫn hiển thị danh mục sản phẩm Woocommerce

Để hiển thị danh mục sản phẩm trong WooCommerce, bạn có thể sử dụng nhiều phương pháp khác nhau tùy thuộc vào nhu cầu và cách bạn muốn trình bày danh mục. Dưới đây là hướng dẫn chi tiết về cách hiển thị danh mục sản phẩm WooCommerce từ đơn giản đến nâng cao:

1. Hiển Thị Danh Mục Sản Phẩm Sử Dụng Widget

WooCommerce cung cấp một widget tích hợp để hiển thị danh mục sản phẩm. Đây là cách đơn giản và nhanh chóng nhất để thêm danh mục sản phẩm vào sidebar hoặc bất kỳ khu vực widget nào trên trang web của bạn.

Bước 1: Truy cập vào Dashboard của WordPress

Vào Appearance (Giao diện) > Widgets.

Bước 2: Thêm Widget Danh Mục Sản Phẩm

Tìm widget có tên “Product Categories” hoặc “Danh mục sản phẩm” trong danh sách widget có sẵn. Kéo widget này vào khu vực widget mà bạn muốn hiển thị danh mục sản phẩm (ví dụ: Sidebar, Footer, etc.).

Bước 3: Cấu Hình Widget

Cấu hình widget theo nhu cầu của bạn. Bạn có thể chọn để hiển thị các danh mục con, sắp xếp theo tên, số lượng sản phẩm, v.v. Sau khi cấu hình xong, nhấn Save (Lưu) để lưu thay đổi.

2. Hiển Thị Danh Mục Sản Phẩm Trong Trang

Nếu bạn muốn hiển thị danh mục sản phẩm trên một trang cụ thể, bạn có thể sử dụng shortcode hoặc một đoạn mã PHP.

Sử dụng Shortcode

WooCommerce cung cấp shortcode [product_categories] để hiển thị danh mục sản phẩm. Bạn có thể chèn shortcode này vào nội dung của bất kỳ trang hoặc bài viết nào.

Ví Dụ:

[product_categories number="12" parent="0"]

• number="12": Hiển thị tối đa 12 danh mục.
• parent="0": Hiển thị các danh mục gốc (không có danh mục cha).

Sử dụng PHP Code

Nếu bạn muốn hiển thị danh mục sản phẩm trong một template hoặc file PHP, bạn có thể sử dụng các hàm PHP của WooCommerce.

<?php
// Hiển thị danh mục sản phẩm
if ( function_exists('woocommerce_product_categories') ) {
    woocommerce_product_categories();
}
?>

Ghi chú: Đoạn mã này cần được chèn vào file template của theme, chẳng hạn như page.php, single.php, hoặc một template phần riêng.

3. Hiển Thị Danh Mục Sản Phẩm Trong Template

Nếu bạn muốn kiểm soát chi tiết hơn về cách hiển thị danh mục sản phẩm, bạn có thể tùy chỉnh các template của WooCommerce hoặc sử dụng các hooks và filters.

Tùy Chỉnh Template

Bạn có thể sao chép file template của WooCommerce vào theme của bạn để tùy chỉnh cách hiển thị. Ví dụ:

• Sao chép file: Vào thư mục woocommerce/templates và sao chép file content-product_cat.php vào thư mục your-theme/woocommerce/.
• Tùy chỉnh file: Mở file content-product_cat.php trong theme của bạn và chỉnh sửa để thay đổi cách hiển thị danh mục sản phẩm.

Sử dụng Hooks và Filters

WooCommerce hỗ trợ nhiều hooks và filters để bạn có thể tùy chỉnh cách hiển thị danh mục sản phẩm.

Ví Dụ:

add_action('woocommerce_before_main_content', 'custom_product_category_display', 20);

function custom_product_category_display() {
    // Kiểm tra xem có phải là trang danh mục sản phẩm không
    if ( is_product_category() ) {
        // Hiển thị danh mục sản phẩm
        echo 'Danh Mục Sản Phẩm';
        echo '';
        $args = array(
            'taxonomy' => 'product_cat',
            'orderby' => 'name',
            'show_count' => 1,
            'title_li' => '',
            'hide_empty' => 0,
        );
        wp_list_categories( $args );
        echo '';
    }
}

4. Hiển Thị Danh Mục Sản Phẩm Trong Menu Điều Hướng

Bạn cũng có thể thêm danh mục sản phẩm vào menu điều hướng của website để người dùng dễ dàng truy cập.

Bước 1: Truy cập vào Dashboard của WordPress

Vào Appearance (Giao diện) > Menus.

Bước 2: Thêm Danh Mục Sản Phẩm vào Menu

Tìm mục “Product Categories” (Danh mục sản phẩm) trong các tùy chọn để thêm vào menu. Chọn các danh mục sản phẩm bạn muốn thêm và nhấn Add to Menu (Thêm vào Menu).

Bước 3: Sắp Xếp và Lưu Menu

Kéo và thả các mục trong menu để sắp xếp theo thứ tự mong muốn, sau đó nhấn Save Menu (Lưu Menu).

5. Tùy Chỉnh Danh Mục Sản Phẩm Với CSS

Bạn có thể sử dụng CSS để tùy chỉnh kiểu dáng của danh mục sản phẩm để phù hợp với thiết kế của website.

Ví Dụ:

/* Tùy chỉnh kiểu dáng của danh mục sản phẩm */
.woocommerce ul.product-categories {
    list-style-type: none;
    padding: 0;
}

.woocommerce ul.product-categories li {
    margin-bottom: 20px;
}

.woocommerce ul.product-categories li a {
    font-size: 16px;
    color: #333;
    text-decoration: none;
}

.woocommerce ul.product-categories li a:hover {
    color: #0073aa;
}

Chèn mã CSS này vào tệp style.css của theme để áp dụng các kiểu dáng tùy chỉnh cho danh mục sản phẩm.

Kết Luận

Việc hiển thị danh mục sản phẩm trong WooCommerce có thể được thực hiện theo nhiều cách khác nhau tùy thuộc vào yêu cầu và mục đích của bạn. Dù bạn chọn sử dụng widget, shortcode, PHP code, tùy chỉnh template, hay chỉnh sửa menu điều hướng, WooCommerce cung cấp các công cụ mạnh mẽ để bạn dễ dàng quản lý và hiển thị danh mục sản phẩm theo cách bạn muốn.

• Wordpress