LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » WordPress / WordPress ECommerce / WordPress Snippets » Display WooCommerce Products Categories With Thumbnail & Description

Display WooCommerce Products Categories With Thumbnail & Description

Display-WooCommerce-Products-Categories-With-Thumbnail-&-Description
WooCommerce is a free ECommerce plugin for WordPress blog that will convert your WordPress blog into an online shopping store site. Now there are many theme available by WooCommerce staff or third parties to make your store stylish but if you want to make your own then it is more awesome.

So for them, who are designing their own WooCommerce theme need some different type of codes to make there theme stylish. You have seen o many online stores that they have a page where only category of that store are showing only. From there a user can select what he want to shop easily. You user can also select from the product categories widget from the sidebar but it will look more awesome if you will design a new page where you will able to see your stylish categories list to select.

Now to make that category page more stylish, you have to display big size categories but what if you have only title. But now you can get more from categories. So now by adding a WooCommerce categories loop codes from below, you will be able to pick every category Title, Link, Product Count In It, Thumbnail, Description and your desired custom text. You will be also able to pick only Parent category or all category with children too. YOu can also hide empty category that have no product in it. So now move below and garb your code now.

Table of Contents

Recommended For You:
How To Minify HTML Without Any Plugin In WordPress Easily?

How To Display WooCommerce Products Categories With Thumbnail & Description?

<!-- WooCommerce Products Parent Categories -->
<ul class="products product_category">
<?php
 $prod_categories = get_terms( 'product_cat', array(
 'orderby' => 'name',
 'order' => 'ASC',
 'hide_empty' => 1, // 1 for yes, 0 for no
 'parent' => 0 // 1 for show child categories, 0 for show only parent category
 ));
 foreach( $prod_categories as $prod_cat ) :
 $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
 $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
 $term_link = get_term_link( $prod_cat, 'product_cat' );
?>
<li id="product_category">
<img src="<?php echo $cat_thumb_url; ?>" alt="<?php echo $prod_cat->name; ?>"></img>
<h3>Category</h3>
<span class="star-rating"><?php echo $prod_cat->count; ?> Products</span>
<span class="price"><?php echo $prod_cat->name; ?></span>
<p><?php echo $prod_cat->description; ?></p>
<a href="<?php echo $term_link; ?>" title="<?php echo $prod_cat->name; ?>" class="button">Shop Now</a>
</li>
<?php endforeach; wp_reset_query(); ?>
</ul>
<!-- WooCommerce Products Parent Categories -->

Now edit your WooCommerce Products Categories and add images and descriptiuon there to allow the codes to pick from there.
WooCommerce Products Categories

Customization:

You can select what you want to show in every category from Title, Link, Product Count In It, Thumbnail, Description, Custom Text and also can show only Parent category or Children with them too. All these can be customize in upper code.

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.

Recommended For You:
What Is On Page SEO?  Take Your Website On Top

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *