How to Customize the WooCommerce Sorting Dropdown

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

WooCommerce Default Sorting

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.

Done! It should look something like this:

WooCommerce Modified Sorting

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.

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.

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:

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.

Happy sorting! 🙂

 

16 thoughts on “How to Customize the WooCommerce Sorting Dropdown

  1. 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!

  2. 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.

  3. Jeffrey Cuthbert Caulleechurn

    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

  4. 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”?

  5. This is great, it helped me a lot. Thanks.

  6. 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???

  7. Hi,
    I would like to know how can move the sorting bar to footer.
    Thanks

  8. 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.

  9. Thanks so much Patrick. The “newness” thing was driving me nuts. You’ve saved my sanity!

  10. 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 ?

  11. 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’ )
      ) );

  12. 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

Leave a Reply

Your email address will not be published. Required fields are marked *