This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

🔊 Web Growth Summit is here! Learn from industry experts on July 17-18, 2024. REGISTER NOW→

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

Updated on March 18, 2022

5 Min Read
woocommerce products sort and display

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.

Add Custom Fields to WooCommerce Products

From launching to customizing your WooCommerce stores, Cloudways is at your service.

Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.

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';
      case 'location':
           $args_sort_cw['orderby'] = 'meta_value';
           $args_sort_cw['order'] = 'asc';
           $args_sort_cw['meta_key'] = 'location';
 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.

How Product Will Display

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.

sort by sale point

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

Edit Product screen

Optimize Your WooCommerce Store with Autonomous

Effortlessly manage and scale your WooCommerce store with Cloudways Autonomous. Enjoy top performance, auto-scaling, and built-in security features without the need for complex configurations.

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.

WooCommerce Product Sorting

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.

WooCommerce Product Sort

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.

WooCommerce Sort

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.

WooCommerce Product sort and display


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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

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 Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!


Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour


  • 0


  • 0


  • 0


  • 0



For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now