Woocomerce auto select product variations if only one available AFTER interacting with form / dropdown

I'm trying to find a solution for my woocommerce product with attributes AFTER user selects one option.

All solutions always lead me to this snippet that only fires on page load - not when users select an option or interact with the form.

add_filter('woocommerce_dropdown_variation_attribute_options_args','fun_select_default_option',10,1);
function fun_select_default_option( $args)
{
    if(count($args['options']) > 1) 
        $args['selected'] = $args['options'][0];
    return $args;
}

In my case, I have a product with attributes: power - 50W and 100W

dimmension if I select 50W, only 100mm remain and should be auto selected if I select 100W, only 200mm remain and should be auto selected

volume if I select 50W, only 1 variant remains and should be auto selected if I select 100W, only 1 variant remains and should be auto selected

I've tried playing around with javascript but it then messed up on initial load. It seems odd that this isn't an option that would be available out of the box for woocommerce.

Has anyone encountered this task before or has any idea if I need to dig deeper in custom JS rather than PHP hooks?

Your code runs server-side when the page is initially built. It cannot react to user interactions happening client-side in the browser. you absolutely need javascript.

You can add this code to your theme's folder:

jQuery(function($) {
    // Function to check and auto-select single options
    function autoSelectSingleOption() {
        // Iterate through each variation form (usually only one per page)
        $('.variations_form').each(function() {
            const $form = $(this);
            // Iterate through each select dropdown within this form
            $form.find('.variations select').each(function() {
                const $select = $(this);
                let enabledOptions = [];

                // Find enabled options (ignoring the placeholder if it exists)
                $select.find('option').each(function() {
                    const $option = $(this);
                    // Check if it's a real value and not disabled (WC might add 'disabled' class or attribute)
                    if ($option.val() && !$option.is(':disabled') && !$option.prop('disabled')) {
                         enabledOptions.push($option);
                    }
                });

                // If exactly one enabled option is found
                if (enabledOptions.length === 1) {
                    const $singleEnabledOption = enabledOptions[0];
                    // Check if it's not already selected
                    if ($select.val() !== $singleEnabledOption.val()) {
                        console.log('Auto-selecting:', $select.attr('id'), $singleEnabledOption.val()); // Debugging log
                        // Set the value
                        $select.val($singleEnabledOption.val());
                        // Trigger the change event so WC updates price, potentially other attributes
                        $select.trigger('change');
                    }
                }
            });
        });
    }

    // --- Event Binding ---

    $('.variations_form').on('woocommerce_variation_select_change updated_wc_div', function() {
        // Use a slight delay to ensure the DOM updates (option enabling/disabling) are complete
        setTimeout(autoSelectSingleOption, 100);
    });
  

});

Add the following code to your theme's functions.php and set the right path of your js file :

function my_theme_enqueue_variation_script() {
    // Only enqueue on single product pages
    if ( is_product() ) {
        wp_enqueue_script( 'custom-variations', get_stylesheet_directory_uri() . '/js/custom-variations.js', array('jquery'), wp_get_theme()->get('Version'), true );
        
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_variation_script' );