Выпадающие подкатегории в WooCommerce

Question

По умолчанию WooCommerce показывает мои категории и подкатегории, такие как изображение, которое я публикую.

Можно ли скрыть подкатегорию тест и показать только тест подкатегорию при нажатии основной категории, которая Мебель?

Вот HTML код моей страницы и CSS я использовал:

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>

Это работает, но я не уверен, если это будет жизнеспособным вариантом, если у вас слишком многие категории и подкатегории и продукты ...

Благодарим за помощь.

Answer 1

---- (обновление - 3) ----

Я выбрал JQuery и CSS, чтобы сделать работу (так что вам нужно будет зарегистрироваться (enqueu) файл JS в вашей теме).

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>

У меня есть добавить еще один элемент категории (то есть подкатегория), чтобы быть уверенными, что этот скрипт работает с несколькими элементами ... Этот сценарий будет работать для всех категорий, которые имеют подкатегории.

После этого можно анимировать, с замираниями переходов, и многими другими вещами ...

---- (обновление 2) ----

Регистрации вашего скрипта в функциях. php файла вашей активной дочерней темы.

Если у вас нет файла functions.php в дочерней теме, скопируйте его из родительской темы. открыть этот файл в текстовом редакторе и удалить все символы на нем (за исключением первого открытия PHP тега и если есть близко PHP тег держать его слишком
Между пастой эту функцию:.

// 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'); 

В вашей активной папке с дочерними темами создайте js и внутри создайте пустой файл с именем script.js. Затем вы откроете этот файл script.js и вставьте в него свой код запроса.