How To Add Category thumbnail-image in a wordpress theme

I Would like to know how I Add Category thumbnail-image in the shop page (just like a product)
So when you click on the thumnail-images it opens A new page for that category

 

Hello there,

the easy way is to use this plugin : https://wordpress.org/plugins/category-icons/

Otherwise you can use this code in the archive.php :

<?php while (have_posts()) : the_post(); ?>

<div class="category_post">

<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

<?php
$images = get_children(
array(
'post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order'
)
);

if ( $images ) {
$count = 1;
foreach ( $images as $id => $image ) {
if( $count === 1 ) {
$img = wp_get_attachment_thumb_url( $image->ID );
$link = get_permalink( $post->ID );
print "\n\n" . '<div style="float:left"><a href="' . $link . '"><img src="' . $img . '" alt="" /></a></div>';
}
$count++;
}
}
?>

<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>"><span style="color:#cc0000">read more</span></a>

<p class="cat_meta"><?php the_time('M j y') ?> | <?php the_tags('Tags: ', ', ', ''); ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

<br style="clear:both" />

</div>

<?php endwhile; ?>

Code (markup):

and the CSS :

/* category page template style */
.category_post {border:1px solid #eee;
margin:20px 0; padding:20px;
font-size:14px; line-height:18px; }

.category_post h3 {padding-bottom:10px;}
.category_post img {margin-right:20px;}
.cat_meta {font-size:11px;}
.cat_meta a {color:blue;}

Code (markup):

Goodluck