Visually separate sub-categories of products in WooCommerce – separate ‘ul’ lists

With WooCommerce, the sub-categories in front of the products are shown or hidden in the standard version on the category archive page, depending on the configuration. However, it is not possible to display the list separately. If we want to separate the representation and have two separate listings, it is possible to use the following code.

/**
* Move WooCommerce subcategory list items into their own <ul> separate from the product <ul>.
*/
add_action( 'init', 'iphf_move_subcat_list' );
function iphf_move_subcat_list() {
	// Remove the subcat <li>s from the old location.
	remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );
	add_action( 'woocommerce_before_shop_loop', 'iphf_product_loop_start', 1 );
	add_action( 'woocommerce_before_shop_loop', 'iphf_maybe_show_product_subcategories', 2 );
	add_action( 'woocommerce_before_shop_loop', 'iphf_product_loop_end', 3 );
}
/**
 * Conditonally start the product loop with a <ul> contaner if subcats exist.
 */
function iphf_product_loop_start() {
	$subcategories = woocommerce_maybe_show_product_subcategories();
	if ( $subcategories ) {
		woocommerce_product_loop_start();
	}
}
/**
 * Print the subcat <li>s in our new location.
 */
function iphf_maybe_show_product_subcategories() {
	echo woocommerce_maybe_show_product_subcategories();
}
/**
 * Conditonally end the product loop with a </ul> if subcats exist.
 */
function iphf_product_loop_end() {
	$subcategories = woocommerce_maybe_show_product_subcategories();
	if ( $subcategories ) {
		woocommerce_product_loop_end();
	}
}

This is what it looks like in the frontend:

Thus we are able to style the subcategories accordingly and display them as filters, for example. This enables customers to better find products from the catalog.

Thanks to twoelevenjay