How to Customize Categories List in Oxygen

This members-only tutorial provides the steps to customize the output of Categories List component under WooCommerce panel in Oxygen.

By default, Categories List component output looks like this:

This component uses the [product_categories] shortcode of WooCommerce whose output comes from /wp-content/plugins/woocommerce/templates/content-product_cat.php.

This is the code behind each item (in this case, the product category):

<li <?php wc_product_cat_class( '', $category ); ?>>
	<?php
	/**
	 * woocommerce_before_subcategory hook.
	 *
	 * @hooked woocommerce_template_loop_category_link_open - 10
	 */
	do_action( 'woocommerce_before_subcategory', $category );

	/**
	 * woocommerce_before_subcategory_title hook.
	 *
	 * @hooked woocommerce_subcategory_thumbnail - 10
	 */
	do_action( 'woocommerce_before_subcategory_title', $category );

	/**
	 * woocommerce_shop_loop_subcategory_title hook.
	 *
	 * @hooked woocommerce_template_loop_category_title - 10
	 */
	do_action( 'woocommerce_shop_loop_subcategory_title', $category );

	/**
	 * woocommerce_after_subcategory_title hook.
	 */
	do_action( 'woocommerce_after_subcategory_title', $category );

	/**
	 * woocommerce_after_subcategory hook.
	 *
	 * @hooked woocommerce_template_loop_category_link_close - 10
	 */
	do_action( 'woocommerce_after_subcategory', $category );
	?>
</li>

Let's consider an example where the number of products should be shown without brackets with the word, "products" as suffix i.e., like this:

Here's how this can be done.

Step 1

Download WooCommerce plugin to your computer and open its folder with a code editor like Visual Studio Code.

Now search for each of the hook names in the above code in order.

You can find that one of the functions hooked to woocommerce_shop_loop_subcategory_title action hook is woocommerce_template_loop_category_title.

add_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', 10 );

in /wp-content/plugins/woocommerce/includes/wc-template-hooks.php.

and this is the function definition:

function woocommerce_template_loop_category_title( $category ) {
	?>
	<h2 class="woocommerce-loop-category__title">
		<?php
		echo esc_html( $category->name );

		if ( $category->count > 0 ) {
			echo apply_filters( 'woocommerce_subcategory_count_html', ' <mark class="count">(' . esc_html( $category->count ) . ')</mark>', $category ); // WPCS: XSS ok.
		}
		?>
	</h2>
	<?php
}

from /wp-content/plugins/woocommerce/includes/wc-template-functions.php.

As we can see the code we are interested in is defined in the above function.

To make changes to it we have to

1. unhook this function from woocommerce_shop_loop_subcategory_title
2. rehook a modified copy of this function to that same location.

Step 2

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Modify the output of Categories List component

Code: