LaVOZs

The World’s Largest Online Community for Developers

'; php - Add class to div when woocommerce cart is empty - LavOzs.Com

I would like to add a class to (or directly style) an element that contains the cart count ONLY when the cart is empty.

Below is the code that I am currently using which is working great. The cart count is working great but the color does not update.

header.php (cart count added after the cart icon in menu)

?>          
<div class="counter_bubble">
        <a href="/cart">
            <span class="counter" id="cart-count"><?php
            $cart_count = WC()->cart->get_cart_contents_count();
            echo sprintf ( _n( '%d', '%d', $cart_count ), $cart_count );
            ?></span>
        </a>
</div>
<?php

functions.php (enqueue custom javascript + cart refresh)

// ADD CUSTOM JS FILE FROM CHILD THEME
add_action('wp_enqueue_scripts', 'bubblescript');

function bubblescript() {
    wp_enqueue_script( '_tandt-main', get_template_directory_uri() . 
    '/../Graffont/js/gft-script.js', array("jquery"), $my_js_ver, true );
}

// REFRESH CART FRAGMENTS (ITEM COUNT) SO CORRECT NUMBER IS ALWAYS SHOWN
add_filter( 'woocommerce_add_to_cart_fragments', 'refresh_cart_count', 50, 1 );

function refresh_cart_count( $fragments ){
    ob_start();
    ?>
    <span class="counter" id="cart-count"><?php
    $cart_count = WC()->cart->get_cart_contents_count();
    echo sprintf ( _n( '%d', '%d', $cart_count ), $cart_count );
    ?></span>
    <?php
     $fragments['#cart-count'] = ob_get_clean();

    return $fragments;
}

gft-script.js

jQuery(document).ready(function($) {

function changecartbubble() {
    if ($('body').find('#cart-count').length > 0) {
        if (parseInt($('#cart-count').html()) > 0) {
            // cart has number > 0 so cart has items
            //change background class
            $('#cart-count').addClass('other-background-of-bubble');
        }
        else {
            // cart has no number so cart has no items
            //remove background class
            $('#cart-count').removeClass('other-background-of-bubble');
        }
    }
}

});

style.css - Current CSS

.counter {
    background-color: #ff0;
    border-radius: 20px;
    font-size: 10px;
    padding: 0 4px 0 4px;
}

.other-background-of-bubble{
    background-color:red!important;
}

You can call this function on document ready and whenever cart is updated by ajax.

Javascript/jQuery:

function changecartbubble() {
    if ($('body').find('#cart-count').length > 0) {
        if (parseInt($('#cart-count').html()) > 0) {
            // cart has number > 0 so cart has items
            //change background class
            $('#cart-count').addClass('other-background-of-bubble');
        }
        else {
            // cart has no number so cart has no items
            //remove background class
            $('#cart-count').removeClass('other-background-of-bubble');
        }
    }
}

Style:

.other-background-of-bubble{
    background:red!important;
}
Related
Add a tooltip to a div
woocommerce add-to-cart empty
Stay on same page and not empty the cart session during Woocomerce checkout
WooCommerce: Mini cart in header seems to be cached
Custom woocommerce Cart AJAX Update
Empty Cart button in Mini Cart. woocommerce
Woocommerce login redirect if cart not empty
Empty cart before add to cart in WooCommerce