WooCommerce Tutorial

06Create Templates for WooCommerce Product Pages with Toolset

This tutorial teaches you how to design WooCommerce templates for single-product pages using Toolset plugins and without having to edit PHP.

This guide is the sixth step of our WooCommerce tutorial: How to build an e-commerce website in 12 steps.

Sometimes you need to show WooCommerce products in a unique manner.

Buy Toolset

Custom Fields in WooCommerce

Custom Fields

You may want the product templates to include custom fields and taxonomy.

Special offer for members

You may want to show products differently to people who are members of your site as opposed to visitors.

Special offer for members
Related posts in WooCommerce

You may want to connect products with other post types on the site.

Digital products

Lastly, if you sell digital products such as e-books or online courses, you may require a completely different product layout.

Digital products in WooCommerce
In all these cases, Toolset allows you to design custom templates for WooCommerce products without have to write PHP. In the following, we explain the exact steps to accomplish this design task.

Creating Custom Single-product WooCommerce Templates: Steps to Follow

You can follow the steps on the Toolset & WooCommerce training site, which is free for use.

6.1: Switch from WooCommerce to Toolset templates

The appearance of a single-product page is determined by the WooCommerce template and the theme you use.

If you want to create a custom template, first you must disable this WooCommerce default template and tell WordPress to use yours instead.

In the WordPress admin:

  • Go to Toolset -> WooCommerce Views.
    If you cannot see this option, ensure that you have the Toolset WooCommerce Views plugin installed and activated in your site.
  • In the Product Template File section, select WooCommerce Views plugin default single product template.
How to switch from WooCommerce to Toolset templates
How to switch from WooCommerce to Toolset templates

6.2: Create new template layout for products

Create a new (blank) “Content Template” for products.

In the WordPress admin:

  • 1. Go to Toolset -> Dashboard.
  • 2. Scroll down to the Custom post types created by the theme and other plugins section.
  • 3. Locate the row for Products.
  • 4. In the Template column, click on Create template.
How to create a new template for product pages
How to create a new template for product pages

6.3: Add WooCommerce fields and other content

Our template starts as empty and you can add cells to it. These cells will include product fields.

A field can be anything that belongs to the product, including its title, image, description, and price. You can also add an “add to cart” button, custom fields, and even taxonomy.

For WooCommerce templates, you will use the Visual Editor cell most of the time.

Let us add a product image to your layout.

  1. Add a new Visual Editor cell to your layout.
  2. Click on the Fields and Views button.
  3. Jump to the WooCommerce section and click the Product image.
How to add cells with WooCommerce fields to your template
How to add cells with WooCommerce fields to your template

Your fields will be inserted as shortcodes. You can wrap them in additional HTML tags, if necessary.

Repeat the previous steps to insert more fields, such as:

  • Post title
  • Post excerpt
  • Product price
  • Add to cart button – single product page
  • Product tabs – single product page

In the next part, you will learn how to add custom fields and taxonomies to WooCommerce product templates.

6.4: Rearrange fields

Once the fields have been added, you can rearrange them by moving them up or down. You can even resize your cells.

get-low
Rearranging fields – click to play

6.5: Style the product template using HTML and CSS

You can add HTML classes and IDs to any element in the template. You can apply styling in different ways. You can add classes:

  • for the entire row
  • for the entire cell
  • or inside Visual cells
How to add custom IDs and classes to your template
How to add custom IDs and classes to your template

Visit the Adding custom styling to a layout documentation page to review the details.

6.6 Summary

In this tutorial, you have learned how to replace the default WooCommerce template for individual product pages with your custom template. You have also learned how to insert WooCommerce product fields in your layout and to style your template.

Showcase

Visit the Toolset showcase by the eCommerce category to see more WooCommerce-based sites customized with Toolset plugins.

Continue to learn how to display custom fields and custom taxonomies in product templates. You can also jump to learn how to create a custom shop page.

Step 7

Build the perfect website today

Toolset allows you to add some of the most important features for your website in less time than ever. That’s because with Toolset you do not need to write PHP – saving you hours of needless coding.

You no longer need to manage dozens of complex plugins for your website. You can use the full Toolset package to build, run and maintain it all.

Whether you are a WordPress newbie or an experienced web developer, we have the plan for you based on your needs and budget.