How to Add Custom WooCommerce Category Sorting to Your Product Categories

If you want to customize how products are sorted in different categories on your WooCommerce store, I have a neat solution. Adding a custom code snippet to your WordPress site allows you to set default sorting options for each product category. I’ll guide you through the process using the Code Snippets plugin (my preferred method) or by adding the code directly to your functions.php file. Let’s get started!

Step 1: Install and activate Code Snippets Plugin

You might wonder why I recommend the Code Snippets plugin over directly editing the functions.php file. Well, the plugin provides a user-friendly interface to manage all your custom code snippets in one place. It helps prevent potential errors that could break your site and makes it easy to activate, deactivate, or modify snippets without touching your theme files. Plus, your snippets remain safe even if you switch themes.

1. Log into your WordPress dashboard.

2. Navigate to Plugins > Add New.

3. In the search bar, type Code Snippets.

4. Find the Code Snippets plugin by Code Snippets Pro and click Install Now.

5. Once installed, click Activate.

Step 2: Add the Custom WooCommerce Category Sorting Code

1. Go to Snippets > Add New in your dashboard menu.

2. Enter a title for your snippet, like “WooCommerce Category Sorting”.

3. Copy and paste the following code into the code editor:

// Namespace to avoid function name collisions
namespace MyTheme\WooCommerce\CategorySorting;

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

class CategorySortingOrder {
    public function __construct() {
        // Add sorting dropdown on the add and edit category pages
        add_action( 'product_cat_add_form_fields', [ $this, 'add_sorting_order_field' ], 10 );
        add_action( 'product_cat_edit_form_fields', [ $this, 'edit_sorting_order_field' ], 10 );

        // Save sorting order when the category is created or updated
        add_action( 'created_product_cat', [ $this, 'save_category_sorting_order' ], 10 );
        add_action( 'edited_product_cat', [ $this, 'save_category_sorting_order' ], 10 );

        // Apply category-specific sorting on the frontend
        add_action( 'pre_get_posts', [ $this, 'apply_category_sorting_order' ] );

        // Set the default catalog ordering per category
        add_filter( 'woocommerce_default_catalog_orderby', [ $this, 'set_default_catalog_orderby_per_category' ] );
    }

    // Add sorting dropdown on the add category page
    public function add_sorting_order_field() {
        ?>
        <div class="form-field">
            <label for="category_sort_order"><?php esc_html_e( 'Default Sorting Order', 'woocommerce' ); ?></label>
            <select name="category_sort_order" id="category_sort_order">
                <option value="menu_order"><?php esc_html_e( 'Default sorting', 'woocommerce' ); ?></option>
                <option value="popularity"><?php esc_html_e( 'Sort by popularity', 'woocommerce' ); ?></option>
                <option value="rating"><?php esc_html_e( 'Sort by average rating', 'woocommerce' ); ?></option>
                <option value="date"><?php esc_html_e( 'Sort by latest', 'woocommerce' ); ?></option>
                <option value="price"><?php esc_html_e( 'Sort by price: low to high', 'woocommerce' ); ?></option>
                <option value="price-desc"><?php esc_html_e( 'Sort by price: high to low', 'woocommerce' ); ?></option>
            </select>
            <p class="description"><?php esc_html_e( 'Choose how products should be sorted for this category. Note: Customers can still change the sorting on the frontend.', 'woocommerce' ); ?></p>
        </div>
        <?php
    }

    // Add sorting dropdown on the edit category page
    public function edit_sorting_order_field( $term ) {
        $category_sort_order = get_term_meta( $term->term_id, 'category_sort_order', true );
        if ( ! $category_sort_order ) {
            $category_sort_order = 'menu_order';
        }
        ?>
        <tr class="form-field">
            <th scope="row" valign="top"><label for="category_sort_order"><?php esc_html_e( 'Default Sorting Order', 'woocommerce' ); ?></label></th>
            <td>
                <select name="category_sort_order" id="category_sort_order">
                    <option value="menu_order" <?php selected( $category_sort_order, 'menu_order' ); ?>><?php esc_html_e( 'Default sorting', 'woocommerce' ); ?></option>
                    <option value="popularity" <?php selected( $category_sort_order, 'popularity' ); ?>><?php esc_html_e( 'Sort by popularity', 'woocommerce' ); ?></option>
                    <option value="rating" <?php selected( $category_sort_order, 'rating' ); ?>><?php esc_html_e( 'Sort by average rating', 'woocommerce' ); ?></option>
                    <option value="date" <?php selected( $category_sort_order, 'date' ); ?>><?php esc_html_e( 'Sort by latest', 'woocommerce' ); ?></option>
                    <option value="price" <?php selected( $category_sort_order, 'price' ); ?>><?php esc_html_e( 'Sort by price: low to high', 'woocommerce' ); ?></option>
                    <option value="price-desc" <?php selected( $category_sort_order, 'price-desc' ); ?>><?php esc_html_e( 'Sort by price: high to low', 'woocommerce' ); ?></option>
                </select>
                <p class="description"><?php esc_html_e( 'Choose how products should be sorted for this category. Note: Customers can still change the sorting on the frontend.', 'woocommerce' ); ?></p>
            </td>
        </tr>
        <?php
    }

    // Save sorting order when the category is created or updated
    public function save_category_sorting_order( $term_id ) {
        if ( isset( $_POST['category_sort_order'] ) ) {
            update_term_meta( $term_id, 'category_sort_order', sanitize_text_field( $_POST['category_sort_order'] ) );
        }
    }

    // Apply category-specific sorting on the frontend
    public function apply_category_sorting_order( $query ) {
        if ( ! is_admin() && $query->is_main_query() && is_product_category() ) {
            // Get the current category object
            $category = get_queried_object();
            if ( ! $category || ! isset( $category->term_id ) ) {
                return;
            }

            $category_sort_order = get_term_meta( $category->term_id, 'category_sort_order', true );
            if ( ! $category_sort_order ) {
                $category_sort_order = 'menu_order';
            }

            // Apply sorting options
            switch ( $category_sort_order ) {
                case 'price':
                    $query->set( 'orderby', 'meta_value_num' );
                    $query->set( 'order', 'ASC' );
                    $query->set( 'meta_key', '_price' );
                    break;
                case 'price-desc':
                    $query->set( 'orderby', 'meta_value_num' );
                    $query->set( 'order', 'DESC' );
                    $query->set( 'meta_key', '_price' );
                    break;
                case 'popularity':
                    $query->set( 'meta_key', 'total_sales' );
                    $query->set( 'orderby', 'meta_value_num' );
                    $query->set( 'order', 'DESC' );
                    break;
                case 'rating':
                    $query->set( 'meta_key', '_wc_average_rating' );
                    $query->set( 'orderby', 'meta_value_num' );
                    $query->set( 'order', 'DESC' );
                    break;
                case 'date':
                    $query->set( 'orderby', 'date' );
                    $query->set( 'order', 'DESC' );
                    break;
                default:
                    // Default WooCommerce sorting
                    $query->set( 'orderby', array( 'menu_order' => 'ASC', 'title' => 'ASC' ) );
                    break;
            }
        }
    }

    // Set the default catalog ordering per category
    public function set_default_catalog_orderby_per_category( $default_orderby ) {
        if ( is_product_category() ) {
            $category = get_queried_object();
            if ( ! $category || ! isset( $category->term_id ) ) {
                return $default_orderby;
            }

            $category_sort_order = get_term_meta( $category->term_id, 'category_sort_order', true );
            if ( $category_sort_order ) {
                return $category_sort_order;
            }
        }
        return $default_orderby;
    }
}

// Initialize the class
new CategorySortingOrder();

4. Make sure the “PHP” option is selected as the code type.

5. Choose “Run snippet everywhere” from the dropdown below the code editor.

6. Click Save Changes and Activate.

Here’s the end result:

Step 3: Configure the Category Sorting Options

1. Navigate to Products > Categories.

2. Click Add New Category or edit an existing one.

3. You’ll notice a new option labeled “Default Sorting Order”.

4. Select your preferred sorting method from the dropdown menu.

5. Click Add New Category or Update to save your changes.

Now, your products within that category will display according to the sorting option you selected. Customers can still change the sorting on the frontend if they wish.

Alternative Method: Adding Code to functions.php

If you prefer adding the code directly to your theme’s functions.php file, here’s how you can do it:

Step 1: Access Your Theme’s functions.php File

1. In your WordPress dashboard, go to Appearance > Theme Editor.

2. On the right-hand side, find and click on Theme Functions (functions.php).

Note: If you don’t see the Theme Editor, your hosting provider might have it disabled for security reasons. In that case, you’ll need to use FTP or a file manager to edit the file.

Step 2: Add the Custom Code

1. Scroll to the bottom of the functions.php file.

2. Copy and paste the same code provided earlier (excluding the <?php tag at the beginning if it’s already present).

3. Click Update File to save your changes.

Step 3: Configure the Category Sorting Options

Follow the same steps as before to set the default sorting for your categories under Products > Categories.

Caution: Editing the functions.php file can be risky. A small mistake can cause your site to crash. Always back up your site before making changes, and consider using a child theme to prevent your changes from being overwritten during updates.

Summary

Customizing the default sorting order for your WooCommerce product categories can enhance the shopping experience by displaying products in a way that best suits each category. Using the Code Snippets plugin is a safe and convenient method to add custom code without directly editing theme files. However, if you’re comfortable with code, adding it to your functions.php file works just as well. I hope this guide helps you tailor your store to better meet your customers’ needs!

If you have any questions or run into any issues, feel free to leave a comment below. Happy customizing!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get a 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration, and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I like but the one that stands out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). By the way, this site is hosted in Verpex.)

To see all my most up-to-date recommendations, check out this resource that I made for you!

Janek T.
Janek T.

Improve this text: {CLIPBOARD}

- I have been passionate about Wordpress since 2011, creating websites and sharing valuable tips on using Wordpress and Woocommerce on my site.
- Be the first to receive notifications about new tutorials by subscribing to my Youtube channel .
- Follow me on Twitter here

Articles: 134