Adding and displaying custom WooCommerce Product fields

Here is an example.  I had a client that wanted to display an ISBN, or barcode, number for each product to certain customers.  For that we create a custom field called:  isbn

That will be the postmeta key that you can use to get the post meta for display to your customers. In order to see that info, though, we are going to have to modify a WooCommerce template. WooCommerce makes this very easy, and your theme may already have some built-in custom WooCommerce templates.  I won’t go into all those details, but the best way to do this is to have a child theme setup so that you can override any templates in your parent theme without them getting wiped out any time you update the parent theme.  In your child theme you create a folder called “woocommerce” (without the quote), and then follow the directory structure and names of the WooCommerce templates you want to customize.

Click Here for the WooThemes docs page on overriding templates with your theme.

Click Here for an article on creating a child theme and overriding WooCommerce templates, with an example on how to modify buy button link.

A good place to put our ISBN field might be in the meta.php template that WooCommerce uses to show any product meta.  To make it look like the SKU field, and appear right below SKU, I added the code below the code section where WooCommerce shows SKU with a bit of custom formatting like this:

<span class="sku_wrapper isbn_wrapper">ISBN: <span class="isbn"><?php echo esc_html( get_post_meta(get_the_ID(), 'isbn', true) ); ?><span></span>

I put it in a span using the sku_wrapper class Woocommerce sets up, but added an isbn_wrapper class to it, and class isbn around the actual isbn product meta, so you can style it better.  Note the ‘isbn’ as the second parameter of the get_post_meta function call.  Modify that to match your own custom field key, leaving the single quotes around it. For best security practices when outputting anything we get from the database, we wrap the output in the esc_html function.

Make your custom meta.php file and put it inside the woocommerce>single-product folder of your theme, and it will work. Modify the ISBN: part of the text to make your field label say whatever you want, and modify the class names and meta key as desired to match your own custom field. Then all you need to do is create the custom field for your products, and type in the info.

If you are using my WooCommerce Wholesale Ordering extension, and only want to show the info to Wholesale Customers, my plugin has a couple of conditional functions you can use to check if the current user is a wholesale customer and if wholesale prices/info should be displayed.  Check out my post on conditionally displaying info to Wholesale Customers.

<?php
/**
 * Single Product Meta
 *
 * @author        WooThemes
 * @package    WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
   exit; // Exit if accessed directly
}

global $post, $product;

$cat_count = sizeof( get_the_terms( $post->ID, 'product_cat' ) );
$tag_count = sizeof( get_the_terms( $post->ID, 'product_tag' ) );

?>
<div class="product_meta">

   <?php do_action( 'woocommerce_product_meta_start' ); ?>

   <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

      <span class="sku_wrapper"><?php _e( 'SKU:', 'woocommerce' ); ?> <span class="sku" itemprop="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : __( 'N/A', 'woocommerce' ); ?></span>.</span>

   <?php endif; ?>

   <span class="sku_wrapper isbn_wrapper">ISBN: <span class="isbn"><?php echo esc_html( get_post_meta(get_the_ID(), 'isbn', true) ); ?><span></span>

   <?php echo $product->get_categories( ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', $cat_count, 'woocommerce' ) . ' ', '.</span>' ); ?>

   <?php echo $product->get_tags( ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', $tag_count, 'woocommerce' ) . ' ', '.</span>' ); ?>

   <?php do_action( 'woocommerce_product_meta_end' ); ?>

</div>