Question

我正在使用Woocommerce和Storefront来构建自定义网站，并且我正拼命寻找将类添加到商店（存档）页面的列表项中。我的商店目录显示类别项目。

我可以找到无序列表，一个标签...但是找不到列表项。

有人知道在哪里找到它，或者如何向它添加类？

商店归档网址为：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解决方案将类添加到任何列表项中。请检查此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');
})

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

2 个答案: