Categories
Core

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.

woocommerce-admin-variations-interface

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:

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

woocommerce-2.4-variations-options

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:

Demo

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

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.

By Claudio Sanches

Developer on the WooCommerce team and member of the WordPress Brazilian community.

17 replies on “Improving the Variations Interface in 2.4”

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.

Liked by 2 people

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.

Like

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

Like

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

Like

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.

Liked by 1 person

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

Like

Comments are closed.