Dropdown Subcategories in WooCommerce

Question

By default WooCommerce show my categories and subcategories like the image I am posting.

Is it possible to hide the subcategory Test and only show the Test sub category when you click the main category which is Furniture?

Here is the html code for my page and the CSS I have used:

aside#woocommerce_product_categories-2 ul li:nth-child(4) ul {
    display: none; 
}
    
aside#woocommerce_product_categories-2 ul li:nth-child(4):hover > ul {
    display:block
}

<aside id="woocommerce_product_categories-3" class="widget woocommerce widget_product_categories">
     <h5 class="widgettitle">Product Categories</h5>
     <ul class="product-categories">
          <li class="cat-item cat-item-28"><a href="http://saltandpepper.workshopcy.com/product-category/accessories/">accessories</a></li>
          <li class="cat-item cat-item-29"><a href="http://saltandpepper.workshopcy.com/product-category/clothes/">clothes</a></li>
          <li class="cat-item cat-item-30"><a href="http://saltandpepper.workshopcy.com/product-category/flowers/">flowers</a></li>
          <li class="cat-item cat-item-38 cat-parent current-cat-parent"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/">Furniture</a>
               <ul class="children">
                    <li class="cat-item cat-item-41 current-cat"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/test/">Test</a></li>
               </ul>
          </li>
          <li class="cat-item cat-item-31"><a href="http://saltandpepper.workshopcy.com/product-category/home-furnishings/">home furnishings</a></li>
          <li class="cat-item cat-item-32"><a href="http://saltandpepper.workshopcy.com/product-category/souvenirs/">souvenirs</a></li>
     </ul>
</aside>

It works but I am not sure if this will be a viable option if you have too many categories and subcategories and products...

Thank you for your help.

Answer 1

---- (update - 3) ----

I have chose jQuery and CSS to do the job (so you will need to register (enqueu) the js file in your theme).

var $ = jQuery.noConflict();
$(document).ready(function(){
  /* For each category */
  $('ul.product-categories > li.cat-parent').each( function( index, element ){
    /* For each category if there is a subcategory */
    $(this).mouseover(function() {
      /* Adding class 'ok' on rollover mouse event */
       $(this).find('ul.children').addClass('ok');
    }).mouseout(function() {
      /* removing class 'ok' on rollout mouse event */
       $(this).find('ul.children').removeClass('ok');
    });
  });
});

ul.product-categories > li.cat-parent > ul.children {
    display: none; 
}
ul.product-categories > li.cat-parent > ul.children.ok {
    display:block; /* (or) display:inline-block; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<aside id="woocommerce_product_categories-3" class="widget woocommerce widget_product_categories">
     <h5 class="widgettitle">Product Categories</h5>
     <ul class="product-categories">
          <li class="cat-item cat-item-28"><a href="http://saltandpepper.workshopcy.com/product-category/accessories/">accessories</a></li>
          <li class="cat-item cat-item-29"><a href="http://saltandpepper.workshopcy.com/product-category/clothes/">clothes</a></li>
          <li class="cat-item cat-item-30"><a href="http://saltandpepper.workshopcy.com/product-category/flowers/">flowers</a></li>
          <li class="cat-item cat-item-38 cat-parent current-cat-parent"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/">Furniture</a>
               <ul class="children">
                    <li class="cat-item cat-item-41 current-cat"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/test/">Test</a></li>
               </ul>
          </li>
          <li class="cat-item cat-item-58 cat-parent current-cat-parent"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/">Furniture2</a>
               <ul class="children">
                    <li class="cat-item cat-item-61 current-cat"><a href="http://saltandpepper.workshopcy.com/product-category/furniture/test/">Test2</a></li>
               </ul>
          </li>
          <li class="cat-item cat-item-31"><a href="http://saltandpepper.workshopcy.com/product-category/home-furnishings/">home furnishings</a></li>
          <li class="cat-item cat-item-32"><a href="http://saltandpepper.workshopcy.com/product-category/souvenirs/">souvenirs</a></li>
     </ul>
</aside>

I have add another category item (that have a subcategory) to be sure that this script works with multiple items… This script will work for all categories that have subcategories.

After that is possible to animate, with fading transitions, and many more things…

---- (update 2) ----

Registering your script in the functions.php file of your active child theme.

If you dont have a function.php file in your child theme, copy it from your parent theme. open this file on an editor and delete every code on it (except the first opening php tag and if there is a close php tag keep it too.
In between paste this function:

// REGISTERING MY JAVASCRIPT FILE IN WORDPRESS HOOK
function registering_my_script_method() {
    if ( !is_admin() ) {
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'my-custom-scripts', get_stylesheet_directory_uri() . '/js/script.js', array('jquery'), null, true );
    }
}
add_action('wp_enqueue_scripts', 'registering_my_script_method');

In your active child theme folder create a js and inside create an empty file called script.js. Then you will open this script.js file and will paste to it, your query code. That'all.