WooCommerce：将类添加到产品过滤器属性选项

Question

我想在 WooCommerce 类别档案中设置一些过滤器选项的样式。

例如：有汽车类型的过滤器。 比方说皮卡、SUV、跑车……每个选项都应该有一个自己的图标。 因此，我需要为每个选项设置一个类。 在最好的情况下，它将是属性的 ID。

我找到了一个插件来为小部件（ https://wordpress.org/plugins/widget-css-classes/ ）添加 CSS 类，但没有为选项/属性添加 CSS 类。

目前它看起来像这样：

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

如果我可以添加一个像wc-layered-nav-term-id这样的额外类，那就太好了。

在这里，您可以看到与我的示例相同的 HTML 结构（向下滚动到颜色）： https : //themes.woocommerce.com/storefront/product-category/clothing/blouses/

有什么过滤器可以用来添加这样的类吗？

Answer 1

如果您没有唯一的 id 或类，则可以使用如下所示的 CSS3 选择器。 你可以在这里看到所有的选择器。 关联

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