Many shops want to change the sorting options available in their WooCommerce stores, but sometimes it’s not obvious how to do so. For example, the core WooCommerce plugin actually allows you to create an entirely customized sorting order by dragging and dropping your products into the order that you choose. You can do this from the admin on the “Products” page:

WooCommerce custom product sorting

If you’d like to use this to create an entirely customized product order, you can read my tutorial on this at Sell with WP.

So let’s talk about another option before we get started. There’s also a paid plugin available that will let you weight product attributes (such as on-sale or featured status, price, and more), then automatically create a sorting order based on your weighted criteria. If you’d like to automatically sort your WooCommerce products I’d recommend checking that plugin / review out. This can be really helpful for those of you that have 100+ products and don’t want to sort them manually (which is tedious).

So let’s assume that you want to sort products by hand in your own order. If you do this, you’ll lose the option to sort products by name, and there’s no easy way to ever reset this. We’ll therefore break this tutorial into 2 parts: renaming a custom sorting order and adding a new alphabetical sorting option.

Update: We’ve turned this into a free plugin – details below.

Renaming the WooCommerce Default Sorting Option

First, let’s assume that you’ve already created a custom sorting order by dragging and dropping products into your ideal sorting display. For many shops, they no longer want to label this as the “Default sorting”, and would rather give this sorting a better name. Let’s change this to “Our sorting” instead. You could whatever you wish, such as “Recommended”, by adapting this first part of the tutorial.

We’re going to do what’s called a string replacement to simply change the label that’s displayed for this. We don’t want to change anything about how the default / custom sorting works, as we’ve already created our manual sorting. Changing the label on this is really simple with a string replacement.

You can change the label by dropping this snippet into the bottom of your child theme’s functions.php. We have instructions in our WooCommerce How To’s article on creating a child theme and child theme functions.php so that the changes we’re making won’t be overridden in an update.

// Change "Default Sorting" to "Our sorting" on shop page and in WC Product Settings
function skyverge_change_default_sorting_name( $catalog_orderby ) {
    $catalog_orderby = str_replace("Default sorting", "Our sorting", $catalog_orderby);
    return $catalog_orderby;
}
add_filter( 'woocommerce_catalog_orderby', 'skyverge_change_default_sorting_name' );
add_filter( 'woocommerce_default_catalog_orderby_options', 'skyverge_change_default_sorting_name' );

So what exactly is this bit of code doing? Well, the first part is creating a function that does our string replace. The array that our “orderby” options are in is the $catalog_orderby array, so we’re simply searching that array to change anything with “Default sorting” to “Our sorting”. You can replace “Our sorting” with whatever you’d like this custom sorting to be.

The second part involves pushing these changes into the right place. The add_filter() does this for us – the first one pushes this change into the sorting dropdown on the frontend, while second one changes this in the WooCommerce > Settings > Products page so that it will now say “Our sorting (custom + name)” under “Default product sorting options”.

Great! We’ve got our own custom sorting option, and we’ve changed the label for the WooCommerce default sorting. However, I’d like to still give my customers the option to sort my products alphabetically, so let’s add our own new WooCommerce catalog sorting option.

Add Alphabetical Sorting to the WooCommerce Catalog

To add WooCommerce product sorting options, we’ll need to add another sorting option to this array. WooCommerce has a helpful snippet that shows how to create a random sorting order, so we’re going to customize this snippet a bit to create an “Alphabetical” WooCommerce product sorting option rather than a randomized sorting option.

The first thing we need to do is create the set of rules that our sorting will use. We’ll want to use the product title from A-Z, so we’ll create a sorting argument to order by title in ascending order (going ‘up’ in the alphabet).

//Add Alphabetical sorting option to shop page / WC Product Settings
function sv_alphabetical_woocommerce_shop_ordering( $sort_args ) {
  $orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );
 
    if ( 'alphabetical' == $orderby_value ) {
        $sort_args['orderby'] = 'title';
        $sort_args['order'] = 'asc';
        $sort_args['meta_key'] = '';
    }
 
    return $sort_args;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'sv_alphabetical_woocommerce_shop_ordering' );

In this example, we’re creating our sorting order by title and adding that to the possible arguments that our catalog can use for sorting. Instead of title, you could use date, price, etc. However, we need to now add this to our sorting dropdown and our WooCommerce settings.

Now let’s add this snippet right below the previous one:

function sv_custom_woocommerce_catalog_orderby( $sortby ) {
    $sortby['alphabetical'] = 'Sort by name: alphabetical';
    return $sortby;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'sv_custom_woocommerce_catalog_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'sv_custom_woocommerce_catalog_orderby' );

This adds our new sorting order the $catalog_orderby array that we mentioned earlier. Instead of changing something in that array, we’re simply adding a value to it, first in our settings and next in the sorting dropdown. You can change the ‘Sort by name: alphabetical’ to whatever you’d like, as this is what’s displayed in the settings page on in your sorting dropdown. I’ve named it this way for consistency with the other WooCommerce sorting options.

Save your child theme’s functions.php and check out your WooCommerce settings and shop page. Want to add more WooCommerce product sorting options? You could use the same process again and enter new orderby and order arguments.

Final Product

So we wanted to rename and add WooCommerce product sorting options – how did we do? Our final result should look like this in the settings page and on the frontend:

WooCommerce Default Sorting Options

WooCommerce > Settings > Products

Add WooCommerce product Sorting options

Frontend: New sorting options

Looks like a success! Check out your new sorting option to confirm that everything is working as expected and to admire your handiwork. 🙂 You can even see this in action when viewing our shop pages.

Update: Want to use a plugin instead? You can now use our WooCommerce Product Sorting Options plugin to do so!

Get the plugin

Published by Beka Rice

Beka leads product direction for SkyVerge and technical documentation. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

25 Comments

  1. Hi this is nice tutorial, please can you tell me how can i show sorting options on my frontend side.

  2. Hi, This is the best pluggin I found as its closest to what I’m looking for, I need to sort products by their category name ordered by categories as they are arranged in the categories page what do I need to do, how should I modify the code?

  3. hi there i’m looking to create a filter to display my most loved product can you help me a bit ???

  4. Thanks for this add on. Just a quick question. Could I use your code to crate a
    Sort by: Store Location 1 and
    Sort by: Store Location 2

  5. HI! I want to add custom dropdown in woocommoerce shop page! any idea about that?

  6. Hi Beka,
    I’m trying to create a product sorting option that that allows me order by SKU as default but still allows custom ordering.

    So basically replace the woocommerce default “Default sorting (custom + name)”, to “Default sorting (custom + SKU).

    I’ve been able to change the default to SKU but for life of me can’t work out how to allow custom sorting as well.

    Any thoughts you might have would be very much appreciated:)

    Kind regards,
    JP

    • You could set a secondary sorting order if you’re running WP 4.0 or newer — check out how I did this in my extra sorting plugin — set the first sorting value to what you want to use for primary sorting (SKU or title), then set your fallback to the second sorting parameter. You’d want to use menu_order to sort by custom sorting.

      • Hi Jon Paul,

        You have been able to change the default to SKU , please tell me how you did it. This is all I need.
        Thank you
        Flora

  7. Hi there.. Awesome tips!

    I’m trying to edit WoCommerce up-sells.php file to have it order Up-Sells by date (desc) but can’t get it to work properly. Any ideas?

  8. Is there a way to get the products to be sorted alphabetically rather then by date added under the products edit tab?

  9. Hi there!
    Great tutorial.
    I’d like to apply alphabetical order to a custom taxonomy in woocommerce called brand.
    I tried changing
    $sort_args[‘orderby’] = ‘title’;
    to
    $sort_args[‘orderby’] = ‘brand’;
    But then the product order seems random, no alphabetical order at all.
    Does your code work with custom taxonomies?
    Thanks!
    Daniel

  10. You are an absolute genius for writing this code! Thank you so much for sharing!

  11. Hey there,

    Would it be possible to let us know how to sort products by a certain attribute using your advice please? For example for simple products, each as a set of attributes(eg. length – 1cm, 2cm, 3cm) and I’d like to be able to sort the products by the attribute value.
    Thank you.

  12. Is it possibile add the sorting select in each woocommerce page wich i’m creating through [PRODUCT_CATEGORY] shortcode?

    • Do you need to use the shortcode? If you just link to the category archive that already exists, this will show up for you, but it won’t show up when a shortcode is used. Here’s an example.

      • I apologize … I explained wrong … I’ve many shop pages called up via shortcode [product_category] … just in these pages I have no sorting dropdown … I would show this sorting slect in all shop sub-pages and not only in the shop
        thanks 🙂

  13. Hi Beka

    this site http://ozherbs.com.au/herbs/ is displaying products in a standard page using this code… for example [product_category category=”herbs” per_page=”68″ columns=”4″ orderby=”price” order=”asc”]

    how would you give customers a sorting option at the front end of the site? so they could choose to sort the page by other means such as title

    regards

    Jason

    • Hey Jason, as the shortcode pre-builds the query for you (which includes the ordering for products), customers won’t be able to change this on the frontend, so showing that dropdown won’t have any effect on the way products are shown with a shortcode. Instead, I’d direct them to the category archive, which would show ordering options.

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.