How to Completely Remove Product Sorting Dropdown

In this super tutorial I will show you 2 methods how you can remove product ordering “Default sorting” dropdown in your WooCommerce theme without CSS.

If you don’t need to remove the whole dropdown but only certain options, please continue to this tutorial.

Default product sorting options in WooCommerce
Here is the dropdown we are going to remove. Without CSS of course 😁

Method 1 – orderby.php

You probably know how WooCommerce templates work. So, it is quite enough to copy templates/loop/orderby.php from the WooCommerce plugin directory to your theme woocommerce/loop/orderby.php and change anything inside the file. If it will be empty – no product sorting dropdowns appear on your website.

I do not recommend to use this method because each time you update WooCommerce plugin, you have to check if there any changes in orderby.php file you replaced, so please consider doing it with hooks, it is described below.

Method 2 – Disconnect function woocommerce_catalog_ordering() from action hooks

WooCommerce adds this dropdown to its default templates with an action hook woocommerce_before_shop_loop and priority 30.

So all you have to do is to remove the action:

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

You can insert this code to your theme functions.php file. But before doing it, consider configuring how your products are going to be sorted by default, check this tutorial for more info.

But how to Remove Both “Default Sorting” Dropdowns in StoreFront theme?

StoreFront theme is a default free WooCommerce theme, which is widely used. The thing is that if you try to remove the sorting dropdown in this theme with the above code, nothing will happen.

Why? Because for some weird reason StoreFront has another priority of the hook – 10. Just change the code a little bit and it should work out great.

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

But it is not enough, because the theme has two sorting dropdowns!

Two product sorting dropdowns in WooCommerce StoreFront theme

To remove the dropdown which is after the product list, you need to disconnect it from woocommerce_after_shop_loop hook, here is how:

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

More about product sorting

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code