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.

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

June 14, 2021

5 Min Read
woocommerce products sort and display

When you install WooCommerce, you will see a product sorting filter that comes with default classification such as popularity, average rating, latest, price, etc. This functionality allows your customers to choose the products quickly according to their preference, 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 products 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

Need help with sort and display products in WooCommerce?

Let a Cloudways Expert set up your product database.

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 you are 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.

How Product Will Display

The following code snippet will show you the location and sale points on the shop page. Similarly, you can also 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.

shop

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

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 available 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 that 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 option “WooCommerce Product Sorting” in the drop-down menu. Also, if you have some caching plugin active and running you might need to purge that as well.

WooCommerce Product sort and display

Wrapping up!

After following this tutorial, you can sort and display WooCommerce products using custom fields as well as 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 do leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great performance for the price, and plenty of control”

Sean P [SMB Owner]

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!