Remove WooCommerce Product Sorting Options

WooCommerce Logo

Posted on October 10, 2014 in Development, Web

Here’s another WooCommerce trick to add to your arsenal.

When you browse a product category in a WooCommerce powered store, you can sort the products. Depending on your theme, the sorting options may be displayed in a dropdown menu, as a row of buttons/links, etc. Usually the options include ‘default’ sorting, sorting by ‘popularity, ‘rating’, ‘date’, and ‘price’ (asc/desc). Pretty straight-forward. But what if you do not like some of these sorting options and do not want to display them to your site’s visitors? For example you do not have rating/reviews enabled and thus the rating order is irrelevant for your site. Or you do not want the customers to see which products have been added most recently.

Out of the box WooCommerce doesn’t have any back-end setting for this. You can remove the WooCommerce product sorting options through CSS by creating a rule for them that will include display:none;, but that’s ugly. There is a better way to do it and custom WordPress filters come to the rescue.

Simply add the following to your functions.php and you’re good to go:

// Customizes the WooCommerce product sorting options
// Available options are: menu_order, rating, date, popularity, price, price-desc
function custom_woocommerce_product_sorting( $orderby ) {
  // The following removes the rating, date, and the popularity sorting options;
  // feel free to customize and enable/disable the options as needed. 
  unset($orderby["rating"]);
  unset($orderby["date"]);
  unset($orderby["popularity"]);
  return $orderby;
}
add_filter( "woocommerce_catalog_orderby", "custom_woocommerce_product_sorting", 20 );
Enjoyed this post? Share it with others.
Share on email
Email
Share on facebook
Facebook
Share on google
Google
Share on twitter
Twitter

Responses (16)

  1. Kevin Loader
    March 4, 2015 at 11:31 pm · Reply

    where do i put:
    // Customizes the WooCommerce product sorting options
    // Available options are: menu_order, rating, date, popularity, price, price-desc
    function custom_woocommerce_product_sorting( $orderby ) {
    // The following removes the rating, date, and the popularity sorting options;
    // feel free to customize and enable/disable the options as needed.
    unset($orderby[“rating”]);
    unset($orderby[“date”]);
    unset($orderby[“popularity”]);
    return $orderby;
    }
    add_filter( “woocommerce_catalog_orderby”, “custom_woocommerce_product_sorting”, 20 )

    in the functions.php of the theme? or wordpress? top or bottom? after <?php

    kevin

    • pixel.ninja
      March 5, 2015 at 12:07 am ·

      Hi Kevin,

      You should put it in functions.php of your theme. As a rule of thumb, never modify the core WordPress files. And you can put it at the very end of the functions.php file, just before the closing PHP bracket (?>), so it would look like this:

      // Customizes the WooCommerce product sorting options
      // Available options are: menu_order, rating, date, popularity, price, price-desc
      function custom_woocommerce_product_sorting( $orderby ) {
        // The following removes the rating, date, and the popularity sorting options;
        // feel free to customize and enable/disable the options as needed. 
        unset($orderby["rating"]);
        unset($orderby["date"]);
        unset($orderby["popularity"]);
        return $orderby;
      }
      add_filter( "woocommerce_catalog_orderby", "custom_woocommerce_product_sorting", 20 );
      ?>
      

  2. andy
    October 1, 2016 at 1:10 am · Reply

    Hi,
    What if we wanted to to remove default sorting entirely? And leave no dropdown arrows or whatever?

    Thanks

    • pixel.ninja
      October 1, 2016 at 2:02 am ·

      Hi Andy,

      Try adding this into your theme’s functions.php file:

      remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

      That would be the preferred solution, but if it doesn’t work for you for some reason, you could hide the sorting dropdown just through CSS:

      .woocommerce-ordering {display: none;}

  3. Joseph
    December 1, 2016 at 4:22 pm · Reply

    Thank you! I needed to remove the sorting box and had the code but lost it. Now, with your comment I found it again. đŸ™‚

    • pixel.ninja
      December 1, 2016 at 5:19 pm ·

      Wonderful. I’m glad you found the post helpful.

  4. Nienes
    June 1, 2018 at 9:16 pm · Reply

    remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30 );
    This worked for me. Thank you very much!

    • Richard
      June 1, 2018 at 11:14 pm ·

      Excellent, thanks for sharing!

  5. Steve Sims
    February 14, 2019 at 12:12 am · Reply

    Thank you – I used the code above .woocommerce-ordering {display: none;} which did the trick for the site I have been working on.

    • Richard
      February 14, 2019 at 12:30 am ·

      Steve, thanks for stopping by and commenting. I’m delighted that the code in the post was helpful.

  6. Chris V.
    April 26, 2019 at 8:44 am · Reply

    remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30 );

    It’s 2019 and this still works perfectly. I never liked doing display: none; unless I was absolutely forced to. Greate workaround!

    • Richard
      April 26, 2019 at 2:47 pm ·

      Awesome, thanks a lot for the feedback, Chris!

  7. Adam
    September 19, 2019 at 2:33 am · Reply

    Hey Richard đŸ™‚
    Thank you for the tips!
    Could you help me how to setup a product seach bar next to this sort-by box in WooCommerce store please?
    I’ve already tried plugins, but it seems like they all wants to be integrated into the side-bar which I don’t even want to use. Putting a product search bar into the header menu is bad, because on smaller devices the main menus closing into just a little menu icon, so it also closes the searchbar with it.
    So I’d like to make a product search bar somewhere next to the sort-by box, with some php code into my childtheme’s functions.php file.
    Many thanks!
    Best
    Adam

    • Richard
      September 19, 2019 at 1:27 pm ·

      Hi Adam,

      Thanks for stopping by and your comment. Unfortunately that is not something that I can help you with in a comment as that is specific to your own unique scenario and depends on the theme you use, etc. There are different variables to consider.

      That being said, you could try to have a look at the get_search_form() WordPress function which is used to display the search form and see if that helps you. One way of doing it that I can think of from the top of my head would be to write a custom function that leverages the get_search_form() function and hook it into a WooCommerce action hook available at the place where you want to show it. You would also likely need to makes some CSS updates, so that the result looks nice, aligns properly, etc.

      Something like that could work, but yeah, I would have to see your site and the theme to determine the best way to go about it which, I am afraid, goes beyond the scope of these comments and ventures into the paid custom development work territory.

  8. Sha Chavez
    April 11, 2021 at 6:33 pm · Reply

    Thanks, mate. It really works on my site. Spent some hours working on it, now it vanished… Thank you!

    • Richard
      April 11, 2021 at 8:56 pm ·

      Fantastic, I’m very happy it helped you out!

Leave a reply

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


The reCAPTCHA verification period has expired. Please reload the page.