在 Woocommerce 商店页面上的类别列表项中添加 class

Question

我正在使用 Woocommerce 和 Storefront 构建自定义站点，我正在拼命搜索以将 class 添加到商店（存档）页面的列表项中。我的商店目录显示类别项目。

我可以找到无序列表、a 标签...但无法找到列表项。

有人知道在哪里可以找到它，或者如何向它添加 class 吗？

商店存档 url 是：localhost/thesite/shop （但不是产品类别存档页面 localhost/thesite/product-category/catname）

<ul class="product columns-3">
    <li class="product-category product first">
        <a href="//localhost/thesite/product-category/catname"></a>
    </li>
    <li class="product-category product"></li>
    <li class="product-category product"></li>
</ul>

Answer 1

您可以使用 jQuery 解决方案将 class 添加到您的任何列表项。请检查此 Pen，希望对您有所帮助。

HTML

<ul class="product columns-3">
    <li class="product-category product first">
        <a href="//localhost/thesite/product-category/catname"></a>
    </li>
    <li class="product-category product"></li>
    <li class="product-category product"></li>
</ul>

CSS

.second {color: red;}
.common {list-style-type: circle;}

JS

jQuery(document).ready(function() {
  $('li.product:nth-child(2)').addClass('second');
  $('li.product').addClass('common');
})

Answer 2

对于商店页面上的类别 （当您在产品目录中"showing categories"），您将使用以下挂钩(这里我们加了一个额外的class custom_cat):

add_filter( 'product_cat_class', 'filter_product_cat_class', 10, 3 );
function filter_product_cat_class( $classes, $class, $category ){
    // Only on shop page
    if( is_shop() )
        $classes[] = 'custom_cat';

    return $classes;
}

代码进入您的活动子主题（或活动主题）的 function.php 文件。已测试并有效。

注：涉及的相关模板为content-product_cat.php

当类别和产品都显示在商店页面上时，如果需要，可以选择。

对于商店页面上的产品，您将使用以下钩子（这里我们添加了一个额外的class custom_prod）:

add_filter( 'post_class', 'filter_product_post_class', 10, 3 );
function filter_product_post_class( $classes, $class, $product_id ){
    // Only on shop page
    if( is_shop() )
        $classes[] = 'custom_prod';

    return $classes;
}

代码进入您的活动子主题（或活动主题）的 function.php 文件。已测试并有效。

注：涉及的相关模板为content-product.php

在 Woocommerce 商店页面上的类别列表项中添加 class

Add a class to the category list items on Woocommerce shop page

php

wordpress

product

storefront

woocommerce