Show Danh Mục Con Trong Trang Danh Mục Woocommerce

Trong WooCommerce, bạn có thể hiển thị danh sách danh mục con bên dưới danh mục cha trên trang danh mục sản phẩm, và kèm theo icon hoặc hình ảnh đại diện cho danh mục con đó.

Show Danh mục con trong trang Danh mục Woocommerce

Xem thêm: Bố cục Danh mục sản phẩm Woocommerce chuẩn Seo và dễ lên top tìm kiếm

Xem thêm: Vị trí các hàm hook trong trang danh mục sản phẩm woocommerce

Dưới đây là các bước để thực hiện việc này:

Cách thêm icon/hình ảnh cho danh mục con

Để thêm icon hoặc hình ảnh đại diện cho danh mục, bạn có thể sử dụng thumbnail của danh mục sản phẩm. WooCommerce có sẵn chức năng để thiết lập hình ảnh đại diện cho từng danh mục.

Vào Products > Categories trong bảng điều khiển WordPress.
Chọn danh mục con mà bạn muốn thêm icon và nhấp vào Edit (Chỉnh sửa).
Thêm hình ảnh vào phần Thumbnail.

Hiển thị danh mục con kèm icon trên trang danh mục cha

Bạn cần thêm một đoạn mã vào file functions.php của theme đang sử dụng hoặc tạo một plugin tùy chỉnh.

//Hiển thị danh mục con trong danh mục cha - Tunlamweb-com
function tunlw_display_subcategories_with_icons() {
    // Kiểm tra nếu đang ở trang danh mục sản phẩm
    if (is_product_category()) {
        // Lấy danh mục hiện tại
        $current_category = get_queried_object();

        // Lấy danh sách danh mục con
        $subcategories = get_terms(array(
            'taxonomy' => 'product_cat',
            'parent'   => $current_category->term_id,
            'hide_empty' => true,
        ));

        // Hiển thị danh mục con kèm icon
        if (!empty($subcategories)) {
            echo '<ul class="subcategory-list">';
            foreach ($subcategories as $subcategory) {
                // Lấy URL của hình ảnh đại diện (thumbnail) của danh mục
                $thumbnail_id = get_term_meta($subcategory->term_id, 'thumbnail_id', true);
                $thumbnail_url = wp_get_attachment_url($thumbnail_id);

                echo '<li class="subcategory-item">';
                // Hiển thị tên danh mục con
                echo '<a href="' . get_term_link($subcategory) . '">' ;
                // Hiển thị icon (thumbnail) nếu có
                if ($thumbnail_url) {
                    echo '<img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr($subcategory->name) . '" class="subcategory-icon">';
                }
                else{
                	echo '<img src="http://tunlamweb.com/wp-content/uploads/2024/07/faicon-tlw.png" alt="' . esc_attr($subcategory->name) . '" class="subcategory-icon">';
                }
                echo '<span class="title-cat-sub">'. esc_html($subcategory->name) .'</span></a>';
                echo '</li>';
            }
            echo '</ul>';
        } ?>
        <!-- Custom CSS by Tunlamweb.com -->
        <style type="text/css">
        	.subcategory-list {
			    display: flex;
			    flex-wrap: wrap;
			    gap: 20px;
			    list-style: none;
			    padding: 0;
			}
			.subcategory-item {
				text-align: center;
				max-width: 150px;
				border: 1px solid #ddd;
				padding: 5px 10px;
				border-radius: 8px;
				transition: 1.2s cubic-bezier(.17,.85,.438,.99);
			}
			.subcategory-item:hover {
			    box-shadow: 0 15px 39px -11px var(--cl-rgb-2);
			    transform: translateY(-5px);
			}
			.subcategory-icon {
			    width: 40px;
			    height: 40px;
			    object-fit: cover;
			    border-radius: 8px;
			}

        </style>
    <?php    
    }
}
add_action('woocommerce_before_main_content', 'tunlw_display_subcategories_with_icons');
//Nếu tạo shortcode thì phải bỏ phần add_action trên nhé không nó sẽ chạy 2 đoạn code ý
//--------------------------------------------------------------------------------------------------
// Tạo shortcode nếu bạn muốn đặt lại vị trí khác mong muốn trong phần custom Danh mục sản phẩm
add_shortcode('sc_sub_categories', 'tunlw_display_subcategories_with_icons'); 
//--------------------------------------------------------------------------------------------------

//Hiển thị danh mục con trong danh mục cha - Tunlamweb-com

function tunlw_display_subcategories_with_icons() {

// Kiểm tra nếu đang ở trang danh mục sản phẩm

if (is_product_category()) {

// Lấy danh mục hiện tại

$current_category = get_queried_object();

// Lấy danh sách danh mục con

$subcategories = get_terms(array(

'taxonomy' => 'product_cat',

'parent' => $current_category->term_id,

'hide_empty' => true,

));

// Hiển thị danh mục con kèm icon

if (!empty($subcategories)) {

echo '<ul class="subcategory-list">';

foreach ($subcategories as $subcategory) {

// Lấy URL của hình ảnh đại diện (thumbnail) của danh mục

$thumbnail_id = get_term_meta($subcategory->term_id, 'thumbnail_id', true);

$thumbnail_url = wp_get_attachment_url($thumbnail_id);

echo '<li class="subcategory-item">';

// Hiển thị tên danh mục con

echo '<a href="' . get_term_link($subcategory) . '">' ;

// Hiển thị icon (thumbnail) nếu có

if ($thumbnail_url) {

echo '<img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr($subcategory->name) . '" class="subcategory-icon">';

}

else{

echo '<img src="http://tunlamweb.com/wp-content/uploads/2024/07/faicon-tlw.png" alt="' . esc_attr($subcategory->name) . '" class="subcategory-icon">';

}

echo '<span class="title-cat-sub">'. esc_html($subcategory->name) .'</span></a>';

echo '</li>';

}

echo '</ul>';

} ?>

.subcategory-list {

display: flex;

flex-wrap: wrap;

gap: 20px;

list-style: none;

padding: 0;

}

.subcategory-item {

text-align: center;

max-width: 150px;

border: 1px solid #ddd;

padding: 5px 10px;

border-radius: 8px;

transition: 1.2s cubic-bezier(.17,.85,.438,.99);

}

.subcategory-item:hover {

box-shadow: 0 15px 39px -11px var(--cl-rgb-2);

transform: translateY(-5px);

}

.subcategory-icon {

width: 40px;

height: 40px;

object-fit: cover;

border-radius: 8px;

}

</style>

<?php

}

add_action('woocommerce_before_main_content', 'tunlw_display_subcategories_with_icons');

//Nếu tạo shortcode thì phải bỏ phần add_action trên nhé không nó sẽ chạy 2 đoạn code ý

//--------------------------------------------------------------------------------------------------

// Tạo shortcode nếu bạn muốn đặt lại vị trí khác mong muốn trong phần custom Danh mục sản phẩm

add_shortcode('sc_sub_categories', 'tunlw_display_subcategories_with_icons');

//--------------------------------------------------------------------------------------------------

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

Giải thích mã:

get_queried_object(): Lấy đối tượng danh mục hiện tại.
get_terms(): Lấy danh sách danh mục con dựa theo term_id của danh mục cha.
get_term_meta(): Lấy ID của hình ảnh đại diện cho danh mục con.
wp_get_attachment_url(): Lấy URL của hình ảnh dựa theo ID.

Kết quả

Khi truy cập trang danh mục cha trên WooCommerce, bạn sẽ thấy danh sách các danh mục con được hiển thị kèm theo icon hoặc hình ảnh đại diện. Mỗi danh mục con sẽ có link để người dùng có thể truy cập.

Lưu ý

Đảm bảo rằng bạn đã thêm hình ảnh đại diện cho tất cả các danh mục con, nếu không icon sẽ không hiển thị.
Đoạn mã trên nên được kiểm tra kỹ trên môi trường phát triển trước khi áp dụng lên website chính thức.

Nếu bạn gặp vấn đề trong quá trình thực hiện hoặc cần tùy chỉnh thêm, hãy cho mình biết nhé!

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

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