Show subcategories with images when entering the WordPress product category

Show subcategories with images when entering product categories – In WordPress, product categories are often created using plugins or built into WooCommerce themes. WooCommerce is a popular plugin that allows you to create and manage an online store on the WordPress platform.
After creating a product catalog, you can assign specific products to each category. This makes it easy for users to search and browse products in your online store.

By default,  WooCommerce has SubCategories available, but it is not separate and cannot be customized. In today’s article, I will show you how to customize  Display subcategories with images when entering the WordPress product category so you can freely customize them.

Show subcategories with images when entering the WordPress product category

As in the previous post, I wrote about getting sub-categories in the WordPress product category , but it still didn’t meet the needs of some of you. Today’s post will teach you again, specifically adding images to this block.

You can see the image below – Display subcategories with images when entering the WordPress product category

When accessing the main category on the left = > on the right Show the Child category of that category (with accompanying images). If it’s exactly what you need, let’s get started!

Show subcategories with images when entering the WordPress product category

ADD CODE TO FUCTION of the theme in use –  Display subcategories with images when entering the wordpress product category

// mô tả danh mục sản phẩm – flatsome.xyz

function woocommerce_taxonomy_archive_description() { ?>

<!— Hiện Danh mục con -->

<?php

if( !is_product() ): ;?>

<div class=”list_sub_product_category”>

<?php

if (is_product_category()) {

    $term_id = get_queried_object_id();

    $taxonomy = ‘product_cat’;

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

    $terms = get_terms([

        ‘taxonomy’ => $taxonomy,

        ‘hide_empty’ => true,

        ‘parent’ => get_queried_object_id()

    ]);

    $output = ‘<ul class=”subcategories clearfix”>’;

    // Duyệt qua các danh mục con của sản phẩm (WP_Term Objects)

    foreach ($terms as $term) {

        $term_link = get_term_link($term, $taxonomy);

        // Lấy URL hình ảnh từ meta ‘thumbnail_id’ của danh mục

        $thumbnail_id = get_term_meta($term->term_id, ‘thumbnail_id’, true);

        $thumbnail_url = wp_get_attachment_image_url($thumbnail_id, ‘full’);

        if ($thumbnail_url) {

            $output .= ‘<li class=”ty-subcategories__item ‘ . $term->slug . ‘”><a href=”‘ . $term_link . ‘”><p class=”dm-img”><img src=”‘ . $thumbnail_url . ‘” alt=”‘ . $term->name . ‘”></p>’;

        }

$output .= ‘<p class”dm-text”>’ . $term->name . ‘</p>’;

        $output .= ‘</a></li>’;

    }

    $output .= ‘</ul>’;

    echo $output;

}

?>

  </div>

<?php if(!wp_is_mobile()){;?>

<style>

.subcategories {

    max-height: 100%;

    overflow: hidden;

transition: max-height .25s ease-out;

padding: 10px;

    margin-bottom: 20px;

    border: 0;

}

.ty-subcategories__item {

    width: 16.66%;

margin: 0;

    padding: 0;

    list-style: none;

    display: block;

    background-color: #fff;

    float: left;

    border: 0;

    min-width: 152px;

}

.subcategories a {

    display: block;

    text-align: center;

    padding: 2px 2px 2px 5px;

    box-sizing: border-box;

    box-shadow: 1px 1px 3px 0 #dadada;

    margin: 5px;

}

</style>

<?php }else{

    echo ‘

<style>

ul.subcategories-list {

    display: block;

    list-style: none;

}

ul.subcategories-list li {

    margin-right: 15px;

    background-color: #7d7d7d3d;

    padding: 3px 8px;

    border-radius: 7px;

}

ul.subcategories-list li:hover {

    background-color: #ff4200;

    color: #fff !important;

}

</style>

‘;};

endif;

?>

<? }

add_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );