{"id":2343,"date":"2023-01-23T17:09:20","date_gmt":"2023-01-23T16:09:20","guid":{"rendered":"https:\/\/buildyourweb.fr\/number-of-products-in-a-category-in-the-wordpress-menu\/"},"modified":"2023-01-26T15:09:00","modified_gmt":"2023-01-26T14:09:00","slug":"number-of-products-in-a-category-in-the-wordpress-menu","status":"publish","type":"post","link":"https:\/\/buildyourweb.fr\/en\/number-of-products-in-a-category-in-the-wordpress-menu\/","title":{"rendered":"Add product number of a category in the WordPress menu"},"content":{"rendered":"\n
<\/div>\n\n
\n
<\/div>\n\n\n\n
\n

Number of products in a category<\/h2>\n\n\n\n
<\/div>\n\n\n\n

When a customer visits your website, you need to be able to give them useful information at first glance. Quand on parle d’un E-Commerce, les prix, les quantit\u00e9s, les nombre de produits ou encore les cat\u00e9gories de produits sont des informations vraiment utiles. They must therefore be quickly visible in the navigation of your website. We will therefore see in this article how to display the number of products in a category and add this information in your WordPress menu.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Overall process of realisation<\/h2>\n\n\n\n
<\/div>\n\n\n\n

To achieve this, we will proceed as follows. You need to access the WordPress Menu Filter (the one with the Menu object and not the one with the menu HTML). Next, we will pass each of the items in the Menu object and check if the item is a Product category. Next, we will pass each of the items in the Menu object and check if the item is a Product category. Finally, simply add it to the end of the content of the active element. Complex? No, it’s quite simple, you’ll see!<\/p>\n\n\n\n

<\/div>\n\n\n\n

1 – The WordPress Filter<\/h2>\n\n\n\n
<\/div>\n\n\n\n

The filter we will use is: ‘wp_nav_menu_objects’<\/strong><\/mark>. We will assign a byw_add_product_count_to_menu()<\/strong><\/mark> function to it which will handle our workflow. 2 parameters are passed in this filter ($items and $args). To learn more about this function, you can see the documentation here<\/a>.<\/p>\n\n\n\n

<\/div>\n\n\n
\nadd_filter( 'wp_nav_menu_objects', 'byw_add_product_count_to_menu', 10, 2 );\n\nfunction byw_add_product_count_to_menu( $items, $args ) {\n    return $items;\n}\n\n<\/pre><\/div>\n\n\n
<\/div>\n\n\n\n
2 – The Audit Function <\/h2>\n\n\n\n
<\/div>\n\n\n\n
The first thing is to check whether the menu is the main one. If this is the case, we create a foreach loop on the $items<\/strong>, we check that it is indeed a “Product” category. This is where things get complicated. The menu object does not retrieve the product category id but only the category title (in the Menu) and the category URL (for the link). We will therefore create a function that retrieves the slug<\/strong><\/mark> from the URL. We check if the URL ends with a ‘\/’ (just in case), then we transform the content of the URL into an array. We get the last (or second to last depending on the slash) value of the array and call another function to count. This gives us : <\/p>\n\n\n\n
<\/div>\n\n\n
\nfunction get_category_slug($url) {\n    if (str_ends_with($url, '\/') ) {\n        $index = 2;\n    } else {\n        $index = 1;\n    }\n    $value = explode('\/', $url);\n    return count_products_in_category_by_slug($value[count($value) - $index]);\n}\n<\/pre><\/div>\n\n\n
<\/div>\n\n\n\n
3 – The Counting Function <\/h2>\n\n\n\n
<\/div>\n\n\n\n
Now that we have retrieved the category slug, we will use WP_Query<\/strong><\/mark> to retrieve the number of products attached to this function. This gives us the following function:<\/p>\n\n\n\n
<\/div>\n\n\n
\nfunction count_products_in_category_by_slug($category_slug) {\n    $category_id = get_term_by( 'slug', $category_slug, 'product_cat' )->term_id;\n    $args = array(\n        'post_type' => 'product',\n        'tax_query' => array(\n            array(\n                'taxonomy' => 'product_cat',\n                'field'    => 'term_id',\n                'terms'    => $category_id,\n            ),\n        ),\n    );\n    $query = new WP_Query( $args );\n    return $query->found_posts;\n}\n<\/pre><\/div>\n\n\n
<\/div>\n\n\n\n
4 – The Function at the Global <\/h2>\n\n\n\n
<\/div>\n\n\n\n
By combining these 3 code blocks, you will have the number of products attached to the categories in your Main Menu. You can also add a check if the number is 0 and not display it. Anyway, here is the full code:<\/p>\n\n\n\n
<\/div>\n\n\n
\nadd_filter( 'wp_nav_menu_objects', 'byw_add_product_count_to_menu', 10, 2 );\n\nfunction byw_add_product_count_to_menu( $items, $args ) {\n    \/\/ V\u00e9rification si le menu est bien le principal.\n    if ( $args->theme_location == 'primary' ) {\n        \/\/ On boucle sur chaque \u00e9l\u00e9ment du Menu\n        foreach ( $items as $item ) {\n            \/\/ V\u00e9rifie si l'\u00e9l\u00e9ment de menu est une cat\u00e9gorie produit\n            if ( $item->object == 'product_cat' ) {\n                $category_slug = get_category_slug($item->url);\n                \/\/ On compte le nombre de produits dans cette cat\u00e9gorie\n                \/\/$product_count = wp_count_posts( 'product' )->publish;\n                \/\/ Et on Ajoute le nombre de produits \u00e0 l'intitul\u00e9 de l'\u00e9l\u00e9ment de menu entre deux ()\n                $item->title .= ' (' . $category_slug. ')';\n            }\n        }\n    }\n    return $items;\n}\n\nfunction get_category_slug($url) {\n    if (str_ends_with($url, '\/') ) {\n        $index = 2;\n    } else {\n        $index = 1;\n    }\n    $value = explode('\/', $url);\n    return count_products_in_category_by_slug($value[count($value) - $index]);\n}\n\nfunction count_products_in_category_by_slug($category_slug) {\n    $category_id = get_term_by( 'slug', $category_slug, 'product_cat' )->term_id;\n    $args = array(\n        'post_type' => 'product',\n        'tax_query' => array(\n            array(\n                'taxonomy' => 'product_cat',\n                'field'    => 'term_id',\n                'terms'    => $category_id,\n            ),\n        ),\n    );\n    $query = new WP_Query( $args );\n    return $query->found_posts;\n}\n<\/pre><\/div>\n\n\n
<\/div>\n\n\n\n
Visual rendering<\/h2>\n\n\n\n
<\/div>\n\n\n\n