Download Toolset plugins and follow the online tutorial
Don’t have Toolset plugins yet? Our 30-days refunds let you try Toolset for 30 days and see how you like it, risk free.
Once you have a Toolset account, log in and go to Downloads. Get the following Toolset components:
- Toolset Types
- Toolset Views
- Toolset WooCommerce Views
Upload these plugins to your site and activate.
To help you get started, we recommend that you also launch our WooCommerce training site (it’s separate from your Toolset account). There, you will be able to customize a demo WooCommerce site, which has everything installed and ready for training purposes.
Follow the online training and do the same on your real site. Of course, you should apply your own design and use your own custom fields in the site that you’re building.
Step 1) Clear the default design for WooCommerce products
WooCommerce comes with its own template for a single-product page. This WooCommerce single-product template determines what product information will appear on your product page.
The default WooCommerce template is hard-coded in PHP. Since we cannot modify it without programming, we will begin by disabling this template and starting with a clean slate.
In the WordPress admin, go to Toolset->WooCommerce Views. For the “WooCommerce Template File,” select “WooCommerce Views plugin default single product template.”
Step 2) Start your custom design using a new “Content Template” for products
To design a custom template for a single-product page without PHP coding, we will use a Content Template of the Views plugin. Content Templates allow you to design your own output for the “content area” of your single-post page. The header, footer, and sidebar come from the theme and remain untouched.
- Go to Toolset -> Dashboard
- Locate the Template column.
- Click Create template in the Products row.
Step 3) Add the fields that you want to display in the product template
Our template starts empty, and it is up to us to add fields to it. A field can be anything that belongs to the product, including its title, description, cost, custom fields, and even taxonomy.
Place the cursor inside the editor and click on the Fields and Views button.
In the dialog, select the fields to be inserted into the template.
Go ahead and insert the following fields:
- Post title
- Product image (don’t confuse this with the ‘featured image’, we need the ‘product image’ field)
- Post excerpt
- Product price
- Add to cart button – single product page
- Product tabs – single product page
- Optional: custom taxonomy and custom fields (see the previous tutorial to find out how to add custom fields and taxonomies to your WooCommerce products)
Some fields have display options. In this tutorial, we use fields with their default display options.
Save your changes.
When you go to a product (any product) on the front-end, you will now see it with your newly-designed template.
|Content Template||Product on front-end|
This template doesn’t (yet) look too impressive. This is because we only threw in fields and didn’t apply any styling yet. We’re going to do this in the next step.
Step 4) Style the product template using HTML and CSS
We’re going to add just a touch of HTML and CSS classes to the Content Template, so that the title looks like a title and product attributes are spaced away from the product image.
Go to the Content Template style it. In our training site, we use the following simple styling:
- Add <H1> tags around the product title shortcode
- Wrap the excerpt, price and buy-options shortcodes with a <DIV> and give class=”summary entry-summary”.
After your styling, the Content Template in the training site should look like this:
The product on the front-end should like better now:
Beyond the basics
In this tutorial, we barely scratched the surface of your design options with ToolseT. We started from a clean slate, added the basic WooCommerce product fields and gave them minimal styling.
Toolset lets you display every fields that WooCommerce offers. When you insert fields, you have full control over their various options. You can style the product display using HTML and CSS.
To create your own custom WooCommerce sites, you need to buy the complete Toolset package. With one account, you can create as many client sites as you need.
Other parts in this series
You’ve been following one part of our tutorial on customizing WooCommerce sites.
There’s a lot more in the other parts of the tutorial. Together, the different tutorial parts will teach you how to build fully-custom, advanced, WooCommerce sites.
A fully-styled reference site
Planning to build custom WooCommerce sites yourself? Check out our Toolset WooCommerce reference site. It’s a fully featured, fully designed reference site, that you can use as the basis of your client projects.