Question

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

例如：有一个用于汽车类型的过滤器。假设是皮卡，越野车，跑车，... 每个选项都应该有一个自己的图标。因此，每个选项都需要一个类。最好是属性的ID。

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

此刻，它看起来像这样：

SELECT 
      register_date, 
      day_total, 
      (num_qtrs * .25) 
        + (num_dimes * .10) 
        + (num_nickles * .05) 
        + (num_pennies *.01) AS coin_total,
      CASE WHEN day_total = coin_total 
         THEN 'Yes' ELSE 'NO' END 'Match'
   FROM 
      Register;

如果我可以添加一个像<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>这样的额外类，那就太好了。

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

我可以使用任何过滤器来添加这样的类吗？

Answer 1

如果您没有唯一的ID或类，则可以使用以下CSS3选择器。您可以在这里看到所有选择器。 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：将类别添加到产品过滤器属性选项

1 个答案: