Creating Custom Templates for WooCommerce Products

In this lesson, you will learn how to create completely custom templates for WooCommerce products from scratch using the WordPress Block Editor and Toolset.

WooCommerce comes with a standard template for displaying your products. The theme you choose can make some styling changes and turn some features on or off, but anything more than that usually requires custom coding.

With Toolset, you can create advanced features and have full control over your site’s styling, with no coding necessary. You can recreate features you find on major retail sites, or dream up your own features and build them using custom post types and fields, post relationships, custom layouts, and more.

Here are some ideas of some things you can do using Toolset:

Create product Q&As using forms and custom repeating fields

Display products by brand or designer using custom taxonomies

Display upsells, and popular cross-sells using post relationships

Share special offers using conditional blocks with information from custom fields

Create shoppable outfit inspiration using post relationships

Show your store locations on a map using custom views

How to Design Product Templates

Go to Toolset → Dashboard and click the Create Content Template button in the Products row.
Use the WordPress Block Editor to design your template.
Insert the Toolset Heading and Single Fields blocks with dynamic sources to display your product title, content, custom fields and taxonomies.
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.

Standard elements of a single-product page

Be sure to check out our detailed lesson that explains how to display images with Toolset.

With Toolset, you can create a completely custom list of related products. These products will have something in common with the currently displayed one.

For example, you can easily create a custom list that display related products, upsells, or cross-sells.

To create a custom list of related products, you need to use a View inside your single-product template:

Go to Toolset → Dashboard and in the Products row, click to open your template for editing.
Insert the View block.
In the wizard, when selecting the content to display, select related products, upsells, or cross-sells.

Read the dedicated lesson to learn more about creating a custom list of related products.

Displaying a Cart Message

You should always display the WooCommerce Cart Message in your templates. It displays the «<Product X> has been added to your cart» message after user adds a product to the cart.

This message helps to confirm to users that a certain action they took actually happened.

To display this message, insert the Cart Message block into your template for products. You can also customize some of its options and appearance.

Design Tips for WooCommerce Product Templates

All Toolset blocks offer styling controls for typography, colors, margins and paddings. Besides these standard styling controls, Toolset offers a number of blocks which will help you design beautiful, responsive product templates.

Use the Toolset Grid block to create columns (how to design grids and columns).
Use the Toolset Conditional block to display some blocks according to logic conditions that you define (how to define conditional display).
Use the Toolset Container block to control the background, paddings and margins for groups of blocks.

To learn more, check out the complete lesson about styling templates.

Display dynamic sources using WordPress core and popular block plugins

Toolset comes with a big collection of blocks to display dynamic sources (custom fields, WordPress fields, WooCommerce fields, and taxonomies). However, you can also display Dynamic Sources using WordPress core blocks and popular block plugins.

Use the following steps to display a Dynamic Source in any supported block:

Insert or select a block.
In the right sidebar, expand the Dynamic Sources section.
Toggle on the option for any of the supported fields in that block.
Use the dropdowns that appear to select the dynamic source you want this block to display for that field.

Display Dynamic Sources inside all text blocks

Toolset allows you to display Dynamic Sources, like custom fields, inside any text blocks like headings, buttons, and more. This includes WordPress core blocks, Toolset blocks, and popular block plugins.

To display any Dynamic Source inline, insert or select a block with a text input and look for the Inline Fields button. Dropdown menus will appear, allowing you to select a Dynamic Source.

For more information, check out the lesson about displaying Inline Fields.

Ir al paso siguiente