Add Markup to WooCommerce Products

WooCommerce & Is Awesome

Adding markup to a well coded WordPress theme is relatively straight forward and doesn’t take very long to get setup.

I covered how to add markup to your WordPress theme in a previous post, but I recently needed to apply markup to an e-commerce site using WooCommerce.

It’s surprisingly easy to do. You’ll need to be using a child theme for the steps that follow.

1. Setup the necessary function in the functions.php file for your theme

Add the following to your functions.php file. It creates a custom function, schema_org_markup.

function schema_org_markup() {
    $schema = '';
    // Is single post
    if ( function_exists(is_woocommerce) && is_woocommerce() ) {
      $type = 'Product';
    elseif ( is_single() ) {
        $type = "Article";
    else {
        if ( is_page( 644 ) ) { // Contact form page ID
            $type = 'ContactPage';
        } // Is author page
        elseif ( is_author() ) {
            $type = 'ProfilePage';
        } // Is search results page
        elseif ( is_search() ) {
            $type = 'SearchResultsPage';
        } // Is of movie post type
        elseif ( is_singular( 'movies' ) ) {
            $type = 'Movie';
        } // Is of book post type
        elseif ( is_singular( 'books' ) ) {
            $type = 'Book';
        else {
            $type = 'WebPage';
    echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';

2. Call schema_org_markup() In Your Header

Open up the header.php file for your child theme and find the html tag, usually towards the top. You’ll want to call the schema_org_markup function inside that html tag, like so:

<html <?php schema_org_markup(); ?> <?php language_attributes(); ?>>

3. Create a WooCommerce template file in your child theme

Create a directory in your child theme folder named woocommerce. Inside the woocommerce folder, create another new folder named single-product. Inside the single-product folder, create a file named price.php. The contents of your price.php file should look like this:

 * Single Product Price, including microdata for SEO
 * @author  WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4

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

global $post, $product;
<div itemprop="offers" itemscope itemtype="">
    <p class="price"><?php echo $product->get_price_html(); ?></p>
    <meta itemprop="price" content="<?php echo $product->get_price(); ?>" /> 
    <meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
    <link itemprop="availability" href="<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" />

4. All Done

That’s all that’s required to add markup to individual WooCommerce product pages. Pretty simple.

If you run into any issues or it doesn’t seem to be working for you, let me know. I’ve only tested this with two themes, Vantage and Virtue. Remember, this only works with well-crafted WordPress themes. Doing this with purchased themes from ThemeForest or other paid theme marketplaces can be significantly more difficult.

Comments are open so let me know if you have any issues, additions, questions, or suggestions.