With the Besic-Installtion of WooCommerce you have a filter, that may be interesting for programmera – but aftr my honest opinion it’s not veryuseful for clients and shop keepers. You can sort products by price or by popularity – but running a small shop this functionality is not really helpful.

Instead i would love to  have a filter that filters products by category. From a client’s point of view: I don’t care how cheap or expensive or popular a product is – i just want to see all products from category X. But it seems in WooCommerce there is no such filter, no such functionality built in. So we will have to add some code…

How to remove the WooCommerce standard filters dropdown

First of all I want to deactivate the standard filters. I could do this with a few lines of CSS, but of course I ‘really’ want to deactivate those filters. So I’ll have to add some code to the function.php – and this is how and what:

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

Just add this one line of code to your functions.php – and the drop down will disappear. In case you are using the free WooCommerce theme Storefront, you will have to add also these lines of code, which i found over at Business Bloomer.com :

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

Well. The standard sorting dropdown should be gone by now.

Now for the category dropdown.

Over at remicorson.com (“WooCommerce: Create a shortcode to display product categories“) you’ll find a script, that will ‘almost’ fit our purpose. Almost. Somehow the developer mixed ID and CLASS – or maybe it’s rather a problem related to some update of WooCommerce or WordPress – but the script won’t work out of the box. But it’s rather easy to fix this little bug.  First here’s the original script from 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();
 
}

The only problem wit this script is, that it is looking for an element with the  ID “dropdown_product_cat” g– which does not exist. Bt there is actually an element with the CLASS  “dropdown_product_cat”. So I basically just modified the script a little bit – and now it is looking for an element with the CLASS “dropdown_product_cat”. And this looks like that:

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

Of course also this Code Snippet has to go into the functions.php of your current theme to be recognized by WordPress – or into an active plugin – otherwise it just won’t work.

Once the snippet is placed inside the functions.php, you can proceed to implement the dropdown menu by placing a shortcode inside a template file.

I placed the shortcode inside the WooCommerce template “archive-product.php” which is responsible for displaying the categorie pages. I actually copied the template file to the directory “theme/woocommerce/archive-product.php” so that the next WooCommerce update won’r override the changes i made. The implementation of the shortcode looks like this::

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

I hope this may help somebody in the future? Cheers!