In der Basis-Installtion bringt WooCommerce einen Filter, der für Programmierer vielleicht intereesant ist, aber meiner Meinung nach für Kunden und Händler nur wenig Mehrwert bringt. Eine Sortierung nach Preis und Bewertung etc ist theoretisch interessant – aber in der Praxis doch selten hilfreich. Es sei denn, man hat tausende Produkte – was in der Praxis wohl eher selten vorkommt.

Stattdessen würde ich mir eigentlich eher wünschen, dass es einen entsprechenden Filter für Kategorien gäbe. Aus Kunden-Sicht: Egal wie teuer, egal wie beliebt – ich will jetzt alle Produkte aus der Kategorie XY sehen. Leider bringt das WordPress Shop-Plugin WooCommerce eine solche Funktion bzw. ein solches Dropdown-Menu nicht „einfach so“ mit. Aber es gibt ja Code…

WooCommerce „Standard-Filter“ entfernen

Zunächst möchte ich den „Standard-Filter“ deaktivieren. Ich könnte ihn auch einfach über CSS verstecken, aber dann würde WordPress im Hintergrund immernoch die Prozesse ausführen, die den Filter generieren. Das möchte ich nicht. Also raus damit. Hier die passende Funktion:

remove_action( ‚woocommerce_before_shop_loop‘, ‚woocommerce_catalog_ordering‘, 30 );

Und um das Dropdown auch von StoreFront-Shops zu beseitigen ist noch folgender Code-Schnippsel notwendig – nachzulesen bei Business Bloomer.com bzw. hier.

/**
* @snippet Remove "Default Sorting" Dropdown @ StoreFront Shop & Archive Pages
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @source https://businessbloomer.com/?p=401
* @author Rodolfo Melogli
* @compatible Woo 3.5.2
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_action( 'init', 'bbloomer_delay_remove' );

function bbloomer_delay_remove() {
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 10 );
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 10 );
}

So. Damit hätten wir das Sortierungs-Dropdown chon mal beseitigt,

Nun zum Kategorie-Dropdown.

Bei remicorson.com („WooCommerce: Create a shortcode to display product categories„) gibt es einen Code-Schnippsel von 2013, der in meinem Fall „fast“ gepasst hat. Leider nur fast. Irgendwie haben die Entwickler übersehen, dass das Skript die ID des Elements anspricht – und nicht die Klasse des Elements. Aber dieser Fehler ist ziemlich einfach behoben. Hier zunächst der Original-Code von remicorson.com –>

/**
* WooCommerce Extra Feature
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
 
function woo_product_categories_dropdown( $atts ) {
 
extract(shortcode_atts(array(
'count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
 
ob_start();
 
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
 
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
woocommerce_product_dropdown_categories( $c, $h, 0, $o );
 
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = document.getElementById("dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
}
}
product_cat_dropdown.onchange = onProductCatChange;
/* ]]> */
</script>
<?php
 
return ob_get_clean();
 
}

so. Der Haken an der Sache ist wie gesagt, dass nach der ID „dropdown_product_cat“ gesucht wird – die gibt es aber nicht. Es gibt aber das Element mit der Klasse „dropdown_product_cat“. Ich habe also einfach die Funktion so abgewandelt, dass nicht nach der ID, sondern nach der Klasse „dropdown_product_cat“ gesucht wird. Das sieht dann so aus:

/////
/**
* WooCommerce Extra Feature
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract( shortcode_atts(array(
'count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts ) );
ob_start();

// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
wc_product_dropdown_categories( array(
'orderby' => ! empty( $orderby ) ? $orderby : 'order',
'hierarchical' => $hierarchical,
'show_uncategorized' => 0,
'show_counts' => $count,
'show_count' => 0, 
) );
?>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(function(){
var product_cat_dropdown = jQuery(".dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.val() !=='' ) {
location.href = "<?php echo esc_url( home_url() ); ?>/?product_cat=" +product_cat_dropdown.val();
}
}
product_cat_dropdown.change( onProductCatChange );
});
/* ]]> */
</script>
<?php
return ob_get_clean();
}

Und natürlich muss auch dieser Code-Schnippsel in die functions.php des aktiven Themes – oder in ein entsprechendes Plug-In – sonst funktioniert das nicht.

Sobald beide Code-Schnippsel in der functions.php des aktiven Themes eingebaut sind ist es möglich, das Kategorie-Dropdown ins Theme einzubauen. Das macht man dann über einen Shortcode – bzw. über den Aufruf eines Shortcodes.

Ich habe den Shortcode in das WooCommerce-Template „archive-product.php“ eingebaut. Dieses habe ich in meinem Theme-Verzeichnis unter „theme/woocommerce/archive-product.php“ hinterlegt, damit es beim nächsten WooCommerce-Update nicht überschrieben wird. Der Shortcode bzw. die Aktivierung des Shortcodes sieht dann so aus:

echo do_shortcode('[product_categories_dropdown orderby="title" count="0" hierarchical="0"]');

Ich hoffe, dass das dem einem oder der anderen vielleicht hilft?