如何从 WooCommerce 前端隐藏特定类别答案

【问题标题】：How To Hide Specific Category from WooCommerce Front-end如何从 WooCommerce 前端隐藏特定类别
【发布时间】：2019-10-09 05:50:25
【问题描述】：

我正在使用 WooCommerce 3.5.7 和 WordPress 5.0.4。

我有许多产品属于多个类别：

e.g. 

Product 1, attached to categories A,B, C
Product 2, attached to categories A,Y, C

etc...

我想从站点中隐藏类别 C，以便当类别显示在前端的站点类别菜单导航中时它不可见。

我尝试了很多方法，但似乎没有一个有效，

第一种方法： 通过 CSS 隐藏。

导航菜单的结构如下：

<li class="cat-item ">
    <span class="icon-toggle"></span>
    <a href="https://siteurl.com/product-category/category-url/">category-text</a>
</li>

我尝试使用以下 CSS 隐藏元素：

a[href="https://siteurl.com/product-category/category-url/"] 
{
    display: none!important;
}

问题在于它删除了超链接和文本，但该类别仍然“占用了页面空间”。这是因为这仅隐藏了锚元素，而不是作为该元素的父元素的整个 <li class="cat-item ">。

我无法找到任何方法来定位 CSS 中子元素的父元素。

第二种方法：使用 pre_get_posts： https://wordpress.stackexchange.com/questions/90923/pre-get-posts-for-exclude-category

$catid = "-1031";

$excludeCategory = function ($catid)
{
    return function ($query)
    {
        if (
            $query->is_home() 
            && $query->is_main_query()
        ) {
            $query->set('cat', $catid);
        }
    };
};

add_action('pre_get_posts', $excludeCategory($catid));

在上面的示例中，我要隐藏的类别 ID 是“1031”。但这没有用。

任何建议，我如何删除此产品类别，使其不显示在前端，但保留在后端？

【问题讨论】：

你试过“可见性：隐藏”吗？
可见性隐藏，不幸的是，这无济于事，因为这会占用页面上更多的空间：tutorialrepublic.com/css-tutorial/css-visibility.php
您是否尝试将唯一 ID 应用于链接并使用给定的 ID 通过 CSS 应用您的样式更改？
谢谢，但我无法向 HTML 添加任何内容，因为它是由 WooCommerce 后端自动生成的。

标签： javascript css wordpress woocommerce hook-woocommerce

【解决方案1】：

您可以尝试在链接中添加onclick="hide()"，然后添加以下javascript：

function hide() { document.getElementsByClassName("cat-item ").style.display = "none!important"; }

【讨论】：

谢谢，但是链接是由 WooCommerce 后端自动生成的，所以我不能在 HTML 中添加任何东西。
如果是这样，此链接可能会有所帮助：stackoverflow.com/questions/17157342/…。它使用“EventListener”来检测何时单击特定元素。把这个答案和我的结合起来，它可能会奏效。