This tutorial explains how to import the Single Product template layout from the Toolset Modules Library for use instead of the WooCommerce default template.

Using Toolset plugins, you can create a custom template for Single Product pages for any theme. In a template designed with Toolset, you can:

  • modify the layout of your fields using drag-and-drop
  • add custom fields and taxonomies
  • remove fields, etc.

You can customize a template from scratch. However, to save time, import a ready-to-use template from our Toolset Modules Library.

The WooCommerce product template that we created looks very similar to the default templates that ship with WooCommerce. The major difference is that templates built with Toolset can be easily customized without having to edit PHP.

Single Product page displayed with the Toolset template layout, which can be customized without PHP (Storefront theme)
Single Product page displayed with the Toolset template layout, which can be customized without PHP (Storefront theme)

Turning off the default WooCommerce Single Product template

WooCommerce comes with its own template for a Single Product page. This WooCommerce Single Product template determines the product information that will appear on your product page.

We begin by disabling the default template in order to use a Toolset template that renders the same output.

Turning off the default WooCommerce Single Product template
Turning off the default WooCommerce Single Product template

  1. Go to Toolset -> WooCommerce Views.
  2. In the Product Template File section, select the WooCommerce Views plugin default single product template (single-product.php) option.
  3. Click Save All Settings.

From this point, Toolset is responsible for the design of the WooCommerce templates. You can design a template from scratch using Toolset. To save time, let’s import a ready-to-use template.

Importing the layout to be used for Single Product pages

Now we will import the Single Product module from our Toolset Modules Library.

Downloading the Single Product module
Downloading the Single Product module

  1. Go to the Module manager page.
  2. Scroll down to the e-commerce section.
  3. Locate the Single Product module.
  4. Click the Download button to download the zip file to your drive.

How to import a module
How to import a module

  1. Ensure you have the Toolset Module Manager plugin installed.
  2. Go to Toolset -> Export/Import.
  3. Switch to the Module tab.
  4. Click Choose file
  5. Locate the file you have just downloaded. Its name should be “module_single_product_*.”
  6. Click Import.

How to import modules
How to import modules

The next screen confirms that the Single Product layout will be added.

  1. Click Import Selected Items

If the import was successful, you will receive a message, “(1) Layouts were created.”

How to import modules
How to import modules

  1. Click Go to modules.

 

You will see that a new module, called Single Product, has been imported and will includes the Single Product template layout.

Let’s check the appearance of the Single Product layout.

Assigning the Single Product layout for Products

Single Product layout
Single Product layout

  1. Go to Toolset -> Layouts
  2. You should see a new template layout called Single Product

For the time being, this layout is not used anywhere on your site.

Single Product Layout
Single Product Layout

  1. Click on the layout to open it for editing.

The layout includes all WooCommerce fields arranged in two columns to reflect the original design of the WooCommerce template.

You can now easily customize this layout by using a convenient drag-and drop approach.

Assigning a layout to all our products
Assigning a layout to all our products

Let’s assign this layout to all our products (i.e., for use by all existing and future products).

  1. Scroll down the screen.
  2. Click Change how this Layout is used.

Assigning a layout to single product pages
Assigning a layout to single product pages

  1. Select Products.
  2. Click Update.
  3. Click Close.
  4. Preview your layout.

Your Single Product page should look like the following screenshot.

Single Product page by Toolset. Storefront theme
Single Product page by Toolset. Storefront theme

Note that you can also use the Front-end Layouts Editor button to switch to front-end editing (i.e., to edit your fields directly from the front-end).