doue8385
2018-06-05 15:44
浏览 61
已采纳

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

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!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • draxu26480 2018-06-05 16:20
    已采纳

    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.

    打赏 评论
  • douxu3315 2018-06-06 12:49

    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

    打赏 评论

相关推荐 更多相似问题