WooCommerce 中的下拉子类别

Question

默认情况下，WooCommerce 会像我发布的图片一样显示我的类别和子类别。

是否可以在点击主分类Furniture时隐藏子分类Test只显示Test子分类？

这是我页面的 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来完成这项工作（所以你需要注册（排队）主题中的 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）----

正在您的活动子主题的 functions.php 文件中注册您的脚本。

如果您的子主题中没有 function.php 文件，请从您的父主题中复制它。在编辑器上打开此文件并删除其中的所有代码（除了第一个 opening php 标签 和 close 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 文件并将您的查询代码粘贴到其中。就这些了。

WooCommerce 中的下拉子类别

Dropdown Subcategories in WooCommerce

css

wordpress

jquery

categories

woocommerce