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

Question

我试图在我的购物车为空时隐藏它，所以我决定在购物车为空时将一个CSS类添加到购物车HTML项目，这是我当前的代码：

 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

如果将类添加到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' );

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

Answer 2

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