This tutorial teaches you how to design WooCommerce templates for single-product pages using Toolset plugins and without having to edit PHP.
This guide is the sixth step of our WooCommerce tutorial: How to build an e-commerce website in 12 steps.
Sometimes you need to show WooCommerce products in a unique manner.
You may want to show products differently to people who are members of your site as opposed to visitors.
Lastly, if you sell digital products such as e-books or online courses, you may require a completely different product layout.
You can follow the steps on the Toolset & WooCommerce training site, which is free for use.
The appearance of a single-product page is determined by the WooCommerce template and the theme you use.
If you want to create a custom template, first you must disable this WooCommerce default template and tell WordPress to use yours instead.
In the WordPress admin:
Create a new (blank) “Content Template” for products.
In the WordPress admin:
Our template starts as empty and you can add cells to it. These cells will include product fields.
A field can be anything that belongs to the product, including its title, image, description, and price. You can also add an “add to cart” button, custom fields, and even taxonomy.
For WooCommerce templates, you will use the Visual Editor cell most of the time.
Let us add a product image to your layout.
Your fields will be inserted as shortcodes. You can wrap them in additional HTML tags, if necessary.
Repeat the previous steps to insert more fields, such as:
In the next part, you will learn how to add custom fields and taxonomies to WooCommerce product templates.
Once the fields have been added, you can rearrange them by moving them up or down. You can even resize your cells.
You can add HTML classes and IDs to any element in the template. You can apply styling in different ways. You can add classes:
Visit the Adding custom styling to a layout documentation page to review the details.
In this tutorial, you have learned how to replace the default WooCommerce template for individual product pages with your custom template. You have also learned how to insert WooCommerce product fields in your layout and to style your template.
Visit the Toolset showcase by the eCommerce category to see more WooCommerce-based sites customized with Toolset plugins.
Toolset allows you to add some of the most important features for your website in less time than ever. That’s because with Toolset you do not need to write PHP – saving you hours of needless coding.
You no longer need to manage dozens of complex plugins for your website. You can use the full Toolset package to build, run and maintain it all.
Whether you are a WordPress newbie or an experienced web developer, we have the plan for you based on your needs and budget.