Стиль Категории товаров на левой боковой панели

Виджет категории продуктов по умолчанию выглядит следующим образом:

На рабочем столе я пытаюсь воспроизвести внешний вид моего старого сайта:

Итак, попробуйте этот обновленный CSS — я добавил префиксы браузера в flexbox, чтобы покрыть устаревшую поддержку:

.woocommerce .widget_product_categories ul:not(.children)>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.7em;
    border-bottom: 1px solid #ddd;
    margin-top: 0.35em;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.woocommerce .widget_product_categories span.count {
    color: #ddd;
    margin-left: auto;
    font-size: 0.8em;
}

.woocommerce .widget_product_categories ul.children {
    padding: 1em;
    border-left: 1px solid #ddd;
    flex: 1 0 100%;
}

.woocommerce .widget_product_categories ul.children span.count {
    display: none;
}

.woocommerce .widget_product_categories ul:not(.children)>li.cat-parent span:after {
    content: '+';
    font-size: 20px;
    font-weight: 900;
    color: #000;
}
.woocommerce .widget_product_categories ul:not(.children)>li.cat-parent span.flipped:after {
    content: '-';
}

Я добавил плюс и минус для переключения, юникод html курсор вверх/вниз выглядит немного странно.

Затем попробуйте этот JS:

<script>
jQuery( document ).ready( function($) {
    $(".cat-parent ul").hide();
    $(".cat-parent > span").click(function() {
      $(this).next("ul").toggle();
      $(this).toggleClass('flipped');
    });
});
</script>