How to Customize Product Category Page In WooCommerce

Do you want to customize the product category page? In this tutorial, we will share some of the action hooks and filter hokes that let developers easily modify the product category template.

Table of Contents

WooCommerce allows you to categorize your products and you can display these categories on your archive pages. This makes it easier for customers to find the products they are looking for in your store.

Visitors can either select products right from the home page or refine their search by clicking through to a product category archive. This is why it is important to have a category page.

How to Customize Product Category Page in WooCommerce

By the end of this tutorial, we will show you how you can display product categories using shortcodes and the different parameters. We will also share some action hooks and action filters you can use to customize the product category page.

It is worth mentioning that you need to create a child theme before you proceed. This will ensure that your changes will not be lost even when an update occurs.

Let us get right into it.

a) Steps to Display the Product Category Page Using Shortcodes

If you want to display the categories on any page, you can use the following shortcodes supplied with WooCommerce:

[product_category] – Displays all the products of a certain category
[product_categories] – Displays all product categories

Here are the steps you need to follow to display WooCommerce product categories on a page:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Pages, and select the page you want to display the categories.
Write the shortcode [product_categories] to display all categories
You can also use parameters to modify what you want to display. For example, [product_categories category=”springs”]:
Click on Publish after making the changes.
This is the outcome:

Here are some of the product category shortcode parameters:

Parameter	Accepted Value	Description
number	12	Number of categories you want to display
orderby	ID \| title \| name	Order the product by
order	ASC, DESC	Determines the order of the categories, whether ascending or descending.
columns	3	Number of columns
hide_empty	0 \| 1	1 to hide a category that doesn’t have any products listed under them.
parent	0 \| 1	0 to display only the parent categories and 1 to display all categories (with sub-categories)

b) Customizing Product Category Template

WooCommerce is very flexible to customization. This is why WooCommerce continues to power many online stores today because it has lots of action hooks and filters that allow you to modify the code.

Here are some of the hooks that you can use to modify the product category layout:

Action Hook – woocommerce_before_subcategory
Action Hook – woocommerce_before_subcategory_title
Action Hook – woocommerce_shop_loop_subcategory_title
Action Hook – woocommerce_after_subcategory_title
Action Hook – woocommerce_after_subcategory
Filter Hook – woocommerce_subcategory_count_html

For example, if you want to hide the product category title, just insert this in your theme’s function.php file:

[php] remove_action( ‘woocommerce_shop_loop_subcategory_title’, ‘woocommerce_template_loop_category_title’, 10 );
[/php]

If you want to hide the product category count on the shop page, you need to insert the snippet in the functions.php file:

[php] add_filter( ‘woocommerce_subcategory_count_html’, ‘__return_null’ );
[/php]

Conclusion

In this post, you have seen how it is easy to display product categories on any page. We have also shared how you can customize the product category page template.

We hope that this post helped you to learn more about the category template.

Editorial Staff

How to Customize Product Category Page In WooCommerce

How to Customize Product Category Page in WooCommerce

a) Steps to Display the Product Category Page Using Shortcodes

b) Customizing Product Category Template

Conclusion

Similar Articles

Related