Being able to organize your store however you want is one of the best parts about using WooCommerce. You could stick with the default ordering functionality or you may want to customize it a bit for your store. Maybe you want to remove the option to sort by price, or you want to remove the sorting all together (because you only have 5 products), or you want to add a whole new way to sort. That's all possible with WooCommerce.
Removing Sorting Options
The default sorting in WooCommerce
Maybe you want to remove the sort by price or maybe you want to remove the sort by newness option. All you have to do is add this snippet to your theme's functions.php file and choose which options you want removed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Modify the default WooCommerce orderby dropdown | |
| // | |
| // Options: menu_order, popularity, rating, date, price, price-desc | |
| // In this example I'm removing price & price-desc but you can remove any of the options | |
| function patricks_woocommerce_catalog_orderby( $orderby ) { | |
| unset($orderby["price"]); | |
| unset($orderby["price-desc"]); | |
| return $orderby; | |
| } | |
| add_filter( "woocommerce_catalog_orderby", "patricks_woocommerce_catalog_orderby", 20 ); |
Done! It should look something like this:
WooCommerce sorting after having some options removed
Changing the Text in the Sort
Maybe you just want to change the text of the sort by box so that it matches your brand. For example the “sort by newness” sounds a bit awkward to me. I'd like to change that to “sort by date: newest first”. You can do that with the same filter.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Modify the default WooCommerce orderby dropdown | |
| // | |
| // Options: menu_order, popularity, rating, date, price, price-desc | |
| // In this example I'm changing the default "Sort by newness" to "Sort by date: newest to oldest" | |
| function patricks_woocommerce_catalog_orderby( $orderby ) { | |
| $orderby["date"] = __('Sort by date: newest to oldest', 'woocommerce'); | |
| return $orderby; | |
| } | |
| add_filter( "woocommerce_catalog_orderby", "patricks_woocommerce_catalog_orderby", 20 ); |
Adding Items to the Sort
Is it possible to add items to the sort? For example sort by oldest products.
Absolutely.
It's a bit more complex because we have to not only add an item to the menu. But we also need to add the functionality that actually does the sorting. The first part about filtering the menu items is the same we just need to add one function to sort everything.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Add "Sort by date: oldest to newest" to the menu | |
| // We still need to add the functionality that actually does the sorting | |
| // Original credit to Remi Corson: http://www.remicorson.com/woocommerce-sort-products-from-oldest-to-most-recent/ | |
| function patricks_woocommerce_catalog_orderby( $sortby ) { | |
| $sortby['oldest_to_recent'] = __( 'Sort by date: oldest to newest', 'woocommerce' ); | |
| return $sortby; | |
| } | |
| add_filter( 'woocommerce_catalog_orderby', 'patricks_woocommerce_catalog_orderby', 20 ); | |
| // Add the ability to sort by oldest to newest | |
| function patricks_woocommerce_get_catalog_ordering_args( $args ) { | |
| $orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) ); | |
| if ( 'oldest_to_recent' == $orderby_value ) { | |
| $args['orderby'] = 'date'; | |
| $args['order'] = 'ASC'; | |
| } | |
| return $args; | |
| } | |
| add_filter( 'woocommerce_get_catalog_ordering_args', 'patricks_woocommerce_get_catalog_ordering_args', 20 ); |
Removing the Sort
Some store owners may want to remove the sort feature entirely. If you have very few products or the sorting just doesn't make sense for your store (ex. 20 products that are all the same price and are just different colors). In this case you may want to remove the sort feature and clear up the visual clutter.
Removing functionality is usually pretty easy. It's usually just one line:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 ); |
The one thing that's hard about the above is many themes move the location of the sort. And if they move it the above code won't work because the priority (that's the parameter that the 30 is representing) is wrong. If the above code doesn't happen one thing you can try is to remove the priority entirely. Remove the number and the comma before it.
If that still doesn't remove it there's something else going on.
Putting it all Together
Now if you want to do ALL of this (well all of it but removing the sort) you can do that in one go rather than three little snippets.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function patricks_woocommerce_catalog_orderby( $orderby ) { | |
| // Add "Sort by date: oldest to newest" to the menu | |
| // We still need to add the functionality that actually does the sorting | |
| $orderby['oldest_to_recent'] = __( 'Sort by date: oldest to newest', 'woocommerce' ); | |
| // Change the default "Sort by newness" to "Sort by date: newest to oldest" | |
| $orderby["date"] = __('Sort by date: newest to oldest', 'woocommerce'); | |
| // Remove price & price-desc | |
| unset($orderby["price"]); | |
| unset($orderby["price-desc"]); | |
| return $orderby; | |
| } | |
| add_filter( 'woocommerce_catalog_orderby', 'patricks_woocommerce_catalog_orderby', 20 ); | |
| // Add the ability to sort by oldest to newest | |
| function patricks_woocommerce_get_catalog_ordering_args( $args ) { | |
| $orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) ); | |
| if ( 'oldest_to_recent' == $orderby_value ) { | |
| $args['orderby'] = 'date'; | |
| $args['order'] = 'ASC'; | |
| } | |
| return $args; | |
| } | |
| add_filter( 'woocommerce_get_catalog_ordering_args', 'patricks_woocommerce_get_catalog_ordering_args', 20 ); |
Happy sorting! 🙂
Hey Patrick, some great tips here, thanks for sharing 🙂
For the non-coders, here are a couple free plugins that can let you remove sorting options or add a few new ones. They should also work fine with the snippet above for renaming sorting options as well. Cheers!
Thanks for sharing. Since they’re built by you guys I’m sure they’re amazing quality. 🙂
How can I rename the sort by price: high to low and low to high? or by popularity and average rating.. I am also looking to remove the default search option.
Hey Danny,
You should use the snippet under
Changing the Text in the Sort. Except instead of$orderby[“date”]you’ll want to change out “date” for the field you want to use which is “price” and “price-desc”.You may want to reach out to Codeable to help you with these. They should be able to do them in less than an hour of time.
Hi Patrick, i would like to know where the source file for the “sort by” is located in the installation folder . . .maybe it is => woocommerce/templates/loop/orderby . . . but the list of sorting is not there . . .instead i have this :
$name ) : ?>
<option value="” >
$val ) {
if ( ‘orderby’ === $key || ‘submit’ === $key ) {
continue;
}
if ( is_array( $val ) ) {
foreach( $val as $innerVal ) {
echo ”;
}
} else {
echo ”;
}
}
?>
Best Regards,
Jeffrey
Hi Patrick.
I am using the Storefront theme and the Homestore theme as a child theme.
I used the following code:
// remove default sorting dropdown in StoreFront Theme
add_action(‘init’,’delay_remove’);
function delay_remove() {
remove_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_catalog_ordering’ );
remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’ );
}
It removed the box, but the text ” showing the single result” is still showing
I only have one product.
How can I remove the text “showing the single result”?
This is great, it helped me a lot. Thanks.
Hi ! Tx for your tuto, it’s quite useful! I tried to change default order to sku adding :
add_filter(‘woocommerce_get_catalog_ordering_args’, ‘am_woocommerce_catalog_orderby’);
function am_woocommerce_catalog_orderby( $args ) {
$args[‘meta_key’] = ‘_sku’;
$args[‘orderby’] = ‘meta_value’;
$args[‘order’] = ‘asc’;
return $args;
}
in my functions.php, but it doesn’t work… any idea how should I change default ordering???
Hi,
I would like to know how can move the sorting bar to footer.
Thanks
Hey Patrick,
Thanks for the info! Quick noob question: Do I have to include “patricks” in the snippet of code? If not, do I just delete it? Or should it be replaced with something? Thanks.
The way I wrote the code you will have to include it. You could change the name of the function(s) within the code as long as you also change any references to that function name in the code as well.
Thanks so much Patrick. The “newness” thing was driving me nuts. You’ve saved my sanity!
I’ve been using this method for sorting by a meta_key but I was wondering whether you can add multiple meta_keys to the $args array ?
Hi Patrick,
Thanks a lot for the article, it was very useful.
I was wondering if there was a way to rearrange the dropdown entries, ie alphabetically.
I’d like the two “Sort by date: …” to be next to each other.
Can you please point me in the right direction?
Thanks again,
Eugene
You can use the filter “woocommerce_catalog_orderby” to reorder them.
$catalog_orderby_options = apply_filters( ‘woocommerce_catalog_orderby’, array(
‘menu_order’ => __( ‘Default sorting’, ‘woocommerce’ ),
‘popularity’ => __( ‘Sort by popularity’, ‘woocommerce’ ),
‘rating’ => __( ‘Sort by average rating’, ‘woocommerce’ ),
‘date’ => __( ‘Sort by newness’, ‘woocommerce’ ),
‘price’ => __( ‘Sort by price: low to high’, ‘woocommerce’ ),
‘price-desc’ => __( ‘Sort by price: high to low’, ‘woocommerce’ )
) );
Really a very good post and save my time.
Thank you for the post.
Can you please give some more info on this ordering possibility? I am really a beginner and can not make it work…
Hi,
what code do I need to add a sorting options that lets my readers sort by product categories (e.g., sort by category: landscape)?
Cheers,
Michaela
Did you ever get an answer to this Michaela??
Hi, how do I change the color of the arrows right side of the sorting box, on my site they are blue and cant find the css for it.
Hi Patrick,
I copied and pasted your code in the functions.php file of my child theme folder, but it is not working. May I know why?
Thanks!
How can I display this sorting dropdown on my widgets?
Thank you, my man! You definetly saved me time with this custom script. I never leave comments but doing it now.
I used this on 11/26/2018. So this code is still relevant! Whoo
How can I change the background color of the sorting options? It is now white like in your example. Thanks
Thank you for this. Saved a lot of time and helped a lot. Code still going strong in 2020.
Is it possible to modify the “low to high” sorting to exclude products with a price of $0?
what code do I need to add a sorting options sort by product categories
?
I am new to WordPress. It really works on my site. Spent some hours working on it… Thank you!
Hi there! Thanks for sharing! What about changing the font size of the Sort By Dropdown? I tried some codes, but unfortunately none of them works. 🙁