Binary Carpenter

Tag: hide product category

  • How To Hide Product Category In Woocommerce Product Page In 5 Minutes

    On WooCommerce single product pages, you usually see the product’s categories displayed under the add to cart button, like this:
    product category displayed under add to cart

    As you can see from the picture, the category of this product is “Business PC”.

    What if you want to hide that part? That’s what I’m going to show you right away.

    How To Hide Product Category In WooCommerce Product Page In 5 Minutes

    The method we are going to use to hide the category in WooCommerce product page is to get the CSS selector of the category and hide it using additional CSS rules, supported by most themes.

    The first step would be getting the CSS selector of the category. Here is how you can do this.

    Getting the CSS selector of product’s category

    On your browser, preferably Chrome, right click on the category then click on Inspect:

    select inpsect element

    Now, you’ll see a window appears. Depends on your browser settings, you may see the window appear at the bottom, on the right or as a floating window. In my case, it appears at the bottom of the screen.

    You should see the element highlighted in the new window:

    get the css selector

    As you can see, our category element has the class posted_in and it’s a child of a div which has product_meta as its class.

    NOTICE: The class of these elements maybe different on your site since different themes may have different class name. Thus, make sure you replace the selectors here with the ones that match your own site.

    If you know CSS, you’ll probably have no problem writing the selector for this element. In case you don’t know, the selector for the category element is:

    .product_meta .posted_in

    Now, it’s time to make this element disappear using the customizer.

    Hide the category using additional CSS

    Let’s go to Appearance->Customize->Additional CSS (This option usually appears at the bottom of the customize panel so you may need to scroll a bit) and enter the following code:

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

    Then hit publish.

    Now, let’s view the site and sure enough, the category meta is gone:

    woocommerce category meta is hidden

    Conclusion

    There you go! It’s the simplest method to hide the category meta in WooCommerce. There could be more methods involving entering some PHP code. I prefer using CSS since it’s quick, simple and I’m not a fan of modifying PHP code on live site.