Добавьте имя атрибута как класс в фильтре WooCommerce на странице продукта

Question

Я создаю страницу категории в моем магазине Woocommerce. Я хочу отобразить фильтры сверху. Поэтому я зарегистрировал новую боковую панель в своем файле функций. php и поместил код <?php dynamic_sidebar( 'filters-1' ); ?> в файл шаблона. php. Пока все хорошо.

Теперь идея состоит в том, чтобы преобразовать атрибуты фильтра, такие как: ЧЕРНЫЙ, БЕЛЫЙ, КРАСНЫЙ, в цветные круги. Поэтому я думаю, что лучший способ сделать это - добавить таксономию атрибута цвета как класс <li>, а затем сделать несколько маги c в CSS.

Но вопрос в том, как добавить переменную с именем атрибута / таксономией в <li> класс атрибута. Вот вывод HTML:

<ul class="woocommerce-widget-layered-nav-list">
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">
        <a rel="nofollow" href="/?filter_color=black">Black</a> <span class="count">(2)</span>
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">
        <a rel="nofollow" href="/?filter_color=white">White</a> <span class="count">(1)</span>
    </li>
</ul>

Я знаю, что для этого есть плагин, но я не люблю плагины. :) Я предпочитаю писать некоторые. Я не думаю, что здесь нужен дополнительный плагин.