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.
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.
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.
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.
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.
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.
