Custom link class in “Product Categories List” Widget

If you’re looking to target the <li> you can use something like this.

function add_custom_class_to_product_category_list_items($output, $args) {
    // Check if we are dealing with product categories
    if (isset($args['taxonomy']) && $args['taxonomy'] === 'product_cat') {
        // Add a custom class to each <li> element
        $output = preg_replace('/<li class="/', '<li class="your-custom-class-name ', $output);
    }
    return $output;
}
add_filter('wp_list_categories', 'add_custom_class_to_product_category_list_items', 10, 2);

How this works:

• The wp_list_categories filter is used to modify the HTML output of category lists.
• The function checks if the taxonomy is product_cat (which is specific to WooCommerce product categories).
• It uses a regular expression to insert your custom class my-custom-sidebar into the class attribute of each <li> tag.

This approach should directly modify the list item elements within the WooCommerce Product Categories widget without affecting other category lists on your site, provided they do not use the same taxonomy. After adding this code, clear any WordPress and browser caches to ensure you are viewing the latest version of your site.

Thank you @serafinnyc for your reply.
Unfortunately this not resolve my needs.

You tried manipulate the standard WordPress widget which displays a <ul> element with categories. Woocommerce widget which create similar HTML element but with <ul> element with Products categories is a different gutenberg block widget, so your solution do not affect anything in it.

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

I didn’t try anything. I did. I’m not sure what you’re seeing on your end @x9design

Worked for me here

https://loom.com/i/8e06888cffaf4b4eb2be7bde657d582b

Did you even bother adding the script?

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

Did you even bother adding the script?

Yes, I did. But as I wrote your code manipulate a different type of widget.
Look at my screenshots.

https://xnd.works/_d/product-cat-list.webp
https://xnd.works/_d/product-cat-list-widgets.webp

As you can see, on first screenshot I did similar thing with wp_list_categories and it work great. And also if you pay attention to HTML code, Your categories list (as it is with my blog categories list) it’s the same widget in which <li> elements have a css class cat-item. The Woocommerce widget to display Product Categories List is not the same HTML element, so it must be an output from different source and it seems it not using standard wordpress function to list categories. Thats why, I think, add_filter('wp_list_categories') doesn’t want to work.

PS. Of course I can do this with jQuery, but until i decide about it, i want to check is there any chance to do that with any hook.

I don’t see where you used my snippet in those screenshots. You didn’t clarify in your initial request to target the UL that’s why I stated if you’re targeting the LI. That would have helped in your initial request.

Not only that, you’re using WP blocks for that. So that’s also why you’re not going to get anywhere

It didn’t occur to me to show you in any way that I used your solution, because firstly, I use it myself in my code, and hence I know that your solution doesn’t work, and secondly, on the first of my screenshots, it’s clearly visible that I used exactly the same thing, but not to change the class of the <li> elements, but <a> (class=more hover). If your solution would worked (which my screenshot shows), the second menu with product categories would have links with arrows looking the same, because the same snippet I use (without a condition relating to the taxonomy type) to add additional classes to <a> elements implies this for all elements of this type on the page. In the second of my post, I clearly wrote that the widget I use to display the list of Woocommerce product categories is the Gutenberg block widget, so since I specified that then, I don’t understand why you didn’t immediately realize that your code wouldn’t work, but instead asked if I used it at all. If you had written instead that it’s not possible to do it because of using the Gutenberg block widget (which I didn’t know), I wouldn’t have pasted those screenshots links and wouldn’t have continued explaining.

I didn’t write anywhere that I’m referring to UL (the arrows on screenshot also don’t suggest that at all) because it was not my need. In the first post here, I wrote about links, so your suggestion was quite accurate in terms of understanding my needs, but unfortunately, also ineffective.

Nevertheless, thank you for your time and willingness to help. Regards.

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

That’s because, wait for it, wait for it. You’re using WP BLOCKS! I don’t know it well enough to hook that.

Right after you posted your snippet I did reply to You @serafinnyc, that I am using WP Block widget and explaining this way (saying about different type of widget), why your code can’t work. ?? How did you not realize then, that what is working on your site it’s not a thing which relates to what I asking for? Your demonstration that something works on your website made no sense.

Hi @x9design, have you tried adding a custom CSS class to your block and targetting your links from there? That’d be the easiest solution here.

Cheers!
-OP

Hello @omarfpg ,

Thank You for your response.

What I need exactly is to add a classes to <a> elements of product categories list widget.
Adding a custom class to main element of widget it’s not a right trick for me, because i have in CSS styles a defined link effect via selector .hover.more and what I needed is to add those classes directy to <a> element. That would be the best solution if i could do that via woocommerce hooks. Alternatively i just create another line in my jQuery script theme file and this is the best solution at the moment.

As I wrote before, I’m asking about this just to check if there’s some way to do it with a code snippet, before I do it with jQuery. It’s not important so much, so jQuery is enough. It was also a good way to learn something new about Woocommerce.

One more time, thank you for your time.

Hi @x9design,

Thanks for the detailed explanation! This is more of a developer’s oriented question rather than a basic support question. With this in mind, I’d like to recommend you the Woo Developer Resources Portal for resources on developing for WooCommerce.

You can also visit the WooCommerce Facebook group or the #developers channel of the Woo Community Slack. We’re lucky to have a great community of open-source developers for Woo, and many of our developers hang out there, as well. It’d be great for you to have a chat with them and learn more!

I’m sure you’ll be able to get the right help there! ??

Cheers!
-OP