In WooCommerce, displaying product categories in the main navigation is essential for guiding users through your store. However, showing empty or ‘out of stock’ categories can lead to a poor user experience. This guide will show you how to Hide Empty Product Categories Menu in WordPress to keep your navigation clean and user-friendly.
Step-by-Step Guide to Hide Empty Product Categories Menu in WordPress
Follow these steps to implement this functionality in your WooCommerce store.
Step 1: Add Custom Code to Your Theme For Hide Empty Product Categories Menu in WordPress
To hide empty product categories Menu in WordPress, you need to add a custom filter to your theme’s functions.php
file. This filter will modify the navigation menu items to exclude categories that are empty or have only out-of-stock products.
Here is the code you need to add:
//Hide empty product categories or 'out of stock' product categories from Navigation in wordpress add_filter( 'wp_get_nav_menu_items', 'crwp_nav_remove_empty_and_out_of_stock_categories', 10, 3 ); function crwp_nav_remove_empty_and_out_of_stock_categories( $items, $menu, $args ) { // Only proceed if we are not in the admin area if ( is_admin() ) { return $items; } global $wpdb; // Get all product categories $product_categories = get_terms( array( 'taxonomy' => 'product_cat', 'hide_empty' => false, )); $excluded_terms = array(); // Loop through each category foreach ( $product_categories as $category ) { // Get products in the category $products = get_posts( array( 'post_type' => 'product', 'posts_per_page' => -1, 'post_status' => 'publish', 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'term_id', 'terms' => $category->term_id, ), ), 'meta_query' => array( array( 'key' => '_stock_status', 'value' => 'instock', ), ), )); // If no in-stock products are found, add the category ID to the excluded list if ( empty( $products ) ) { $excluded_terms[] = $category->term_id; } } // Loop through menu items and remove empty or out of stock categories foreach ( $items as $key => $item ) { if ( 'taxonomy' === $item->type && in_array( $item->object_id, $excluded_terms ) ) { unset( $items[$key] ); } } return $items; }
Explanation of the Code
- Hook into wp_get_nav_menu_items Filter: This filter allows you to modify the menu items before they are displayed.
- Check for Admin Area: The code does not run in the admin area to avoid unnecessary processing.
- Retrieve Product Categories: All product categories are fetched, including those that are empty.
- Filter Out Empty and Out-of-Stock Categories: For each category, the code checks if there are any in-stock products. If none are found, the category ID is added to the exclusion list.
- Modify Navigation Items: The final step is to loop through the menu items and remove those that belong to the excluded categories.
Benefits of Hide Empty Product Categories Menu in WordPress
By hiding empty product categories in WooCommerce, you can:
- Improve user experience by preventing users from navigating to empty categories.
- Keep your navigation menu clean and relevant.
- Enhance the overall appearance and usability of your online store.
Conclusion
By adding this code to your theme, you can ensure that your WooCommerce navigation menu only displays categories that have in-stock products. This helps improve the user experience and keeps your navigation organized. If you have any questions or run into issues, feel free to leave a comment below!