WooCommerce: Dynamically Update Variable Product Attributes @ Single Product

If you’re familiar with WooCommerce variable products, variations are generated from product attribute terms (color: yellow & size: large for example). All possible attribute terms are displayed in the “Additional Information” tab of the single product page, so that the customer has an idea of all the possible product options.

However, as you can see from the screenshot below, this information is static i.e. does not change when you select a variation. It would be much more helpful if the attribute information changed from e.g. “Color: red – yellow – green” to the currently selected variation attribute term e.g. “Color: red“.

In today’s quick snippet, we’ll show just that: a combination of PHP and jQuery to make sure that “Additional Information” tab is always updated based on the selected variation. Enjoy!

PHP Snippet: Dynamically Update Additional Information Tab Attributes Based on Currently Selected Variation

/**
 * @snippet       Dynamic Attributes @ Single Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_dynamic_atts_variation' );
 
function bbloomer_dynamic_atts_variation() {
	global $product;
	if ( ! $product->is_type( 'variable' ) ) return;
    wc_enqueue_js( " 
		$('input.variation_id').change(function(){
			if( $(this).val() && $(this).val() > 0  ) {	
				$('form.variations_form').find('.variations select').each( function( index, el ){
					var current_select_id = $(el).attr('id');
					var current_select_val = $(el).find('option:selected').text();
					$('.woocommerce-product-attributes-item--attribute_'+current_select_id+' td p').text(current_select_val);
				});
			} 
		});
	" );
}

And here’s a proof of what happens once a variation is selected: