Add class to menu item if product category is empty

Are you running a WooCommerce-powered website and looking to enhance your menu’s functionality? Perhaps you want to dynamically style menu items based on whether their corresponding product categories have any items or not. In this article, we’ll delve into a simple yet powerful customization that allows you to add a class to menu items if their associated product category happens to be empty. This tweak not only improves the visual appeal of your menu but also provides a subtle indication to your visitors about the status of your product categories.

Understanding the Challenge

WooCommerce empowers countless online stores with its robust features, but sometimes, you might find yourself facing a specific requirement that requires a bit of customization. One such scenario is when you wish to dynamically alter the appearance of menu items based on the availability of products within their associated categories. By default, WooCommerce doesn’t provide a built-in option to achieve this.

Solution: Adding a Class to Empty Product Categories:

Thankfully, with a bit of PHP magic, we can accomplish this task effortlessly. We’ll leverage WordPress hooks and filters to inject custom functionality into our site. Let’s break down the process step by step.

Step 1: Identifying Empty Product Categories The first step is to identify which product categories are empty. We can do this by retrieving category information and checking if the ‘count’ property is zero or empty.

Step 2: Adding a Class to Corresponding Menu Items Once we identify an empty product category, we’ll add a custom class to the corresponding menu item. This class will serve as a marker that we can later use to apply specific styling via CSS.

Implementation: Customizing with PHP To implement this customization, we’ll write a custom PHP function and hook it into WordPress’ existing filters.

To achieve this functionality in WooCommerce, you can use a custom function hooked into the nav_menu_css_class filter to add a class to the menu item corresponding to an empty product category. Here’s a sample code snippet to get you started:

// Add class to menu item if product category is empty
function add_class_to_empty_category_menu_item($classes, $item) {
    if ($item->object == 'product_cat') {
        $category_id = $item->object_id;
        $category = get_term($category_id, 'product_cat');

        if (empty($category->count) || intval($category->count) === 0) {
            $classes[] = 'empty-category'; // Add your custom class here
        }
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_class_to_empty_category_menu_item', 10, 2);

This code checks if a menu item corresponds to a product category. If it does, it checks whether that category has any products (by checking the count property of the category term). If the category is empty, it adds a custom class (in this case, ’empty-category’) to the menu item.

You can modify the class name (’empty-category’) to whatever you prefer. Once you’ve added this code to your theme’s functions.php file or a custom plugin, it should add the specified class to the menu item corresponding to any empty product categories. You can then use CSS to style these menu items as desired.

By implementing this straightforward customization, you can enhance the visual feedback provided to your website visitors. Empty product categories will now be visually distinguished within your menu, helping users navigate your site more intuitively. Moreover, this customization demonstrates the flexibility and extensibility of WordPress and WooCommerce, empowering website owners to tailor their online stores to suit their unique needs. So go ahead, give it a try, and elevate your WooCommerce menu to the next level!