Chat with us, powered by LiveChat

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 WooCommerce Products by Custom Fields or Post Meta

May 29, 2019

4 Min Read
Reading Time: 4 minutes

WooCommerce Product sorting and display is an important store functionality that forms an important part of the user experience. The ability to sort product listing in a preferred order allows the visitors to pick the right product quickly and go ahead with the transaction.  

WooCommerce product sort and display come in two flavors: Default and Custom. the Custom WooCommerce product sorting is usually implemented using hooks.

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 WooCommerce 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.

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

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.

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

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

Default WooCommerce Product Sorting

To enable the default WooCommerce product sorting, simply go to the WooCommerce Settings > Product Tab.

WooCommerce Product Sorting

In the dropdown, you can see the available default sort options that focus on the price and popularity parameters.

To see these sort parameters in action, go to the Products page. Click the Sort Product tab and pick the desired parameter. The results on the page will change to reflect your choice.

WooCommerce Product Sort

If you wish to apply a layer of customization and wish to change the order of sorting parameters menu, you can do so by going to Products > Advanced and then to Menu Order option. Behind the scenes, this action utilizes the  woocommerce_catalog_orderby hook.

WooCommerce Sort

Add Custom WooCommerce Product Sorting Option

If you think the available sorting parameters are not sufficient for your purposes, you can add your own sorting options that would be visible in the dropdown. For this, add the following code snippet to the functions.php.

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 dropdown.

WooCommerce Product sort and display

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

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

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

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

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!