当特定产品类别在Woocommerce购物车中时，有条件地应用CSS样式

Question

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!

Answer 1

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.