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
* @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:
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?
Not sure I follow – are you able to send me a screenshot?
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!
Works for me on Storefront + Woo 7.9
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.
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!
Hi, Thanks for providing such valuable snippets. i couldn’t make this snippet work for local attributes that are used for variations
Hi Av, what do you mean by “local attributes”?
i mean attributes that are not global, they are custom for that product
https://snipboard.io/DmzIkB.jpg
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
Thank you!
Welcome!