Improving the Variations Interface in 2.4 Roadmap Insights

In WooCommerce 2.4 we wanted to give users a better experience whilst working with variable products. Variable products have been a headache for some users whom needed to deal with many variations at the same time, mainly due to problems saving, or admin screens and product pages taking too long to long to load.

We’ve made changes to improve this experience, changing the way that variations are saved and displayed within the edit product screens.

Backend Changes

Variations will be created, listed, saved and deleted using AJAX. This reduces the volume of data posted when saving and loaded when loading the page, which were the two main problems for performance in 2.3.

The interface was also tweaked to support this, with pagination being introduced to make large numbers more manageable.

The pagination restricts editing and saving to 10 variations at a time. But you can change the amount using the woocommerce_admin_meta_boxes_variations_per_page filter if needed:

https://gist.github.com/claudiosmweb/bc1190cdc0ac535931a3

Too many buttons spoil the broth, so we moved “Add variation” and “Link all variations” buttons to the bulk actions drop down:

Only the variations that had some changes will be saved when you hit “Save Changes” which prevents sending tonnes of data to the database. And of course, the Bulk Edit options will still apply to all variations, even on other pages.

Frontend Changes

In the frontend, if a variable product has more than 20 variations, the data will be loaded by ajax rather than handled inline. It is possible to change this quantity using the woocommerce_ajax_variation_threshold:

https://gist.github.com/claudiosmweb/6f91ad228c2176b986b2

Demo

In the following video you can see the creation of a variable product and how the variations tab works.

https://youtu.be/eG4zU7RXjMg

Compatibility Issues

If you use actions such as woocommerce_save_product_variation, woocommerce_variation_options and woocommerce_product_after_variable_attributes you have nothing to fear. Your options will be displayed and saved as before. We’ve spent a great deal of time ensuring the save system works in a backwards compatible way.

Despite this, we now use ajax to do various actions, so if you have used JavaScript (e.g. to show and hide fields) your code will need some attention. For these developers we have the following JS events:

woocommerce_variations_loaded
woocommerce_variations_saved
woocommerce_variations_save_variations_button
woocommerce_variations_save_variations_on_submit
woocommerce_variations_added
woocommerce_variations_removed
woocommerce_variations_input_changed
woocommerce_variations_defaults_changed

In addition the bulk actions are saved by ajax, so if you have any plugin that adds new options you’ll have to change the way it’s saved using thewoocommerce_bulk_edit_variations_default hook.

On the frontend, if you modify the add to cart form/variations you will also need to revise your code since matching variations will be pulled in via ajax. There are still hooks present, so this mainly affects plugins which adjust the entire ‘array’ of available variations, since this no longer exists. If you need more time to resolve this, or cannot make a plugin compatible, you can disable the threshold with the woocommerce_ajax_variation_threshold filter.

We’ll be in beta in the next few weeks, so please let me know if you need new hooks or events to your plugins.

Keep yourself in the loop!

17 responses to “Improving the Variations Interface in 2.4”

wei86

August 11, 2015

First, I appreciate the effort developers put on this update. However, this new variation feature is not an improvement to me, but total opposite. I have been testing this new update on my test site. I found all my variable products become ‘Free!’. I have some variations with different prices, I dunno whether this is the cause of my problem, or that was caused by some other plugins, because myself do not use any hooks related to variations. I have to ‘bulk edit’ the regular price again, then re-enter those different prices, again, to make the prices displayed normally, and I have more than a hundred of products like this. Please let me know if there is a quicker way to fix this. Thank you.

By the way, talking about improving variations, I hope you can consider the followings in the future: ‘bulk edit’ for a specific attribute. E.g. for a variable product in a restaurant website, which have ‘small, large’, and ‘no spicy, medium spicy, super spicy’ that makes 6 variations, let’s say the regular price is $5,00 for all, but I wanna have a feature that can bulk edit a different price for all ‘large’ variations, so I don’t have to set every price for every variation with ‘large’ attribute manually. When it comes to a product with so many variations, that’d be a pain. Thank you.

Reply
1. Mike Jolley
  
  August 11, 2015
  
  You’ve missed the update 🙂 “free” issue affected products created before 2.2 and was fixed in 2.4.1. Just run the ‘updater’ when prompted.
  
  Reply
  1. wei86
    
    August 11, 2015
    
    Hi Mike,
    
    Thanks for reply.
    
    No, I started building the website less than one month ago and almost all the products were added within last two weeks. I believe all these works were done under 2.3, and now my test site is up-to-date, which is running 2.4.1, but the problem still exists.
    
    Reply
  2. Mike Jolley
    
    August 11, 2015
    
    There was a related issue where out of stock products lose pricing. Fixing in .2
    
    Reply
    1. wei86
      
      August 12, 2015
      
      That’d be great. Thank you.
      
      Reply
emilfrobom

August 15, 2015

In witch file is the “woocommerce_ajax_variation_threshold” and where is it located?

Reply
1. Claudio Sanches
  
  August 15, 2015
  
  https://github.com/woothemes/woocommerce/blob/fd22334fe6db58311ebd591c8ed90455c4777256/includes/wc-template-functions.php#L891
  
  Reply
Danny Hearnah

August 17, 2015

For anyone using the action woocommerce_process_product_meta_variable – this no longer works and so I had to change to woocommerce_save_product_variation

Reply
1. John Carter
  
  August 18, 2015
  
  Hi Danny,
  
  Could you give a code example of where you have used this?
  
  I am trying to save a custom field on a variation. As per http://www.remicorson.com/woocommerce-custom-fields-for-variations
  
  The main “Update” post button works but the new AJAX “Save Changes” doesn’t.
  
  Reply

John Carter

August 18, 2015

Got it!

	add_action( 'woocommerce_save_product_variation', 'ajax_save_variable_fields');
	
	//save new fields via AJAX
	function ajax_save_variable_fields() {		
		foreach($_POST['_variation_lead_time'] as $k => $v) {
			update_post_meta( $_POST['variable_post_id'][$k], '_variation_lead_time', $v );
		}
	}

Frank

August 28, 2015

Oké I’m a bit newb on this one but if I put the woocommerce_ajax_variation_threshold in the functions.php file will it make my variations on frontend faster?

I notice a little delay when selecting a varation. According to me this is because AJAX is connecting to the server for each selected variation.

I’ve got 24 variations will that function make loading data handled inline again?

You said: ”It is possible to change this quantity”. How should my function look like? Should I replace 10 with 24?

function custom_wc_ajax_variation_threshold( $qty, $product ) {
return 10;
}

add_filter( ‘woocommerce_ajax_variation_threshold’, ‘custom_wc_ajax_variation_threshold’, 10, 2 );

Reply
1. Mike Jolley
  
  September 14, 2015
  
  If you increase the threshold, you can stop it using ajax. It’s a fine balance; adjust as needed.
  
  Reply
Steve Skinner

September 11, 2015

Before I test anything, I first needed to tweak the setting for woocommerce_admin_meta_boxes_variations_per_page because a customer site I’m building is filled with products with over a dozen color options and 10 size options (per product)! Seeing 10 variations per page while editing product just doesn’t cut it, particularly when the order they’re in matters as it does with some variations that have different pricing. There doesn’t seem to be a way to move (drag) an variation between pages when you are re-ordering them.

With that said, my biggest gripe about WooCommerce has to do with support for price sensitive variations. Sadly, there’s no progress on this front. Most of the customer sites I’m working – especially in the apparel industry, all have different prices for plus sizes (2xl, 3xl, etc.). WooCommerce is horribly cumbersome in this regard. The old system I’m moving them away from does a far better job at assigning price sensitivity for variations, and it was built over 10 years ago.

Reply
1. Mike Jolley
  
  September 14, 2015
  
  If you click the drag/drop icon you can set the number manually. The actual order however has no baring on the frontend display – its just for admin use.
  
  Reply
Emily

September 19, 2015

I’m no developer only front end html/css and I downloaded a plugin a while back so I can add a variable products to cart on a post or page. Now the dropdown has no variations when I have updated woocommerce can anyone suggest why this maybe?

This product is still working http://justexcite.com/magaluf/magaluf-events/magaluf-sunset-booze-cruise

But the rest arent and im not sure why.

Thanks any help is much appriciated 🙂

Reply
jdhaines

October 3, 2015

When editing the first variation with this new update, I started by deleting a variation. I quickly hit the spacebar to accept the prompt but realized too late the first prompt was something different about saving. Any way for someone to tell me what that prompt was and how to possibly make a different choice? Now it’s just back to the normal “are you sure…” prompt but it seems there is a double wait with every deletion. It’s a slow process that use to be fast.

Also, I’d like to +1 Steve Skinner’s post above for apparel industry issues. I’m severely missing the ability to add custom tags to variations. For example, a sweatshirt has 5 colors and 5 sizes. Perhaps different prices (a la Steve’s comment.) Also, one size and 2 colors are on clearance and need to be tagged as sale or clearance. Then they could be pulled into a separate page of only clearance products. They should be a variation on the sweatshirt page and also a single product with set properties in a sale area. This dual-personality of a variation is how big stores get things done, but essentially impossible (so far that I’ve found) with woo. Just something to think about.

– Josh

Reply
ENBertussi

June 14, 2016

well thank you very much @mike + @Claudio

Reply