Woocommerce is a great free ecommerce plugin for WordPress. Because of Woocommerce’s extensibility, adding custom tabs to a product is pretty easy. So let’s do a little bit of WordPress development, and add Woocommerce tabs populated with content from an Advanced Custom Field we’ll add to the product
post type.
Advanced Custom Fields Setup
After you’ve installed Woocommerce and Advanced Custom Fields, you’re ready to get going. Head into the Custom Fields area in the WordPress admin, and add a new field group. In the field group, add a WYSIWYG field called “Tech Specs”. The field name should automatically be set to tech_specs
. We’ll use this later.
Before saving your field group, you’ll want to limit this custom field to products only. Scroll down to the Location meta box, and set it up to only appear for the product post type. It should look something like this.
Save your field group, and you’re ready to add your custom tab to Woocommerce.
Woocommerce Tabs Code
We’ve got our custom “Tech Specs” field, so let’s move on to customizing the product entry. The implementation is fairly simple. We just need to hook into the proper Woocommerce filter, and create a function to output our new custom field.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | add_filter( 'woocommerce_product_tabs', 'my_theme_product_tabs' ); function my_theme_product_tabs( $tabs ) { // ensure ACF is available if ( !function_exists( 'get_field' ) ) return; $content = trim( get_field( 'tech_specs' ) ); if ( !empty( $content ) ) { $tabs[] = array( 'title' => 'Technical Specifications', 'priority' => 15, 'callback' => 'my_theme_tech_specs' ); } return $tabs; } function my_theme_tech_specs() { echo get_field( 'tech_specs' ); } |
Here, we’ve hooked into the woocommerce_product_tabs
filter with my_theme_product_tabs
. Line 13 is where we add a new tab, with a title, a priority, and a callback to output our content. Before adding the tab, I added a couple of checks. First making sure that we have access to the get_field
function to access our custom field content (see line 24). Second, to make sure our product has technical specifications. With this code, we can hide the tab if there’s nothing to show.
Now add/edit a Woocommerce product to have some Tech Specs, and view your handiwork on the front end of your site.
Follow the same implementation, and you can add as many Woocommerce tabs as you like. That’s really all there is to it.
Hi Spencer,
Thanks so much for this – I just tried it and everything went fine 🙂
Really happy as I try and avoid doing things like this as they normally go wrong.
I’m only guessing I need Custom Fields – Is it right that attributes are not too good at storing numbers if every product will have a different number ? I’m just guessing as when I add a number to an attribute it seems to save it as an option like it would text.
Chris
..although I think an attribute is better as then I can sort on it
I think I understand what you’re asking. Your custom field (attribute) is saved as post meta, so you can create custom queries, sorting it numerically, if needed.
Yes so in performance terms with say 10000 products, filtering on a numeric attribute should be exactly the same as filtering on a numeric custom field ? – ie 1) woo doesnt optimise attributes and 2) an attribute would be fine with a different number per product.
I haven’t looked through the framework specifically, but I would think so.
good news – thanks
Works like a charm! thanks 🙂
Thanks Men!
This code has me on the verge of what I am trying to accomplish. Thank you! So I have my Advanced Custom Fields set up. The information placed into those advanced custom fields are now showing up on my product pages when content is placed in those fields. Now, what I am ultimately trying to do is get my imported data (via CSV import Suite) into those fields.
What’s strange is that when I don’t have ACF activated, the data of my CSV creates the custom fields I need with the values imported. I feel like I am missing one snippet of code. Have any ideas? It would be greatly appreciated! Thanks!
We are setting up a new site for our company. Each product we sell has a description and a short description, and they are displaying properly on our site. For each product, we’ve also set up a custom field which contains copy for any awards and accolades that a product has received. We would like to display this content under a new tab on the product detail page. I’ve been searching around for information on how to do this but not sure I’ve found the right answer. Your post seemed close but I just wanted to make sure what code I need to add, to what file, and exactly where it should be placed within that file. Any help would be greatly appreciated. Thanks.
This is pretty much what you’re looking for. Your code can just go in the functions.php file of your theme (but you can structure your site code practically however you like). If you’re new to WordPress or development in general, I’d highly recommend hiring a developer. This type of customization should come pretty cheap.
I made a new tab with ACF and implemented it in my themes function.php and it works perfectly as it should. But I need another tap too, and when I implement it in the same way as the first, I get the following error:
Fatal error: Can not ready clare nova_wp_product_tabs () (previously Declared in /var/www/www.wannafinddemo5.dk/www/wp-content/themes/nova-wp/functions.php:15) in /var/www/www.wannafinddemo5 .com / www / wp-content / themes / nova-wp / functions.php on line 61
How do I fix that problem?
i want to put product in my custom field. Scortcode dosent work width this example.
Wow – these i have searched!
Many Thanks!!
— and worked without any plugin!
Yeahhh!
—-stooni
Hi Spencer,
Thanks for the snippet.
Just a quick question, if I wanted to add more one field to a tab what would I need to add.
For example displaying another field beneath the “tech_specs” field within the “Technical Specifications” tab on the front-end.
Thanks!
Nam
Dw I worked it out using the get_fields function to retrieve all values and their labels.
Nam
Please explain how yo showed labels on the frontend.
Hi Sir,
Could you please paste code showing how you did this? Need multiple fields with labels and cannot figure out how to make work.
Please explain. How do you show the label when the fields are displayed?
Following the example in the post, you can add labels directly in the
my_theme_tech_specs
callback function. So instead of echoing just theget_field
you can write out anything you need, including a label.Someone earlier in the thread used the ACF
get_fields
function. You can see that in action in the ACF documentation.Disregard, Figured it out…
I did this. Your opinion?
add_filter( ‘woocommerce_product_tabs’, ‘ms_product_tabs_engine’ );
function ms_product_tabs_engine( $tabs ) {
// ensure ACF is available
//if ( !function_exists( ‘get_field’ ) )
//return;
$content = trim( get_fields );
if ( !empty( $content ) ) {
$tabs[] = array(
‘title’ => ‘Engine’,
‘priority’ => 15,
‘callback’ => ‘product_engine_specs’
);
}
return $tabs;
}
function product_engine_specs() {
if(get_fields)
{
echo ‘Engine Type: ‘ . get_field(‘engine_type’) . ”;
echo ‘Displacement: ‘ . get_field(‘displacement’) . ”;
}
Yup. Looks like it would accomplish what you need it to.
This is a great tutorial. Thank you for sharing! I’ve added this code and another one for another tab for my product however it seems that the text in both tabs run together. How do I make it so the text I put in my “Ingredients” tab is the only text I see when clicking on that tab? (instead of seeing both my “Ingredients” AND “Directions” tab content together).