WooCommerce，购物车页面 – 购物车为空时隐藏元素

Question

我在 WooCommerce 购物车页面上放置了一些自定义元素。当产品在购物车中时，页面看起来很棒——但是当购物车是空的时，我的自定义元素仍然存在并干扰了空的购物车布局。这就是为什么我想在这种情况下隐藏那些自定义元素。

我尝试将以下代码添加到我的子主题的函数中：

add_action( 'wp_footer', 'henju_empty_cart' );
function henju_empty_cart() {

    if ( WC()->cart->get_cart_contents_count() == 0 ) {
            echo "<script>
            $('Have-Question-Textblock-Cart-0209').hide()
            </script>";
    }
}

或者：

add_action( 'wp_head', 'henju2_empty_cart' );
function henju2_empty_cart() {

    if( is_cart() && WC()->cart->cart_contents_count == 0){
            echo "<script>
            $('Have-Question-Textblock-Cart-0209').css('display','none');
            </script>";
exit;
    }
}

但这没有用。

基本上我想隐藏具有 CSS 类“.Have-Question-Textblock-Cart-0209”的自定义元素。

有人知道怎么做吗？

谢谢，最好的！

Answer 1

好的，我想我找到了一个无需重新加载手册页也可以工作的解决方案：

add_filter( 'body_class','henju_empty_cart' );
function henju_empty_cart( $classes ) {
    global $woocommerce;
    if( is_cart() && WC()->cart->get_cart_contents_count() == 0 ) {
        $classes[] = 'Empty-Cart-0209';
    }

    return $classes;

}

add_action( 'wp_footer', 'henju_empty_cart_ajax' ); 

function henju_empty_cart_ajax() { 
   if ( is_cart()) {
      ?> 
      <script type="text/javascript"> 
         jQuery(function($) {
               if ($num_items == 0) { location.reload (true) };
         });
         exit();
      </script> 
      <?php 
   } 
}

在 style.css 中：

.Empty-Cart-0209 .Have-Question-Textblock-Cart-0209 {
display:none;
}