In this tutorial, I am going to share ” How to Remove, Rename, Reorder or Add Custom Sorting Options? ” You know, By Default, you can do this easily by following below step
Go to Appearance > Customize in your WordPress admin, you can change some of your display settings. In the Customizer, go to WooCommerce then Product catalog change the “Default product sorting” to “Default sorting (custom ordering + name)” and we’ll get going from there.
But this tutorial is not to show you the Default option. Actually, I am going to show you Custom Product Sorting including Remove, Rename, Reorder. So Let’s Get Started
Remove Default Sorting Options
Here I am going to use just one filter hook woocommerce_catalog_orderby, it is very similar to how we add or remove items from 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', 'fa_remove_default_sorting_options' );
function fa_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.
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', 'fa_rename_default_sorting_options' );
function fa_rename_default_sorting_options( $options ){
unset( $options[ 'price-desc' ] ); // remove
$options[ 'price' ] = 'Sort by price'; // rename
return $options;
}Change the Order of Sorting Options
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', 'fa_change_sorting_options_order', 5 );
function fa_change_sorting_options_order( $options ){
$options = array(
'menu_order' => __( 'Default sorting', 'woocommerce' ), // you can change the order of this element too
'popularity' => __( 'Sort by popularity', 'woocommerce' ), // I need sorting by popularity
'date' => __( 'Sort by latest', 'woocommerce' ), // Let's make "Sort by latest" the second one
'rating' => __( 'Sort by rating', 'woocommerce' ), // I need sorting by rating
'price' => __( 'Sort by price: low to high', 'woocommerce' ), // I need sorting by price to be the first
'price-desc' => __( 'Sort by price-desc: high to low', 'woocommerce' ), // I need sorting by price to be the first
);
return $options;
}Add a Custom Sorting Option
I have a bonus for you – I am going to create two of them!
add_filter( 'woocommerce_catalog_orderby', 'fa_add_custom_sorting_options' );
function fa_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', 'fa_custom_product_sorting' );
function fa_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;
}All the code need to be insert in functions
Looking WordPress Developer? Hire Me You can know more about ne at here