How to Remove the Sort Order Drop-Down from WooCommerce Shop and Product Category Pages

In this quick Upload WP tutorial we'll address Murray's question which relates to the default sorting drop-down found on the WooCommerce shop and product category pages.  It's a question that has been raised by many eCommerce site owners that have a small quantity of products in their catalog.  The question that Murray asked is as follows…

“I’m wondering how to remove the drop-down sort order button on the WooCommerce shop page, I don’t have many products and want to comment it out.  Anyone know how or where to do it?

Thanks,

Murray”

We want to thank Murray for raising this important question.  It's one of those seemingly minor issues that grows bigger and more annoying over time.  We've even had people tell us that they can't use WooCommerce unless there is a way to remove it.  The good news is that you'll soon see just how easy it is to get rid of the drop-down default sorting option on the shop and product category pages so let's get started.
How to Remove Default Sorting Drop Down WooCommerce Shop Page

Removing the WooCommerce Shop Page Default Sorting Drop-Down

To start, remember to always use a child theme when customizing your WooCommerce site or any WordPress site for that matter.  The use of child themes ensures that your customizations are saved when you upgrade to the latest version of your specific theme.  If you're not sure how to create a child theme then check out the following tutorials…

Safely Customize your Site with Child Themes

Customizing the WooCommerce Checkout Page

Having said that, to remove the default sorting drop-down from the shop and product category pages of your WooCommerce site do the following…

In the WordPress admin go to Appearance > Editor > click on “Theme Functions” (functions.php) > copy and paste the code below into the functions.php file between the PHP open and close tags > click “Update File” > go out to your site and click Ctrl + F5 to refresh the page and the default sorting drop down will go away

Copy and paste the following snippet…

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

Now take a couple minutes to watch our tutorial video below.  It will show you exactly how to Remove the Default Sort Order Drop-Down found on the WooCommerce Shop and Product Category pages…

For your reference:

  • In the tutorial video we used a Mystile child theme, however, this process will work regardless of the theme used.
  • If you're not comfortable with creating your own child theme then feel free to use one of ours.  We've created a number of WooCommerce specific child themes for anyone to use.  To get them, simply register for the Upload WP Newsletter (opt-in form is above) and you'll receive a link to download all of the child themes.  Or, if you use a theme that we do not currently have one for, then simply sign up for the newsletter and respond to confirmation email we send you with the name of your parent theme.  We will then go ahead and create a child theme for it.  In addition, we made a tutorial video that demonstrates how to properly install a child theme.  You'll receive the link to view our “How to Install a Child Theme” video along with the WooCommerce child themes download link when you subscribe to our Newsletter.

If you have any questions related to removing the default sorting drop-down from the WooCommerce shop and product category pages please feel free to ask by posting a comment below in the Upload WP Community Forums

Posted by Thomas Tran

52 Comments

  1. Great post! While we are on the WooCommerce Shop page – could you show how to add a custom field? By default it displays product image, description, rating and price – but can’t figure how to add a custom field here – that doesn’t show on the single product page. Reason is not all know they can click to go to single product – so want to add a line “Read more” with a link to the specific single product page.

    Reply

    1. Thanks for the positive feedback Flemming and for your question. I’ll have to do some testing / tweaking to see if it’s possible to add custom fields to the WooCommerce Shop page. In the meantime, I’ll go ahead and publish your comment. If anyone else knows how to add custom fields to the Shop page please feel free to share it with us here.

      Thanks,

      Adam

      Reply

  2. Here’s how to create a Professional Splash page / Placeholder site with WordPress…

    Reply

  3. Great article! It works for me. Thank you Adam. The article is easy to follow.

    Reply

    1. Your welcome Rizi – Thank You for the positive feedback and letting us know it helped with modifying your WooCommerce site.

      Reply

  4. Thanks for all the help on WP, this website is a great resource!

    Was wondering if you could help[ me. I was wanting to adjust the featured image on my homepage to be inline with the Header margins, would you know how to do that?
    Currently my featured image is hangs out the sides of the margins which arnt inline with the header.

    There are two thin lines under the header which acts as a divider as well (it was there already)

    Reply

    1. Sorry forgot to mention this is for the Mystile Theme..

      Reply

    2. Hey Brendon – Thanks for the complements on our WordPress tutorials! Your positive feedback keeps us motivated to make more and more WP tutorials. Regarding your question on adjusting the Mystile theme Homepage featured image so that it’s inline with the header margins…

      What is the URL to your site? I’d like to take a closer look before I try to provide a solution. Let me know and we’ll go from there.

      Thanks again for your support,

      Adam

      Reply

  5. Hello Adam, thanks for your reply, can I email you the website by any chance?

    thanks again

    Brendon

    Reply

    1. Hi Brendon,

      Ya please do email me your site info. Just use the Contact form, that goes directly to my email. The link to the Contact page is in the footer of UploadWP.com. Thanks,

      Adam

      Reply

  6. Great post! A very simple fix. I just updated woocommerce, and since my site only sells two products, the 'sort by' dropdown was superfluous. After googling for a solution, this fix took about 30 seconds to implement. I'm used to constant googling/troubleshooting/more googling/more troubleshooting to fix these minor issues.

    Thanks a lot!

    Reply

    1. Hey Clyde – Thanks for the positive feedback! I'm glad to hear this tutorial on removing the default shorting drop-down from the WooCommerce shop page was helpful.

      Adam

      Reply

  7. Thank you for all of your helpful tutorials!

    I activated my child theme but when I go into Editor, I do not have an option for "Theme Functions" for my child theme. The only option that I have is the "Stylesheet" ~ did I do something wrong?

    Thank you!

    Reply

    1. Hi Tiffany – I'm glad to hear our WordPress tutorials have helped. What child theme are you using? If you uploaded (the zip file of it in the WP admin) one of the WooCommerce child themes we created then it should include a functions.php – please let me know and we'll go from there.

      Thanks,

      Adam

      Reply

      1. Hi Adam, I'm having the same issue as this person, I only see the Stylesheet option not the Theme Functions in the WP admin. Did I miss a step in setting up my child theme? I'm using the retailer theme with woocommerce.

        Thanks for all your helpful tutorials!

        Reply

        1. Hi Nancy,

          To add a functions.php to your child theme do the following… go to our tutorial on "Customizing the WooCommerce Checkout Page". In that tutorial you'll find the exact instruction and php for creating a functions.php file in your child theme.

          Reply

          1. Ok great, will give that a try, thank you for your quick response!

    1. You're welcome Leonie – glad to hear this tutorial was helpful!

      Reply

  8. Thanks Adam worked great – much appreciated!

    Reply

    1. You're welcome Murray – Thanks for letting me know it worked.

      Reply

  9. thanks for this tip – how would I go about removing the "Showing all # results"

    Reply

    1. Hi – Please take a few minutes to review our latest tutorial on Overriding WooCommerce Template Files with a Child Theme…. Once you've read through that tutorial and watched the videos that go with it… The file you need to modify to get rid of the "Showing all # results" message on the woocomm Shop page is… /loop/result-count.php

      I went ahead and modified result-count.php for you so here it is…

      <?php
      /**
      * Result Count
      *
      * Shows text: Showing x – x of x results
      *
      * @author WooThemes
      * @package WooCommerce/Templates
      * @version 2.0.0
      */

      if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

      global $woocommerce, $wp_query;

      if ( ! woocommerce_products_will_display() )
      return;
      ?>
      <p class="woocommerce-result-count">
      <?php
      $paged = max( 1, $wp_query->get( 'paged' ) );
      $per_page = $wp_query->get( 'posts_per_page' );
      $total = $wp_query->found_posts;
      $first = ( $per_page * $paged ) – $per_page + 1;
      $last = min( $total, $wp_query->get( 'posts_per_page' ) * $paged );

      if ( 1 == $total ) {
      _e( 'Showing the single result', 'woocommerce' );
      } elseif ( $total <= $per_page ) {
      printf( __( '', 'woocommerce' ), $total );
      } else {
      printf( _x( 'Showing %1$d–%2$d of %3$d results', '%1$d = first, %2$d = last, %3$d = total', 'woocommerce' ), $first, $last, $total );
      }
      ?>
      </p>

      Review this tutorial… http://uploadwp.com/overriding-woocommerce-template-files/

      Then use the modified result-count.php file above and that will remove "Showing all # results" from the Shop page of your WooCommerce site.

      Reply

  10. Hi,

    I'm afraid this didn't work for me. I'm using the latest version of woocommerce and the mayashop. I'm guessing they have changed the shortcodes somehow so I'll have to wait until they're back from holiday to see what their support team suggests.

    Great site anyways, bookmarked 🙂

    Reply

    1. Did you sort this out Patrick?
      It's under Theme Options > General > Shop > Show sorting dropdown = NO

      Reply

  11. Patricia Marrone August 27, 2013 at 9:04 pm

    Hello Adam,
    I am using the Wootique theme and after trying the many suggestion I've read online I still can't get my "sorted" products to show on my site. I've done the Products/Sort Products/"drag and drop," I've changed the numbers for each product in the Edit Product/Product Data/Advanced/Attributes with no luck. It seems to want to sort the items by categories and I can't find where to change that. I'm trying to sort my products in a more random way. Any suggestions?
    Thanks, Pat

    Reply

    1. Hi Patricia,

      When you say that you're trying to, "sort my products in a more random way"… Are you referring to the default sorting drop-down that appears on the /shop page? If so, you can control that by doing the following in the WordPress admin… Go to WooCommerce > Settings > click the "Catalog" tab > in the Catalog Options section you'll see the settings for Default Product Sorting. Play around with those settings and let me know if that helps answer you're question. If not, please provide more detail and I'll do my best to help. Thanks.

      Reply

  12. Fantastic article thank you so much. These are the type of helpful articles that make WordPress worth the effort.

    I have one small glitch once I installed this Default Sort Order Drop-Down on "Peddlar" it also removed the shopping cart symbol, any suggestions on how to get it back?

    Thank You, Paul

    Reply

  13. Hi Adam! That was awesome. Thanks!

    I have another question… how do you remove the "Show all 3 results" text on the left side of the page? Thanks so much!

    Reply

    1. Hi Jamie – I'm glad to hear that our tutorial on removing the default sorting drop-down from the WooCommerce Shop page was helpful. To remove the "Show all 3 results" text from the woocommerce shop page you need to edit… result-count.php

      Specifically, take a few minutes to review our tutorial on Overriding WooCommerce Template Files here… http://uploadwp.com/overriding-woocommerce-template-files/

      Follow the instructions in that tutorial and the file you need to override is… loop/result-count.php

      I've already made the modifications to the result-count.php file for you. Click the following link to get it in Notepad… http://uploadwp.com/wp-content/uploads/result-count.php_.txt

      Copy it from Notepad and paste it into NotePad++ > save it exactly as, "result-count.php" > upload it via FTP to… yourtheme/wp-content/plugins/woocommerce/templates/loop

      drop it in the /loop directory and the "Show all 3 results" will no longer show up on the WooComm Shop page.

      Reply

      1. Hi Teddy,
        I was wondering if I could apply the same code as I too would like to remove the 'showing xx results in my shop pages'.
        My theme is currently a Superstore Version 1.0.6.

        Kind Regards
        Anita

        Reply

        1. Hi Anita,

          You can use the same results-count.php file that I provided twin05 with. It's not theme specific so it should work fine with the Superstore theme. Here's the link to view my response to twin05…. http://uploadwp.com/remove-sort-order-drop-down-from-woocommerce-shop/#comment-14925

          Reply

          1. Thank you again :)))))

  14. Adam,

    I am trying to build a newer website for my employer and am having some difficulty in getting things the way I want them. I am currently using the Responsive theme for the main pages but would like to add a product list page utilizing something similar to e-commerce without the ability to purchase online at this time. Do you have any recommendations for how to proceed?

    Reply

    1. Hi Chad,

      I'm not sure I'm following your question fully. Please provide more details as to what you're trying to setup and I'll do my best to help. Thanks

      Reply

      1. I am trying to set up a products view page so only our purchasers may see product pricing but not using the online purchase aspect.

        Reply

        1. Hi Chad,

          It sounds like it's a situation where you need to password product the page where you display your products. That way only your purchasers can see the products and how much they cost. Or, is it that anyone can see the products but only the purchasers can see the actual price? Also, they can't actually purchase the products, only see what you have. I'm I following you? Let me know and I'll do my best to find a solution.

          Reply

          1. That is exactly what we are trying to do. I would like everyone to see the products but only the members after they sign in to see the pricing.

          2. I did some research and found something in the WordPress forums that I think will point you in the right direction. They provide the php to put in the functions.php of your child theme that will hide prices for people not logged in. Once members log in, they will see the prices. You could then just remove the Add to Cart button to prevent them from actually purchasing the products. Here's the link… http://wordpress.org/support/topic/hide-prices

          3. Adam,

            That is the exact idea that I am looking for. How do I add pricing and hide it to a variable product setup?

          4. Hi Chad,

            After doing some research I believe I found the perfect solution. The extension is called, "Catalog Visibility Options" and it gives you the ability to transform WooCommerce into an online catalog by removing eCommerce functionality. Moreover, you can configure it so that only "logged in" users can see the prices. Anyone will be able to access the product catalog but only members/logged-in users will be able to see the prices. However, they will not be able to actually purchase them online. If or when you do actually want to start selling through the site, you literally will need to change one setting to make that happen. So given the scope of what you're looking for, I think that the "Catalog Visibility Options" extension for WooCommerce is the perfect solution. Here's the link to view the plugin details…

            http://www.woothemes.com/products/catalog-visibility-options/

  15. It would appear as though I have entered the code on the "adult" site of an Avada theme in woocommerce. I now have the white screen of death. I have been to the ftp side to delete the code and in the two functions.php files, the new code is not there. Can you be of any help to get our site back? Thank you

    Reply

    1. Hi Melissa,

      Were you attempting to remove the default sorting drop-down from the shop page? Please feel free to contact us(link in footer) with more info on the issue and we'll do our best to help that way. Thanks

      Reply

  16. Can I just say thank you….I have recently had my site built and been unhappy with a few things. The web designer has been unresponsive so having to find out things myself. I have been trying to figure out how to get rid of the default sorting from my shop page for weeks.

    Reply

    1. You are very welcome Anita! Thanks for letting me know it helped and best of luck with your site, AllAboutUnderwear.com

      Reply

  17. Thanks for share, this was that i need.

    Reply

  18. Hi, I have followed your instructions, but this does not work for me… I have Woocommerce 2.1.2 Has the name of this action changed since your article came out? How can I remove the catalog sorting dropdown in the current version of woocommerce? Let me know if you need any more information.

    Thanks.

    Reply

    1. Hi Dave – Please use the Upload WP Forums to post your question here… http://uploadwp.com/community/index.php That way we can help you and anyone that has a similar question.

      Reply

  19. Hi Teddy.

    I am not a programmer but willing to try stuff. I followed your instructions on how to remove the the Sorting Drop Down. All went well until I saved the changes. Now I have a blank white screen. I can’t get back in to the editor, or any other function.

    My webhost and programmer are in the mountains so I am hoping you have some advice for me.

    Reply

  20. Please kindly let me know how to change the blue color of Default Sorting in Woocommerce, mystile theme. Thank you for all your tutorials.

    Reply

  21. Hi Adam I came across your site online and wondering how to take out a few options in the Woo dropdown. I am looking to take out rating and popularity. Any ideas?

    Thanks!!

    Reply

  22. HI,
    I have an off-topic question that still relates to drop down boxes. Here’s my situation/dilema: I offer a product for sale that also has a related size drop down box. If the person currently viewing my site is not logged in, I want to show “SM/MED” and “LG/XL” options in the drop-down. If the user is logged” in (customer), I want them to see “1- SM/MED & 1-LG/XL”….as one option. The other option is to have two drop down boxes and hide one of them according to user role. Any ideas?

    So…
    Person is not logged in will see:
    “SM/MED”
    “LG/XL”

    Person is logged in as customer will see:
    “1-SM/MED & 1-LG/XL”

    Reply

Leave a reply

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