HostGator Web Hosting

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

HostGator Web Hosting

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

    • 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

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

    • 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

    • 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

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

    • 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

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

    • 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

      • 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!

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

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

  5. 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 🙂

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

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

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

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

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

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

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

          • 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

          • 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/

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

    • 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

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

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

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

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

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

LEAVE A REPLY