How to display WooCommerce Product Category Description
Displaying Woocommerce Product Category description is necessary for SEO purpose or for better customer understanding about the product category before making any purchase.
Category description should be displayed under category title on woocommerce category shop page. Below is the screenshot for WooCommerce products on Product Category “WooCommerce” category page:
How to display WooCommerce Product Category Description
Step 1: Open functions.php in your theme folder.
Step 2: Add the following code in functions.php:
Step 3: Save the file and you can go to any category page on your WooCommerce store and see the result.
thanks for the tutorial.
I wonder though, how one could show the category-description only on an opened category-page under the category-title of that page and not under the list (or grid) of categories shown on the shop page for example (or for subcategories listed on a category page)?
Do you have any idea?
Thanks for a hint!
If you want to modify the category template for your WooCommerce product categories to display the Category title and description above the product listing and filter drop down, follow the instructions below:
Step 1. In taxonomy-product_cat.php you will see the following or similar code at the top:
Step 2. Place your cursor after the end of $product; ?> on line 5 and hit enter to create a blank line 6
Step 3. Paste the following code snippet:
You should now have:
You will now have an unstyled header. You can add your own styling for the product-category class, or add css code to style.css (in wordpress theme folder):
Note that your changes will lose after Woocommerce is updated. So don’t upgrade your Woocommerce or make notes of your changes so you can re-do them again in the future if an update overwrites the template file.
Pixel Ninja – Designer, Developer, Gamer
Posted on November 25, 2015 in Development, Web
Out of the box, WooCommerce displays the product category description only on the first page of the category archive. In other words, if the category contains a bunch of products and is paginated, the category description will not be shown on page 2, 3, etc.
But what if you want to display the category description on all the paginated pages? What if, for example, you are running a special promotion and want to include the promotion details in the category description and make sure your shop visitor sees it regardless of which page of the category s/he is on?
The solution is quite straight-forward. Add the following code to your theme’s functions . php file:
The WooCommerce category pages’ layout is governed by the / templates / archive – product . php template and we leverage the woocommerce_archive_description action hook called in this template.
Our custom function above is almost a carbon copy of the default woocommerce_taxonomy_archive_description function, with only one difference: instead of using get_query_var ( ‘paged’ ) == 0 as in the default function, we use get_query_var ( ‘paged’ ) != 0 .
This ensures that the category description is added on all the category pages. Since we do not override the default function, but merely hook into the woocommerce_archive_description action, the category description is still added on the first category page by the default function.
Thanks, Vali, appreciated!
I am facing the same issue in shop page where shop description is showing in main page but not on paginations.
Any clues what to do here.
I’m not entirely sure what you mean by “shop page” and “shop description”; could you please clarify? The blog post is about the product category description and the category pages.
Perfect! Thank you! Love your website!
Thank you very much for your kind words, Ashley, much appreciated!
You’re most welcome!
[…] Crédito: Pixel Ninja […]
Hi, this works great and does indeed display on every paginated page, but I was wondering if you were able to help.
I added the following to my functions.php:
remove_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );
add_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_taxonomy_archive_description’, 100 );
to get the category description to display at the bottom, which works fine, but when I add your code above, the first page works as normal with description underneath the products, but the description appears above th products again on the second and following pages.
Is there any way of combining the above and your code to allow every page to display the description to the bottom?
Thanks in advance, p.s. as you can probably tell I’m not a hard-core coder
Thanks for stopping by. I’m glad that you found the snippet useful.
Regarding your question, try this:
Notice that I removed the get_query_var ( ‘paged’ ) != 0 condition from the if statement in the original version of the custom function. Since we want to display the category description on all pages (including the first one), we don’t need to check which page we’re on.
I didn’t test this, but I think it should sort you out. Let me know how it goes.
Hey Mr Ninja. I am trying to display a category description when using the woocommerce element “Product categories” (Display product categories loop)
It displays by default the image, the name and the number of product inside that category. But not the description.
I can’t find the action to hook the function with
It’s a little bit difficult for me to give you an exact answer for this as I would need to see your code and learn more about the context you’re trying to display the category description in. That being said, the WooCommerce product categories are just a regular WordPress custom taxonomy, so you can use the WordPress get_term ( ) or get_terms ( ) functions to retrieve the term data from the database (including the description). So something along these lines:
See more here, for example.
I hope this helps to point you in the right direction.
Sorry I didn’t provide enough context. I am developing a website using wordpress with a theme named porto. Woocommerce comes as a plugin. I have as well a plugin named Visual composer. So when I created a new page (I do not like the default pages created by the theme and the way woocommerce pushes you to link the shop to a certain page) I added one of those “element” that you can find in the visual composer under the woocommerce category.
To do so, I created a row container, a custom column. Inside that column I added this Product category loops, and chose to display only 1 category. The theme give you the option (appearance) to display the thumb image, the name and the quantity of the product under that category. What I wanted was to display the description next to the thumb image.
What you gave me helped me understand where to look at!
What I did, I edited the content-product_cat.php (
/woocommerce/) and added the element from the class with $category->description.
But I think it’s not really convenient the change the code that way. So I wanted to find the action to hook my custom function with. And add the code in function.php
Anyway, it works now so I won’t complain.
I have been looking at your website and you profile, it is really great. The page looks fantastic, you story is source of inspiration! Plus you are helping people on your blog, with fast answer. You really are the ninja that internet deserve
Thank you for your kind words, much appreciated. It’s always heartwarming when somebody finds the blog useful.
Regarding your issue, I’m glad you figured it out. I don’t think the ‘WooCommerce Category’ is one of the default Visual Composer’s elements, so it must have been added by the theme. Hence the best way to change the output will depend on how the theme added the element in the first place. Overriding the element’s definition file in your child theme is a completely viable way. From what you wrote it sounds like that’s what you did (I hope you’re using a child theme and didn’t modify the file directly in the parent theme itself!). But you could also probably remove the added element and add it again using the Visual Composer API in your functions . php . Or create a brand new element that would do exactly what you want. As it’s often the case with WordPress, there are multiple ways to achieve the same result
You are very Welcome.
Awesome, I didn’t think about creating my own vp element!
About the parent/child I am not sure ;/ I went into appearance, editor and under theme to edit (porto in my case) I found my php files.
So I am guessing that I actually edited the parent theme :/ Is that really bad? and why?
If you’re making any customizations to your site, you almost always want to use a child theme. The main issue with not using one is that when you update the parent theme (when the original developer releases a new patch or update), your modifications may be overwritten by the update and ultimately lost. Using a child theme ensures that your modifications are preserved and makes the theme update process much more straightforward.
There are other advantages as well and if you google around a little, you’ll find plenty of resources on child themes. This Smashing Magazine article is a good place to start.
Popular commercial themes often come with an easy-to-install child theme skeleton, so it’s easy to get started. I’m not 100% certain, but I think Porto has one too (it’d be part of the theme bundle).
Ok I didn’t know that.
I found the child theme, but I guess It’s a bit too late for my current website.
Thank you so much again for your help!
Hi Mr Ninja!
Today is the day I have to create a child theme I think
So Does that mean I’m gonna have to redo my entire website ? How can I do the transition to a child theme and then update the parent one ?
That really depends on the extent of modifications to the parent theme you made and how you made them. For example, if you edited some of the theme files directly, the migration to the child theme will be more involved than if you just configured the theme through the WordPress admin system. But overall you shouldn’t need to redo your entire site, only apply the same modifications and configuration to the child theme.
There are plenty of good tutorials online on setting up and using WordPress child themes, so I would suggest that you look some up and go through them carefully before you start working on the migration process. Oftentimes commercial themes come with a skeleton child theme and some documentation on how to use it – perhaps yours does as well – so that might help you too.
I’m sorry if this is a bit vague, but it’s a fairly wide topic, beyond the scope of a simple comment. Good luck!
Hi there, I’m using the Panoramic premium theme on my site and when I add the snippet, piece of code to the function.php nothing happens and no category or production description shows. Not sure why?
Hmm, that sounds strange. I’m not familiar with the Panoramic theme, but I had a quick look at the free version and I don’t see anything in the theme’s code that should conflict with the snippet.
Two quick questions: (1) Before you added the snippet, did the category and product descriptions display fine? (2) When you insert the snippet and the category and product descriptions don’t show, does the rest of your site work ok?