Change Element Color When Woocommerce Cart Is Empty

Question

Wordpress site, built with Oxygen Builder. I have a linear icon (cart) near my menu. I'm trying to change the color of that icon when there is an item in the cart (not empty). For the life of me, I can't get it working. It either crashes the site, screws up the body margin, etc.

I've tried many variations of the following in functions.php:

add_action('wp_footer', 'crit_cart') ;
function crit_cart() {
    if(sizeof( WC()->cart->get_cart() ) > 0 ) {
        jQuery('#fancy_icon-62-12').css('color','blue');
    }
}

and

function crit_cart() { 
if(WC()->cart->get_cart_contents_count() != 0){
        echo "<script type=text/javascript> jQuery("#link-64-12").css('color','#47beff');</script>";
}

} add_filter( 'wp_headers', 'crit_cart');

I've tried the last one with and without the echo before the jQuery.

Any help would be greaty appreciated. Thank in advance!

Answer 1

You have the right idea, however there are syntax errors.

On the first, you are trying to run jQuery from PHP. PHP runs on the backend, and jQuery/JS runs on the front, so you can not run it this way.

In the second, you are doing it correctly - echoing out the script to the front end to run, however your second quotation is ending your echo, and it will return errors. Give this a try:

add_action('wp_footer', 'crit_cart') ;
function crit_cart() {
    if(sizeof( WC()->cart->get_cart() ) > 0 ) : ?>

    <script type='text/javascript'>
        jQuery('#fancy_icon-62-12').css('color','blue');
    </script>
    <?php
    endif;
}

In this example, you are escaping from the PHP and will directly echo out the script to the DOM. Since it is a script, it will run at that time.

Hope this helps.