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        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( " 
			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

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Move Product Tabs Under the Short Description
    Mostly when the long description and additional information are short, you may want to move this block of content to the right hand side of the product image – as opposed to “waste” a lot of space underneath it. Here’s how you move the product tabs to the right!
  • WooCommerce: Display “FREE” Instead of $0.00 Price
    In older versions of WooCommerce free prices used to display as “FREE!” and products with empty prices were not publishable/purchasable. Now they’ve changed this around, but I still believe “FREE” looks much better than “$0.00”. It’s much more enticing, isn’t it? Well, here’s how you restore the old WooCommerce functionality – as usual it’s as […]
  • WooCommerce: Display Variations’ Stock @ Shop Page
    Thanks to the various requests I get from Business Bloomer fans, this week I’m going to show you a simple PHP snippet to echo the variations’ name and stock quantity on the shop, categories and loop pages. Of course, if “Manage stock” is not enabled at variation level, the quantity will be null, and therefore […]

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

        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 BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you!

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