Display WooCommerce Product Category Description on All Category Pages

WooCommerce Logo

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:

/* Display WooCommerce product category description on all category archive pages */
function my_theme_woocommerce_taxonomy_archive_description() {
    if ( is_tax( array( 'product_cat', 'product_tag' ) ) && get_query_var( 'paged' ) != 0 ) {
        $description = wc_format_content( term_description() );
        if ( $description ) {
            echo '
' . $description . '
';
        }
    }
}
add_action( 'woocommerce_archive_description', 'my_theme_woocommerce_taxonomy_archive_description');

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.

Enjoyed this post? Share it with others.
Share on email
Email
Share on facebook
Facebook
Share on google
Google
Share on twitter
Twitter

Responses (63)

  1. Name (required)Vali
    March 11, 2016 at 1:25 am · Reply

    Nicely done

    • pixel.ninja
      March 11, 2016 at 1:48 am ·

      Thanks, Vali, appreciated!

  2. Umberto
    May 3, 2016 at 8:16 pm · Reply

    thank you!

  3. subrat
    May 14, 2016 at 1:51 pm · Reply

    Hi!,

    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.

    • pixel.ninja
      May 14, 2016 at 2:48 pm ·

      Hi Subrat,

      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.

  4. Ashley
    May 20, 2016 at 5:14 am · Reply

    Perfect! Thank you! Love your website!

    • pixel.ninja
      May 20, 2016 at 12:33 pm ·

      Thank you very much for your kind words, Ashley, much appreciated!

  5. Ryan
    September 17, 2016 at 11:59 pm · Reply

    Thank you!!!

    • pixel.ninja
      September 18, 2016 at 1:15 am ·

      You’re most welcome!

  6. Manvendra
    October 8, 2016 at 5:05 am · Reply

    This is not working for me. website: http://www.shoppingandcoupon.com/

  7. Wayne
    March 22, 2017 at 7:59 pm · Reply

    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 πŸ™‚

    • pixel.ninja
      March 22, 2017 at 9:54 pm ·

      Hi Wayne,

      Thanks for stopping by. I’m glad that you found the snippet useful.

      Regarding your question, try this:

      // Display WooCommerce product category description on all category archive pages
      function my_theme_woocommerce_taxonomy_archive_description() {
          if ( is_tax( array( 'product_cat', 'product_tag' ) ) ) {
              $description = wc_format_content( term_description() );
              if ( $description ) {
                  echo '
      ' . $description . '
      '; } } } // Remove the default product category description displayed above products from all category pages remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description'); // Add our custom category description below products on all category pages add_action( 'woocommerce_after_shop_loop', 'my_theme_woocommerce_taxonomy_archive_description');

      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.

  8. baudouin
    March 28, 2017 at 9:13 pm · Reply

    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

    • pixel.ninja
      March 28, 2017 at 10:10 pm ·

      Hi Baudouin,

      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:

      $args = array( 'taxonomy' => 'product_cat' );
      $terms = get_terms('product_cat', $args);
      

      See more here, for example.

      I hope this helps to point you in the right direction.

  9. baudouin
    March 29, 2017 at 2:45 am · Reply

    Hey Mr Ninja,

    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 πŸ™‚

    Take care!

    • pixel.ninja
      March 29, 2017 at 11:53 am ·

      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 πŸ™‚

  10. baudouin
    March 29, 2017 at 9:34 pm · Reply

    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?

    • pixel.ninja
      March 29, 2017 at 10:27 pm ·

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

  11. Baudouin
    March 30, 2017 at 9:56 pm · Reply

    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!

  12. baudouin
    April 20, 2017 at 9:48 pm · Reply

    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 ?

    • pixel.ninja
      April 21, 2017 at 2:26 am ·

      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!

  13. Pheel
    September 5, 2017 at 2:31 am · Reply

    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?

    • Richard
      September 5, 2017 at 11:23 am ·

      Hi Pheel,

      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?

  14. David F
    October 10, 2017 at 4:17 pm · Reply

    Works like a charm, thanks!

    • Richard
      October 10, 2017 at 4:25 pm ·

      Awesome, my pleasure!

  15. Martin
    December 10, 2017 at 7:26 am · Reply

    Worked great to get the cat. descriptions on each of my paginated category pages, thank you.

    • Richard
      December 10, 2017 at 11:44 am ·

      Fantastic, I’m glad to hear that. You’re most welcome.

  16. Mahendra
    February 5, 2018 at 1:45 am · Reply

    nice article

    • Richard
      February 5, 2018 at 9:39 pm ·

      Thank you, Mahendra, much appreciated.

  17. Lukasz
    April 18, 2018 at 10:34 am · Reply

    Warm and juicy THANK YOU!

    • Richard
      April 18, 2018 at 12:18 pm ·

      My pleasure! I’m glad you found the post useful.

  18. Group of Oceninfo
    June 14, 2018 at 3:06 pm · Reply

    Hi

    Thanks for writing this code but I have one query, As this code is working fine on Product Category, Can you please suggest something where I can also show description on on Product Attribute terms(collections) pagination?

    Looking for some solution for that.

    Thanks for providing code.

    • Richard
      June 14, 2018 at 3:40 pm ·

      Hey there,

      Could you give me a link to an example page? I’m not sure I fully understand what you mean since from the top of my head the product terms are just a filter on top of the product category pages (using the same product category templates), so the code should still apply.

  19. Group of Oceninfo
    June 19, 2018 at 2:05 pm · Reply

    Hi,

    Thanks for your reply here is the link for the Product Attributes : https://goo.gl/b8RDGw Be Inspired & Search Dates supplied as a product description. If you go to page 2 then it won’t show Be Inspired & Search Dates

    This one is for the product category https://goo.gl/CgmT4a while you’re going on product category page it’s showing description perfect even on page 2.

    So, For the product category it’s working perfect but not for the product attributes.

    • Richard
      June 19, 2018 at 3:16 pm ·

      Hello,

      The website that you linked uses a custom theme which often changes the way the different pages are generated and what works with with default theme (and WooCommerce) installation may no longer apply.

      With that being said, I had a look at the source code of the site and I think that if you slightly modify the if statement of the shortcode, it should work with the collection pages. Try changing it to the following (notice the added custom taxonomy in the array):


      if ( is_tax( array( 'product_cat', 'product_tag', 'pa_collections' ) ) && get_query_var( 'paged' ) != 0 ) {

      From what I can tell, the collection pages on your website are generated using a custom taxonomy ('pa_collections') which is why just using the default WooCommerce taxonomies ('product_cat' and 'product_tag') in the if statement isn’t sufficient.

      What the if statement in the original shortcode does is detect whether we’re on a product category or a product tag archive and if so, it adds the category description in the page header. If the page is generated using a different taxonomy, the if statement will evaluate as false and the description will not display. By adding your custom taxonomy into the array, the if statement should evaluate to true on the collection pages and correctly display the description.

      Give it a shot and see how it goes.

    • Group of Oceninfo
      June 20, 2018 at 5:48 pm ·

      Hi Richard

      Thank you for the suggestion Actually I forgot to try using that kind of custom taxonomy ‘pa_collections’ works.

      Thanks for reference and code.

    • Richard
      June 20, 2018 at 5:53 pm ·

      Great, I’m glad to hear it was helpful!

  20. Andres
    October 9, 2018 at 7:08 pm · Reply

    Thank you so much!!!

    • Richard
      October 13, 2018 at 10:48 pm ·

      You’re welcome, Andres. I’m glad you found the post helpful.

  21. Jana
    November 8, 2018 at 12:22 am · Reply

    I have used the code below to display my category description below my products. I would like the category name (CBD) to be displayed at the top of the page while keeping the category descriptions below the product. Thanks for any and all help.

    remove_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );

    add_action( ‘woocommerce_after_main_content’, ‘woocommerce_taxonomy_archive_description’, 100 );

    add_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_taxonomy_archive_description’, 100 );

    • Richard
      November 8, 2018 at 12:55 pm ·

      Hi Jana,

      Thanks for stopping by. What you can do is 1) remove the default taxonomy archive description like you did, and 2) hook into the same action hook with a lower priority your custom function that will display just the category title. So it could look something like this:

      // Remove the default category description
      remove_action('woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
      // Show category title in place of the default category description; notice the lower priority argument which ensures that this action hook runs later
      add_action('woocommerce_archive_description', 'my_theme_category_title', 20);
      // Custom function that displays category title
      function my_theme_category_title() {
              if ( is_product_taxonomy() && 0 === absint( get_query_var( 'paged' ) ) ) {
                  $term = get_queried_object();
                  if ( $term && ! empty( $term->name ) ) {
                      echo '

      ' . wc_format_content($term->name) . '

      '; } } };

      You’ll have to play with the custom function and see if that works. It’s from the top of my head and I haven’t tested it. But that’s the gist of it.

      By the way, this is quite a helpful post series that lets you quickly see the different available WooCommerce hooks and their position on the page: https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/.

      I hope this helps.

  22. dert
    June 30, 2019 at 1:30 am · Reply

    hi,

    how to remove p tags from category description woocommerce

    thanks

    • Richard
      June 30, 2019 at 2:01 am ·

      I’m sorry, I don’t know from the top of my head, I’d have to test it. But try remove_filter('woocommerce_short_description', 'wpautop'); and see if that works. It may remove the

      tags elsewhere too, though.

      Alternatively, try looking up the wc_format_content() function which is what WooCommerce uses to format the description before displaying it in the page and see if there’s some filter that you could use.

      You could also write a custom function that hooks into the woocommerce_archive_description hook like I did in this post and remove the

      tags in it with string replace or regex.

  23. dert
    June 30, 2019 at 1:31 am · Reply

    not work “remove_filter(‘term_description’,’wpautop’);”

  24. dert
    June 30, 2019 at 2:06 am · Reply

    thanks so much it works great

    remove_filter(‘woocommerce_short_description’, ‘wpautop’);

    best regards

    • Richard
      June 30, 2019 at 1:38 pm ·

      Fantastic. I’m glad it worked. Thanks for reporting back πŸ™‚

  25. Wayne S.
    August 23, 2019 at 4:25 am · Reply

    Hi Richard,
    Love your site and easy manner in working with people. Kudos!
    I used the code left for a different Wayne to remove the category description from the top of the page to the bottom on all of the pages and it works except when the bottom row of products isn’t full. If the last row of products has one or two items empty spaces the description takes up one or both spaces instead of below all products. Can you help me fix this issue?
    Thanks– Wayne S.

    • Richard
      August 23, 2019 at 2:46 pm ·

      Hi Wayne,

      Thank you very much for your kind words.

      I checked your site and it happens because the product elements are floated, so the category description element takes up the free space right after them (if there’s any left) instead of stacking underneath as a block. You’ll need to clear the float from the products. Try adding this to your theme’s CSS file:

      .woocommerce ul.products:after {
        content: "";
        display: table;
        clear: both;
      }
      

      It should fix the issue.

  26. Wayne S.
    August 23, 2019 at 9:55 pm · Reply

    Worked perfectly! Thanks for the quick response.

    • Richard
      August 24, 2019 at 1:33 am ·

      Great! I’m glad it worked πŸ™‚

  27. Wayne S.
    August 28, 2019 at 12:30 am · Reply

    Quick follow up on moving the description to the bottom of the Woocommerce Shop page after all of the product rows. I assume there is a tweak that can be made to the code you provided already but I’m not sure what it is. Also, will the CSS to move the description to a new line following the products work for this move as well?

    • Richard
      August 28, 2019 at 3:16 pm ·

      I’m sorry, I’m not completely clear on what you’re asking about. Could you elaborate? Based on your previous comment and on what I saw when I checked your website last time, the code already worked for you to move the category description under all the products and the CSS snippet I gave you last time should display it as a block in a new row.

  28. whenlimitationsareset
    July 5, 2020 at 2:09 am · Reply

    Thank you

    • Richard
      July 5, 2020 at 3:08 am ·

      You’re welcome!

  29. Name (Jimmyrequired)
    July 27, 2020 at 11:47 pm · Reply

    Lifesaver πŸ™‚

    • Richard
      July 28, 2020 at 12:27 am ·

      Saving lives one custom function at a time πŸ™‚

  30. ahed
    November 4, 2021 at 6:22 pm · Reply

    thans alot

    • Richard
      November 4, 2021 at 10:16 pm ·

      You’re welcome!

  31. Benn
    November 24, 2021 at 8:25 pm · Reply

    Struggling to get this to work, am pasting code into my functions.php of my child theme but does’t show description copy/text. Also tried posting in the main theme functions.php and still does;t work.

    Where in the functions.php does the code need to be pasted.

    • Richard
      November 24, 2021 at 9:27 pm ·

      Hi Benn,

      Thanks for stopping by.

      It sounds like you are doing it right, but ultimately it all depends on how your theme and site are structured. I had a quick look at your site and it seems that it might be using WP Bakery to implement the pages. If that is indeed the case and the WooCommerce category pages are set up with the WP Bakery page builder rather than leveraging the standard WooCommerce templates, the snippet might not work and the category description would need to be added in some other way. Unfortunately that is not something I can provide a solution from the top of my head. I would need to have a closer look at the site and the theme.

  32. Su aritma cihazlari
    December 31, 2021 at 12:04 am · Reply

    Hi,

    First of all, thank you for this great article.

    My web site: https://www.caglayansuaritma.com.tr

    And this code works on category pages.
    For Example: https://www.caglayansuaritma.com.tr/sanayi-tipi-su-aritma-cihazlari/page/2/

    But it doesn’t work on the main store page. It only works on the first page.
    For example: https://www.caglayansuaritma.com.tr/su-aritma-cihazlari/page/2/ and other pages.

    My Main Store Page: https://www.caglayansuaritma.com.tr/su-aritma-cihazlari/

    How should I edit this code to run on the main store page?

    Best Regards,

    • Richard
      December 31, 2021 at 2:51 pm ·

      Hi there,

      If I understand your question correctly, I think the issue is that the code snippet from my blog post is meant to add the WooCommerce category description on the category archive pages. However, the main store page does not display a single category. Instead it shows products from all the different categories. So technically there is no way for the template to determine which category description should be displayed on the main store page.

      That being said, you should be able to add content to the main store page by editing it in your WordPress admin. In other words, the main store page will not display a category description, but it will display the store page content directly.

      I hope that helps.

Leave a reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.