Ever notice how a lot of product pages look more or less the same? Much of how your WooCommerce store looks is determined by WooCommerce’s default templates and your theme. However, with the right plugins, you can make your products stand out with a completely custom design - no coding required!
It's a shame how difficult WooCommerce makes it to customize the single product page. If you want a functional product template that doesn’t look like everyone else’s, many people think your only options are to hire a developer and sink tons of time into custom PHP programming or use a page builder that bloats your code and slows your site.
The easier, quicker, and cheaper choice is to use a plugin that lets you customize the WooCommerce single product page without coding. In this article, we’ll focus on some plugins that work together allow you to build a completely custom WooCommerce product template. They also add tons of extra functionality to your site.
The plugins are Toolset, WooCommerce Bulk Variations and WooCommerce Product Table. We'll use Toolset to create the overall template for the single product page. WooCommerce Bulk Variations makes it quicker and easier for customers to buy product variations from you. And WooCommerce Product Table lets you list other products anywhere on the single product page.
Toolset is a flexible and powerful suite of plugins that allows you to build advanced sites, even if you don’t know how to code. Its features extend the functionality and options for building custom WooCommerce stores.
Product templates built with Toolset can include not only all the standard WooCommerce fields (like product price, rating, and description), but also custom fields and taxonomies that are unique to your store. You can display related products, upsells, cross-sells, and other related posts, plus give it completely custom styling to match your brand identity.
WooCommerce Bulk Variations
WooCommerce Bulk Variations speeds up shopping for customers who want to buy more than one variation of a product. Instead of having to select variations and add them to the cart one at a time, they enter the number they require of each variation and add everything at once. It's ideal for any type of product that customers like to mix and match, including:
- Low value items such as pens or sweets
- Wholesale products
Use WooCommerce Bulk Variations with Toolset to display variation grids anywhere on the single product page, instead of the usual variation dropdowns.
You can also hide the quantity fields and create a price matrix listing the cost and stock level of each variation. That way, customers can use dropdowns to select variations, while viewing the prices and stock information in a grid.
WooCommerce Product Table
WooCommerce Product Table makes it really easy to list other products within your Toolset product page template.
There are lots of reasons why you might want a table of products on the single product page. For example, you can:
- Create a table of related productsThis is more sophisticated than the related products that come with WooCommerce itself because it functions as a one-page order form. Instead of having to visit a different page to choose quantities and variations for each related product, they select everything directly from the table on the single product page.
- Display variations as products in a tableWooCommerce Product Table has an option to list each variation on its own row in the table. Each variation basically appears as if it was a separate product. If you don't like the default variation dropdowns then you can hide these in your Toolset template, and use WooCommerce Product Table to create a template of variations for the current product.
- List product options instead of using variationsIf you find product variations a pain to work with (and who doesn't?!), then you can add each one as a separate product. You can then use Toolset to design your product page template, complete with a table of all the 'variations' for that product.
How to create and customize WooCommerce product templates using Toolset and Barn2's plugins
Toolset and Barn2 plugins work together to easily build custom single-product templates from scratch in just 3 easy steps:
- Create and assign your product template
- Design your product template
- Enhance your product template
1. Create and assign your product template
Go to Toolset → Dashboard and find the row for 'Products'. Click 'Create Content Template' to override the WooCommerce default template.
You can also set conditions to use different templates depending on specific criteria you choose. For instance, you can display a different template if an item is out of stock, or you can set different templates for different product categories.
To do this, go to Toolset → Content Templates and click 'Add New'. In the sidebar, under 'Usage', choose which post type you would like the Content Template to apply to, and click 'Set Conditions'. You can then choose the specific criteria to use for this Content Template.
You can also set the template’s priority in the sidebar so Toolset knows which template to use if more than one applies.
If you go back to the Toolset Dashboard, you can see the list of content templates that apply to your products.
2. Design your template
Once you have created your templates, you can build your content using blocks from Toolset’s extensive blocks library. They allow you to display product images, an Add-to-Cart button, product tabs, product reviews, and more!
Here's how Toolset templates work. You design your template once and apply it to products. Because you're designing a template, you will not use static content but Toolset blocks that display content dynamically. This means that those blocks display content coming from standard WordPress and WooCommerce fields as well as your own custom fields and taxonomies.
For instance, you can use Toolset’s Heading block and set it to display the product name, WordPress’s Paragraph block to display your product’s description, or the Toolset Image block to display the product's main image.
Toolset also gives you full control over each element’s styling, from typography to margins and padding, to layout blocks like containers and grids. This makes it easy to get your page looking exactly how you want it!
3. Enhance your product template
Once you've used Toolset to create a WooCommerce product template, you can use Barn2's plugins to list products and variations on it.
Both WooCommerce Bulk Variations and WooCommerce Product Table come with shortcodes which you can add to text-based blocks in the Toolset template. Here are some documentation links to get you started:
- WooCommerce Bulk Variations shortcode
- WooCommerce Product Table shortcode
- Adding product tables to the single product page
You can either add the shortcodes to the template itself, or you can add different shortcodes to one of the text fields for each individual product. Developers will probably want to add shortcodes to their Toolset templates, along with some extra code to control which products to display on each page. Less technical users should add the shortcode to the short or long description for each product, using the shortcode options to choose which products to include.
Bonus: add extra functionality to other parts of your store with other Toolset features
Because Toolset is a full suite of plugins, it gives you a lot of flexibility and power when it comes to your site’s functionality.
For instance, you can:
- Create front-end forms that allow your vendors to add their products to your site
- Create post relationships that allow you to connect your products to other post types (such as “Outfits”)
- Display your store locations on a map
- Add powerful search and filter functionality
- Create additional custom fields to further define your products
With Toolset, you can not only create a unique and functional product template, but you can also design your entire site from scratch without a single line of code!
Build your own custom product template with Toolset and Barn2
Building a fully custom WooCommerce store doesn’t have to be complicated. With Toolset and Barn2 plugins, you can build one quickly and easily without coding.
Toolset also offers a comprehensive, free course on how to build WooCommerce sites, including step-by-step instructions and video tutorials. With the right plugins and great tutorials, you can create a unique store presence and start selling your products in no time.