Dropdown Unterkategorien in WooCommerce

Question

Standardmäßig zeigt WooCommerce meine Kategorien und Unterkategorien wie das Bild, das ich poste.

Ist es möglich, den Unterkategorie-Test zu verstecken und nur die Test-Unterkategorie zeigen, wenn Sie die Hauptkategorie klicken, die Möbel sind? Hier

ist der HTML-Code für meine Seite und die CSS die ich verwendet habe:

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>

Es funktioniert, aber ich bin nicht sicher, ob dies eine sinnvolle Option sein, wenn Sie zu haben viele Kategorien und Unterkategorien und Produkte ...

Vielen Dank für Ihre Hilfe.

Answer 1

---- (Update - 3) ----

Ich habe wählte jQuery und CSS die Arbeit zu tun (so müssen Sie (enqueu) die js-Datei registrieren in deinem Thema).

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>

Ich habe eine andere Kategorie Element hinzufügen sicher sein (die eine Unterkategorie haben), dass dieses Skript mit mehreren Elemente funktioniert ... Dieses Skript für alle Kategorien arbeiten, die Unterkategorien haben.

Danach möglich zu animieren, mit Fading Übergänge und vieles mehr ...

---- (Update 2) ----

Registrierung Ihres Skript in den Funktionen. PHP-Datei Ihres aktiven Kinderthemas.

Wenn Sie in Ihrem untergeordneten Thema keine function.php-Datei haben, kopieren Sie sie aus Ihrem übergeordneten Thema. Öffnen Sie diese Datei auf einem Editor, und löschen Sie alle Code auf sie (mit Ausnahme der ersten Öffnung php tag und wenn es einen schließen PHP-Tag ist halten es zu
Zwischen Paste diese Funktion.

// 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 Ihrem aktiven Kind Themenordner erstellen js und innen eine leere Datei erstellen script.js genannt. Dann öffnet man diese script.js Datei und wird es, Ihre Abfrage-Code einfügen. That'all.