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?

lakshman rajput lakshman rajput · Accepted Answer · 2019-11-23T20:45:17

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>

WooCommerce: Add class to product filter attribute option

1 Answers