How to Sort and Display Products in WooCommerce For Greater Conversion (6 Methods)

WooCommerce product sorting and search play a key role in improving the customer experience and boosting conversions.

When customers can quickly find items in your Woo store, they are more likely to make a purchase and return for more, enjoying a good user experience.

Thankfully, you can sort and display products in WooCommerce through default settings, custom options, plugins, and more.

This guide covers 6 methods to sort and display WooCommerce products, including basic and advanced settings, plus essential plugins. We’ve also included each method’s pros and cons to help you choose what best fits your business.

Why Should You Sort & Display Products in WooCommerce?

Sorting & displaying products in WooCommerce serves two primary goals:

• Convert potential customers into buyers
• Offer an excellent user experience in your store

Having control over product sorting on your Woo store helps you achieve both goals by creating a more organized and easy-to-navigate store. Doing so makes your store more organized and less cluttered.

You can sort the products by criteria like popularity, average sales, or categories like clothes for men and women.

In the example below, the homepage is quite neat and you can easily find products from categories like New Arrivals and Best Sellers.

Other than an intuitive store experience, this also helps you boost conversions. For example, by sorting products by “popularity”, you indirectly encourage customers to buy what others are purchasing, reinforcing the appeal of your top products.

Store Growing in Sales Season? Future Proof with Autonomous!

Keep your store ready for all the unexpected traffic spikes with Cloudways Autonomous. Stay ahead of the curve with advanced scalability and cutting-edge technology.

Get Started Today

How to Sort and Display WooCommerce Products (6 Methods)

As mentioned earlier, WooCommerce offers you several ways to sort and display products. I’ve covered six of the best methods of doing this, so you can pick the one you are most comfortable with.

Method 1: How to Sort Products through Default WooCommerce Options

WooCommerce includes built-in sorting options. The easiest way to sort products is by using these default methods, though they offer limited control and customization.

Using Customizer

In the latest WooCommerce versions, you won’t find the default product sorting option in settings, so you’ll have to access it via the Customizer.

For older versions:

• Go to your WooCommerce dashboard > Settings > Product Tab.

In the drop-down menu, you will see the default product sorting that focuses on different classifications, such as price and popularity.

For WooCommerce 3.3 & above versions:

• Go to Appearance > Customize in your WordPress admin dashboard.

• Find the WooCommerce section in the Customizer.

• Select a sorting option from the dropdown menu (e.g., by price, popularity, average rating, latest, or alphabetically).

• Click the “Publish” button to save your changes.

💡I have used the theme Astra here. If you’re using a default WordPress theme, you may need to go to the Editor and select the WooCommerce Product Archive Template to edit the Product Query Loop.

How to Change the Menu Order Per Product

Follow the steps below if you want to customize individual product order in the sorting menu:

1. Click Edit on any product
2. Scroll down to the Product data widget
3. Click on the Advanced tab
4. Adjust the Menu order setting to change the product’s position.

In the backend, this action is managed with the woocommerce_catalog_order hook.

Pros and Cons of This Method

✓Easy to set up

✓No coding needed

✓Offers basic sorting options (e.g., by price, popularity, date)

✗Limited customization

✗Not suitable for complex sorting needs

Method 2: How to Sort Products in WooCommerce (Manually)

With WooCommerce, you can also manually arrange your products. And this is great for creating custom product displays and highlighting important items. Follow the steps below:

• On your WordPress dashboard, go to Products > All Products.

• Click Sorting at the top of the page.

• Drag and drop products to set your preferred order.

The custom order you set here will be the default display for customers browsing your shop.

Manual Sorting for Individual Products:

For more control over individual products:

• Open the product in the editor and scroll down to the Product Data section.

• Under the Advanced tab, set the Menu order value (products with lower numbers appear higher).

The menu order setting is especially useful if you want to fine-tune position beyond simple drag-and-drop.

Pros and Cons of This Method

✓ Full control over product display order

✓ Simple drag-and-drop interface

✗ Time-consuming for large inventories

✗ Needs regular updates if product priorities change

How to Scale WooCommerce Store in 2024 – Easy Methods

Method 3: How to Custom Sort by Category or Attribute

You can also group products by categories or attributes which helps your customers easily find items within specific groups. It is most effective when you have a diverse product range in your store.

Take these steps:

• Click Products and then select Categories in the WooCommerce toolbar

• Add new categories or manage existing ones by assigning relevant products to each.

• To display products by category:

• • Go to Appearance > Menus to add category links to your main navigation
  • Use category-specific shortcodes for more control.

Shortcode for Displaying Products by Category:

[products category=”category-slug” orderby=”date” order=”asc”]

Replace “category-slug” with the actual category name.

Sort by Attribute:

WooCommerce also lets you sort by attributes such as color, size, or brand. To set it up:

1. Go to Products > Attributes to create or manage attributes.
2. Assign these attributes to each product in the Product Data section on each product’s editing page.
3. Use a filter widget in the sidebar or use specific shortcodes to enable attribute-based.

Pros and Cons of This Method

✓ Sorts products by specific categories or attributes (e.g., color, size)

✓ Ideal for stores with varied product types

✗ Requires accurate attribute setup for each product

✗ Can become complex, with many categories or attributes

Method 4: How to Display Products using WooCommerce Shortcodes

Another way of sorting & displaying products on a WooCommerce store is by using shortcodes. These shortcodes let you define the default sorting parameters (for example, by price, rating, date) and sorting order – ascending or descending.

Below is an example of a simple display shortcode. You can also customize the display using other attributes, including the columns, limit, category and so on.

[products limit="8" columns="4"]

Here are other shortcodes for sorting & displaying products:

• Display products by category: [product_category category=”shirts” limit=”4″ columns=”2″]
• Show featured products: [featured_products limit=”6″ columns=”3″]
• Display best-selling products: [best_selling_products limit=”5″ columns=”2″]
• Display recent products: [recent_products limit=”8″ columns=”4″]
• Show top-rated products: [sale_products limit=”6″ columns=”3″]

Let’s take the example of the shortcode to display the best-selling products.

To add the [best_selling_products limit=”5″ columns=”2″] shortcode to display best-selling products on your WooCommerce store, follow these steps:

• Navigate to the Pages tab and select All Pages in your WordPress admin panel (or Posts, All Posts if you want to add it to a blog post).
• Select the page or post where you’d like the best selling products to be and click on Edit. I am choosing the Home Page.

• In the WordPress editor, click on the + button to add a block.

• In the search bar look for “Shortcode”.

• This is where you add the shortcode. Paste the following:

[best_selling_products limit=5, columns=2]

💡limit: Determines how many of the most popular products to show.

💡columns: Specifies the number of columns to be used in order to display the products.

1. Now, press the Publish button.
2. Browse through the front end of your site to confirm that the most popular products are being promoted correctly.

Pros and Cons of This Method

✓ Flexible for displaying specific products or categories on any page

✓ Highly customizable with shortcode parameters

✗ Limited to page-level customization

✗ May require styling adjustments with certain themes

Method 5: How to Sort and Display Using Plugins

Using WooCommerce plugins give you more advanced options and flexibility.

To install and activate WooCommerce sorting plugins, take the following steps:

• Go to your WordPress dashboard.
• Click Plugins > Add New Plugin.

• Search for your desired plugin.
• Click Install Now.

• Once installed, click Activate to activate the plugin.

For this tutorial, I have installed the free plugin Extra Product Sorting Options for WooCommerce.

You will find multiple settings in the WooCommerce customization panel.

Source: WordPress.org

On the shop page, you will find more sorting options.

Here are some popular Woo plugins to sort & display products:

1. Woocommerce Product Table (premium)

Features:

• Instant search, sort & filter
• Customizable product listings
• Dozens of integrations

Pricing

It costs $99 for one site.

2. eCommerce Product Catalog (freemium)

Features:

• SEO-friendly ecommerce
• Unlimited number of products
• Drag-and-Drop functionality

Pricing:

Free or $49/month

3. Extra Product Sorting Options for WooCommerce (free)

Features:

• Enable alphabetical product sorting
• Remove core sorting options

Pricing

Free

Pros and Cons of This Method

✓ Adds advanced sorting options without requiring code

✓ Some plugins offer visual filters and extended functionalities

✗ May affect site speed

✗ Relies on third-party plugins, which may require regular updates or fixes

Slow Loading Times Will Kill Your Woocommerce Store

Who wants a dead store? Use Breeze, an advanced caching plugin trusted by thousands of store owners.

Get Free

Method 6: How to Add Custom WooCommerce Product Sorting (Advanced)

If you think the available sorting filters are inadequate for your visitors, you can also create custom sorting options that will appear in the drop-down menu on store pages.

Doing so allows you to sort based on custom fields or metadata, such as location, sale points, or other unique attributes.

Step 1: Add Custom Sorting Option

• Add the following code snippet to your theme’s functions.php file to add a new sorting option:

function add_custom_woocommerce_sort_option( $sort_options ) {
    $sort_options['custom_sort_order'] = 'Custom Sorting Order'; // Label for the sorting option
    return $sort_options;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'add_custom_woocommerce_sort_option' );
add_filter( 'woocommerce_catalog_orderby', 'add_custom_woocommerce_sort_option' );

Step 2: Define the Sorting Logic

• Use the following code to implement custom sorting logic. Replace “your_custom_meta_key” with the actual meta key used for sorting:

function custom_product_sort( $query ) {

function custom_product_sort( $query ) {
    if ( ! is_admin() && $query->is_main_query() && is_shop() || is_product_category() ) { // Ensure this only affects the shop page and product categories
        if ( isset( $_GET['orderby'] ) && $_GET['orderby'] == 'custom_sort_order' ) {
            $query->set( 'meta_key', 'your_custom_meta_key' ); // Replace 'your_custom_meta_key' with your actual meta key
            $query->set( 'orderby', 'meta_value_num' ); // For numeric sorting; use 'meta_value' for text
            $query->set( 'order', 'DESC' ); // Set sorting order (ASC or DESC)
        }
    }
}
add_action( 'woocommerce_product_query', 'custom_product_sort' );

How to Sort and Display Products Using Custom Fields

You can add meta values to make sorting filters containing numbers and text as well.

To help you with custom filters, I will add two more sorting options: Sort by Location and Sort by Sale Points.

Note: Place the following code in your child theme’s functions.php file.

// Step 1: Modify WooCommerce ordering arguments to support custom fields for sorting
function cw_add_postmeta_ordering_args( $args_sort_cw ) {
    $cw_orderby_value = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) :
        apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );

    switch( $cw_orderby_value ) {
        case 'points_awarded':
            $args_sort_cw['orderby'] = 'meta_value_num';
            $args_sort_cw['order'] = 'DESC'; // Set the sorting order (ASC or DESC)
            $args_sort_cw['meta_key'] = 'points'; // Meta key for 'points'
            break;
        case 'location':
            $args_sort_cw['orderby'] = 'meta_value';
            $args_sort_cw['order'] = 'ASC'; // Set the sorting order (ASC or DESC)
            $args_sort_cw['meta_key'] = 'location'; // Meta key for 'location'
            break;
    }

    return $args_sort_cw;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'cw_add_postmeta_ordering_args' );

// Step 2: Add new sorting options to WooCommerce dropdown
function cw_add_new_postmeta_orderby( $sortby ) {
    $sortby['location'] = __( 'Sort By Location', 'woocommerce' );
    $sortby['points_awarded'] = __( 'Sort By Sale Point', 'woocommerce' );
    return $sortby;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'cw_add_new_postmeta_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'cw_add_new_postmeta_orderby' );

After adding the above code, the sorting filters will appear in your product pages’ drop-down menu. However, it’s displayed in the sorting menu, but I will also show you how to display these values on individual product pages.

How to Display Custom Field Values on Product Pages

Add the following code snippet to display fields like location and sale points on product pages. Similarly, you can display any custom field on the shop page using the same meta-value.

function cw_shop_display() {
    global $product;
    
    // Get custom meta fields for each product
    $location = get_post_meta( $product->get_id(), 'location', true );
    $point_of_sale = get_post_meta( $product->get_id(), 'points', true );

    if ( ! empty( $location ) ) {
        echo '<div class="product-meta"><span class="product-meta-label">Location:</span> ' . esc_html( $location ) . '</div>';
    }
    if ( ! empty( $point_of_sale ) ) {
        echo '<div class="product-meta"><span class="product-meta-label">Sale Points:</span> ' . esc_html( $point_of_sale ) . '</div>';
    }

    if ( $product->get_sku() ) {
        echo '<div class="product-meta">SKU: ' . esc_html( $product->get_sku() ) . '</div>';
    }
}
add_action( 'woocommerce_after_shop_loop_item', 'cw_shop_display', 9 );

• Whenever a visitor selects a sorting option, the corresponding values will be changed accordingly. The following screenshot shows Sort by Location.

• The same goes for sorting by Sale Points.

• If you want to edit an individual product, you will require a value to be set for a custom field.

Pros and Cons of This Method

✓ Highly customizable

✓ Lets you sort by any custom field (e.g., ratings, location)

✓ Suitable for unique sorting needs and more advanced display

✗ Requires coding knowledge

✗ May need regular updates based on sorting requirements

Ready To Scale Your WooCommerce Store?

Cloudways Autonomous offers a fully managed solution that auto-scales using Kubernetes technology to meet your store’s needs. Scale, secure, and speed up your website effortlessly!

Experience Now

Summary

Improving the order of products in a WooCommerce store can change how customers approach your store, resulting in high sales and customer satisfaction.

From the simple default sorting to advanced customization with shortcodes, custom fields, or plugins, there is an option suited for any store.

By following the methods covered in this blog, you will not only optimize your store’s navigation but also bring focus to the important products and top-sellers, that in turn will improve your store’s efficiency and interest.