How To Sort And Display WooCommerce Products by Custom Fields or Post Meta

by Owais Alam  February 28, 2017

Sort and display the product catalog by custom fields or by other post meta values greatly helps the customers browsing your WooCommerce store. These options add helpful ways of sorting your inventory so that customers could discover products that were not visible to them before.

WooCommerce Products Sort and Display

In this tutorial, I will first describe custom fields and then highlight how you could add these sort options to the product pages.

Add Custom Fields to WooCommerce Products

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

Add Custom Fields to WooCommerce Products

Once done, you could now add text and number based values as post meta information. Now the customers could sort the products using these values.

WooCommerce Products Sort and Display by Custom Field

WooThemes is very helpful on the topic of sorting. However, it does not address the topic of meta values. These metal values are used to set up sort filters that use both numbers and text.

To demonstrate the concept, I will add two sort options: Sort by location  and Sort by points.

How Product Will Display

On the product page, these options are now added in the sort filter drop-down menu.

How Product Will Display

The following code snippet shows the location and sale points on the shop page. Using this function, you can display any custom field at the shop page by passing its meta-value.

Now whenever you select a sort option, The corresponding sorting arguments will be used.The following screenshot shows the sort option: location in action.

shop

Similarly, when sorting for the Sale Point, the output would be:

sort by sale point

Now if you try to do this on the Edit Product screen, the product screen requires a value be set for a custom field

Edit Product screen

Conclusion

In this  tutorial, I discussed how to sort and display WooCommerce products by custom fields as well as post meta. The example is really simple to implement and could be extended to include any number of sort options. If you have any questions, do leave a comment below.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About 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 owais.alam@cloudways.com

Stay Connected:

You Might Also Like...