WooCommerce: Show Product Custom Field in the Category Pages

A client asked me to show a given custom field in the loop (i.e. Shop page, Category pages, Tag pages = anywhere woocommerce products are returned). Interestingly enough, she didn’t want to show the product short description (see “show product short description on the homepage only” snippet) but a custom field, so here’s how you do it!

1. Add a Custom Field to Each Single Product

Go to the single product page, scroll down to the custom fields box, and then add a new one manually. Call it something like “loopdesc” and add the text you want to show in the product category pages.

WooCommerce Product Add New Custom Field
WooCommerce Product Add New Custom Field

2. Add PHP to your functions.php to Show Custom Field @ Loop


/**
 * @snippet       WooCommerce Show Product Custom Field in the Category Pages
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=17451
 * @author        Rodolfo Melogli
 * @compatible    WC 3.5.4
 * @community     https://businessbloomer.com/club/
 */

add_action( 'woocommerce_after_shop_loop_item_title', 'bbloomer_woocommerce_product_excerpt', 35 );  

function bbloomer_woocommerce_product_excerpt() {
global $post;
if ( is_home() || is_shop() || is_product_category() || is_product_tag() ) {
   echo '<span class="excerpt">';
   echo get_post_meta( $post->ID, 'loopdesc', true );
   echo '</span>';
}
}

Here’s the final result:

WooCommerce Show Custom Field in the Loop
WooCommerce Show Custom Field in the Loop

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages
    I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can […]
  • WooCommerce: Hide Prices on the Shop & Category Pages
    Interesting WooCommerce customization here. A client of mine asked me to hide/remove prices from the shop page and category pages as she wanted to drive more customers to the single product pages (i.e. increasing the click-through rate). As usual, a simple PHP snippet does the trick. I never recommend to use CSS to “hide” prices, […]
  • WooCommerce: How to Remove the “Default Sorting” Dropdown
    If the WooCommerce product sorting functionality (“Default Sorting” dropdown) is a waste of space or you don’t need that select box at all, you may want to remove it. No matter if you prefer custom code or a simple plugin – hiding the product sorting dropdown is a piece of cake. Enjoy!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

55 thoughts on “WooCommerce: Show Product Custom Field in the Category Pages

  1. Thank you very much for this tip, it works!

    I would like to limit the number of characters in the custom field. Can you help me please?

    1. Hi Anthony, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Hi
    so many thanks to you for your tips and …
    1. i dont know what that last number in a do_action(hook,function, number) do. how should i choose it?
    2.is this snippet and hooks work on last ver. of WooCommerce and wp? none of shop loop page hooks affect in my theme. how solve it?? i have only necessary plugins activated.
    3.are you have any snippet to add a tab in product single page and put a video preview or … by hooks in that tab?? i wanna make it dynamic by custom fields.
    i think we can do a lot of things with custom fields and hooks
    so many thanks ๐Ÿ™‚

    1. That’s the “priority”: https://developer.wordpress.org/reference/functions/add_action/

      For the rest, yes, it works. If it doesn’t work for you, try placing snippets with the Code Snippets plugin

  3. Hi Rodolfo, is it possible to add custom HTML inside the custom field? Thank you.

    1. Well, yes, you will need to make sure your custom field can store that info

  4. Fantastic! How do you do this with a product tag?

    1. … as in see if a product has a certain tag and then display custom text for that product.

      1. I suggest you take a look at “conditional logic”: https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Enjoy ๐Ÿ™‚

  5. Great Job!

    But is it also possible to show the custom_field on the single product page?

    I have added is_product() in the function but this does not do the trick.

    Regards,
    Adri

      1. I have a trouble as Adri. I read https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ , but it don’t help me. Please help !

        1. Hi Ati, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  6. Hey Rodolfo, thanks a lot for the code, it works like charm (I used Code Snippets plugin to insert). The custom field I displayed on archive pages is a Date+Time type field (the product is online streaming event), created with ACF plugin. However on the archive pages it looks in a date format different to the one I’ve set up in ACF plugin. I’m new to php, can you please help if is there any additional line I should add do display the date type custom fields in ‘F j., H:i’ format? I learn a lot from your blog and I’m very grateful! Many thanks & greetings from Budapest, Hungary

    1. I believe it might be inside ACF docs. If not, you can customize the output with “format” parameter: https://www.php.net/manual/en/function.date.php

      1. Thanks a lot for your support, I check that! All the best, Gabor

  7. I want to add a block of text below the thumbnails on the product pages.

    I see that in the Product/Categoy in the backend there is a description field, but that appears above the thumbnails.

    In the theme I am using (Generate Press) the description shows on the front end, which is what I want.

    But what I want is to either move that description below the thumbnails or add an extra field for text below the thumbnails.

    Did you publish a way to move the description or create an extra field?

    1. Hi David, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  8. This works but the custom field stays above product image , how to put it below product price ?

  9. Hi, Rodolfo!

    Usefull snippet! But, I need to show that data conditionally. If one custom field is’nt empty, show a string. That is posible?

    1. Hello Exel, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  10. Works great! Thank you for this. How would i get it to show under the product title but above the price?

    1. Hello Nick, please watch this tutorial: https://businessbloomer.com/customize-shop-page/

  11. Thank You Very Mush. It helped me

    1. You’re welcome ๐Ÿ™‚

  12. didn’t work for me last woo and divi shop module

    1. It’s probably Divi’s fault and the snippet might need to be customized. Sorry ๐Ÿ™‚

  13. Hi Rodolfo,
    1. Can I show attribute in the loop?
    2. I have two custom fields but if I echo the function twice there is no space between fields.

    Thank you.

    1. Hey Vinz, thanks so much for your comment! This snippet does show custom fields in the loop ๐Ÿ™‚ Also, you can add a BR tag in the HTML to create the space. Hope this helps!

    2. Thank you Rodolfo!
      One more thing ๐Ÿ˜‰
      there is a function to limit custom fields word’s or characters number?

      1. Hey Vinz, of course there is – but I can’t help you in this case. Thanks for your understanding ๐Ÿ™‚

  14. Hi Rodolfo,
    I’ve added your snippet on my child-theme function.php. Also, added the custom field to one of my products to see if it works. I used the exact same name and everything that you have used. However, nothing is appearing on the “shop” page, but it appears on the category page. Do I need to add this somewhere else in order for it to show on, I think, the archive page?

    1. Nevermind! Figured it out. Thanks!

  15. Hello, this is great tutorials,
    But I want Show Product Custom Field in the grid categories, cant you help do it

    Thanks

    1. Hey Duc, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  16. Hi Rodolfo, thank you so much for your great tutorials, that brought me from pretty much confusion to understanding woocommerce a bit and now with your help I’m able to customize a lot of things to my needs, thank you again !!

    Now I added a advanced custom date field “start_date” to my products (which are bookable events) and I want to show the products on the shop-page ordered by this date field value . I found a tutorial in the acf Documentation (https://www.advancedcustomfields.com/resources/orde-posts-by-custom-fields/) – but I cannot figure out how to customize the snippet for wc and where I have to hook it in – and how to hide the products with date in the past?
    Maybe you got an advice for me?
    Thanks a lot in advance,
    Stefanie

    1. Hey Stefanie, thanks a million for your comment! I’m afraid this is custom work so I cannot give a solution here in the blog comments. However, I found this for you – it should be more or less what you’re trying to achieve: https://www.skyverge.com/blog/sort-woocommerce-products-custom-fields/

  17. I buy some theme from Themeforest but I didnt find any custom field section in the woocommerce product, can you assist me how to add or enable custom field section in the product edit.

    1. Hey Amirul thanks for your comment! Themes don’t affect the admin product pages, so go check again – if you don’t find it send me a full screenshot of the edit product page and I’ll see if I can help. R

  18. Hello Rodolfo,
    Thank you for yet another valuable tutorial. I have one question.
    How would I show this custom field on the single product page?
    Thank you.

    1. Hey Joe, thanks for your comment! All you need to change is the “hook”; to find out what hooks are available on the single product page, just google “woocommerce single product hooks” and you’ll find my own “visual guide”, which will show you the locations as well ๐Ÿ™‚ Let me know!

  19. Hello, thanks very much for the snippet – it was very useful. I was wondering if it could be possible to show the short description on the sales shortcode. I’m using sale_products shortcode on the homepage to list the sale items and unfortunately the short description is not shown with the shortcode. Can you please help me out? Thanks in advance!

    1. Hello Eylรผl, and thanks so much for your comment! Have you looked at this article already: https://businessbloomer.com/woocommerce-show-product-short-description-homepage? Let me know if that helps ๐Ÿ™‚

  20. How do you add these custom fields in the product data box ?
    I don’t find any option for that.

    1. Hello Karan, thanks for your comment! Did you take a look at the image I show at “1. Add a new custom field to the products” – that should help ๐Ÿ™‚

  21. How do you add these custom fields? Is it a plugin, or do I need to add something to my functions.php

    1. Hey Kyle, thanks for your comment! If you take a look at image #1, it will show you where I enter the custom field. It’s on the Single Product Edit Page, right at the bottom of the “Product Data” box. Click on “Enter New” and create your custom fields there.

      An other alternative is Advanced Custom Fields, widely used by WordPress developers!

  22. Hi, this worked great for one product, but when I try to add a second product with different custom field in functions.php…..the second doesn’t show up. It also doesn’t show up in ‘related Products listings. All I wanted to do was add one small custom field to the product category grid view…..do you have any ideas?

    1. Hi Kevin, thanks for your feedback! This PHP function does not trigger on the “single product page” (related products are there) and also it is specific to a single custom field. If you have multiple fields you simply need to echo the function twice:

      echo get_post_meta( $post->ID, ‘custom field 1’, true );
      echo get_post_meta( $post->ID, ‘custom field 2’, true );

      ..where custom field 1 and 2 are the names of your custom fields. Hope this helps!

      1. Hey Rodolfo, thanks so much for your help, it worked a treat! Perfectly. You certainly are a WP Guru!

        Kind regards….Kevin

        1. Excellent, cheers Kevin!

          1. I want to added 1 more option at woocommerce shop page. After product title and price. I have tried with the advance Custom fields plugin. I have added the field but it’s not showing the text at the products. I’m not expert. So please help me how can I add 1 or more field on the woocommerce product / shop page (for all products)

            1. Hey Shaohag, thanks for your comment! You should combine this snippet with this: https://businessbloomer.com/woocommerce-display-advanced-custom-fields-single-product/, which gives you an idea on how to echo the ACF field. Let me know ๐Ÿ™‚

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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