Question

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

是否可以隐藏子类别Test并仅在单击家具主要类别时显示Test子类别？

这是我的页面的html代码和我使用过的CSS：

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

它有效但我不确定如果你有太多的类别和子类别和产品，这是否可行？

感谢您的帮助。

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） ----

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

如果您的子主题中没有function.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文件并将其粘贴到您的查询代码中。 That'all。

WooCommerce中的下拉子类别

1 个答案: