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.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

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

Updated on  May 10, 2017

3 Min Read
Reading Time: 3 minutes

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.

Share your opinion in the comment section. COMMENT NOW

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

About The Author

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:

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.