In 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:
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:
- Log into your WordPress site and access the Dashboard as the admin user.
- 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.
- 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 );
- To see the outcome, refresh the Homepage. From the screenshot below, you can see that the code removed the ‘Accessories’ category ID=19.
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
- How to Add Woocommerce Product from Front end
- How to Add Product After Storefront Setup [Beginner Guide]
- How to Change Return to Shop Link in Woocommerce
- How to Hide a Product in WooCommerce or Hide Products by Category or Roles
- How To Quickly Find Your Product ID in WooCommerce
- How to Find WordPress Category ID in 3 Easy & Quick Options
- How to Add Categories to WooCommerce Products
- How to Change Add to Cart Button Text In WooCommerce Shop Page
- How to Disable Reviews WooCommerce Storefront Theme
- How to Display Featured Products on Storefront Homepage
- How to Remove Breadcrumbs WooCommerce Storefront
- How to Remove Page Title WooCommerce Storefront Theme
- How to Hide All Products From Shop Page in WooCommerce
- How to Set up WooCommerce Storefront Footer Widgets
- How to Change Products per Page WooCommerce Storefront Theme
- How to Change Button Color Storefront Theme
- How to Remove Cart from Storefront Theme Header
- How to Count Items Added to Cart WooCommerce Cart Count Code
- How to Remove Search Box Storefront Theme
- How to Sort WooCommerce Categories for Better User Experience