WooCommerce gives you a few options as to what you can show on your archive pages:
- Products
- Categories (on shop page) or subcategories (on category pages)
- Both products and categories
From launching to customizing your WooCommerce stores, Cloudways is at your service.
Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.
When you are setting up a store, normally you’d select the third option, products and categories/subcategories. This implies that visitors can either select products right from the home page or refine their search by clicking through to a product category archive.
In this tutorial you will learn how to display categories in a separate list before displaying products.
- Distinguish code of WooCommerce which is used to output categories and subcategories on archive pages
- Create plugin for code
- Write a function to put categories or subcategories before product listings
- Style the output
Go to WooCommerce > Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show both.
Click the Save changes button to save.
Note: All the code mentioned below should be placed in the functions.php (available in the theme folder.
Display WooCommerce Product Category
function woocommerce_product_category( $args = array() ) {
$woocommerce_category_id = get_queried_object_id();
$args = array(
'parent' => $woocommerce_category_id
);
$terms = get_terms( 'product_cat', $args );
if ( $terms ) {
echo '<ul class="woocommerce-categories">';
foreach ( $terms as $term ) {
echo '<li class="woocommerce-product-category-page">';
woocommerce_subcategory_thumbnail( $term );
echo '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $term->name;
echo '</a>';
echo '</h2>';
echo '</li>';
}
echo '</ul>';
}
}
add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );
So there’s a woocommerce_product_category() function which is outputting the categories or subcategories before running the loop which outputs the products. The function is pluggable, which means override it in theme.
List Subcategories of a WooCommerce Product Category
Here’s how you can easily get the subcategory of WooCommerce product categories by using a custom function that takes advantage of parent product category slug.
function woocommerce_get_product_category_of_subcategories( $category_slug ){
$terms_html = array();
$taxonomy = 'product_cat';
$parent = get_term_by( 'slug', $category_slug, $taxonomy );
$children_ids = get_term_children( $parent->term_id, $taxonomy );
foreach($children_ids as $children_id){
$term = get_term( $children_id, $taxonomy );
$term_link = get_term_link( $term, $taxonomy );
if ( is_wp_error( $term_link ) ) $term_link = '';
$terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->name . '</a>';
}
return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}
In the above code snippet, WP_Term object gets the product category parent. Next, it gets the child ID in an array. Finally, the child categories are displayed in the HTML by running a loop through the child ID array.
Display WooCommerce Category Description
global $post;
$args = array( 'taxonomy' => 'product_cat',);
$terms = wp_get_post_terms($post->ID,'product_cat', $args);
$count = count($terms);
if ($count > 0) {
foreach ($terms as $term) {
echo '<div class="woocommerce-get-product-category">';
echo $term->description;
echo '</div>';
}
}
The above code snippet should be placed in the WooCommerce template file that you use to display your product details. In this code snippet, the ‘wp_get_post_terms’ filter is called when the cache has the required term. the filter will pass the term and the array $args. In addition, the filter is called before the array of terms and will pass the arrays.
Want to Test Your Changes on Free Staging URLs?
Try Cloudways managed WooCommerce hosting for a hassle-free experience.
A Custom Plugin For Displaying WooCommerce Product Category
The above process of displaying subcategories for the WooCommerce product categories is accomplished through inline code that is added to the functions.php file.
There are cases where WooCommerce store owners and developers do not wish to use inline code, mainly where they do not wish to temper with “good” code or in cases where there is extensive customization that could get derailed by adding code to functions.php.
For such users, a great alternative is to package all this functionality into a plugin. the process is simple and you have the additional benefit of switching OFF this functionality by deactivating the plugin.
Let’s start!
In your wp-content/plugins directory, create a new folder and give it a unique name. I’m calling mine cloudways-products-categories-in-archives. Inside that, create a new file, again with a unique name. I’m using the same name: cloudways-product.php
Open your file and add this code to it.
<?php /** * Plugin Name: WooCommerce Product Category * Description: Display WooCommerce categories on WooCommerce product pages **/
In your plugin file, add this:
function cloudways_product_subcategories( $args = array() ) {
}
add_action( 'woocommerce_before_shop_loop', 'cloudways_product_subcategories', 50 );
Now add this code inside the function:
$parentid = get_queried_object_id();
$args = array(
'parent' => $parentid
);
$terms = get_terms( 'product_cat', $args );
if ( $terms ) {
echo '<ul class="product-cats">';
foreach ( $terms as $term ) {
echo '<li class="category">';
woocommerce_subcategory_thumbnail( $term );
echo '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $term->name;
echo '</a>';
echo '</h2>';
echo '</li>';
}
echo '</ul>';
}
The code above defines the current queried object and defines its ID as $parentid. It uses get_terms() to identify terms with the currently queried item as their parent. For each term, it display the category image using woocommerce_subcatgeory_thumbnail(), followed by the category name in a link to its archive.
In your plugin folder, create a folder called css, and inside that, create a file called style.css.
Now in your plugin file having name cloudways-product.php . Add the following code
function cloudways_product_cats_css() {
wp_register_style( 'cloudways_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
wp_enqueue_style( 'cloudways_product_cats_css' );
}
add_action( 'wp_enqueue_scripts', 'cloudways_product_cats_css' );
In the above code snippet, wp_register_style allows you to add you own style.css file that can contain custom CSS code that you can use for displaying the subcategories.
Q. How do I find a product category ID in WooCommerce?
To find the WooCommerce product category ID, you need to go WooCommerce Dashboard → Products → Categories → hover over a [category name] → click [category name] or click Edit when it appears → find the URL. For example: tag_ID=16 where 16 is the ID of the category.
Q. What is a WooCommerce product attribute?
Product attributes is an additional feature, which allows you to add product sizes, colors, etc. To associate a product with its attributes, you need to go to the products page and create product variations.
Q. How do I add a product to WooCommerce?
To add products to a WooCommerce store, go to Products → Add New. Here you can add all of your product details like product title, description, prices, images, etc.
Q. What is a simple product in WooCommerce?
Simple products have one SKU and have no variations or other exclusive features. For example, a blank apparel.
Q. What is a variable product in WooCommerce?
In a variable product, you have multiple variations/options, each of which may have a different SKU or price. For example, a chairs that is available in a variety of colors and sizes.
Q. How do I create a variable product in WooCommerce?
To do this, go to WooCommerce → Products. Select the Add Product button or Edit an existing product. The Product Data displays. Select Variable product from the Product Data dropdown.
Q. What is an SKU in WooCommerce?
An “SKU” is a unique identifier, which you can find according to the information system used under the name “Part number” or “Product ID”.
Q. How do I change the price of a product in WooCommerce?
Go to the Products tab. Choose the product you wish to edit. Next, go to Product Data panel, select the General tab. The update the Regular Price field or Sale Price field with a number.
Q. How do I show all products in WooCommerce?
Go to WooCommerce → Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show products. Save your changes.
Conclusion
Product categories are an extraordinary element of WooCommerce, yet the way they are shown is not generally perfect. In this tutorial you have figured out how to create a plugin that outputs product categories or subcategories independently from the product listings and afterward you have styled your category listings.
Customer Review at 
“Great performance for the price, and plenty of control”
Sean P [SMB Owner]
Owais Alam
is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]
