Previously, I had a site selling computer parts through WooCommerce and had specification data needing to be uploaded with product details without overwriting the manufacturers own product description. The answer was Custom Fields and calling that data into its own tab.
Allow custom fieldsĀ to be viewed in a custom product tab in WooCommerce
Woocommerce as standard doesnāt come with a namingĀ tab system. You get a choice of Product Description, Additional Information, and Reviews. While the options in Additional Information could work,Ā it looks ugly and unmanageable with data imports.
Luckily, there is a way around it all. Make our own custom product tabs.
We import our product data into a Custom Field called āSpecificationā and set about creating a tab called āSpecificationā. This is done via child themeās function.php.
This code will Add a tab called Specifications, and display data from a custom field called āSpecificationā (yes I know, never updated it). Remember to change name and custom field to what you want to use.
Functions.php:
// woocommerce tabs
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
global $post, $product;
$specification= get_post_meta($post->ID, 'specification', TRUE);
// Adds the new tab
if (!empty($specification)) {
$tabs['test_tab'] = array(
'title' => __( 'specification', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
}return $tabs;
}
function woo_new_product_tab_content() {
global $post, $product;
$specification = get_post_meta($post->ID, 'specification', TRUE);
echo($specification);
}
get_post_meta is what calls the custom field data, via āID>field name, Trueā. This code loads it into an array for formatting and placing in the tab. There is possibly an easier way to do all of this, but it works. Priority defines where the tab will show, 30 is where āadditional informationā tab is so our code overrides it. The first tab has a default of 10.
Next, weāll need some Woocommerce templates in our child theme under Theme-Name/woocommerce, make sure āSingle-product/tabsā directory is there and create a new file called āSpecification.phpā Ā and ātab-specification.phpā, These will tell WooCommerce what to display from where.
Iāve named the custom product tab āSpecificationsā, remember to replace that with your intended name.
specifications.php:
<?php
/**
* Specifications Tab
*/
global $post;
$meta_content = apply_filters('the_content', get_post_meta($post->ID, 'Specification', true));
?>
<div class="panel" id="tab-specifications">
<?php $heading = apply_filters('product_specifications_heading', __('Product Specifications')); ?>
<h2><?php echo $heading; ?></h2>
<?php echo $meta_content; ?>
</div>
tab-specification.php:
<?php
// Get Custom Field "specifications" meta data
global $post;
$meta_content = apply_filters('the_content', get_post_meta($post->ID, 'Specification', true));
if (!empty($meta_content)) { ?>
<li><a href="#tab-specifications"><?php _e('Specifications'); ?></a></li>
<?php } ?>
Again, change the field names (in this example āSpecificationsā) to what you want to use.
Notes
This will also auto-hide the tab from users if thereās no data in the custom field to display.
This has been tested in WooCommerce (up to version 3, October 2017) and WordPress 4.3 with no issues. Should work fine unless something drastic changes in the way product templates work.
You can add information to this tab by adding data into the custom field on product edit pages. If you donāt see any section for custom fields, check under āScreen Optionsā on the top right and check its enabled.
Custom fields should allow HTML code to be displayed in most content, check your themeās sanitation methods if HTML tags appear randomly in custom fields.
Credits and sources
Thanks to Kieran Barnes and Sean Barton for their working examples and guides on how the tabs system works and its associated actions/filters.