This tutorial teaches you how to add custom fields and taxonomy to WooCommerce product templates.

We will demonstrate how you can display product custom fields and taxonomies on your single-product page and customize the layout of your elements. We will use Toolset plugins.

Before – Single product page displayed by default
Before – Single product page displayed by default
After - A new taxonomy (Men) and a new custom field (Special offer) were added. Column widths changed.
After – A new taxonomy (Men) and a new custom field (Special offer) were added. Column widths changed.

Use the free Toolset and WooCommerce training site to follow the tutorial. The training site includes WooCommerce, Toolset plugins and example products.

The single-product templates that we’re going to customize

Product pages of our training site use a template layout that allows you to customize your product layout quickly and effortlessly. You can add, remove, and rearrange the position of every element of your product page using drag-and-drop editing.

Default template for single-product pages created with Toolset Layouts
Default template for single-product pages created with Toolset Layouts
This template layout has been created using the Toolset Layouts plugin. It displays WooCommerce product fields and replaces the WooCommerce default template for products. When you activate the Toolset Starter theme, it offers you to auto-generate this layout, and a few others, for WooCommerce products, so you have half of your work done.
hintYou can also build such a products layout from scratch. Visit our modules library to download ready-to-use modules for WooCommerce, which you can install into any theme. Check the How to import a Single Product template layout tutorial for details.

How to add custom fields and taxonomy to your product template

Let’s add a custom field to our product template. Our field is called “Special offer” and we created it in Part 1 of this series of tutorials. After completing this step our page will look like this:

Single-product page with a new field after completing this step
Single-product page with a new field after completing this step

We are in the process of switching the training site’s theme to a new one and so the screenshots you see here may vary slightly when compared to what you see in your training copy. The idea behind remains the same.

Steps to follow

Opening the default product template for editing
Opening the default product template for editing
In your training site:

  1. Go to Toolset->Dashboard.
  2. Locate the row for Products.
  3. In the Template column, click Layout for products.

Adding a new row for a product field
Adding a new row for a product field
The Layout for Products opens for editing. We want to add our custom field into the right column, which is called “Product details” (refer to the screenshot).

  1. Click on the plus icon below the Price cell.

A new row has been added.

  1. Click on it.

Use the Visual Editor cell to add custom fields
Use the Visual Editor cell to add custom fields
The Layout cell types screen opens. Here you can choose different types of cells. To add custom fields we use the Visual Editor cell.

  1. Choose the Visual Editor cell.
  2. Click Insert cell.
Use the Fields and Views button to insert a product field
Use the Fields and Views button to insert a product field
  1. Click on the Fields and Views button.
  2. Jump to the Product details section and click the Special offer field to insert it.

The Special offer field has been inserted as a shortcode
The Special offer field has been inserted as a shortcode
Your Special offer field has been inserted as the shortcode. Let’s place an icon before the “special offer” text to make it stand out.

  1. Use the Add media button.
  2. Locate the special-offer-stamp image and insert it.

Refer to the screenshot to check how the content of your cells should look.

  1. Click Create.

Your product template includes a new field now.

Move your field up
Move your field up

  1. Grab the field and move it up to place before the Price field.

Single product page with a new field
Single product page with a new field

  1. Click Preview layout to check how your field displays on the front-end.

Your new product field appears along with the special offer icon.

  1. Save your Layout.
Toolset hintNot all products have special offers. Toolset allows you to display fields conditionally. Refer to the Checking fields for Empty/Non-empty Values documentation page to learn how to display Special offer only if the field has been filled in.

We just added a custom field to the products layout. Similarly, we can add taxonomy. When you are on the Fields and Views shortcodes screen (steps 8,9) locate the Taxonomy section instead and choose Gender, which is the custom taxonomy we created in Part 1.

Add your own custom styling

We added a custom field (and you should have added custom taxonomy) to the products layout. Now, we’ll add styling, to display them exactly like we want. Toolset gives you complete control over how fields appear in the template. We’ll add CSS classes and ID to the template to apply our styling.

Before styling
Before styling
After styling
After styling


Like you already noticed, our layout uses rows. Each row includes cells. Cells have content (in our example, custom fields and taxonomy). We can apply styling in different ways:

  • Add classes and/or ID to the entire row
Styling on the row level
Styling on the row level

  • Add classes and/or ID to the entire cell
Styling on the cell level
Styling on the cell level

  • Add our own HTML around the field shortcodes inside the cell
Styling elements inside a cell
Styling elements inside a cell

You can also define new classes in Toolset->Layouts CSS and JS editor.

Visit the Adding custom styling to a layout documentation page to check details.


Let’s add some styling to the fields we added.
Styling the taxonomy
Styling the taxonomy

  1. Open the row that displays your taxonomy.

Styling the taxonomy
Styling the taxonomy

  1. Add the gender id. The ID will allow us to specify a unique style for the taxonomy row – to enlarge the font by half. We will add the new rule in a while.
  2. Add the following classes:
    • text-right – it’s a Bootstrap class. It right aligns text.
    • row_information – it’s a Toolset Starter theme’s class. It adds extra top and bottom paddings and a grey bottom border.

Styling the custom field
Styling the custom field

  1. Open the row that displays your custom field (Special offer).
  2. Add the row_information class.

Use the Layouts CSS to define your own classes
Use the Layouts CSS to define your own classes

  1. Go to Toolset->Layouts CSS and JS
  2. Add the following rule: #gender p { font-size: 150%; }

The new rule enlarges your the font of your taxonomy term. Instead of using the Layouts CSS and JS editor, you can also add you custom CSS rules to your WordPress CSS editor: Appearance -> Customize -> Add additional CSS.

Toolset hintAdditionally, you can change the widths of your columns.
How to change the widths of your columns
How to change the widths of your columns
To make the product image column smaller and to enlarge the product details column:

  • Grab the right edge of the product image cell and move it towards the cell center.
  • Grab the left edge of the Product details grid and move it to the left to fill the empty space.

Summary

In this tutorial, you learned how to customize a template for WooCommerce products directly from your WordPress admin using the Toolset plugins.

  • Use a layout assigned to the Product post type to control your product page layout effortlessly.
  • Use the Visual Editor cell to add custom fields and taxonomies to your product template.
  • Use the conditional output feature to display your product fields conditionally.
  • Add custom styling to your layout rows and cells using your theme classes or create your own new CSS classes.
  • Rearrange your product fields and other elements of your layout by dragging rows and cells.

You can use Toolset to customize WooCommerce sites built with any theme. When you’re ready, buy Toolset and get started building custom WooCommerce sites, without writing PHP.

Questions? Ideas? Suggestions?

If you have any questions about how to customize WooCommerce product templates, add your comments and we’ll get back to you. Toolset clients can also create tickets in our technical support forum, where are support team works 6 days / week, 19 hours / day.