How to Change Storefront Theme Order of Products

WooCommerce has a variety of sorting options that you can use to display products in your store.  This is important functionality, which forms part of the user experience. The ability to change products’ orders allows visitors to pick the right product quickly and go ahead with the transaction.

Storefront Change Order of Products

There are two options to change the order of products in your store: Default and Custom. The use of hooks usually implements a custom ordering of products.

WooCommerce, by default, sorts by menu_order, which means manual, and if a manual order is not set, the products will be displayed alphabetically.

This post will share how you can change the order of products in your WooCommerce store. However, before we continue, let me show you how to order products manually. This can also be a quick solution for you.

Steps to Manually Change the Order of Products

Here are the steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Products.
  3. Click on the Sorting tab, then drag and drop.drag and drop

Custom Sorting

This solution is applied against all items and not against separate categories. This is important to note, especially if you have a page that displays all products. In my example, the product pages are separated by category, so the sorting options do not need to be too detailed.

Steps to Change the Order of Products in the Product Data Metabox

Here are the steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Click on any product and scroll down to the Product Data Metabox.
  3. Click on the Advanced tab, as shown below:changing order in the product data metabox

To display the products, you need to set a default sorting option.

So, go to Appearance > Customize > WooCommerce > Product Catalog.default product sorting

Alternatively, you can use a filter hook to change the default ordering in the code.

Steps to Change the Default Product Ordering Using Filter Hook

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to change the default product ordering.
  3. Add the following code to the functiond.php file:
add_filter('woocommerce_default_catalog_orderby', 'njengah_default_catalog_orderby');

function njengah_default_catalog_orderby( $sort_by ) {

            return 'date';

}

Here are the possible values:

  • date – recently added products would be displayed first
  • menu_order (Default) – by the custom order first, then by product name
  • popularity – by the number of sales
  • rating – by the average rating
  • price – cheapest products will be displayed first
  • price-desc – the most expensive first
  • rand – in a random order

Steps to Change the Default Ordering only for a Certain Category

You can use the same code above, but add a condition like is_product_category( ‘category-slug’ ).

Here are the steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file.
  3. Add the following code to the functions.php file:
add_filter('woocommerce_default_catalog_orderby', 'njengah_catalog_orderby_for_category');

function njengah_catalog_orderby_for_category( $sort_by ) {

if( !is_product_category('uncategorized') ) {

return $sort_by; // no changes for any page except Uncategorized

}

return 'date';

}

Conclusion

WooCommerce is a powerful e-commerce solution for WordPress and provides many ways to customize your online store. In summary, I have shared how you can change the default ordering of products in your WooCommerce store. If you want to custom sort every product, you may do so. If you’re going to move a few select items to the top of the list, there is an easy way to do that.

However, if you are not familiar with PHP code, please consider hiring an experienced developer.

Similar Articles