当 Woocommerce 购物车为空时，向项目添加 CSS 类

Posted 2023-03-06

【中文标题】当 Woocommerce 购物车为空时，向项目添加 CSS 类

【英文标题】：Add a CSS class to an item when Woocommerce cart is empty

【发布时间】：2017-12-20 07:48:15

【问题描述】：

我想在购物车为空时隐藏我的购物车，因此我决定在购物车为空时向购物车 html 项添加一个 CSS 类，这是我当前的代码：

 function x_woocommerce_navbar_menu_item( $items, $args ) 
      if (WC()->cart->cart_contents_count == 0 ) 
       echo '<script type="text/javascript">
                    $(document).ready(function() 
                        $("#header_cart").addClass("zero"); 
                    );
               </script>';
      

我将其添加到我的 functionts.php 文件中

我错过了什么吗？

【问题讨论】：

add_action('wp_footer', 'x_woocommerce_navbar_menu_item');如果您正在添加脚本，则会丢失

【参考方案1】：

如果您将类添加到 body 以在 CSS 中创建层次结构会很好。在functions.php中使用以下代码：

    function tristup_body_classes( $classes )
    

        global $woocommerce;
        if( is_cart() && WC()->cart->cart_contents_count == 0)
            $classes[]='empty-cart';
        
        return $classes;
    
    add_filter( 'body_class', 'tristup_body_classes' );

此代码将向正文添加一个类“empty-cart”。 希望这能解决您的问题。

【讨论】：

谢谢，它有效，但是我需要删除 is_cart() 条件

【参考方案2】：

我在这里发布一个基于Tristup 答案的解决方案，因为他的答案不是 100% 正确，观察到Yahya Hussein。

add_filter( 'body_class','shoppingCartNotEmpty' );
function shoppingCartNotEmpty( $classes ) 
    $classes[] = WC()->cart->get_cart_contents_count() ? 'shopping-cart-not-empty' 
                                                       : 'shopping-cart-empty';
    return $classes;

当购物车为空时，则创建 CSS 类 shopping-cart-empty，否则 shopping-cart-not-empty 可用。

【讨论】：

这有效，但是，它只适用于页面重新加载。因此，如果购物车是空的，然后您添加一个项目，购物车仍然隐藏，直到重新加载。

【参考方案3】：

请将此代码放入functions.php 文件中。

function cart_empty_add_class() 
    global $woocommerce;
    if ( empty($woocommerce->cart->cart_contents) ) 
        echo '<script type="text/javascript">
                    $(document).ready(function() 
                        $("#header_cart").addClass("zero"); 
                    );
               </script>';
exit;
    

add_action( 'wp_head', 'cart_empty_add_class' );

【讨论】：

请详细说明或写出您遇到的实际问题。