Skip Navigation

Creating Custom Templates for Single WooCoomerce Product Pages

Single-product pages display individual products of your WooCommerce site. The appearance of a single-product page is determined by the WooCommerce template and the theme you use. Using Toolset, you can replace that default WooCommerce template with your custom one.

Single Product page designed with Toolset
Single Product page designed with Toolset

You’ll replace the default WooCommerce template for single-product pages with a Toolset one. This will give your full control over the layout and the fields to include.

Switching from WooCommerce to Toolset templates

Make sure you have the Toolset WooCommerce Blocks plugin active. Check Chapter 1 to see the complete list of Toolset plugins you need.

First, switch your site to use the Toolset template for single-product templates.

  1. Go to Toolset → WooCommerce Blocks.
  2. In the Product Template File section select the WooCommerce Blocks plugin default single product template option.

How to Design Product Templates

  1. Go to Toolset Dashboard and click the Create Content Template button in the Products row.
  2. Use the WordPress Block Editor to design your template.
  3. Insert the Toolset Heading and Single Fields blocks with dynamic sources to display your product title, content, custom fields and taxonomies.
  4. Choose blocks from the Toolset WooCommerce section to display WooCommerce elements such as the Add to Cart Button, Product Price, Rating, and more. You will notice that all Toolset WooCommerce blocks allow you to select a custom or native output type.

Toolset WooCommerce Blocks section
Toolset WooCommerce Blocks section

Product Template Design Tips

  • Use the Toolset Grid block to create columns.
  • Don’t forget to insert the Cart Message block to your template. It will display the “<Product X> has been added to your cart” message after adding a product to the cart.
  • Use the Toolset Conditional block to display some of your blocks conditionally. For example, you can display a set of blocks only if a specific field is not empty.

Main Toolset Block Used in this Lesson

Display a single field