Home > WooCommerce > Docs > How to Remove Category from Product Page in WooCommerce

How to Remove Category from Product Page in WooCommerce

Last updated: April 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

WooCommerce default product categories are set up in any theme that you use for your online store. If you are a developer, you would think there was a specific filter for removing categories on the product page. However, this article - How to remove categories from the product page in WooCommerce is for the retailers who want to customize a website theme themselves.

So don’t worry, just follow and copy the snippet codes and all will work perfectly and effectively. You definitely think it is simpler than you thought before!

Without further ado, let’s begin!

What is the category from the product page?

Most of us know that a product category is an attribute that describes a single product. In addition, those attributes should be objective and observed for customers to imagine clearly.

WooCommerce product categories are commonly displayed on the bottom line of a product page, under the “Add to Cart” section.

What is the category from the product page?

However, for some personal reasons, of course you can delete that part in the product page if you categorize the products and list out the features before or the product image is enough to depict how it looks. Thus, it is not really necessary to mention again, so we come to a tutorial made for you in the easiest way. Let’s dig into it together in the next part.

How to remove category from product page in WooCommerce

Step 1: Access theme functions file

Firstly, go to Appearance > Theme editor

Step 1: Access theme functions.php files

Then you choose functions.php files.

Step 1: Access theme functions.php files

You should back up the files before seriously changing the design. In case you encounter any problem during placing code, you can copy the initial code in the file. At least, you do not break the functionality - that is the reason why you should copy the functions file first as we suggested to you.

Then, it becomes very easy to use the snippet code to add to the functions file. To change it as well as edit again conveniently in the future, add below the code of the theme functions for the good sake like this:

Step 1: Access theme functions.php files

Remember to save the changes to update the new page.

Step 2: Remove the category

Next step is installing Snippet in the WooCommerce platform. Navigating to Plugins > Add new > Snippets.

Step 2: Remove the category

You have to activate this plugin to start using it for your design afterwards.

Step 2: Remove the category

There are many Snippet shortcodes to apply based on which kind of section is changed for in particular (email, order, CSS, HTML). Instead of managing all the theme functions in the first solution, we showed you (step 1), the Snippet plugin allows you to edit and manage a shortcode - child theme in all theme functions. Thus you can modify it much better and easier.

Step 2: Remove the category

Moreover, you can edit and remove the snippet shortcode whenever you want, but not to influence the original code file. It is a massive advantage that we recommend you integrate this plugin.

Since removing product categories is on CSS or HTML design, you can choose one of these to paste the “remove” code that we will give you later as long as you alter the term title.

Step 2: Remove the category

If you do not want to change it, you can add new code and manage yourself - from the context, code to the description.

Step 2: Remove the category

Now, it is time to add the default code: remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40);

Don’t forget to activate that added code to see the change on the product page.

Step 3: Alternative method using CSS style

In case you remove the category from the product page, but actually hide this function on the theme, you can use CSS design code to place it in the Snippet plugin. The step to add it is similar to the above step we guided you before.

You can add a new code section or choose any of the existing code sections then edit that code. All things you have to do is add the shortcode as we give you below:


.single-product div.product .product_meta {
display: none;
}

In another way, you can place code to remove the category in the CSS file like the functions file in step 1. This code uses the display property and approaches to the class that demonstrate the single product page categories. You can add this code to your WordPress styles.css style file:

.product_meta.posted_in {display: none !important;}

Step 3: Alternative method using CSS style

If you just are supposed to change some kind of product, the alternative method is editing the CSS file directly. Nevertheless, notice that it applies to a single product category only but not all.

Are you interested in this method? If yes, follow our directions! But before doing it, you should go into your dashboard and choose “View page” on the top bar. Obviously, it is up to you, just pick the way you find easy to practice.

Step 3: Alternative method using CSS style

First and foremost, heading to the product page, you want to delete the category section. Double click and select Inspect term.

Step 3: Alternative method using CSS style

Step 3: Alternative method using CSS style

Next, find out the code which is respective with the category product, here we give you an example to a better imagination:

Step 3: Alternative method using CSS style

Choose Customize to start editing.

Step 3: Alternative method using CSS style

You will be taken immediately to the Theme editorsection. Or else, navigate to Appearance > Customize to come to the same destination:

Step 3: Alternative method using CSS style

Then, please choose Additional CSS and here is what it will display to you:

Step 3: Alternative method using CSS style

Step 3: Alternative method using CSS style

The most important part is to add code to remove the category on a single product page. Copy that code in the picture below:

Step 3: Alternative method using CSS style

Another code you can use but also remove the SKU section:

Step 3: Alternative method using CSS style

Don’t forget to select Publish to save the changes.

Wrapping up

In this post, we did show you all the methods of How to remove categories from the product page in WooCommerce as well as the basic knowledge relating to category products for the newbies, who just have started an online business.

Hope that it is really helpful for your needs. We will be very grateful that you can leave a comment for any problem that you are facing or your experience for other users figuring out the solution from your practice.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.