Add attribute name as class in WooCommerce filter on product page

Question

I creating category page in my Woocommerce store. I want to display filters on the top. So I registered a new sidebar in my functions.php file, and put the code <?php dynamic_sidebar( 'filters-1' ); ?> in breadcrumb.php template file. So far, so good.

Now the idea is to convert filter attributes like: BLACK, WHITE, RED to color circles. So I think the best way to do this will be to add color attribute taxanomy as <li> class, and then do some magic in CSS.

But the question is how co add a variable with attribute name/taxanomy into <li> class of the attribute. Here is HTML output:

<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>

I know there is a plugin to do this but I don't like plugins. :) I prefer to write some. I don't think extra plugin is necessary here.

Answer 1

Before:

<ul class="woocommerce-widget-layered-nav-list">
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">red</a> 
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">green</a> 
    </li>
    <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
        <a href="">blue</a> 
    </li>
</ul>

After:

document.body.onload = function() {
  var list = document.getElementsByClassName('wc-layered-nav-term');

  for (i = 0; i < list.length; i++) {
    var name = 'pa_'; // Prefix to class
    name += list[i].firstElementChild.innerHTML;
    list[i].classList.add(name);
  }
}();

/* This is just sample code */
.pa_blue {
  color: blue;
}

.pa_green {
  color: green;
}

.pa_red {
  color: red;
}
/* --- */

<ul class="woocommerce-widget-layered-nav-list">
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">red</a>
  </li>
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">green</a>
  </li>
  <li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term">
    <a href="">blue</a>
  </li>
</ul>

Answer 2

You have the filter woocommerce_layered_nav_term_html

So, you can add that filter in your plugin or your theme's functions.php and then apply the corresponding styles to each span class just added.

add_filter('woocommerce_layered_nav_term_html', 'custom_woocommerce_layered_nav_term_html', 10, 4);
    function custom_woocommerce_layered_nav_term_html( $term_html, $term, $link, $count ){ 
        return '<span class="'.strtolower($term->slug).'"></span> '.$term_html;
    } 

This writes a tag with the class of your attribute's name and it would apply to all the attributes in the layered navigation filter. In order to apply it only to the color attributes, I guess you could do something like this (considereing that the attribute's name is 'color'):

function custom_woocommerce_layered_nav_term_html( $term_html, $term, $link, $count ){ 
if($term->taxonomy=='pa_color'){
        $newterm_html='<span class="'.strtolower($term->slug).'"></span> '.$term_html;
    } else {
        $newterm_html=$term_html;
    }
    return $newterm_html;
}