0

I am using WooCommerce 3.5.7 , and WordPress 5.0.4.

I have a number of products attached to multiple categories: 

e.g. 

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

etc...

I want to hide category C from the site so that it is not visible when the categories are displayed in the site category menu navigation on the front-end.

I have tried numerous approaches but none seem to work,

First Approach: Hiding via CSS.

The structure of the navigation menu is as follows: 

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

I attempted to hide the element using the below CSS: 

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

The problem with this is it removed the hyperlink and text but the category still 'took up space' on the page. This was because this only hides the anchor element and not the entire <li class="cat-item "> that is the parent of that element.

I was unable to find any way to target the parent of a child element in CSS.

Second Approach: Using 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));

In the above example, the category ID I want to hide is '1031'. But this did not work.

Any suggestions, how I can remove this product category so that it does not display in the front end, but is preserved in the backend?

Gary
  • 1,086
  • 2
  • 13
  • 39
  • Did you try "visibility:hidden"? – htmlcat May 22 '19 at 17:21
  • Visibility hidden, wouldn't help unfortunately, as this would take up even more space on the page: https://www.tutorialrepublic.com/css-tutorial/css-visibility.php – Gary May 22 '19 at 17:24
  • Did you try applying an unique ID to the link and use the ID given to apply your style changes using CSS ? – mattdaspy May 22 '19 at 17:28
  • Thanks, but I can't add anything to the HTML as it's auto generated by the WooCommerce backend. – Gary May 22 '19 at 17:31

1 Answers1

0

You could try adding onclick="hide()" to the link, then add the following javascript:

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

htmlcat
  • 336
  • 3
  • 10
  • Thanks, but the the link is auto generated by the WooCommerce backend, so I can't add any thing to the HTML. – Gary May 22 '19 at 17:30
  • If so, this link might be able to help: https://stackoverflow.com/questions/17157342/detect-if-im-clicking-an-element-within-an-element#answer-17157557 . It uses an "EventListener" to detect when a specific element is clicked. Combine that answer with mine, and it might work. – htmlcat May 22 '19 at 17:40