How To Remove Sorting In Woocommerce

How to Remove Sorting in WooCommerce: A Beginner-Friendly Guide

WooCommerce is a powerful e-commerce platform that lets you sell anything online. But sometimes, the default features can feel a bit… much. One common customization is removing the product sorting dropdown on your shop page. Maybe you want to control the order yourself, or perhaps you think it’s unnecessary for your specific product range. Whatever your reason, this guide will walk you through how to remove sorting in WooCommerce in a straightforward and easy-to-understand way.

Think of it like this: imagine you’re running a bakery. You arrange your pastries in a visually appealing way, showcasing the most popular items first. You wouldn’t let customers sort them by “price: low to high” because that might bury your bestsellers at the back! Removing the sorting option lets you control the “bakery display” experience for your online store.

Why Remove WooCommerce Sorting?

Before we dive into the “how,” let’s quickly recap why you might want to do this:

• Control Product Presentation: You want to display products in a specific, strategic order that you define (e.g., best sellers first, featured items, new arrivals).
• Simplified User Experience: A cleaner, less cluttered shop page can be less overwhelming for customers.
• Focus on Your Branding: You want your website to look completely unique, without showing default options.
• Forced Product Discovery: By removing sorting, users might explore more of your products instead of just the cheapest ones.
• Niche Products: For highly specific or curated product lines, sorting might not be relevant.

Method 1: Using a Simple Code Snippet (Recommended for Beginners)

This is the easiest and most common method to remove the sorting dropdown. We’ll be using a code snippet that you can add to your theme’s `functions.php` file or, even better, using a code snippet plugin.

Why a code snippet plugin instead of functions.php? Directly editing your `functions.php` file can be risky. A single typo can break your entire website! A code snippet plugin offers a safer environment for adding custom PHP code. Popular choices include “Code Snippets” or “WPCode – Insert Headers, Footers & Custom Code.”

Here’s the code:

/**
Remove WooCommerce Sorting Dropdown
*/
function wc_remove_dropdown() {
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
}
add_action('init', 'wc_remove_dropdown');

Explanation:

• `/ … */`: This is a PHP comment block explaining what the code does. Good practice to include this for your future self!
• `function wc_remove_dropdown() { … }`: This defines a new PHP function named `wc_remove_dropdown`.
• `remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30 );`: This is the core of the code. It removes the default WooCommerce action that displays the sorting dropdown. `woocommerce_before_shop_loop` tells us *where* the element sits, `woocommerce_catalog_ordering` is *which* element we are targeting, and `30` is its priority.
• `add_action(‘init’, ‘wc_remove_dropdown’);`: This tells WordPress to execute our `wc_remove_dropdown` function when the `init` action is triggered (which happens early in the WordPress loading process).

How to implement:

1. Install and activate a code snippet plugin (like “Code Snippets”).

2. Go to the plugin’s “Add New” section.

3. Paste the code above into the code editor.

4. Give your snippet a descriptive title (e.g., “Remove WooCommerce Sorting”).

5. Make sure the snippet is set to “Run Everywhere.”

6. Save and activate the snippet.

Now, visit your shop page. The sorting dropdown should be gone!

Method 2: Using Custom CSS (Less Reliable, Consider as Supplementary)

While the code snippet method is the preferred approach, you *could* technically hide the sorting dropdown using CSS. However, this is not recommended as the primary method because the sorting is still happening in the background; you’re just hiding it. This can impact performance and might not be completely effective across all browsers and devices.

Here’s the CSS code:

.woocommerce-ordering {

display: none !important;

}

Explanation:

• `.woocommerce-ordering`: This is the CSS class that WooCommerce assigns to the sorting dropdown element.
• `display: none;`: This CSS property hides the element.
• `!important;`: This is important! It overrides any other CSS rules that might be affecting the display of the element. Use with caution, though, as excessive use of `!important` can make your CSS harder to manage.

How to implement:

1. Go to WordPress Dashboard > Appearance > Customize.

2. Select “Additional CSS.”

3. Paste the CSS code into the CSS editor.

4. Publish your changes.

As mentioned before, this is less reliable than using a code snippet, so if you have issues, stick with Method 1.

Method 3: Theme Customization (Advanced – Use with Caution)

This method involves directly editing your theme’s template files. This is only recommended if you’re comfortable with PHP and theme development. It also means your changes might be overwritten when you update your theme, unless you’re using a child theme.

The general idea:

1. Identify the template file that displays the shop loop (usually `archive-product.php` or `woocommerce.php`).

2. Copy this file to your child theme (if you’re not using a child theme, you risk losing your changes when the main theme is updated).

3. Edit the copied file and remove the code that calls `woocommerce_catalog_ordering()`.

This method is highly dependent on your specific theme structure, so I can’t provide exact code to remove. Refer to your theme’s documentation or a developer for assistance.

Important Considerations:

• Child Theme: Always use a child theme when making customizations to your WordPress theme. This protects your changes from being overwritten during theme updates.
• Caching: After making changes, clear your website’s cache (if you’re using a caching plugin) to ensure you see the updated shop page.
• Testing: Test your shop page thoroughly after removing the sorting dropdown to make sure everything still looks and functions as expected. Check on different devices and browsers.
• WooCommerce Updates: WooCommerce is regularly updated. While these methods are generally reliable, it’s always a good idea to check your customizations after a major WooCommerce update to ensure they still work correctly.