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!

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        businessbloomer.com/woocommerce-customization
 * @author        Rodolfo Melogli, Business Bloomer
 * @testedwith    WooCommerce 6
 * @community     https://businessbloomer.com/club/
 */

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:

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

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

12 thoughts on “WooCommerce: Dynamically Update Variable Product Attributes @ Single Product

  1. I have now managed to get your snipped to work. It seems that I did not copy the snipped cleanly on the first try.

    The problem is that it only works when an attribute is configured to be used as a variant. We need it so that all attributes adjust when only one attribute is used as a variation. The problem is that these attributes are only attached to the container article and not to the individual variants. Do you think there is a way to solve this problem?

    1. Not sure I follow – are you able to send me a screenshot?

  2. It sadly isn’t working with the latest version of Woocommerce anymore.
    I tried turning off all plugins, custom code and reverted to the Storefront theme.
    No changes.

    Any updates?
    Thanks in advance!

    1. Works for me on Storefront + Woo 7.9

  3. hello and thank you for your code
    I find your code and use it in WooCommerce 7.6.1 and WordPress 6.2 but there are problems with this code
    after clicking {the reset variations} button (after selecting variations). It does not return to the first state that showed all the product attributes.
    The table of additional specifications changes only when we have another choice. And it will not return to the previous state, like when after clicking the reset variation button.
    All selections must be done up to the last selectable option to change the additional product specification table.
    I want to change the specifications by selecting one of the variable options.
    I tried to change the code according to my needs, but it was not successful. That’s why I ask for your help.

    1. Thanks for your comment Saeed. What you need to do here is storing the initial attribute string into a variable, and then return that once the reset button is clicked. It’s not too difficult. Let me know how it goes!

  4. Hi, Thanks for providing such valuable snippets. i couldn’t make this snippet work for local attributes that are used for variations

    1. Hi Av, what do you mean by “local attributes”?

      1. i mean attributes that are not global, they are custom for that product
        https://snipboard.io/DmzIkB.jpg

        1. Thank you. I guess it’s only a matter of changing the correct JS selectors – unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  5. Thank you!

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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