How to Display Category Wise Product in WooCommerce

In this tutorial you will learn to display a particular category product in WooCommerce.

You have several options on your WooCommerce store as to what you can show on your archive pages.

1. Products
2. Categories (on shop page)
3. Subcategories (on category pages)
4. Both products and categories

When you setting up your WooCommerce store the third option should be best for you that is products and categories. This shows that the visitors can either select products from home page or improve their search by clicking through to a product category archive. Here you will see how to display categories in a distinct list before displaying the products.

1. Differentiate WooCommerce code that is used to show categories and subcategories output on archive pages.
2. Creating plugin for code
3. Write a function to list categories before product listings.
4. Styling Output

Go to WooCommerce > Settings, choose the Products tab, and then select the Display option. For Shop Page Display and Default Category Display options, select Show both.

Click on the Save changes button to save.

Display Category Wise Product in WooCommerce

function woocommerce_product_category( $args = array() ) {
$woocommerce_category_id = get_queried_object_id();
$args = array(
'parent' => $woocommerce_category_id
);
$terms = get_terms( 'product_cat', $args );
if ( $terms ) {
echo '<ul class="woocommerce-categories">';
foreach ( $terms as $term ) {
echo '<li class="woocommerce-product-category-page">';
woocommerce_subcategory_thumbnail( $term );
echo '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $term->name;
echo '</a>';
echo '</h2>';
echo '</li>';
}
echo '</ul>';
}
}
add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );

There is a woocommerce_product_category() function that is displaying the categories or subcategories before running the loop that displays the products.

List WooCommerce Category Page Subcategories

Here I will show you to easily get the subcategory of WooCommerce product categories using a custom function that takes parent product category slug.

In this code snippet, WP_Term object gets the product category parent and the other gets the child ID in an array. Atlast, the child categories are displayed by running a loop through the child ID array.

function woocommerce_get_product_category_of_subcategories( $category_slug ){
$terms_html = array();
$taxonomy = 'product_cat';
$parent = get_term_by( 'slug', $category_slug, $taxonomy );
$children_ids = get_term_children( $parent->term_id, $taxonomy );
foreach($children_ids as $children_id){
$term = get_term( $children_id, $taxonomy );
$term_link = get_term_link( $term, $taxonomy );
if ( is_wp_error( $term_link ) ) $term_link = '';
$terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->name . '</a>';
}
return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

WooCommerce Display Product Category Description

This code should be placed in WooCommerce template file that you later used to display your product details. In this code ‘wp_get_post_terms’ filter calls when the cache has the required term. After that, the filter will pass the term and array $args.

global $post;
$args = array( 'taxonomy' => 'product_cat',);
$terms = wp_get_post_terms($post->ID,'product_cat', $args);
$count = count($terms);
if ($count > 0) {
foreach ($terms as $term) {
echo '<div class="woocommerce-get-product-category">';
echo $term->description;
echo '</div>';
}
}