Home » WooCommerce: Dynamically Update Variable Product Attributes @ Single Product

WooCommerce: Dynamically Update Variable Product Attributes @ Single Product

by adminkys

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!

On load, the Additional Information tab of a variable product shows all possible options (“attribute terms”). In this customization, we wish to dynamically update the terms based on the currently selected variation. For example, if “Blue, Large” is the selected variation, the Additional Information tab would change to just “Color: Blue” and “Size: Large”

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

/**
 * @snippet       Dynamic Attributes @ Single Product
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @testedwith    WooCommerce 6
 * @donate $9     https://www.tutoraspire.com
 */

add_action( 'woocommerce_before_add_to_cart_quantity', 'tutoraspire_dynamic_atts_variation' );
 
function tutoraspire_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:

As soon as I select the Red, Large variation, and Additional Information tab content dynamically updates itself!

You may also like