3

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>
3
  • Can you share any code snippet or working fiddle link for more clarification. Thanks Mar 28, 2019 at 19:54
  • Did you see this? stackoverflow.com/questions/21743220/… Mar 28, 2019 at 20:50
  • @shakeel-osmani Thank you (I did a mistake in the title, edited) I'm not trying to target the list items of the products, but those of the product categories listed on the shop page
    – LearnerRC
    Mar 28, 2019 at 21:31

2 Answers 2

4

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

1
  • 1
    Thank you very much for the filter and the location! :) It works perfectly!
    – LearnerRC
    Mar 28, 2019 at 22:25
1

You can use jQuery solution to add class to any of your list items. Please, check this Pen, hope it helps.

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');
})
1
  • 1
    While this is a fine answer, please try to keep in mind that you want to use the tech the original post specifically mentions - which jQuery is not. Mar 28, 2019 at 22:03

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.