将类添加到Woocommerce商店页面上的类别列表项中

Question

我正在使用Woocommerce和商店前台来构建一个自定义站点，我正在拼命地搜索将一个类添加到商店(归档)页面的列表项目中。我的商店目录显示类别商品。

我可以找到无序的名单，一个标签.但不可能找到清单上的物品。

有人知道在哪里找到它，或者如何在其中添加一个类吗？

商店档案网址是：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

用于商店页面上的类别(当您在产品目录上“显示类别”时)，您将使用以下钩子(这里我们添加了一个额外的类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

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

对于商店页面上的产品，，，您将使用以下钩子(这里我们添加了一个额外的类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

Answer 2

可以使用jQuery解决方案将类添加到任何列表项中。请检查一下这个钢笔，希望它能帮上忙。

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