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

In WooCommerce, the category archive page displays or hides the subcategories in front of the products by default, depending on the configuration. However, it is not possible to display the listing separately. If we want to separate the display 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 how it looks in the frontend:

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

Thanks to twoelevenjay