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!
PHP Snippet: Display Advanced Custom Fields @ WooCommerce Single Product Page
/**
* @snippet Display Advanced Custom Fields @ Single Product - WooCommerce
* @how-to businessbloomer.com/woocommerce-customization
* @sourcecode https://businessbloomer.com/?p=22015
* @author Rodolfo Melogli, Business Bloomer
* @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
}
Hi,
I use the below code to display the ACF field at the bottom of the product archive, but it doesn’t work.
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 . ”; } }thank you
thats right in medilink theme
Cool
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 .
sorry i mean “if none of the fileds have value”….
You’re already checking if those fields exist below, right? Simply add another check on top, to see if one OR the other exist
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.
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!
How do I show advanced custom field in an existing single product tab? please reply. Thanks
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!
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!
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!
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…
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!
Hi, thanks so much for this! Is there a way I can display custom taxonomies too?
Also, is there any way I can wrap each custom field in a div?
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!
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.
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!
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!
I don’t, sorry
Hi, It would be great if you could do a tutorial for adding ACF fields to the checkout page too.
I’ll think about it. Thank you
Works great on Aug 6, 2019.
Thank you!
Excellent!
Hi Rodolfo,
thanks for this tutorial 🙂
Can You explain how to display field in product only if product is marked as “featured”?
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!
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 businessbloomer.com/woocommerce-customization * @sourcecode https://businessbloomer.com/?p=22015 * @author Rodolfo Melogli, Business Bloomer * @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 }Not sure Amy, is ACF set up properly? Works for me.
It still works, thanks so much, I spent hours trying to solve this! 🙂
Fantastic!
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!
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
How can i change the font of the field that is displayed?
Andrea, thanks for your comment! You’ll need custom CSS for that 🙂
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
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
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.
Hey Simon – thanks so much for your comment! I suggest you ask ACF support – they should be able to help 🙂
You are the best! Simple & straight to the point. Your code snipset works like a charm! 🙂
Thank you so much Dimitris 🙂
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,
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
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?
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
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>'; }Thanks a million Antonio!
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)
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
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!
An update to my comment… I need to display the ACF here, take a look: https://snpy.in/4DjUOz
Thanks!
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!
Does this work with the repeater field
Hey Joe, thanks for your comment! Not 100% sure – have you tried yet?
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.
Good stuff Katie 🙂 Good luck with your plugin!
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:
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!
Hey Mason, thanks for your comment! Sorry but I can’t give complementary support here on the blog – thanks for your understanding 🙂 R
Same problem for me, it seems to be a problem with hook woocommerce_product_thumbnails ? Deprecated right ?
See here please https://www.businessbloomer.com/woocommerce-add-content-below-the-single-product-page-images/
Hey Rodolfo, thanks for all the amazing content.
I tried this today on WooCommerce 2.7 and got the following xdebug error:
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?
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') . '">';