Improving the Variations Interface in 2.4

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.


17 responses to “Improving the Variations Interface in 2.4”

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

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

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

      2. There was a related issue where out of stock products lose pricing. Fixing in .2

        1. That’d be great. Thank you.

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

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

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

  4. 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 );
    		}
    	}
    
  5. 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 );

    1. If you increase the threshold, you can stop it using ajax. It’s a fine balance; adjust as needed.

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

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

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

  8. jdhaines Avatar

    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

  9. well thank you very much @mike + @Claudio

Leave a Reply

Your email address will not be published. Required fields are marked *