WooCommerce: Add class to product filter attribute option

Question

I want to style some filter options in the WooCommerce category archives.

For example: there is a filter for the type of cars. Let's say pickups, suv, sportscar, ... Every option should get an own icon. Therefore I need a class for every option. In the best case it would be the ID of the attribute.

I found a plugin to add CSS classes for widgets ( https://wordpress.org/plugins/widget-css-classes/ ) but not for the options/attributes.

At the moment it looks like this:

<ul class="woocommerce-widget-layered-nav-list">
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">...</li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">...</li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">...</li>
</ul>

It would be nice, if I could add an extra class like wc-layered-nav-term-id .

Here you can see the same HTML structure as in my example (scroll down to the colors): https://themes.woocommerce.com/storefront/product-category/clothing/blouses/

Is there any filter I could use to add such a class?

Answer 1

You can use CSS3 selector like below if you have don't unique id or classes. you can see here all selectors. link

 .woocommerce-widget-layered-nav-list > li:nth-child(1){ background:red; } .woocommerce-widget-layered-nav-list > li:nth-child(2){ background:gray; } .woocommerce-widget-layered-nav-list > li:nth-child(3){ background:yellow; }

 <ul class="woocommerce-widget-layered-nav-list"> <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">pickups</li> <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">suv</li> <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term ">sportscar</li> </ul>