Posted on

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
 * @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>Trade Price:</b> ' . get_field('trade');
  // Note: 'trade' is the slug of the ACF
}

Where to add this code?

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 delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

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?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

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

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

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

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

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

    1. Thank you so much Dimitris ๐Ÿ™‚

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

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

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

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

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

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

  10. Does this work with the repeater field

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

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

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

  13. 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.)
  14. 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're writing code, please wrap it between: [php] code_here [/php]

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.