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

Question

我想在购物车是空的时候隐藏我的购物车，所以我决定在购物车是空的时候向购物车 HTML 添加一个 CSS class 项目，这里是我当前的代码：

 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 文件中

我错过了什么吗？

Answer 1

请将此代码放入 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' );

Answer 2

如果在正文中添加class，在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' );

此代码将在正文中添加 class "empty-cart"。
希望这能解决您的问题。

Answer 3

我在这里发布一个基于 Tristup answer, as his answer is not 100% correct which observed 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 class shopping-cart-empty，否则 shopping-cart-not-empty 可用。

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

Add a CSS class to an item when Woocommerce cart is empty

css

php

wordpress

shopping-cart

woocommerce