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        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=22015
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 
 
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 this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

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

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

    1. Excellent!

  2. 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!

  3. 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        Watch tutorial @ https://businessbloomer.com/?p=19055
     * @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.

  4. It still works, thanks so much, I spent hours trying to solve this! ๐Ÿ™‚

    1. Fantastic!

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

  6. 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 ๐Ÿ™‚

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

  8. 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 ๐Ÿ™‚

  9. You are the best! Simple & straight to the point. Your code snipset works like a charm! ๐Ÿ™‚

    1. Thank you so much Dimitris ๐Ÿ™‚

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

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

  12. 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!

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

  14. 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: http://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!

  15. Does this work with the repeater field

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

  16. 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!

  17. 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: http://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

  18. 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.)
  19. 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? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.