How to Add Microdata for Products to WordPress Pages

Microdata makes it possible for search engines to understand important details about your site’s content.

We talked about WordPress microdata in a previous blog post. However, this time we will go more specific and show you how to add Products microdata to your WordPress pages without using a plugin.

This is very useful to promote the value of the products you sell through a WordPress site. Let’s start…

Microdata adds extra information to search results. When somebody is looking for your site’s products through Google, they see the ratings, price, number of reviews, etc…

Step #1. Check if your theme uses microdata

Some themes may provide microdata support, but many do not.

• Go to Google’s structured data testing tool.
• Paste the URL of your WordPress page where you showcase a product or service.
• Click Run test.

On the left side of the screen, you can see the HTML code of your page. On the right, you can see the detected microdata.

In this case, no microdata was found on my test and that’s why results are blank.

Step #2. Create a child theme

In order to add microdata to WordPress, you need to modify the theme files. So, we will use a child theme.The child theme allows us to keep the customizations secure in case the original theme is updated later.

If you are new to child themes, we recommend that you use the Child theme configurator plugin to easily create the child theme and copy the required files where our changes will live:

Once Child theme configurator is installed and activated, go to:

• Tools > Child Themes > Files.
• Select the files that render a page (commonly page.php)
• Click Copy Selected to Child Theme

At this point, your child theme should be activated. You can confirm this from Appearance > Themes.

Step #3. Rename the page template from your child theme

Manually rename the page.php file you just copied to your child theme. Find this file via FTP or cPanel) on /wp-content/themes/your-child-theme-folder/.

Rename the file to something unique such as page-product.php or page-custom.php – always leaving “page-” as prefix.

Now, through your WordPress dashboard:

• Go to Appearance > Editor.
• Select page-product.php file (or whichever name you decided)

On the beginning of the file, add this code wrapped by PHP tags:

/**
* Template Name: Page Product
*/

This is how it will look:

The code above will help WordPress to detect our custom template file when we edit our page later.

Step #4. Set product schema

We’re going to use the schema that is described on Schema.org:

• https://schema.org/Product
• http://schema.org/AggregateRating
• http://schema.org/Offer

Now let’s continue editing the page-product.php file.

Look for the containers and add itemscope itemtype=”http://schema.org/Product”, like this:

<div id="page-container" itemscope itemtype="http://schema.org/Product">
…
</div>

Now, look for the tag that wrapper the title, and add itemprop=”name”.

<h1 itemprop="name"><?php the_title(); ?></h1>

Inside the page container, add this snippet replacing the price, priceCurrency and availability contents with your own.

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta content="9.99" itemprop="price" />
<meta content="USD" itemprop="priceCurrency" />
<meta content="instock" itemprop="availability" />
</div>

Below, add this microdata with the rating, replacing the ratingValue (from 1 to 5 stars) and ratingCount (number of reviews/votes) content with your own:

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="5" />
<meta itemprop="ratingCount" content="19" />
</div>

• Click Update file button when you’re done.

Since every theme has its own way of structuring content, the result will be different. However, the end result will look similar to the image below:

Step #5. Edit your product page

• Go to Pages > Your page.
• Choose the Template, which in this example is “Page product”.

• Click the Update button when you’re done.

Step #6. End result

Try Step #1 again. This time the microdata should be displayed, and with patience, that information will be reflected in Google search results.