Placeholder canvas

How to Display WooCommerce Product Categories on Any Page

Organizing your WooCommerce shop through effective product categorization streamlines the shopping experience and assists users in finding their desired items more seamlessly. With WooCommerce’s built-in capabilities, grouping similar products into categories enhances user navigation and product discovery.

For instance, if your inventory comprises T-shirts, Shirts, Pants, and Sunglasses, you can conveniently classify T-shirts, Shirts, and Pants under the “Clothing” category, while Sunglasses fall under the “Accessories” category.

Within WooCommerce’s shop or archive pages, you have the flexibility to display products exclusively, showcase categories alone, or present a combination of both. This article outlines the process of creating WooCommerce categories and showcasing them on shop or archive pages.

Creating Product Categories in WooCommerce

How to Add Product Categories in WooCommerce

The process of adding a category in WooCommerce is straightforward. You can create a category and assign products to it with just a few clicks. To establish a WooCommerce category, follow these steps:

1. Navigate to Dashboard > Products > Categories.

2. On the left panel, you’ll find fields such as Name, Slug, Parent, Description, Display type, and Thumbnail.

  • Name: Name your product category (e.g., Shoes).
  • Slug: Set the URL (e.g., entering “shoes” results in www.yoursite.com/product-category/shoes).
  • Parent: Specify if this category is a parent category or if it belongs under another category.
  • Description: Provide detailed category information.
  • Display Type: Determine what visitors will see when they land on the category page (products, subcategories, or both).
  • Thumbnail: Add an image for the product category.

3. After completing the category information, click the “Add New Category” button.

Product WooCommerce Categories

How to Add Subcategories in WooCommerce

To nest one product category under another in WooCommerce, creating parent or subcategories allows for a hierarchical structure. For instance, you can have a parent category, “Shoes,” with a subcategory, “Nike Shoes.”

1. Go to Dashboard > Products > Categories.

2. On the right panel, you’ll see a list of categories.

3. Click on the category you wish to edit, leading you to the Edit Product Category page.

4. Select the parent category from the “Parent category” dropdown.

5. Click “Update” to save your changes.

WooCommerce Categories

Uploading Category Images in WooCommerce

You can enhance the visual appeal of your WooCommerce categories by uploading banner images or thumbnails. If your WordPress theme is WooCommerce-compatible, the category image will appear on the product category page. Follow these steps to upload a category image:

1. Navigate to Dashboard > Products > Categories.

2. On the right panel, you’ll find the list of categories.

3. Click on the category you want to edit, directing you to the Edit Product Category page.

4. Scroll down to “Thumbnail” and click “Upload/Add Image” to add your category image.

5. Click “Update” to save your changes.

uploading image

Re-ordering WooCommerce Product Categories

By default, product categories are arranged based on their creation order. However, you can easily change the frontend order (Shop Page, Sidebar Widgets, or anywhere using shortcodes) by following these steps:

1. Go to Dashboard > Products > Categories.

2. On the right panel, you’ll find the list of categories.

3. Click on the ‘=’ icon at the end of the category and drag it to sort.

Icon =

Displaying WooCommerce Product Categories

Display Product Categories on the Homepage

If your theme supports WooCommerce and has a homepage template with WooCommerce sections, you can naturally display product categories. Alternatively, you can employ WooCommerce category shortcodes to display product categories.

Display Product Categories on the Shop Page

Customize your shop page to showcase categories exclusively, categories with associated products, or just products. For displaying product categories on the Shop page, follow these steps:

1. Click on Appearance > Customize.

2. Navigate to WooCommerce > Product Catalog.

3. Choose “Show categories” for Shop Page Display.

4. Save Changes.

Product catalog

Display WooCommerce Subcategories on the Shop Page

To arrange your shop page as Categories – Subcategories – Products, follow these instructions:

1. Click on Appearance > Customize.

2. Go to WooCommerce > Product Catalog.

3. Select “show subcategories” for Category Display.

4. Save Changes.

Display Product Categories on Any Page

Utilize WooCommerce’s provided shortcodes to exhibit product categories on any page:

1. Go to Dashboard -> Pages and select the desired page.

2. Use the shortcode [product_categories] to display all categories.

3. For more control, use parameters like [product_categories parent= “0”] to modify the display.

4. Publish the changes.

Parameters for the Product Category Shortcode:

  • number: Specify the number of categories to display (e.g., number= “12”).
  • orderby: Choose the order criterion for products (e.g., orderby= “ID”).
  • order: Determine the order direction (e.g., order= “ASC”).
  • columns: Set the number of display columns (e.g., columns= “3”).
  • hide_empty: Choose to hide categories without listed products (e.g., hide_empty= “1”).
  • parent: Select between parent categories and all categories (e.g., parent= “0”).
  • ids: Specify category IDs as a comma-separated list (e.g., ids= “12”).

For instance, to showcase “Related Categories” on a Single Product page, employ appropriate shortcodes.

Displaying WooCommerce Product Categories on the Sidebar

To present product categories on the page sidebar, follow these steps:

1. Go to Appearance > Widgets.

2. Locate the “WooCommerce Product Categories” widget.

3. Drag the widget to your desired sidebar.

Display WooCommerce Product Category in a Menu

To include WooCommerce product categories in a menu, follow these steps:

1. Go to Appearance -> Menus.

2. Click “Screen Options” at the top left and check “Product Categories.”

3. On the left pane, a “Product Categories” tab will show up.

4. Expand the tab, select the desired categories, and click “Save menu.

Customizing the Product Category Template

WooCommerce’s versatility extends to customizing the product category layout. With a range of action hooks and filter hooks available in the source code, developers can easily modify the code. Here are some hooks for adjusting the product category layout:

  • woocommerce_before_subcategory
  • woocommerce_before_subcategory_title
  • woocommerce_shop_loop_subcategory_title
  • woocommerce_after_subcategory_title
  • woocommerce_after_subcategory
  • Woocommerce_subcategory_count_html

Hiding Product Category Title

To hide the product category title, add the following code to your theme’s functions.php:

remove_action(‘woocommerce_shop_loop_subcategory_title’,’woocommerce_template_loop_category_title’, 10 );

Hiding Product Category Count

To hide the product category count on the shop page, use the following snippet in your child theme’s functions.php:

add_filter( ‘woocommerce_subcategory_count_html’, ‘__return_null’ );

With these insights, you can efficiently manage and present your WooCommerce product categories to enhance the user experience and facilitate navigation.

Conclusion

Enhancing your e-commerce website’s usability can significantly impact your business’s success. By strategically displaying WooCommerce categories on different pages, you empower your customers to find products more easily, encouraging longer browsing sessions and potential sales. With the right plugin and thoughtful design, you can create an engaging and user-friendly shopping experience.

FAQ’s on WooCommerce Categories

Can I customize the appearance of the category display?

Absolutely, you can customize the layout, design, and placement of the category display to match your website’s aesthetics.

Are these plugins compatible with different themes?

Generally, category display plugins are designed to be compatible with a wide range of WordPress themes.

How does category display improve conversions?

Displaying categories on different pages makes it easier for users to find products they’re interested in, which can lead to increased engagement and higher conversion rates.

Want faster WordPress?

WordPress Speed Optimization

Try our AWS powered WordPress hosting for free and see the difference for yourself.

No Credit Card Required.

Whitelabel Web Hosting Portal Demo

Launching WordPress on AWS takes just one minute with Nestify.

Launching WooCommerce on AWS takes just one minute with Nestify.