How to Remove, Rename, Reorder or Add Custom 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:
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:
menu_order
– Default sorting, so by default products are displayed by a custom order and if the custom order is not set – alphabetically. Here is a tutorial on how to change it.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;
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:
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:
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
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?
- By all the post data stored in wp_posts MySQL table, like
title
,modified
etc. - By post meta values
Based on this I am going to create the following options:
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!
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.