How to Remove, Rename, Reorder or Add Custom Sorting Options

In this tutorial we are going to customize options in the product sorting dropdown on the shop and product archive pages without plugins.

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 the default sorting options are on the screenshot:

Default product sorting options in WooCommerce

And this is the code which allows to remove them:

add_filter( 'woocommerce_catalog_orderby', 'misha_remove_default_sorting_options' );
 
function misha_remove_default_sorting_options( $options ){
 
	unset( $options[ 'popularity' ] );
	//unset( $options[ 'menu_order' ] );
	//unset( $options[ 'rating' ] );
	//unset( $options[ 'date' ] );
	//unset( $options[ 'price' ] );
	//unset( $options[ 'price-desc' ] );
 
	return $options;
 
}

You can insert all the code from this article to your theme functions.php file.

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

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

Rename the Default Sorting Options

Nothing special here, we are using just 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 we do not 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;
 
}

Did it work out great? Check this screenshot:

How to rename any of the default sorting options on the WooCommerce shop page

Change the Order of Sorting Options

I didn’t want to write about it the whole chapter, but 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 easily reorder sorting options in WooCommerce

Some comments:

Add a Custom Sorting Option

I have a bonus for you – we are going to create two of them! 🎉

First of all let’s decide what are our custom options going to be. Do you remember how we can usually sort posts in WordPress using WP_Query?

Based on this I am going to create the following options:

Create custom product sorting options in WooCommerce

The only thing you need to do in order this options to appear in the dropdown is to use the below code:

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;
 
}

You may think – but what is the default product sorting, it looks like they are already displayed by title, isn’t it? Nope – the default sorting is by menu order and then by title.

But obviously it is not enough. When you select any of the added options, nothing will happen. Because you have to do one more step.

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.

Now it should work! 🙃

Sort WooCommerce products alphabetically or display in stock products first

Of course the second filter is not necessary if out of stock products are hidden anyway. Check out that article, maybe hiding out of stock products completely is the more preferrable option for you.

More about Product Sorting

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code