WooCommerce & Schema.org Is Awesome
Adding schema.org 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 schema.org markup to your WordPress theme in a previous post, but I recently needed to apply schema.org 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 = 'http://schema.org/';
// 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:
<?php
/**
* 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="http://schema.org/Offer">
<p class="price"><?php echo $product->get_price_html(); ?></p>
<meta itemprop="name" content="<?php echo $product->get_name(); ?>" />
<meta itemprop="price" content="<?php echo $product->get_price(); ?>" />
<meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
<link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" />
</div>
4. All Done
That’s all that’s required to add schema.org 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.
Loading ...
