Unterkategorien von Produkten visuell trennen in WooCommerce – separate ‚ul‘-Listen

Bei WooCommerce werden auf der Kategorie-Archive-Seite im Standard, je nach Konfiguration, die Unterkategorien vor den Produkten angezeigt oder ausgeblendet. Es ist aber nicht möglich die Auflistung getrennt darzustellen. Wenn wir die Darstellung trennen möchten und zwei separate Auflistungen haben möchten, so ist es möglich folgenden Code zu verwenden.

/**
* 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();
	}
}

So sieht es dann im Frontend aus:

Somit sind wir in der Lage die Unterkategorien entsprechend zu stylen und beispielsweise als Filter darzustellen. Das ermöglicht den Kunden und Kundinnen Produkte besser aus dem Katalog rauszusuchen.

Danke an twoelevenjay