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:
- Log into your WordPress site and access the Dashboard as the admin user.
- From the Dashboard menu, click on Products.
- Click on the Sorting tab, then 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:
- Log into your WordPress site and access the Dashboard as the admin user.
- From the Dashboard menu, click on Click on any product and scroll down to the Product Data Metabox.
- Click on the Advanced tab, as shown below:
To display the products, you need to set a default sorting option.
So, go to Appearance > Customize > WooCommerce > Product Catalog.
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
- Log into your WordPress site and access the Dashboard as the admin user.
- 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.
- 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:
- Log into your WordPress site and access the Dashboard as the admin user.
- From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file.
- 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
- How to Auto Approve Orders in WooCommerce
- How to Remove Search Box Storefront Theme
- How to Change Font Size WooCommerce Storefront Theme
- How to Sell Digital Products With WooCommerce
- How to Remove Related Products WooCommerce Storefront Theme
- How to Rename Order Status Messages in WooCommerce
- Hide or Remove the Quantity Field from WooCommerce Product Page
- How to Hide Category WooCommerce Storefront Theme
- How to Change Button Color Storefront Theme
- How to Change Products per Page WooCommerce Storefront Theme
- How to Remove Cart from Storefront Theme Header
- How to Turn off Next Product Tabs In WooCommerce Storefront
- How to Change Storefront Number of Products Per Row
- How to Hide Mobile Footer From Storefront WooCommerce
- How to Change Add to Cart Button Text In WooCommerce Shop Page
- How to Use WooCommerce Product Attributes Step by Step [Complete Guide]
- How to Add Custom Order Status in WooCommerce
- How to Hide All Products From Shop Page in WooCommerce
- How to Add GTIN Numbers On Products In WooCommerce
- How to Remove Page Title WooCommerce Storefront Theme