How to Sort and Display Products in WooCommerce Using Custom Fields or Post Meta

When you install WooCommerce, you will see a product sorting filter with default classifications such as popularity, average rating, latest, price, etc. This functionality allows your customers to choose the products according to their preferences, add them to the cart, and check out from your store.

If you want to customize these default filters, WooCommerce Hooks is one way to do it. It allows you to sort and display your products using custom fields or other post meta values. In this tutorial, I will show you how you can customize WooCommerce default sorting filters and add them to your WooCommerce product pages.

Add Custom Fields to WooCommerce Products

You can quickly add custom fields to WooCommerce products by importing them with the custom fields set as post meta. This enables you to set post meta for all the WooCommerce products.

In the next step, you will be able to add text and number-based values as post-meta information, and the customers can sort and filter the products using these values.

Sort and Display Products Using Custom Fields

Meta values are used to set up sorting filters that use both numbers and text. To help you with custom filters, I will add two more sorting options: Sort by Location and Sort by Sale Points.

It is the best practice to create a child theme and add all the following codes in your child theme functions.php file to remain risk-free when updating your theme or plugin.

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' );

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

The following code snippet will show you the location and sale points on the shop page. Similarly, you can display any custom field on the shop page using the same meta-value.

function cw_shop_display() {
 
 global $product;
   $location = get_post_meta( $product->id, 'location', true );
   $point_of_sale = get_post_meta( $product->id, 'points', true );
 
  if ( ! empty( $location ) ) {
       echo '<div class="product-meta"><span class="product-meta-label">Location:</span> ' . $location . '</div>';
   }
  if ( ! empty( $point_of_sale ) ) {
           echo '<div class="product-meta"><span class="product-meta-label">Sale Points:</span> ' . $point_of_sale . '</div>';
   }
 if ( $product->get_sku() ) {
   echo '<div class="product-meta">SKU: ' . $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 comes 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.

Enable Default WooCommerce Product Sorting

To enable the default WooCommerce product sorting, go to your WooCommerce → Settings → Product Tab.

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

To see this sorting in your WooCommerce dashboard, go to Products → All Products → click on Sorting. The results on the page will filter out the products to reflect your choice.

If you want to customize the order of the sorting menu, click on Edit of any individual product → scroll down to the Product data widget → click on the Advanced tab, where you will find the Menu order for changing the order. In the backend, this action utilizes the woocommerce_catalog_order by a hook.

Add Custom WooCommerce Product Sorting

If you think the available sorting filters are inadequate for your visitors, you can add your own sorting options that will be visible in the drop-down menu of your store pages. Simply add the following code snippet to your functions.php file.

function woocommerce_product_sort( $woocommerce_sort_orderby ) {
   $woocommerce_sort_orderby = str_replace("Default sorting", "WooCommerce Product Sorting", $woocommerce_sort_orderby);
   return $woocommerce_sort_orderby;
}
add_filter( 'woocommerce_catalog_orderby', 'woocommerce_product_sort' );
add_filter( 'woocommerce_default_catalog_orderby_options', 'woocommerce_product_sort' );

Save the file and reload the page to see the “WooCommerce Product Sorting” option in the drop-down menu. Also, if you have some caching plugins active and running, you might need to purge that.

Summary

After following this tutorial, you can sort and display WooCommerce products using custom fields and post meta. The example I have used is easy to implement and can be extended to include any number of sorting options. If you have any questions, please leave a comment below.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

Get Connected on: Twitter Community Forum