If you’re running an online store with WooCommerce, It is important to provide a great user experience to your customers. one way to improve their experience is by using the WooCommerce product sorting and display feature.

By default, WooCommerce provides some basic sorting options, which may not be sufficient for your needs. In this post, we’ll show you how to customize product sorting in WooCommerce using custom fields and post meta. You can also learn how you can customize woocommerce hooks in this post

But first, you need to know about custom fields and post meta terms. Custom fields and post meta data are additional fields that you can add to your WordPress posts and pages. Custom fields are used to add further data to a post or page, such as author name, date, and more.
Post metadata is used to add additional data to a specific post or page, such as price, SKU, and more.

How to sort woo commerce products with custom fields and Display

we will show you some examples of how you can sort woocommerce products with custom fields. Let’s Start!
I want to add two more custom sort options.
1:sort by location
2:sort by sale point

Now we need a code for adding the above two options. Following is the code.

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';
     $args_sort_cw['meta_key'] = 'points';
     break;
      case 'location':
           $args_sort_cw['orderby'] = 'meta_value';
           $args_sort_cw['order'] = 'asc';
           $args_sort_cw['meta_key'] = 'location';
           break;
 
 }
 
 return $args_sort_cw;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'cw_add_postmeta_ordering_args' );
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' );

You can add this code in the theme PHP. Function file or can install the snippet plugin. Check this post for adding code in detail.

woocommerce product sorting and display

After Adding the code, refresh the shop page you will see these two options in the product drop-down pages.

This is how you can easily sort and display woocommerce product on any wordpress page or post.

How to create custom product sorting options

To create custom product sorting options in WooCommerce, we’ll use a combination of custom fields, post meta, and a custom function. Here’s how it works:

  1. Create a custom field for the sorting option you want to add (e.g., “sort by date added”).
  2. Add the custom field to your product pages.
  3. Use the post meta API to store the value of the custom field in the product’s post metadata.
  4. Create a code that retrieves the value of the custom field from the product’s post metadata and sorts the products accordingly.
  5. Add the code to your theme’s functions.php file.

Here’s an example of what the code looks like:

function custom_sort_by_date_added( $query ) {
   if ( !is_admin() && $query->is_main_query() && $query->get('orderby') == 'date_added' ) {
      $query->set( 'meta_key', 'date_added' );
      $query->set( 'orderby', 'meta_value' );
      $query->set( 'order', 'DESC' );
   }
}
add_action( 'pre_get_posts', 'custom_sort_by_date_added' );

In this example, we’re using the pre_get_posts action hook to modify the query used to display products. If the query is sorting products by “date added,” we’re using the meta_key and order by parameters to sort the products by the value of the “date_added” custom field.

Here are some more straightforward examples of using custom fields and post meta to create custom product sorting options in WooCommerce:

  1. Sort by SKU: If you want to allow customers to sort products by SKU (stock-keeping unit), you can create a custom field called “SKU” and add it to your product pages. Then, you can use the post meta API to store the value of the SKU in the product’s post meta data.
function custom_sort_by_sku( $query ) {
   if ( !is_admin() && $query->is_main_query() && $query->get('orderby') == 'sku' ) {
      $query->set( 'meta_key', 'sku' );
      $query->set( 'orderby', 'meta_value' );
      $query->set( 'order', 'ASC' );
   }
}
add_action( 'pre_get_posts', 'custom_sort_by_sku' );

Overall. You can easily sort and display woocommerce products with custom fields and post meta by reading the above examples and following the same procedure.