Php 在产品页面的WooCommerce筛选器中将属性名称添加为类

我正在我的Woocommerce商店中创建类别页面。我想在顶部显示过滤器。因此，我在functions.php文件中注册了一个新的侧栏，并将代码

在breadcrumb.php模板文件中。到目前为止，一切顺利

现在的想法是将过滤器属性（如：黑色、白色、红色）转换为彩色圆圈。因此，我认为最好的方法是将颜色属性分类添加为

类，然后在CSS中使用一些魔法

但问题是如何将属性名为/taxanomy的变量共同添加到属性的

类中。以下是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>

(2)


(1)

我知道有一个插件可以做到这一点，但我不喜欢插件。：）我更喜欢写一些。我认为这里不需要额外的插件。

之前：

之后：

document.body.onload=function（）{
var list=document.getElementsByClassName（'wc-layered-nav-term'）；
对于（i=0；i
/*这只是示例代码*/
帕乌蓝先生{
颜色：蓝色；
}
帕乌·格林先生{
颜色：绿色；
}
帕乌红{
颜色：红色；
}
/*---*/







您有一个过滤器，即分层的导航术语html

因此，您可以在插件或主题的functions.php中添加该过滤器，然后将相应的样式应用于刚刚添加的每个span类

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

add_filter（'woocommerce_layered_nav_term_html'，'custom_woocommerce_layered_nav_term_html'，10,4）；
函数自定义商业分层导航术语html（$term\uHTML，$term，$link，$count）{
返回“”。$term\u html；
} 

这将使用属性名称的类写入标记，并将应用于分层导航过滤器中的所有属性。为了仅将其应用于颜色属性，我想您可以这样做（考虑到属性的名称是“颜色”）：

function-custom\u-woo-commerce\u-layered\u-nav\u-term\u-html（$term\u-html，$term，$link，$count）{
如果（$term->taxonomy=='pa_color'）{
$newterm_html='.$term_html；
}否则{
$newterm\u html=$term\u html；
}
返回$newterm_html；
}

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