Customizing WooCommerce product templates is one of the top things developers seek to do. In this tutorial, you will learn how to do this using WooCommerce Views and a child theme. While the tutorial is based on a Genesis Framework, concepts can be applied to basically any theme.

How WooCommerce Views works

WooCommerce Views and Views hookes to WordPress function the_content() to alter and output a customized design based on the defined shortcodes. However, there are things that are outside of Views Content Template control. Examples are sidebar, header and footer sections of the product template. These sections cannot be customized with Content Templates. To customize this sections you will need to edit the PHP product templates that you are using.

Getting started

To follow this tutorial from scratch, you can start with a clean WordPress installation, latest WooCommerce plugin and latest Toolset plugins versions installed. It is also recommended to use the latest version of the Genesis Theme Framework.

In this tutorial, we will go over the following steps:

  1. Create a Genesis Child Theme
  2. Activate the Child Theme and WooCommerce
  3. Activate the required Toolset Plugins
  4. Create a Content Template for your Products
  5. Assign WooCommerce Views Default PHP Template
  6. Copy WooCommerce Views single-product.php to your theme’s WooCommerce folder
  7. Save the copied PHP single-product.php in the WooCommerce Views settings
  8. Edit the single-product.php PHP Template inside your Child Theme

1. Create a Genesis Child Theme

When you want to change the PHP templates to customize WooCommerce product templates with WooCommerce Views in a theme, it is best to use a child theme. This way, all the customization is separate from the main theme. Additionally, when a theme gets updated all your customization will not be overwritten by the update.

If you are new to child themes, we recommend to read the official WordPress guide about child themes.

The most basic Genesis Child Theme that allows you to customize WooCommerce templates requires only the following three things:

a.) The style.css file

b.) The functions.php file

c.) A WooCommerce folder inside your child theme’s folder

To get started, we first create a folder in your ../wp-content/themes directory. In our example, we will name it simply genesis-child.

We can now create the style.css file. Following is an example of a required content for this file to get started:

/*
Theme Name: Genesis Child
Theme URI: https://wp-types.com/
Description: Child theme for Genesis
Author: Toolset
Author URI: https://wp-types.com/
Template: genesis
Version: 1.0
*/

Of course, you can customize this to your liking.

We put genesis under Template. This tells WordPress that our parent theme is located under the “genesis” folder name. If you want to use another theme, simply change this value and use the correct parent theme folder name.

Now, we can create our child theme’s functions.php file. Following is an example of a required content for this file to get started:

<?php
/** Start the engine */ 
require_once( get_template_directory() . '/lib/init.php' );

add_theme_support( 'html5' );
add_theme_support( 'genesis-responsive-viewport' );
add_theme_support( 'genesis-footer-widgets', 3 );
add_theme_support( 'woocommerce' );

/** Best practices on Enqueuing CSS of parent theme in child theme*/
/** Read here: http://codex.wordpress.org/Child_Themes */

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
	wp_enqueue_style( 'genesis-wcviews-parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'genesis-wcviews-child-style', get_stylesheet_uri(), array( 'genesis-wcviews-parent-style' ) );
}

As the last step of this part, we need to create a blank folder named woocommerce, inside our genesis-child theme directory. We will not put any template files there yet. We will do this later.

2. Activate the Child Theme and WooCommerce

We can now login to our site’s WordPress administration and go to Appearance->Themes to activate our Genesis Child Theme.

Now is a good time to activate the WooCommerce plugin. Once activated, we can add some test products for testing. It is recommended to add one simple product, a variation product and a product that is on sale.

The following image shows how a default variation product looks like.

Default look of the variation product on the front-end
Default look of the variation product on the front-end

You can notice that there is an empty widget on the bottom. Don’t worry about it for now, we can tweak it later on.

3. Activate the required Toolset Plugins

Once we have confirmed that our default WooCommerce installation is fine, we are ready to activate the Toolset plugins. We need the following three Toolset plugins for the most basic implementation.

  • Toolset Types (version 2.0 or higher)
  • Toolset Views (version 2.0 or higher)
  • Toolset WooCommerce Views (version 2.6.0 or higher)

You can download all of these plugins from your account’s download page.

4. Create a Content Template for your Products

Content Templates created with the Views plugin allow us to customize “single” pages of our custom post types. WooCommerce Views plugin allows us to create content templates for our WooCommerce Products as well.

Following steps let us create a Content Template for our Products:

  • Go to Toolset->Content Templates.
  • Click the Add New Content Template button. A dialog box for creating a Content Template will appear.
  • Give a name to our Content Template, for example “My Product Template”.
  • Click the Single Pages and on the list of available post types, check Products. This will assign this Content Template to “single” pages of our Products.
  • In the Content Template editor, put the following code into the code editor found under the Template section:

<h3>[wpv-post-title]</h3>

[wpv-woo-breadcrumb]
[wpv-add-to-cart-message]
[wpv-woo-onsale]
[wpv-woo-product-image size="shop_single" output=""]
How much is this? [wpv-woo-product-price]
[wpv-woo-buy-options add_to_cart_text="Buy this!"]
[wpv-woo-display-tabs]

The above example is a very simple, “dummy design” for our single product page.

If you check the front end, it is still using the default WooCommerce templates. It is because you have not yet assigned a compatible PHP template that you can use for Single product Content Templates.

5. Assign a Product Template File

Starting with WooCommerce Views 2.4 version, the plugin offers a default single-product.php template file that is compatible for customization work done using Toolset.

To use this, we need to go to Toolset->WooCommerce Views settings and under the Product Template File, select the WooCommerce Views plugin default single product template option.

Selecting the right template file on the WooCommerce Views options page
Selecting the right template file on the WooCommerce Views options page

After selecting this option, we need to click the Save all Settings at the bottom of the page.

If we look at our variation product example, it now looks like the following image.

Variation product example on the front-end after applying basic changes
Variation product example on the front-end after applying basic changes

As you can see, the HTML markup of the design used in our Content Template has now been applied.

But what if we want to remove the “Primary Sidebar Widget Area”?

This area is not controlled from within the Content Template but is rendered as part of the overall PHP template.

To be able to remove this, we need to customize the default single-product PHP templates. No problem, we can do this in the following three steps.

6. Copy WooCommerce Views single-product.php to your theme’s WooCommerce folder

We use the following steps to copy the single-product.php to our child theme’s WooCommerce folder:

  • Go to the WooCommerce Views plugin’s folder.
  • Go to the templates folder.
  • There are two PHP template files: single-product.php and archive-product.php.
  • Copy only the single-product.php to the woocommerce folder inside your Genesis child theme. We created this folder in the first step of this tutorial.

In our example, we will copy this template file into ../themes/genesis-child/ folder.

Important: It is not advisable to edit the template files directly inside the WooCommerce and WooCommerce Views plugins’ folders. You should always copy them to your child theme’s woocommerce folder and edit them there.

7. Select the copied PHP single-product.php in the WooCommerce Views settings

Now that we have copied the template file, we need to select it in our WooCommerce Views settings. Go the Toolset->WooCommerce Views and you should see the new option for added template, for example Genesis Child Theme Custom Product Template.

Click the Show template link to show additional information. This way, we can confirm that its path is correct (e.g. coming from your child theme).

New option for our copied template file in WooCommerce Views settings
New option for our copied template file in WooCommerce Views settings

Select the new option and click the Save all settings button. WooCommerce Views will now use this custom template inside your Genesis child theme.

8. Edit the single-product.php PHP Template inside your Child Theme

We are now ready to customize the single-product.php template file. Changes are immediately applied to the single products front-end pages since we already assigned this template to your single products.

Open the newly copied single-product.php file with your favorite PHP editor. For example, if we want to remove the unnecessary sidebar widget, we can simply comment out the code that renders it. To do this we change the following line:

do_action('woocommerce_sidebar');
to:
//do_action('woocommerce_sidebar');
Adding double slashes to the beginning of the row, comments out the line in question. This means that the code on that line will not be rendered anymore. After saving these changes, we can see that this widget area is not shown for our single products anymore.

Single product page after altering the single-product.php template file
Single product page after altering the single-product.php template file

Wrapping up

In this tutorial, we learned the basics of customizing single product pages when using WooCommerce. This includes:

  • Creating and using a child theme
  • Creating a Content Template for your Products using Views
  • Selecting the right WooCommerce PHP template in the WooCommerce Views settings
  • Creating a custom copy of the single-product.php file template
  • Editing a custom copy of the single-product.php file template