如何使用 css 为每个页面隐藏这个特定的 div 元素（WP）答案

【问题标题】：How to hide this specific div element using css for each page (WP)如何使用 css 为每个页面隐藏这个特定的 div 元素（WP）
【发布时间】：2018-11-08 05:03:51
【问题描述】：

第一次在这里发帖（耶！），我正在寻求帮助，因为我从今天早上开始就在与这些东西作斗争。之前我尝试过笨拙地使用一些 CSS，但它似乎不起作用。

因此，我正在尝试删除此购物车图标/按钮（位于未登录访问者的右下角。（www.friendly.marketing）

那个元素的代码是

</header>         
     <div id="dark-cart-overlayer"></div>
 <div id="cart-panel">
    <div id="cart-panel-trigger">
        <span class="fas fa-shopping-cart"></span>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
            <path fill="#ffffff" d="M10.707 10.5l5.646-5.646c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-5.646 5.646-5.646-5.646c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5.646 5.646-5.646 5.646c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l5.646-5.646 5.646 5.646c0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146c0.195-0.195 0.195-0.512 0-0.707l-5.646-5.646z"></path>
        </svg>
    </div>

有什么办法可以在css中实现吗？

【问题讨论】：

span.fa-shopping-cart{display:none} ?
感谢您的回复，不幸的是，它并没有隐藏按钮，只是一个图标。它还隐藏了已登录客户的图标。我以前看到的所有机制都对我不起作用，我想我是可怜的 css 人。
这里有关于类似问题的另一个主题，您可能会发现它有帮助wordpress.stackexchange.com/questions/181630/…

标签： html css wordpress woocommerce

【解决方案1】：

您需要某种条件逻辑来确定用户是否已登录。您可以使用 WooCommerce 挂钩来隐藏添加到购物车按钮。这段代码应该实现这一点。您需要将其添加到您的子主题的functions.php。

add_action( 'init', 'hide_add_to_cart_not_logged_in' );

function hide_add_to_cart_not_logged_in() { 
 if ( !is_user_logged_in() ) {       
  remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
  add_action( 'woocommerce_after_shop_loop_item', 'print_login_to_see', 11 ); 
  add_action( 'woocommerce_single_product_summary', 'print_login_to_see', 31 );
}
}

function print_login_to_see() {
echo '<a href="' . get_permalink(wc_get_page_id('myaccount')) . '">' . __('Login to add to cart', 'theme_name') . '</a>';
}

【讨论】：

【解决方案2】：

你可以试试这个

cart-panel{display:none;}

它会用购物车面板隐藏 div Id。

【讨论】：

完全没有隐藏，我实时查看了多个组合。
您能否分享您的网站网址并突出显示您要隐藏的部分
是的，它是 www.friendly.marketing，右下角的购物车图标（加上它的黑色背景）。
我看不到您提到的页脚或页眉中的任何购物车图标

【解决方案3】：

试试这个：

div#cart-panel-trigger { display: none; }

我希望这会成功。

【讨论】：

这个很完美，非常感谢。现在我想我需要找到一些关于“如果登录则显示”等的代码。非常感谢:)
我建议将代码包装在代码块格式中以便于阅读。
好主意，新手错误:)) 谢谢

【解决方案4】：

WordPress 将 .logged-in 类放在 <body> 标签上，以识别用户是否登录。

在你的 css 中定义你的风格：

body.logged-in #cart-panel-trigger {
  display: none;
}
#cart-panel-trigger {
  display: block;
}

【讨论】：