How to Select Multiple Variations in WooCommerce

If you were ever looking for a plugin that allows your WooCommerce store customers to select multiple variations at the same time, I have good news for you – you can easily do it without using any complicated plugins for WooCommerce.

The thing is that WooCommerce already has the feature you need; it is called “Group Products”. The thing is that this feature requires just a little bit of extra configuration. And that’s exactly what we’re going to do in this tutorial.

This is how it is going to look as a result:

The good news is that the WooCommerce grouped product page template already allows you to display product variations along with the products. The only problem here is that by default, you can not select variations when editing the value of the “Grouped products” field.

But guess what? The next field, the “Upsell” field, allows you to select specific variations by default! It means that there is a function in the WooCommerce core that returns exactly what we need for the “Grouped products” field.

To tap into that function, we just need to modify an AJAX action for the “Grouped products” #grouped_products field in the product meta box. By default, the AJAX action is the woocommerce_json_search_products action, and we need to change it to the following: woocommerce_json_search_products_and_variations.

Unfortunately, we can only do it with JavaScript (if you don’t want to change WooCommerce core files, of course, specifically html-product-data-linked-products.php.

jQuery( function( $ ) {
	const ajaxAction = 'woocommerce_json_search_products_and_variations'
	$( '#grouped_products' ).data( 'action', ajaxAction )
} );

The complete code for the functions.php file:

<?php
add_action( 'admin_footer', function() {
	global $current_screen;

	if(
		! is_a( $current_screen, 'WP_Screen' )
		|| empty( $current_screen->id )
		|| 'product' !== $current_screen->id
	) {
		return;
	}
	
	?>
		<script>
		jQuery( function( $ ) {
			const ajaxAction = 'woocommerce_json_search_products_and_variations'
			$( '#grouped_products' ).data( 'action', ajaxAction )
		} );
		</script>
	<?php

}, 999 );

Now, we can select multiple variations and simple products as a part of a single grouped product:

A Plugin Approach to Select Multiple Variations

In case you don’t want to deal with the code at all, I created a simple plugin, which, once activated, will allow you to select multiple variations along with simple products when editing grouped products in WooCommerce.

You can get the plugin on my GitHub page.

# WooCommerce, Variable Products

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X