How to get product categories class with the catalogue product module in ALB

Hi Mike,

I hope you’re doing well.

I’m currently working on a page (url down below) that features a list of products displayed using the catalogue module. Each product belongs to specific categories that I’ve created, such as:

product_cat-domaine-du-chene-vert
product_cat-vallee-du-rhone-nord

For instance, these categories apply to the product “Crozes-Hermitage millésime 2022 / Rouge.”

However, I’ve noticed that the product category classes are not included in the HTML structure of the catalogue module. Specifically, they do not appear in the “li” or “a” tags, which makes it challenging for me to apply CSS modifications based on product categories.

Currently, only the data-product_id attribute is present, but this isn’t practical for my needs. Since the product inventory will continue to grow, I require a solution that automatically includes product category classes in the “li” or “a” tags for CSS purposes. I don’t need these categories to be visible in the front-end module, just added to the HTML for styling.

Could you please advise on how I can achieve this?

Thank you for your help.

Best regards,

• This reply was modified 2 months, 2 weeks ago by manyfloor.

Hi Ismael,

Thanks, it works like a charm after clearing the cache.

I made two modifications for better results, and everything seems to be working fine now. First, I adjusted the code to retrieve all product categories instead of just the first one. Additionally, I applied the filter specifically to the “a” link to avoid affecting the “div” below, which contains the class .av-catalogue-item-inner that includes the same string part .av-catalogue-item:

function avf_add_category_class_to_cart_link($link, $product) {
    $categories = get_the_terms($product->get_id(), 'product_cat');

    $category_classes = '';
    if ($categories && !is_wp_error($categories)) {
        foreach ($categories as $category) {
            $category_classes .= ' product_cat-' . esc_attr($category->slug);
        }
    }

    $link = preg_replace(
        '/(<a[^>]*class="av-catalogue-item)([^"]*)"/',
        '$1' . $category_classes . '$2"',
        $link
    );

    return $link;
}
add_filter('woocommerce_loop_add_to_cart_link', 'avf_add_category_class_to_cart_link', 10, 2);

Thanks for your help and your quick response!