Update html tag class values based on Woocommerce product attribute dropdown selection [closed]

You can use the following to add/remove a customized class to #primary selector based on the selected product attribute “Color”:

<script type="text/javascript">
jQuery(function($){
    var p = '#primary',
        c = $(p).prop('class'),
        s="select[name="attribute_pa_color"]";

    // On start
    if( $(s).val() !== '' ) {
        $(p).prop('class', 'background-'+$(s).val());
    }

    // On select (blur live event)
    $(s).blur( function() {
        var b = $(this).val() !== '' ? c+' background-'+$(this).val() : c;
        $(p).prop('class',b);
    });
});
</script>

Tested and works

---

You could also add directly a color-background CSS style instead to #primary selector, like:

<script type="text/javascript">
jQuery(function($){
    var p = '#primary',
        b = 'background-color',
        s="select[name="attribute_pa_color"]";

    // On start
    if( $(s).val() !== '' ) {
        $(p).css(b, $(s).val());
    }

    // On select (blur live event)
    $(s).blur( function() {
        if( $(this).val() !== '' )
            $(p).css(b, $(this).val());
        else
            $(p).removeProp('style');
    });
});
</script>

Tested and works too.