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.
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.
- Go to Toolset -> WooCommerce Views.
- In the Product Template File section, select the WooCommerce Views plugin default single product template (single-product.php) option.
- 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.
Now we will import the Single Product module from our Toolset Modules Library.
- Go to the Module manager page.
- Scroll down to the e-commerce section.
- Locate the Single Product module.
- Click the Download button to download the zip file to your drive.
- Ensure you have the Toolset Module Manager plugin installed.
- Go to Toolset -> Export/Import.
- Switch to the Module tab.
- Click Choose file
- Locate the file you have just downloaded. Its name should be “module_single_product_*.”
- Click Import.
The next screen confirms that the Single Product layout will be added.
- Click Import Selected Items
If the import was successful, you will receive a message, “(1) Layouts were created.”
- 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.
- Go to Toolset -> Layouts
- You should see a new template layout called Single Product
For the time being, this layout is not used anywhere on your site.
- 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.
Let’s assign this layout to all our products (i.e., for use by all existing and future products).
- Scroll down the screen.
- Click Change how this Layout is used.
- Select Products.
- Click Update.
- Click Close.
- Preview your layout.
Your Single Product page should look like the following screenshot.
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).