WooCommerce: Display Advanced Custom Fields @ Single Product

Advanced Custom Fields plugin is a great way to add custom, advanced fields to the WooCommerce Single Product Page. Many struggle to display such fields on the front-end, so this simple snippet should help you!

WooCommerce: display Advanced Custom Field @ single product page

PHP Snippet: Display Advanced Custom Fields @ WooCommerce Single Product Page

/**
 * @snippet       Display Advanced Custom Fields @ Single Product - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=22015
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @community     https://businessbloomer.com/club/
 */ 
 
add_action( 'woocommerce_product_thumbnails', 'bbloomer_display_acf_field_under_images', 30 );
 
function bbloomer_display_acf_field_under_images() {
  echo '<b>Trade Price:</b> ' . get_field('trade');
  // Note: 'trade' is the slug of the ACF
}

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: 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: Add Prefix / Suffix to Product Prices
    Sometimes you may want to add a prefix or a suffix to your prices. It could be something like “From…”, “Only…”, “…tax free” and so on. The first good news is this is very easy to do with a WooCommerce filter (remember, filters change the value of an existing variable, while actions add content). The […]
  • WooCommerce Conditional Logic – Tags, Examples & PHP
    The WooCommerce and WordPress conditional tags (“WooCommerce and WordPress Conditional Logic”) can be used in your functions.php to display content based on certain conditions. For example, you could display different content for different categories within a single PHP function.

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

64 thoughts on “WooCommerce: Display Advanced Custom Fields @ Single Product

  1. Hi,
    I use the below code to display the ACF field at the bottom of the product archive, but it doesn’t work.

    1. I google and find the alternative code, it works well on my site. Hope can help anyone who needs it. Replace the “seoct” only with your ACF field name.

      add_action( ‘woocommerce_after_shop_loop’, ‘diiamo_display_acf_field_under_product’, 11);
      function diiamo_display_acf_field_under_product() {
      $term = get_queried_object();
      $seo_content = get_field(‘seoct’, $term);
      if( !empty($seo_content) ) {
      echo ” . $seo_content . ”;
      }
      }
      
  2. thank you
    thats right in medilink theme

  3. Hi and thank you very much for that snippet. It works fine fo me but i have a problem with title. If none of the fields have value it is not showing up but the title does.
    How i can hide the title “SPECIFICATIONS” if one of the fileds have value ?

    add_action( 'woocommerce_product_meta_end', 'bbloomer_display_acf_field_under_images', 40 );
      
    function bbloomer_display_acf_field_under_images() {
    	echo "";
    	echo '<b>SPECIFICATIONS</b>';
    	echo "";
    	if( get_field('net_weight') ):
      echo '<b>Net weight:</b> ' . get_field('net_weight');
    	echo "";
    endif;
    	if( get_field('sealing') ):
      echo '<b>Sealing:</b> ' . get_field('sealing');
    	echo "";
    	endif;
    .
    .
    .
    etc .......
    

    thanks in advance .

    1. sorry i mean “if none of the fileds have value”….

      1. You’re already checking if those fields exist below, right? Simply add another check on top, to see if one OR the other exist

  4. Hi Rodolfo, your blog is really great. I’ve found many interesting posts.
    I’ve inserted your script in my function.php and it works. But it works only if my custom field is a Editor Wysiwyg field type.
    But if my custom field is a checkbox?
    How can I modify your script?
    I tried to change get_field with the_field but it doesn’t work.
    Thanks.

    1. Hi Fabrizio, 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!

  5. How do I show advanced custom field in an existing single product tab? please reply. Thanks

    1. Hi Aziz, 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. Hi there, thanks for sharing this great snippet! I was just wondering if it’s somehow possible to only show the ACF field if it has got a value? I reckon that would be really useful… Also, is it easy to change to code to show a standard custom field? Many thanks for your help!

    1. Hi Jonas, 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!

  7. Hello, is there a way to get these fields to display after the product meta information instead of after the photo?

    Using this PHP line to get my other fields to display, and they are working properly but I would like my ACF to appear under them…

    1. Hello Whitney, 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. Hi, thanks so much for this! Is there a way I can display custom taxonomies too?

    1. Also, is there any way I can wrap each custom field in a div?

      1. Hi Kelly, 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!

  9. Hello Rodolfo,
    it still working fine.
    I just couldn’t handle show up prepend and append values on frontend.
    Could you please guide an example for us?
    Thank you so much.

    1. Hi Ahmet, 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. Hi, Rodolfo

    Thanks for the snippet! Do you happen to have one for displaying custom fields for a variable product? I have custom field for the variations, but can’t get them to display on the product page.

    thnx in advance!

    1. I don’t, sorry

  11. Hi, It would be great if you could do a tutorial for adding ACF fields to the checkout page too.

    1. I’ll think about it. Thank you

  12. Works great on Aug 6, 2019.
    Thank you!

    1. Excellent!

  13. Hi Rodolfo,
    thanks for this tutorial 🙂

    Can You explain how to display field in product only if product is marked as “featured”?

    1. Hello Juraj, 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!

  14. Not working.
    THis is what i added to the functions/php in my snippet plugin.
    Please advise.

    
    /**
     * @snippet       Display Advanced Custom Fields @ Single Product - WooCommerce
     * @how-to        Get CustomizeWoo.com FREE
     * @sourcecode    https://businessbloomer.com/?p=22015
     * @author        Rodolfo Melogli
     * @testedwith    WooCommerce 2.5.2
     */
     
    add_action( 'woocommerce_product_thumbnails', 'bbloomer_display_acf_field_under_images', 30 );
     
    function bbloomer_display_acf_field_under_images() {
      echo '<b>Specs:</b> ' . get_field('wattage');
      echo '<b>Specs:</b> ' . get_field('voltage');
      echo '<b>Specs:</b> ' . get_field('flange_size');
      echo '<b>Specs:</b> ' . get_field('immersion_length');
      echo '<b>Specs:</b> ' . get_field('includes');
      
      // Note: 'trade' is the slug of the ACF
    }
    
    
    1. Not sure Amy, is ACF set up properly? Works for me.

  15. It still works, thanks so much, I spent hours trying to solve this! 🙂

    1. Fantastic!

  16. Hi there,
    I am running Woocomerce and WC Vendors, and have managed to create a custom field “ISBN Number” on my Product Page to enter a ISBN Number.

    I want, no need it to show on an individual product page and be searchable. I have attempted the code on this page and on https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ to add the visual hook, but still can’t see it after adding to the functions.php

    Unless it is not obvious, I am am not a dev haha! please help!

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

  17. How can i change the font of the field that is displayed?

    1. Andrea, thanks for your comment! You’ll need custom CSS for that 🙂

  18. I can output single field without a problem but can someone tell me how my code should look if I have these repeater fields which are arrays.

    <?php if( have_rows('johannesburg_dates') ): ?>
    
    				<!-- Grid layout starts here -->
    					<div class="training-grid">
    					<div class="train-details"><?php if( have_rows('johannesburg_dates') ): ?><h5 class="trainingdetails">Training Price:<span>R<?php the_field('training_price');?> <font size="2px">Excl VAT</font></span></h5><?php endif;?>
    					<?php if( have_rows('johannesburg_dates') ): ?> <h5 class="trainingdetails">Course Duration:<span><?php the_field('training_length');?> Days</span></h5><?php endif;?>
    					<?php if( have_rows('johannesburg_dates') ): ?> <h5 class="trainingdetails">CPD Points:<span><?php the_field('training_points');?> Points</span></h5><?php endif;?>
    					</div>
    					<div class="train-header"><h1 class="coursedateheader">Course Dates <span style="color:#ff0000;font-size:16px;">(You <strong>must</strong> select a date listed here to enable form submit)</span></h1></div>
    					<div class="jhb-box"><?php if( have_rows('johannesburg_dates') ): ?> <h4 class="trainingcenter">Johannesburg</h4><?php endif; ?>
    				<ul class="traininglist"><?php while( have_rows('johannesburg_dates') ): the_row(); ?><li><a href="?coursedate=<?php the_sub_field('training_date'); ?>"><span class="datetxt"><?php the_sub_field('training_date'); ?></a></li></span><?php endwhile; ?></ul>
    				</div>
    					<div class="dbn-box"><?php if( have_rows('durban_dates') ): ?> <h4 class="trainingcenter">Durban</h4> <?php endif; ?>
    						<ul class="traininglist"><?php while( have_rows('durban_dates') ): the_row(); ?><li><a href="?coursedate=<?php the_sub_field('training_date'); ?>"><span class="datetxt"><?php the_sub_field('training_date'); ?></a></li></span><?php endwhile; ?></ul>
    				</div>
    					<div class="ct-box"><?php if( have_rows('cape_town_dates') ): ?> <h4 class="trainingcenter">Cape Town</h4> <?php endif; ?>
    				<ul class="traininglist"><?php while( have_rows('cape_town_dates') ): the_row(); ?><li><a href="?coursedate=<?php the_sub_field('training_date'); ?>"><span class="datetxt"><?php the_sub_field('training_date'); ?></a></li></span><?php endwhile; ?></ul>
    				</div>
    					<div class="pta-box"><?php if( have_rows('pretoria_dates') ): ?> <h4 class="trainingcenter">Pretoria</h4> <?php endif; ?>
    				<ul class="traininglist"><?php while( have_rows('pretoria_dates') ): the_row(); ?><li><a href="?coursedate=<?php the_sub_field('training_date'); ?>"><span class="datetxt"><?php the_sub_field('training_date'); ?></a></li></span><?php endwhile; ?></ul>
    				</div></div>
    
    				<!-- Grid layout ends here -->
    				<?php endif; ?>

    It must start with….
    add_action( ‘woocommerce_before_single_product’,
    The rest I tried but could not succeed. I am a beginner in PHP

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

  19. Hello Rodolfo,

    Thank You for all the tutorials on WooCommerce – fantastic job!

    I”m trying to display custom field, which type is table (thanks to acf addon), but I also get result/output Array.

    Would be grateful for any help on this.

    1. Hey Simon – thanks so much for your comment! I suggest you ask ACF support – they should be able to help 🙂

  20. You are the best! Simple & straight to the point. Your code snipset works like a charm! 🙂

    1. Thank you so much Dimitris 🙂

  21. Hi Rodolfo,

    Thank you so much for your posts it really makes the life easier with Woocommerce! I have Advance custom fields plugin installed on my website but I want to display the values of my custom filed in short description area.
    How to achieve that?

    Thanks in advance,

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

  22. Hello!

    I want to add a custom field under the SKU field in single product page. The name of the field is factory_cody. How to add this to my theme?

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

  23. Hi Rodolfo,

    Thank you so much for this snippet and for all the content in your page! I wanted to add a custom button that would pull a file URL that then would be displayed after the product summary. I had to tweak it a little but it worked! If it helps anyone here is what I did:

    /* Adds the Ficha Tecnica Button into Single Product Page */
    add_action( 'woocommerce_after_single_product_summary', 'display_ficha_tecnica', 30 );
    
    function display_ficha_tecnica() {
        
        echo '<h3> Ficha Tecnica </h3>';
        echo '<a class="ficha_tecnica_btn" href=" '. get_field('ficha_tecnica'). ' ">Descargar Ficha Tecnica</a>';
        
    }
    
    
    1. Thanks a million Antonio!

  24. ciao Rodolfo, lo scrivo in Italiano (nel caso lo ritenessi opportuno traduco). Spero che tu mi possa aiutare. Io ho un form nella home page del sito che vorrei sviluppare fatto con CF7, 3 campi, questi 3 campi leggono da una tabella custom una lista di nomi (molte migliaia). L’utente inizia a digitare se il nome esite lo sceglie dalla lista, se non esiste compila il campo con il nome. Io adesso dovrei creare dei custom field nella pagaina di un prodotto e prendere questi tre valori dal form della home. Si può fare con ACF e il tuo tips? Io riesco a farlo da un form CF7 ad un’altro form CF7, ma poi non avrei questi campi nell’ordine come parte integrante desctittivo del prodotto acqusitato (si tratta di un prodotto virtuale – un servizio)

    1. Ciao Ale, yes, I only approve comments in English – sorry 🙂 Anyway, yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  25. Hi Rodolfo! Thanks for your snippet! How can i display my ACF under “short description” of a product? I’ve tested your snippet and i can see it but where it display it’s not the place i want…
    Thanks in advance!

    1. An update to my comment… I need to display the ACF here, take a look: https://snpy.in/4DjUOz
      Thanks!

      1. Hello Leo, thanks so much for your comment! I recommend you take a look at the single product page hooks (https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/) and simply change the hook I used in my snippet. There is also a video tutorial you should watch on that same page. Hope this helps!

  26. Does this work with the repeater field

    1. Hey Joe, thanks for your comment! Not 100% sure – have you tried yet?

  27. Hi Rodolfo, great article thanks – short and to the point!

    I’ve just written a tutorial on how to create and show WooCommerce custom fields without needing to write any code at all –
    you can read this at: barn2.co.uk/woocommerce-custom-fields-taxonomies. I hope it helps any non-coders who read Business Bloomer.

    1. Good stuff Katie 🙂 Good luck with your plugin!

  28. Hey Rodolfo,
    Note: Regarding my previous comment, you can delete that and remove this note. The PHP error was a conflicting plugin I was using, for some reason the error was just appearing in my thumbnails gallery.

    I’ve tried adding something right underneath the product image thumbnails (using: woocommerce_product_thumbnails) and it places it inside:

    <figure class="woocommerce-product-gallery__wrapper">  <figure>gallery-images-here</figure>ACF Goes Here</figure>

    So structurally that’s great. But visually it appears above the images. (See here: https://imgur.com/a/uUgZZ)

    I figure this is more of an issue of how the gallery is put together (seems a little messy/unstable), and I might try to completely rebuild the image-gallery or try something like WooThumbs. Any thoughts?
    Thanks!

    1. Hey Mason, thanks for your comment! Sorry but I can’t give complementary support here on the blog – thanks for your understanding 🙂 R

      1. Same problem for me, it seems to be a problem with hook woocommerce_product_thumbnails ? Deprecated right ?

  29. Hey Rodolfo, thanks for all the amazing content.

    I tried this today on WooCommerce 2.7 and got the following xdebug error:

    Notice: id was called &lt;strong&gt;incorrectly&lt;/strong&gt;. Product properties should not be accessed directly. Please see &lt;a href="https://codex.wordpress.org/Debugging_in_WordPress"&gt;Debugging in WordPress&lt;/a&gt; for more information. (This message was added in version 2.7.)
  30. HI Rodolfo,
    How can i display image before the add to cart, if I choose Field Type as Image on ACF?

    I tried to follow the code as below but it didn’t work. any suggestion?

    add_action( 'woocommerce_before_add_to_cart_button', 'diet');
     
    function diet() { 
      echo '<b>Diet:</b>'  .get_field('dairy_free'); 
    }
    
    

    The “diet” text gets echoed but not the image? What i get is ” Diet: Array”
    Not sure what I have to do?

    1. Hey Gagan, thanks for your comment! Please make sure in your field settings you have “Return value” = URL and then echo the image with:

      
      echo '<img src=' . the_field('image_test') . '">';
      
      
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 *