How to customize your WooCommerce Product Template

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 product page template. 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.

Fortunately, there are several ways to optimize the WooCommerce product page template. The best option is to use a plugin that lets you customize the WooCommerce product page template without coding.

 

In this article, we’ll focus on 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 product page template. 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 product page layout.

Toolset

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:

• Clothing
• Low value items such as pens or sweets
• Wholesale products

Use WooCommerce Bulk Variations with Toolset to display variation grids anywhere on the product page template, 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 product page template. 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 product page template.
• 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:

1. Create and assign your product template
2. Design your product template
3. 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 the Bulk Variations and Product Table plugins come with WooCommerce 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 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.