How to Hide Category WooCommerce Storefront Theme

WooCommerce Storefront Hide CategoryIn any ecommerce website, the shop page is one of the most important pages. Your customers cannot physically view all the products that you are selling. Therefore, it is very important to present a shop page in a way to make it easier for them to stay on the website and make a purchase decision.

WooCommerce Storefront Hide Category

This brief tutorial is specifically for those who have built up the stores using the WooCommerce plugin. I will show you how to display all product categories on the shop page using WooCommerce customizer and how to hide WooCommerce categories from being displayed on the shop page.

The Storefront theme integrates seamlessly with WooCommerce. WooCommerce allows you to decide how you want your products to be displayed on the Homepage of the Storefront theme.

How to Show Categories in Storefront Theme

When you log into your WordPress site and access the Dashboard as the admin user, using Product Catalog under Appearance > Customize > WooCommerce allows you to show the WooCommerce Shop page uniquely. You can choose to display only category, the category with products, or only products.

In summary:

  • Show products: All the products will be listed.
  • Show categories: All the categories will be listed
  • Show categories and products: Products and Categories both will be listed.

If you select the ‘Show categories’ option under ‘Shop page display’ then all the product categories will be displayed on the Shop page as shown below:Show Categories

How to hide WooCommerce Category from the Homepage of the Storefront Theme

For various reasons, you may not want to display some categories on the Homepage. In this example, I will remove the ‘Accessories’ category. We can do this either by giving the correct name to this category or by hiding it from being listed on the Homepage.

Here are the simple steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will remove the ‘Accessories’ category.
  3. Add the following code to the functions.php file:
/**

 * Show products only of the selected category.

 */

function get_subcategory_terms( $terms, $taxonomies, $args ) {

            $new_terms    = array();

            $hide_category           = array( 19 ); // Ids of the category you don't want to display on the shop page

                         // if a product category and on the shop page

            if ( in_array( 'product_cat', $taxonomies ) && !is_admin() && is_shop() ) {


                foreach ( $terms as $key => $term ) {


                        if ( ! in_array( $term->term_id, $hide_category ) ) {

                                    $new_terms[] = $term;

                        }

                }

                $terms = $new_terms;

            }

  return $terms;

}

add_filter( 'get_terms', 'get_subcategory_terms', 10, 3 );
  1. To see the outcome, refresh the Homepage. From the screenshot below, you can see that the code removed the ‘Accessories’ category ID=19.remove category

How the Code Works

In the code snippet, I have shared, I have used the callback function get_subcategory_terms() and I initialized a variable $new_terms with an empty array which will be used later to create an array of WooCommerce categories to be displayed on the shop page.

After that, I initialized the $hide_category variable with the arrays of category ids which I do not want to display on the shop page. You need to add the IDs of the category you want to hide on your shop page.

Then, I checked if the ‘product_cat’ is present in $taxonomies or not, and checked if it is front-end page and shop page then only execute the actual modification part. Additionally, I used the is_admin() function we can check if it is a front end or the admin end. I used the is_shop() function to check if it is a WooCommerce Shop page or not.

If all the conditions are true, I used the foreach loop to loop through $terms data for preparing new term data in the $new_terms variable. This variable will not have the term data of the WooCommerce category we want to hide on the Homepage. This means that for each term data, I am checking if the term id is not present in a $hide_category array then only add the term in the $new_terms array.

Conclusion

In this post, I have shown you how to change the view of the shop page to list the product categories. Moreover, I have shown you how to hide a particular WooCommerce category from being displayed on the Homepage using a small piece of code.

Additionally, there might be other scenarios to hide the products and categories from being listed on the homepage. This can be done by adding some more code in the elaborated code snippet you can achieve your requirements.

Similar Articles