Примените стиль CSS условно, когда конкретная категория товара находится в корзине Woocommerce

Question

Прежде чем я начну свой вопрос, я хотел бы сообщить вам, что я графический дизайнер, а не разработчик.Я помогаю друзьям с их сайтом, поэтому, пожалуйста, прости мое невежество и отсутствие знаний.

Я создаю сайт в Wordpress с магазином WooCommerce.Я довольно хорошо разбираюсь в CSS и HTML, но практически не обладаю знаниями php, и я очень плохо знаком с WooCommerce.

У меня есть очень специфическая вещь, которую я хотел бы достичь, но я действительно не знаю, гдедля начала.

По сути, я хотел бы применить условный стиль CSS, когда товар определенной категории помещен в корзину (и отменен, если товар удален).В частности, я хотел бы изменить цвет значка, который находится в виджете и будет отображаться в заголовке.Таким образом, эффект заключается в том, что когда посетитель добавляет «подарок» в свою корзину, значок «подарок» будет «загораться», предлагая посетителю добавить «карту» и т. Д.

Я нашелследующее, которое на первый взгляд кажется мне близким, но я не знаю, как это реализовать, поэтому любая помощь будет очень признательна:

// 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
}

Заранее спасибо!

Answer 1

предположим, что у нас есть две категории в продукте, в то время как одна категория имеет класс product_cat-slippers, а вторая категория имеет product_cat-floaters.

вы можете применить css с помощью: not selector view в приведенном ниже коде.

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

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

Answer 2

Попробуйте следующий немного другой пересмотренный код вместо этого в подключенной функции, которая позволит вам добавить несколько встроенных стилей CSS, когда определенная категория продукта будет найдена в элементах корзины:

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
}

Код входит в функциюФайл .php вашей активной дочерней темы (или активной темы).Протестировано и работает.

При использовании has_term() с элементами корзины никогда не используйте $cart_item['data']->get_id(), но всегда $cart_item['product_id'] вместо.