Categories: WordPress Tutorials

Remove the Default Sorting Dropdown from WooCommerce Shop Pages

WooCommerce stores with a few products do not often need the sort dropdown menu on the shop and product pages. In fact, the sort option is considered an unwanted part of the UI. A related element is the standard notice of the number of items/results.

Fortunately, removing these elements are easy to remove. In this tutorial, I will show the simple process of removing these two UI elements. Here is how the store looks before the changes are applied:

To start, confirm that default sorting is enables. if not, enable it from the backend. Go to Settings > Products > Display and then to Default product sorting. Select any option from the menu.

To make the changes, open up the functions.php file and add the following code snippets:

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
This snippet will remove the notice that shows the number of results.

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

This snippet will remove the default sorting dropdown from all pages

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 );
}
This snippet removes the default sorting dropdown in StoreFront Theme

Here is how the shop page would look like after the addition of the snippets:

The post An Easy Guide On How To Remove Default Sort Option in WooCommerce appeared first on WPblog.

Source link

WPBrainery

Recent Posts

How to Reorder Checkout Fields in WooCommerce (2019)

Are you looking to reorder checkout fields in WooCommerce? If so, this article is intended for you, as it will…

1 year ago

5 Reasons Why Your Website Needs An SEO Audit

For over a decade, the most basic challenge every website owner has faced is the position of the website in…

2 years ago

Let’s Build a Custom Vue Router

  Plenty of tutorials exist that do a great job in explaining how Vue’s official routing library, vue-router, can be…

2 years ago

AMP News

AMP is controversial, to say the least. Dave and I did a show on it about a year ago that…

2 years ago

Long Form vs Short Form: Which Content Type is Better for Your Blog? – WPblog

In order for your content to work, you must have a clear content strategy in mind. Because whether it’s textual,…

2 years ago

Working Towards Better Naming

There is a quote that I bet every one of you has heard many times. You know the one. The…

2 years ago

We use Cookies to improve user experience for the website.