Variable Product Information – Display Information on AJAX Product Search

Some people have been banging there head about some of the changes that came with the recent version of WooCommerce that has been released. One of which is displaying variable product information when manually creating a order with the supplied AJAX product search.

UPDATE: Since the original time of posting WooCommerce has pushed out new releases that have the variation information included. Thus making the following article irrelevant for anybody keeping their plugins up to date. If you would like to keep reading though, be my guest.

I (being the WordPress / WooCommerce junky that I am) am subscribed to some support forums. This morning I saw a post come through my email about having issues with Manual Orders and Variations. Well, after just releasing a new plugin to manually process orders, I of course jumped on it!

Turns out the original poster was having to go through a dreadful process when creating manual orders.

The process is as follows:

  1. Create New Order
  2. Set Customer Information
  3. Add Items (products)
  4. AJAX Search
  5. Select Product
  6. Calculate Total
  7. Save

The Problem

With variable products – this is very unfriendly as the search results would yield uninformative options about the variable product information.

Uninformative AJAX Results for Variable Products - variable product information

Can you find which product is the Medium Blue shirt? Nope.

So  what the OP was having to do is repeatedly search, take a guess, cross their fingers and repeat until the correct variation was selected. DREADFUL!

Table Flip Rage!!

The Solution

So being the nice guy that I am and remembering I just did something similar like this elsewhere, I provided a little snippet to make this frustrated store owner one happy cat.

function ajax_product_search_custom_output($products){
	foreach($products as $productId => $productDisplay){
		$the_product = wc_get_product( $productId );
        $productType = version_compare( WC_VERSION, '3.0.0', '<' ) ? $the_product->product_type : $the_product->get_type();
		if ( 'variation' == $productType ) {
			$variation_data = array();
			foreach($the_product->get_attributes() as $attr_key => $attr_val){
				$variation_data[] = ucfirst($attr_key) .': ' . $attr_val;
			}
			$variation_data = implode(', ', $variation_data);
			$products[$productId] .= '<br/>' . $variation_data;
		}
	}
	return $products;
}
add_filter('woocommerce_json_search_found_products','ajax_product_search_custom_output',9999,1);

So here is the gist, I was unable to find any hooks to break in and alter the output of the AJAX JSON Search Results during execution. But I was able to hook into the results before they were displayed. Doing this I am able to loop through the products and check if the product type is a variation, if so – generate some output based on variation attributes and append that to the already existing output array.

The results, phenomenal.. Original Poster was very pleased.

Altered Results from AJAX Product Search for Variable Products - variable product information

Hope this helps!

EDITED: Updated code snippet to work with new v3 method for getting product type.

By | 2017-10-16T10:28:25-07:00 May 27th, 2017|Categories: Tips & Tricks|Tags: , , , , , , , |3 Comments

About the Author:

Originally born in Florida, moved to Arizona and started programming at 13, now 29. Enjoying life with computers, sports, skateboarding and my family. I enjoy short walks on the beach (I get tired fast), loud music (hit me with that bass) and to help others succeed.

3 Comments

  1. Todd Benny May 31, 2017 at 9:05 pm - Reply

    What file do you input this code into?

  2. Todd Benny May 31, 2017 at 9:11 pm - Reply

    ajax-functions.php is the answer… Thanks for the code snippit!!!!

  3. James Tedrow May 31, 2017 at 11:15 pm - Reply

    I would typically place the snippet in the themes functions.php file.
    If your theme has a ajax-functions.php file and it is included, then by all means.

    No problem, glad it did the trick!

Leave A Comment