I want to develop a category division like attached picture.

loop all product's category name and category thumbnail (woocommerce), just like post loop.

Anyone can help me ??

`

                        <?php
                            $args = array(
                                // 'posts_per_page' => -1,
                                'taxonomy' => 'product_cat',
                                'orderby' => 'name',
                                // 'show_count' => 0,
                                // 'pad_counts' => 0,
                                // 'hierarchical' => 1,
                                // 'title_li' => '',
                                // 'hide_empty' => 0,
                            );
                        $loop = new WP_Query( $args );
                        while ( $loop->has_category( $category = '', $post = null ) ) : $loop->the_post(); 
                        global $product; ?> 
                        <!-- !.p-item -->
                        <li >
                            <a href="<?php get_category_link($loop->post->ID); ?>">
                                <?php if ( has_post_thumbnail( $loop->post->ID ) ) {
                                    echo get_the_post_thumbnail($loop->post->ID, 'ihossain');
                                    } else { ?>
                                    <img src="<?php bloginfo('template_directory'); ?>/img/icon_category_image_1.svg" alt="<?php the_title(); ?>" />
                                <?php } ?>
                                <h6 ><?php $categoo = $product->get_categories(); echo $categoo; ?></h6>
                            </a>
                        </li>
                        <!-- !!.p-item -->
                        <?php endwhile; ?>  

`

CodePudding user response：

You can access all the categories and their thumbnail using this code.

$taxonomyName = "product_cat";

$prod_categories = get_terms($taxonomyName, array(

'orderby'=> 'name',

'order' => 'DESC',

'hide_empty' => 1

));

foreach( $prod_categories as $prod_cat ) {

if ( $prod_cat->parent != 0 ){

$cat_thumb = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id',`true );

$cat_thumb_url = wp_get_attachment_image_src( $cat_thumb, 'full' );

$term_link = get_term_link( $prod_cat, 'product_cat' );

}

}

CodePudding user response：

Try this:

add_shortcode('category_list', 'get_category_list');

function get_category_list()
{
    $taxonomyName = "product_cat";
    //This gets top layer terms only.  This is done by setting parent to 0.
    $parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => 0));

    echo '<ul>';
    foreach ($parent_terms as $pterm) {

        //show parent categories
        echo '<li><a href="' . get_term_link($pterm->name, $taxonomyName) . '">' . $pterm->name . '</a></li>';

        $thumbnail_id = get_woocommerce_term_meta($pterm->term_id, 'thumbnail_id', true);
        // get the image URL for parent category
        $image = wp_get_attachment_url($thumbnail_id);
        // print the IMG HTML for parent category
        echo "<img src='{$image}' alt='' width='400' height='400' />";

        //Get the Child terms
        $terms = get_terms($taxonomyName, array('parent' => $pterm->term_id, 'orderby' => 'slug', 'hide_empty' => false));
        foreach ($terms as $term) {

            echo '<li><a href="' . get_term_link($term->name, $taxonomyName) . '">' . $term->name . '</a></li>';
            $thumbnail_id = get_woocommerce_term_meta($pterm->term_id, 'thumbnail_id', true);
            // get the image URL for child category
            $image = wp_get_attachment_url($thumbnail_id);
            // print the IMG HTML for child category
            echo "<img src='{$image}' alt='' width='400' height='400' />";
        }
    }
    echo '</ul>';
}