CODEWITHSUNDEEP
phpcsswordpresswoocommercecart
Dave Clarke
Dave Clarke

Reputation: 23

Apply CSS style conditionally when specific product category is in Woocommerce cart

Before I start my question I would like to let you know that I am a graphic designer, not a developer. I am helping out a buddy with their website so please forgive my ignorance and lack of knowledge.

I am building a site in Wordpress with a WooCommerce shop. I am fairly comfortable with CSS and HTML but have virtually no php knowledge and I am very new to WooCommerce.

I've got a very specific thing I'd like to achieve but I don't really know where to start.

Essentially I'd like to apply a conditional css style once a product of a particular category is placed in the cart (and reversed if the product is removed). Specifically I'd like to change the colour of an icon that sits in a widget and will be displayed on the header. So the effect is that when a visitor adds a 'gift' to their cart, the 'gift' icon will 'light up' to prompt the visitor to next add a 'card' and so on.

I found the following which looks at first glance like it might get me close, but I don't know how to implement it, so any help would be very appreciated:

// set our flag to be false until we find a product in that category
$cat_check = false;

// check each cart item for our category
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {

$product = $cart_item['data'];

// replace 'membership' with your category's slug
if ( has_term( 'membership', 'product_cat', $product->id ) ) {
    $cat_check = true;
    // break because we only need one "true" to matter here
    break;
}
}

// if a product in the cart is in our category, do something
if ( $cat_check ) {
// we have the category, do what we want
}

Thanks in advance!

Upvotes: 2

Views: 3317

Answers (2)

Chintan Hingrajiya
Chintan Hingrajiya

Reputation: 21

suppose we have two categories in product that time one category have product_cat-slippers class and second category have product_cat-floaters.

you can apply css with :not selector view in below code.

:not(.product_cat-floaters) {
    color: red;
}

https://www.w3schools.com/cssref/sel_not.asp

Upvotes: 0

LoicTheAztec
LoicTheAztec

Reputation: 253901

Try the following slightly different revisited code instead in a hooked function, that will allow you to add some inline CSS styles when a specific product category is found in cart items:

add_action( 'wp_head' , 'custom_conditional_css_styles' );
function custom_conditional_css_styles(){
    if( WC()->cart->is_empty() ) return; // We exit is cart is empty

    // HERE your product category
    $product_category = 'membership';
    $found            = false;

    // Loop through cart items checking for our product category
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        if ( has_term( 'membership', 'product_cat', $cart_item['product_id'] ) ) {
            $found = true;
            break; // Found we stop the loop
        }
    }

    if ( ! $found ) return; // If the product category is noy found we exit 

    // Here come your CSS styles
    ?>
    <style>
        .my-class { color:red;}
    </style>
    <?php
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

When using has_term() with cart items, never use $cart_item['data']->get_id() but always $cart_item['product_id'] instead.

Upvotes: 2

Related Questions