This tutorial teaches you how you can customize WooCommerce templates for single product pages directly from the WordPress admin and without any PHP coding.
A WooCommerce product template displays a single product, allows visitors to choose product options and to buy the product. Many templates also display related products and other offers meant to increase revenue. When the product includes additional custom fields or taxonomy, the template should usually display them as well.
The basic elements of a product template are:
- Product name (the ‘post title’)
- Product image
- Product description
- Product price
- Sale and stock indications
- Variation selector
- Related products
There are infinite ways to display these fields (and additional custom fields) in your templates. Here is an example of WooCommerce product templates:
How to build your own WooCommerce templates with Toolset
Of course, there are different ways to design templates for WooCommerce products. In this tutorial, we’re going to show how to design templates using Toolset plugins. The advantage of using Toolset is that you can build completely custom templates, without editing PHP.
You can start the design from scratch, or from one of the existing WooCommerce product templates in the Toolset modules library.
You need to install these Toolset components:
- Toolset Types – to add custom fields and taxonomy to products
- Toolset Views – to create custom product lists (like ‘related products’)
- Toolset Layouts – to visually design templates
- Toolset WooCommerce Views – to add the required support for WooCommerce products to Toolset
- Module Manager – to be able to import modules to your site
Visit the modules library to find an initial design that you like. Then, follow the instructions on how to import WooCommerce templates.
Editing product templates
You can start any template from the front-end. Make sure you’re logged-in to WordPress as an admin. Visit a product page and click on the Front-end Layouts Editor button to go into editing mode. Remember, you’re editing the template and not a specific product.
If you want to make quick tweaks on a template, you can stay on the front-end editor. For structure changes (like we’re going to do), click on Edit layout on back-end, to move to the backend editor.
Using a grid system to design templates
Toolset Layouts plugin lets you design using a grid. Working in a grid has many advantages. The main ones are:
- A grid makes it easy to achieve a clean design, without worrying about pixel positions
- The grid is responsive, so your designs will look great on screens of different sizes
The Bootstrap grid has rows and columns. You can add as many rows as you need. Normally, a row has 12 columns.
A ‘cell’ always occupies one row and as many columns as you need.
Inside a cell, you can place anything. Toolset offers a rich library of cells, including all the elements for WooCommerce products.
Moving and resizing elements in the template
You can move elements on the template in two ways:
- Move an entire row up or down
- Move a cell anywhere it fits (inside its current row or to a different row)
To resize a cell, click on one of its edges (left or right border) and drag it horizontally. You cannot resize cells vertically. The cell will automatically adjust its height according to its content.
Adding new elements to the template
You can add new elements to any part of the layout which has ‘empty’ cells. You can also add new rows, which always start as empty.
To insert an element into a template, click on it. Then, move the mouse left or right to set the element’s size and click again.
A dialog will open, asking you what kind of cell to add.
For WooCommerce templates, you will use the Visual Editor cell often. This cell allows you to add any field that belongs to the product, as well as custom fields and taxonomy.
When you’re editing a Visual Editor cell, click on the Fields and Views button to choose which field to include in the cell.
A single Visual Editor cell can include any number of fields that you want. Remember that the cell moves as one unit. If you want to be able to drag fields individually, place them in separate cells. If you want them to move as one unit (where you have complete control of the HTML structure), keep them in one cell.
We wrote detailed instructions on adding custom fields and taxonomy to product templates.
Dividing cells into grids
Many times, you need to display several elements next to one element. This means that a cell should include its own rows.
To do this, use the Grid cell. Insert a grid where you want to have several rows. When you create a grid, choose how many columns each of its rows will have. Then, use these rows and columns to add elements.
Styling templates by adding CSS classes to elements
You can set the HTML classes and IDs to any element in the template. Click on the pencil icon for any element to open it. Scroll to the bottom, where you’ll see the Class and ID fields. To make design even easier, Toolset comes with its own CSS editor. Instead of adding custom CSS to the theme, you can enter your CSS into the Toolset CSS editor and use the newly-created classes in the layout editor.
Adding lists of products and categories to the template
Besides displaying product fields, you can also add your own lists of products and categories to templates. You do this with Views.
A View displays any list of items, anywhere you choose. A basic View will display a simple list of elements. Advanced Views include filtering, pagination, AJAX updates and more.
To add a list of related products to a template, use the View cell. If you imported a WooCommerce module, you will find Views for related products. Try the different Views and see which one you like best.
As with anything that you build with Toolset, you can create your own Views or fully modify the related-products View that you’ve imported.
Want to try Toolset and see for yourself?
You can create your own test site in Toolset training system. Your site will include all required plugins and example products. You’ll be able to experiment with different designs and see how it feels to create WooCommerce templates with Toolset. Registration is free and takes a minute.
Try Toolset for free and see how it feels to built custom WooCommerce sites with it.