Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I have started to build a Woocommerce site, created a variable product with 2 product attributes for variations. The first product attribute is "color" and the second is "size". I would like to add .background-black CSS class to my #primary Id when only the "color" product attribute has been changed and not "size". I grabbed the attribute ID through the URL that is displayed in the cart once the variation is selected: attribute_pa_color = black.

What I would like to know is if there is a way I could do this using jQuery with woocommerce I just don't know how to do it properly. I appreciate the help.

$(document).ready(function() {
    if ("attribute_pa_color = black") {
        $("#primary").toggleClass("background-black");
    }
});

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

I have started to build a Woocommerce site, created a variable product with 2 product attributes for variations. The first product attribute is "color" and the second is "size". I would like to add .background-black CSS class to my #primary Id when only the "color" product attribute has been changed and not "size". I grabbed the attribute ID through the URL that is displayed in the cart once the variation is selected: attribute_pa_color = black.

What I would like to know is if there is a way I could do this using jQuery with woocommerce I just don't know how to do it properly. I appreciate the help.

$(document).ready(function() {
    if ("attribute_pa_color = black") {
        $("#primary").toggleClass("background-black");
    }
});

• woocommerce-offtopic
• jquery
• css

Share Improve this question edited May 26, 2019 at 6:59 LoicTheAztec 3,3911717 silver badges2424 bronze badges asked May 25, 2019 at 20:09 theartisttheartist 1355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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.