Posted on

WooCommerce: How to Remove the “Default Sorting” Dropdown

If the WooCommerce product sorting functionality (“Default Sorting” dropdown) is a waste of space or you don’t need that select box at all, you may want to remove it.

This PHP solution is simply cleaner than CSS – and no matter if you code or not, you just need to copy/paste my snippet in your theme’s functions.php.

WooCommerce: Hide “Default Sorting” Dropdown

PHP snippet 1: Remove “Default Sorting” Dropdown @ WooCommerce Shop & Archive Pages


/**
* @snippet Remove "Default Sorting" Dropdown @ WooCommerce Shop & Archive Pages
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @source https://businessbloomer.com/?p=401
* @author Rodolfo Melogli
* @compatible Woo 3.4.3
*/

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

PHP snippet 2:Β Remove “Default Sorting” DropdownΒ in StoreFront theme


/**
* @snippet Remove "Default Sorting" Dropdown @ StoreFront Shop & Archive Pages
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @source https://businessbloomer.com/?p=401
* @author Rodolfo Melogli
* @compatible Woo 3.4.3
*/

add_action( 'init', 'bbloomer_delay_remove' );

function bbloomer_delay_remove() {
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 10 );
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 10 );
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

120 thoughts on “WooCommerce: How to Remove the “Default Sorting” Dropdown

  1. Hi Roldofo, appreciate the blog, but it quite work for me either… for a couple of reasons that I was able to figure out.
    1) I’m using storefront, and that has its own set of hooks and actions
    2) When I created my own add_action(‘init’, function_call_to_remove_actions), I found it did not work until I added a higher
    priority than 10. So here’s my code that made things work:

        // remove product catalog sort 
        add_action( 'init', 'fmp_remove_catalog_ordering', 11 );
         
        function fmp_remove_catalog_ordering() {
          remove_action( 'woocommerce_after_shop_loop',     'woocommerce_catalog_ordering', 10 );
          remove_action( 'woocommerce_before_shop_loop',    'woocommerce_catalog_ordering', 10 );
          remove_action( 'woocommerce_before_shop_loop',    'storefront_sorting_wrapper',           9 );
          remove_action( 'woocommerce_before_shop_loop',    'storefront_sorting_wrapper_close',     31);      
          remove_action( 'woocommerce_after_shop_loop',     'storefront_sorting_wrapper',           9 );
          remove_action( 'woocommerce_after_shop_loop',     'storefront_sorting_wrapper_close',     31 );
        } 
    
    Keep up with the good work.
    
    1. Excellent, thank you πŸ™‚

  2. Not working anymore πŸ™

    1. Hey Javi, thanks for your comment! It works on my end, so could you be more specific i.e. what did you do recently on your website?

  3. Thank you so much!!!

    1. You’re welcome πŸ™‚

  4. Hey there,

    PHP snippet 1: Remove β€œDefault Sorting” Dropdown @ WooCommerce Shop & Archive Pages

    Doesn’t work for me πŸ™

    1. Hey Keely – thanks so much for your comment! Did you try snippet 2?

    2. I can’t reply to your question under it so I’m commenting here.

      I tried the second snippet and that didn’t work either.
      Pasted into child theme’s functions file.

    3. Keely, maybe it’s your theme’s fault. Try switching to 2017 theme for a moment and reapply the snippet – does that work?

  5. Worked perfectly. I didn’t need to sort 3 items!

    Thanks so much!

    1. LOL thanks Tim πŸ™‚

  6. Hello Rodolfo,

    Thank you for posting this, it has worked like a charm on my desktop but still showing on handheld mobile, do you have any suggestions

    Kind regards

    Mathew

    1. Hey Mathew, thanks for your comment! Yes, try clearing your browser cache and cookies πŸ™‚

  7. This still works. Have a bit of cleanup work to still do, but this still works. YAY!

  8. Hi,
    Yhanks a lot for thr trick. The first one works for me but not the second (syntax error)

    1. Thanks Phil! What syntax error did you get? Code looks good to me πŸ™‚

  9. Great tip. It worked for me for another instance, re

     add_action('init','delay_remove'); 

    Can I ask why by removing the action using the original hook doesn’t work?

    1. Hey Joao, thanks for your comment! Sometimes you have to delay in order to remove an action that hasn’t been added yet πŸ™‚

  10. thanks! works!

  11. Hello,
    Firstly thank you so much for sharing all this great information, the code worked and the items have now been removed from my website, thank you, however when viewing with a desktop computer there is a large white space, is it possible to remove this space?
    I’m using the Storefront theme.
    I’m unsure how to show a screen shot of this?
    Thank you again, Kindest regards, Alexandra

    1. Great πŸ™‚ There is probably something to fix via CSS – if you give me the link I can take a look!

  12. Thanks! Very useful!

    1. You’re welcome Toni!

  13. Thank you very much. It worked.

  14. Very useful post, I was trying to remove ordering in a storefront child and don’t realise that I supposed to delay my remove_action

    1. Awesome, thanks for your feedback Allyson πŸ™‚

  15. If you change flatsome child theme use next hook:

    add_action('init','delay_remove');
     
    function delay_remove() {
    	remove_action( 'flatsome_category_title_alt', 'woocommerce_result_count', 20);
    	remove_action( 'flatsome_category_title_alt', 'woocommerce_catalog_ordering', 30);
    }
    

    in CHILD-theme functions.php file

    1. Yes. wow. That works fine in flatsome theme.
      Thank you so much

    2. Yes – brilliant – thanks – worked for both DT and Mobile!

  16. That’s good. great thanks

  17. I also tried that code. Unfortunately did not work for me. I am using flatsome. Is there a way to hide for mobile only ??

    1. Schuhe, Flatsome is possibly overriding the default WooCommerce behaviour, so you’ll need to customize the snippet based on Flatsome coding. You can’t run PHP conditionally based on device size – you’ll need CSS in that case.

    2. 
      add_action('init','delay_remove');
        
      function delay_remove() {
          remove_action( 'flatsome_category_title_alt', 'woocommerce_result_count', 20);
          remove_action( 'flatsome_category_title_alt', 'woocommerce_catalog_ordering', 30);
      }
      
      
  18. Thanks, Rodolfo.
    Works a treat!

    1. Thanks a mill Torkild πŸ™‚

  19. The php function approach didn’t work for me. I tried yours and others I googled but none worked. What worked for me was CSS. I hid the drop down with this:

    .woocommerce-ordering {
        display: none;
    }
    
    1. Thanks Mike! CSS is not a great idea to hide elements as they will still be loaded by the server – however if someone needs a fast fix, your solution works perfectly. Thank you!

    2. The css solution worked for my theme (Catch Theme: Rock Star). Thank you.

  20. […] Aunque pueda parecer ΓΊtil, en realidad no siempre cumple las necesidades del gestor de la tienda, que si ya se ha preocupado de ordenar los productos en el modo que prefiera para obtener unas ventas Γ³ptimas, es posible que prefiera que no se muestre ese desplegable. […]

  21. Hi,

    I tried several ways to change the sort function as I would like to have it. But with no success.

    Here my goal:
    on our website, we have in the drop down sort function 10 different ways to sort products / auctions. That is too much. In addition, some functions are the same/very similar. I assume they will be displayed from two different plugins (WooCommerce and WooCommerce Simple Auction).

    Current options to sort:
    – Standartsortierung
    – nach Beliebtheit sortieren
    – nach Neuheit sortieren
    – nach Preis sortieren: niedrig zu hoch
    – nach Preis sortieren: hoch zu niedrig
    – sortieren nach Aktuellem Gebot: von tief nach hoch
    – sortieren nach aktuellem Gebot: von hoch nach tief
    – sortieren nach bald endenden Auktionen
    – sortieren nach soeben gestarteten Auktionen
    – sortieren nach meist aktive Auktionen

    Target set up of options to sort:
    – sortieren nach Aktuellem Gebot: von tief nach hoch
    – sortieren nach aktuellem Gebot: von hoch nach tief
    – sortieren nach bald endenden Auktionen
    – sortieren nach soeben gestarteten Auktionen
    – sortieren nach meist aktive Auktionen

    When we set up the website some days ago, two sort snippets were displayed on the homepage. One could be hide thanks to this code in Design > Customizer > CSS
    #shop-isle-blog-container form.woocommerce-ordering { display: none; }

    To adjust the sort functions in the drop down, I saved both codes of you in Design > Editor > functions.php and style.css of the Child theme. However, there are no changes in the dropdown to sort products.

    What do I need to do in order that only the named sort functions are available in the dropdown sort function?

    Thank you for your support

    Regards,
    Philipp

    1. Philipp, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  22. You rock! This worked so well. Removed the sorting from all views; desktop, tablet, mobile. I love it. Right now I only have 3 services to launch and sorting is not beneficial. FYI for other viewers and those commenting: I am using parent theme Divi and child them Startmetric.

    1. Brilliant! Thank you Luke πŸ™‚

  23. Perfect!

    1. Thank you so much Brian!

  24. This snippet worked to remove the default sorting dropdown on desktop, but it’s still showing on mobile.
    Also, is there a snippet to remove the Filter icon (3 bars) that also shows up on mobile?

    thanks

    1. Thank you Carole! Would you be able to attach a screenshot to your comment, so that I can be 100% sure of what you’re willing to remove? Thanks!

  25. Dear Rodolfo,

    First of all.. great website! Really valuable source!
    I’m using Storefront’s Galleria theme.. For the shop page, I was able to remove the default sorting and the result count but there’s still this pagination on the right side that I can not remove..

    // remove default sorting dropdown in StoreFront Theme
     
    add_action('init','delay_remove');
     
    function delay_remove() {
        remove_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 10 );
        remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 10 );
        remove_action( 'woocommerce_after_shop_loop', 'woocommerce_result_count', 20 );
        remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
    }
    

    Thank you in advance.
    Geert

    1. I did try to add the following..

      remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
      

      but that didn’t do the trick.. Also I have the pagination twice so I guess there must be a woocommerce_pagination before the shop loop as well..?

    2. Hey Geert, thanks for your comments! Have you tried asking the Storefront support? Unfortunately I can’t provide custom work in the blog comments – thanks for your understanding πŸ™‚

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

    where i put this code to remove Default Sorting Dropdown from category Breadcrumbs Bar

    1. Hey Meer, thanks for your comment! You can place this in your child theme’s functions.php file – if you need more guidance, please take a look at this video tutorial: http://businessbloomer.com/woocommerce-customization-hangout/

  27. Any way to change the default sort on a specific category. Like on our new products page, I would like the default in the sorting dropdown to be “Sort by newness” and not “Default sorting”. Is there any way to do that? Thanks!

    1. Amy, thanks so much for your comment! Yes, I’m sure this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  28. Hi Rodolfo!

    Thanks for the hint, it worked well. However, the text “showing all 6 products” still displays on the page. Is there a way to remove this text, too?

    Thank you in advance.

  29. Hi there.

    Thanks for this. However, sadly it also hasn’t worked for me.

    I’m using the Suisen theme by CSS Igniter.

    I created my own Child Theme functions.php and then added the first block of your code (on the assumption the 2nd one is irrelevant to me) – but the drop-down is still there (for sorting).

    Any ideas? Thanks again for the initial solution – it seems to work for most people which is great.

    1. Hey John, thanks for your comment! You’ll need to see if your theme is already overriding the element (like Storefront does, hence the Snippet #2 which is specific to that theme). Let me know πŸ™‚

  30. Perfect, thanks for this

    1. You’re very welcome – thanks for your comment πŸ™‚

  31. Worked beautifully – much better than hiding with css. Thanks much!

    1. Hey Tricia, thanks so much for your feedback! Have a lovely day πŸ™‚

  32. Sorry, disregard last comment. WordPress doesn’t list them alphabetically and it was under ‘Theme Functions’. I entered your code and it worked perfectly so thank you!

    What happens if I update the theme though?

    1. Brian, thanks for your comment and glad it eventually worked πŸ™‚

      So, to avoid overriding your customization, you should create a “child theme” instead. If you need further information, please take a look at my relevant video tutorial.

      Hope this helps!

    2. The did it as you said in the .php file, but it did not work. The website is made under a Sydney Child theme.

    3. Bruce, thanks for your comment! I’m not familiar with the Sidney theme, but it could be that they are already overriding the “Default Sorting” dropdown, so my fix (which is valid for a default WooCommerce website) wouldn’t work.

      The other option is that your remove_action needs to be delayed as it’s trying to remove something that has not been added yet. Take a look at snippet #2 to get the idea… try with placing the remove_action inside a function that is triggered by “init”.

      Let me know πŸ™‚

  33. There is no such file as functions.php listed anywhere under the Editor

  34. I recently added the following code to my custom CSS input on my shop page:

    /*To remove Sorting drop down */
    .orderby {
    display: none !important;
    }

    And it messed up the whole page and is now displaying placeholder boxes above my products.

    How do I fix this so it displays normally?

    Any help would be most appreciated – it’s urgent!!

    Thanks.

    1. Hey Justin, thanks for your comment!

      First, I never suggest using display:none, that’s bad practice. My solutions are both via PHP and allow your site to load faster.

      Having said that, those placeholders have nothing to do with your custom CSS. If you remove that CSS you added, do the placeholders disappear? I’m not sure – in case you have to disable “Show categories and products” in the WooCommerce settings display.

      Hope this helps πŸ™‚

  35. My problem is that the default sort dropdown menu is showing above my mean-menu from the theme Flatsome.
    What is the problem here?

    1. Hey Shanti and thanks for your comment! I’m afraid I don’t own Flatsome, but my guess here is that the theme is already overriding and repositioning the “default sorting” dropdown elsewhere, therefore this snippet would not work. If you have time, try doing a file search trough the Flatsome PHP files to see if they already execute the remove_action – in that case the solution will be somewhat similar to the Storefront theme fix. Hope this helps!

  36. It worked to me also, thank’s and keep up the good work!!
    Regards!

    1. Thank you so much – awesome! πŸ™‚

  37. Hi Rodolfo,

    Your code snippet for removing default sorting dropdown worked for me, but I am having a different issue regarding the product sorting. In one site, I have six products having SKU value BPA-Donate-0, BPA-Donate-1 … … BPA-Donate-5. Even after sorting them in backend based on SKU value, frontend display is not maintained based on SKU value. Any idea why is it happening so?

    1. Hey Manas, thanks for your comment! You can’t sort by SKU in the WooCommerce default settings: http://screencast.com/t/xtabQWosT… so whatever you’ve sorted in the backend was probably just for the backend πŸ™‚

  38. I have a problem. IΒ΄m helping a friend with his website. The problem is the dropdown only appear when I seach something, but in the rest of the shop is missing. Please, could you help me?

    1. Hey Luis, thanks for your message! Can you send me a screenshot or your Website URL? I’m not sure I fully understand your question and this would really help me give you a solution πŸ™‚ Thanks!

  39. thank you ! works well !

    1. Thank you Zabli! πŸ™‚

  40. Gracias ! Me funcionΓ³ muy bien!

    1. Thank you Karen for your feedback!

  41. Oh it worked. Your snippet in the comment section worked. I am so happy. Thank you..

    1. Great, thank you for your feedback!

  42. hello sir, I am an artist. It is not working out on my site. Please help me Sir.

  43. I did try all the suggestions but nothing worked. The dropdown is still there! πŸ™

    1. Iosif, thanks for your feedback. It could be that your theme has changed that hook and therefore we’re trying to remove something that has already been removed by your theme πŸ™‚ If PHP does not work, simply use some CSS such as:

      /* copy this in your style.css */
      .woocommerce-ordering {
      display:none
      }
      
    2. Dear Rodolfo,

      Your suggestions did not work for me.
      Please help. I am desperate.
      The site I am working on is.

    3. Hey Bahar, thanks for your comment! This snippet should work on every site, however if you have heavily customized themes or certain WooCommerce plugins this might not work. Try, as a test, to disable your theme and all your plugins (excluded WooCommerce) and see if the snippet works πŸ™‚ Let me know

    4. Give greater priority

  44. Hi Rodolfo, Thank you! It worked perfectly for me

  45. Hi Rodolfo,

    I’m having the same issue as Kim. I use Storefront theme, and created a child theme (storefront-child). If I add the snippet to my functions.php, nothing happens.

    Any thoughts on this? Because i really want to remove the sorting box with a php action, and not the CSS solution.

    Thanks in advance.

    1. Ok Pieter, at this point I’m thinking Woocommerce might have changed the hook for this. I’ll check Storefront and let you know!

    2. Pieter, I just added a new snippet dedicated to StoreFront theme! Hope you appreciate it πŸ™‚

    3. Thanks for the fast reply and the new snippet. Unfortunately, it doesn’t work when I put this in my child theme functions.php, only if I put it in the main storefront theme’s functions.php .

      Not that it’s super important, I can re-add it when I get a storefront update :-), but it’s strange the child theme doesn’t ‘accept’ it.

    4. It makes sense. Probably it’s a problem with the order of calls: we need to remove the hook only after it is added. We’re probably too early there! Try using this instead:

      // remove action after add action
      add_action( 'after_setup_theme', 'remove_after_add', 0 );
      function remove_after_add() {
      remove_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 10 );
      remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 10 );
      }
      
    5. Rodolfo,

      Works like a charm!

    6. Awesome Pieter, thanks!

    7. Ok.. Now it works also for me with the storefront-child theme.. Thanks Rodolfo..

    8. Awesome Francesco – thanks for letting me know!

    9. Great! Thanks for this, Rodolfo! That last one works perfect.

      Just one question. The text ‘showing X results’ is still visible. Is there a simple way to remove that too?

      Thanks!

    10. Awesome πŸ™‚ Yes, to remove the “showing X results” there is another snippet I posted here somewhere. Just do a search and you’ll find it – if you don’t message me back!

  46. Thank you. It helpded me! works great. Keep it up.

    1. Awesome, Jack, thank you so much for your feedback!

  47. This didn’t work for me. I pasted it into my child theme’s function.php and I flushed the cache, but the sorting dropdown is still there. Any ideas as to why it’s not working?
    Thanks!
    kim

    1. Hello Kim thanks for your feedback! This is weird, this snippet has worked for everyone so far! Maybe your theme or settings are slightly different. Did you sort this out already – otherwise feel free to shoot me an email and I’ll see what I can do. Cheers!

    1. You’re welcome John, thanks for your feedback πŸ™‚

  48. Great, thank for your share

    1. You’re welcome Panpic! Thanks for your feedback πŸ™‚

  49. Thank you very much I have tried many ways to try to get rid of the sort box and at last this one worked for me.

    1. Awesome! You’re welcome πŸ™‚

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.