Product Sorting Options

This is a complete tutorial about product sorting options in WooCommerce.

I will show you how to hide some specific options, rename them, change the order options are being displayed and of course we are going to add our own custom product sorting.

You can find product sorting dropdown on the shop page or in the product archives.

Product sorting dropdown in WooCommerce
Product sorting options

Remove Default Sorting Options

You can also check my another tutorial if you want to remove the sorting dropdown completely.

Here we are going to use just one filter hook woocommerce_catalog_orderby, it is very similar to how we add or remove items from the my account menu, admin columns etc.

Ok, so all the default sorting options are on the screenshot:

Product sorting dropdown in WooCommerce
All the default sorting options

And below is the code that allows to remove any of them:

add_filter( 'woocommerce_catalog_orderby', 'misha_remove_default_sorting_options' );

function misha_remove_default_sorting_options( $options ){
	
	unset( $options[ 'popularity' ] ); // Sort by popularity
	unset( $options[ 'menu_order' ] ); // Default sorting
	unset( $options[ 'rating' ] ); // Sort by average rating
	//unset( $options[ 'date' ] ); // Sort by latest
	//unset( $options[ 'price' ] ); // Sort by price: low to high
	//unset( $options[ 'price-desc' ] ); // Sort by price: high to low
	
	return $options;
	
}

You can insert all the code from this article to your theme functions.php file. But consider using a child theme or a custom plugin if you current theme receives updates.

I think everything should be clear in the above code, but just in a case:

  • menu_order – Default sorting, by default products are displayed by a custom order and if the custom order is not set – alphabetically. How to change that?
  • popularity – Sort by popularity,
  • rating – Sort by average rating,
  • date – Sort by latest,
  • price – Sort by price: low to high,
  • price-desc – Sort by price: high to low;

Result after inserting the code:

remove default sorting options
We removed default sorting, sort by popularity and by average rating

The product search page also has a “Relevance” relevance option but it is hardcoded and we can not remove it with woocommerce_catalog_orderby.

Rename Default Sorting Options

Nothing special here, we are using exactly the same filter hook – woocommerce_catalog_orderby.

A simple example for you – let’s assume that customers rarely use sorting by “Price: high to low”, so do we really need it? In this case we have to do two things: remove it and rename “Sort by price: low to high” to just “Sort by price”, correct?

add_filter( 'woocommerce_catalog_orderby', 'misha_rename_default_sorting_options' );

function misha_rename_default_sorting_options( $options ){
	
	unset( $options[ 'price-desc' ] ); // remove
	$options[ 'price' ] = 'Sort by price'; // rename
	
	return $options;
	
}

Depending on where you are going to use your code snippet, consider using translation functions like __( 'Sort by price' ).

rename default sorting options on WooCommerce shop page

Change the Order of Sorting Options

I didn’t want to write about it the whole chapter, but finally have changed my mind. I know for somebody it could be obvious, but there is still a chance that it will help someone.

The most simple and clean way to change the order of sorting options is to redefine the whole array, like this:

add_filter( 'woocommerce_catalog_orderby', 'misha_change_sorting_options_order', 5 );

function misha_change_sorting_options_order( $options ){
	
	$options = array(
		
		'menu_order' => __( 'Default sorting', 'woocommerce' ), // you can change the order of this element too
		'price'      => __( 'Sort by price: low to high', 'woocommerce' ), // I need sorting by price to be the first
		'date'       => __( 'Sort by latest', 'woocommerce' ), // Let's make "Sort by latest" the second one
		// and leave everything else without changes
		'popularity' => __( 'Sort by popularity', 'woocommerce' ),
		'rating'     => 'Sort by average rating', // __() is not necessary
		'price-desc' => __( 'Sort by price: high to low', 'woocommerce' ),
		
	);
	
	return $options;
}

My result:

How to change the default order of WooCommerce sorting options
“Sort by price: low to high” is now displayed almost the first in the list

Some comments:

  • I set the filter hook priority to 5 just in case there would be plugins which can add their own sorting options as well. If you set the hook priority to 99999, you will definitely take off this ability from them.
  • You can set option names directly in your language if you want, without __() function.
  • You can add, remove or rename the options directly in this code as well.

Add a Custom Sorting Option

When creating any custom sorting options in WooCommerce it is always good to have some experience with WordPress WP_Query class. Especially with order and orderby parameters.

In this chapter I will show you how to create even two extra sorting options – by title and by stock status. First of all let’s just add this two options using woocommerce_catalog_orderby filter hook, we are already working the whole tutorial with it.

add_filter( 'woocommerce_catalog_orderby', 'misha_add_custom_sorting_options' );

function misha_add_custom_sorting_options( $options ){
	
	$options[ 'title' ] = 'Sort alphabetically';
	$options[ 'in-stock' ] = 'Show products in stock first';
	
	return $options;
}

It is actually enough for the extra options to be displayed.

Extra sorting options in WooCommerce
We’ve added “Sort alphabetically” and “Show products in stock first”

But of course they are useless now, so we have to make them sort the products. And that’s what woocommerce_get_catalog_ordering_args for.

add_filter( 'woocommerce_get_catalog_ordering_args', 'misha_custom_product_sorting' );
function misha_custom_product_sorting( $args ) {
	
	// Sort alphabetically
	if ( isset( $_GET[ 'orderby' ] ) && 'title' === $_GET[ 'orderby' ] ) {
		$args[ 'orderby' ] = 'title';
		$args[ 'order' ] = 'asc';
	}
	
	// Show products in stock first
	if( isset( $_GET[ 'orderby' ] ) && 'in-stock' === $_GET[ 'orderby' ] ) {
		$args[ 'meta_key' ] = '_stock_status';
		$args[ 'orderby' ] = array( 'meta_value' => 'ASC' );
	}
	
	return $args;
}

Post meta _stock_status can have only one of the following values: instock, outofstock, onbackorder.

Also woocommerce_get_catalog_ordering_args is not the only way to make the sorting work, if you’re looking for a more interesting solution, check this tutorial.

WooCommerce sort products alphabetically and by stock status

Of course the second filter is not necessary if out of stock products are hidden anyway.

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X