How to Hide WooCommerce Product Count

Table of Contents

When setting up your WooCommerce shop page, you have the option to display only the WooCommerce products, WooCommerce categories, or products and categories.

If you choose to display the WooCommerce categories, a number is displayed on each category showing how many products are in each category.

Hide WooCommerce Product Count

There are many reasons you may want to remove the product count on categories or subcategories.

If your theme does not display the product count well, I highly recommend that you hide it.

This post shares how to hide the category count number completely using a custom PHP script.

Additionally, you will learn how to hide it using a CSS code snippet that I will share.

WooCommerce Hide Product Count

However, it is important to note that these code snippets should be added to your child theme functions.php file.

You can also use a Site Customization plugin so that you do not lose your changes when you update your WordPress theme.

This is how the product count is displayed on the Storefront theme:

Steps to Hide Product Category Count Number Using PHP

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to hide the category’s product count number.
Click anywhere on the text editor and scroll to the bottom of the functions.php file. Paste the code at the end:

/*

 *

 * Removes products count after categories name

 *

 */

add_filter( 'woocommerce_subcategory_count_html', 'njengah_remove_category_products_count' );

function njengah_remove_category_products_count() {

  return;

}

To remove the product count for subcategories, add the following PHP code in the functions.php file:

/**

* Hide category product count in product archives

*/

add_filter( 'woocommerce_subcategory_count_html', '__return_false' );

Click on the Save Changes button at the bottom of the text editor screen.
You have successfully added the code snippet required to hide the product category count number.
This will be the outcome on the front end:

Steps to Hide Product Category Count Number Using CSS

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Customize.
Navigate down to Additional CSS in the left sidebar that appears.
Add the following CSS rule:

.archive.woocommerce mark.count {

display:none;

}

If you are satisfied with the changes, click on Publish.

Conclusion

In summary, this post shares how you can easily hide the WooCommerce product count number on the category.

I have also highlighted how you can use CSS to achieve the same result. However, you should note that this is a developer-level tutorial.

Therefore, if you are unfamiliar with code and resolving potential conflicts, I highly recommend hiring a WordPress developer.

You can also use a plugin so that you do not break your site.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.