How to hide WooCommerce category from the shop page

WooCommerce is a fantastic ecommerce plugin that lets you turn any WordPress website into an online shop.

You can create multiple categories for your products, and all of these products, regardless of their category, are listed on the shop page (

Many shop owners want the ability to hide certain products from the shop page – for example for special products which may only be linked via a newsletter.

How to hide a category from the shop archive page?

In order to create a hidden category for your WooCommerce shop, you can include this code in either your functions.php file, or add it into a custom plugin. Or you can check out our plugin woocommerce hide product from shop page.

Step 1: Create the new hidden category within WooCommerce. You can call it whatever you want. This is done using a function which inserts our new term into the WooCommerce product taxonomy (product_cat)

function create_hidden_cat() {
			'description' => 'Hidden products',
			'slug'        => 'Hidden',
add_action( 'init', 'create_hidden_cat' );

Step 2: Amend the shop query to hide our new category. You can add multiple hidden categories into the ‘terms’ array if you wish.

function before_get_posts_query( $q ) {
    $tax_query = (array) $q->get( 'tax_query' );
    $tax_query[] = array(
           'taxonomy' => 'product_cat',
           'field' => 'slug',
           'terms' => array( 'hidden' ),
           'operator' => 'NOT IN'
    $q->set( 'tax_query', $tax_query );

Step 3: Add the action. This puts our new array into the product query.

add_action( 'woocommerce_product_query', 'before_get_posts_query' );

Once this is done, you will be able to add any of your products into the new category and they will be hidden from the Shop page. You can of course still link directly to your products.

If you are having difficulty please comment below. I have also put this code into a ready to use plugin which you can download here.



I highly recommended running your CSS through this auto prefixer.


Standard plugins for maintenance of wp site

These are the plugins I add to all new installations. Allows for easy secuity, seo, caching, custom post types and fields, and also ability to customise wp-admin menu. With managewp as well, I can maintain any site with automated backups too.

  • WordFence
  • Yoast SEO
  • Hummingbird
  • Custom Post Types UI
  • ACF
  • Admin Menu Editor

no style

Personal note. My main business website is looking bland and uninspiring. I’ve focused too much on what I think people want to see and read locally, that I’ve done nothing to inspire anyone or stand out from my competitors.



Structured data within HTML.



Things plugins do that annoy me

  • Ask for feedback when you deactivate
  • Use graphics that don’t mesh with the dashboard ui
  • Create lots of ‘notifications’ at the top of the dashboard
  • Spelling mistakes
  • Difficult to find settings
  • Poorly documented



Toolset Types plugin alternative

Alternative to Toolset Types.  Lightweight, easy to use. I recommend combining with ACF as replacement for Toolset Types.

Custom Post Type UI


Flexbox vs Grid

I am undecided but currently use flexbox. (features a great line “There is no reason to use only CSS grids or only flexbox. Learn both and use them together.”)


fixed header, resize on scroll

imo header should always be fixed if it is going to scroll with the screen, rather than changing to position:fixed; one you start to scroll, as you have to account for the gap it leaves (can cause the content to ‘jump’ up which looks awful).

example. to clear a 100px header, I will add 100px padding to the top of <body>.


var offset = 0;
var duration = 500;
$(window).scroll(function() {
	if ($(this).scrollTop() > offset) {
	} else {

this adds and removes the .fixed class to header. note you can add an offset.

header { height:100px; transition:all 0.5s ease; }
header.fixed { height:80px; }

transitions between heights when .fixed class is added.


100% height of screen minus height of header

Technique to get scrollable nav for menu which is 100 vertical-height minus the height of <header>

nav {
   height:calc(100vh - 100px);
   /* where header is 100px */

nav will likely be position:fixed; top:100px; right:0;