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 );
Loading tweets...
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
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 ); ?>Hi,
What if we wanted to to remove default sorting entirely? And leave no dropdown arrows or whatever?
Thanks
Hi Andy,
Try adding this into your theme’s
functions.phpfile: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;}Thank you! I needed to remove the sorting box and had the code but lost it. Now, with your comment I found it again. đŸ™‚
Wonderful. I’m glad you found the post helpful.
remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30 );
This worked for me. Thank you very much!
Excellent, thanks for sharing!
Thank you – I used the code above .woocommerce-ordering {display: none;} which did the trick for the site I have been working on.
Steve, thanks for stopping by and commenting. I’m delighted that the code in the post was helpful.
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!
Awesome, thanks a lot for the feedback, Chris!
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
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.
Thanks, mate. It really works on my site. Spent some hours working on it, now it vanished… Thank you!
Fantastic, I’m very happy it helped you out!