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

Question

I'm using Woocommerce and Storefront to build a custom site and I'm desperately searching to add a class to to the list items of the shop (archive) page. My shop catalog displays category items.

I could find the unordered list, the a tag... but impossible to find the list items.

Does somebody know where to find it, or how to add a class to it?

The shop archive url is : localhost/thesite/shop (but not the product category archive pages 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

For categories on shop page (when you are "showing categories" on product catalog), you will use the following hook (here we add an additional 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;
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Note: The related template involved is content-product_cat.php

---

Optionally if needed when both categories and products are displayed on shop page.

For products on shop page you will use the following hook (here we add an additional 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;
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Note: The related template involved is content-product.php