WooCommerce Tutorial

How to build an e-commerce website in 12 steps

In this WooCommerce tutorial, we’ll take you through all the steps to build a customized e-commerce website with Toolset that will stand out from the competition.

Buy Toolset

Just like a regular shop on the high street, your e-commerce website needs to not only look great on the outside but also function seamlessly as you enter it. A great and simple way to get the best of both worlds is by using WooCommerce on WordPress.

WooCommerce is one of the most popular e-commerce solutions in the world, powering more than 35% of all online stores. It is the ideal plugin but how do you make sure your e-commerce website stands out from the millions of others which are using WooCommerce?

The answer is by combining WooCommerce with Toolset. Toolset’s plugins let you develop fully custom WooCommerce sites without PHP. You can create great new templates, add important features and apply styling with simple HTML and CSS.

Why you should use WooCommerce

WooCommerce is packed with many advantages which will help you easily build an e-commerce website:

It is free

WooCommerce costs you absolutely nothing to download. As an investment that is definitely a no-brainer.

It has plenty of extensions

You can customize your WooCommerce website by using the hundreds of official plugins available including WooCommerce Multilingual and, of course, Toolset (more on this below).

It has great features

You can sell physical and digital goods, pay in a variety of ways, offer worldwide shipping options and many more important features.

Why you should use Toolset with WooCommerce

While WooCommerce has all the elements for a great e-commerce website you will need its extensions to take it to the next level. One of the best is Toolset.

With Toolset you can:

Customize your content without PHP

You will only need a basic knowledge of HTML and CSS to develop your templates.

Design templates from the WordPress admin

All you need to do is choose which page you are designing the template for and start creating using Toolset’s drag-and-drop editor.

Add important features unavailable on WooCommerce

Toolset helps you add a custom search, front-end forms and product sliders among many other features.

Step01

How to install WooCommerce

Before you begin adding products, designing templates or any other features which we’ll get to later in this WooCommerce tutorial, you will need to actually install it. Luckily, getting it up and running couldn’t be simpler and will only take a few minutes.

Go to tutorial step 1

Step02

Add and manage products on WooCommerce

Now that WooCommerce is activated on your WordPress website you can start adding the products you want to sell. Not only can you add products to your website but can you also configure a large amount of information about them including whether it is in stock, shipping details and products that should be linked with it.

Go to tutorial step 2

Step03

Manage your WooCommerce store

Once you have added your products you will want to control how your store itself functions. WooCommerce has a number of menu options which you can utilize to keep an eye on various aspects of your store. Features include organizing your orders, coupons, tax and shipping.

Go to tutorial step 3

Step04

How to install and register Toolset

Just like with WooCommerce, installing and registering Toolset is simple and can be completed in minutes.

Go to tutorial step 4

Step05

Adding custom fields and taxonomies to WooCommerce products

Now we have reached the point in the WooCommerce tutorial where the power of Toolset support for WooCommerce begins. Before we start designing templates, you may want to add custom fields and taxonomy to the WooCommerce products. This is optional, as many WooCommerce sites only need the standard product fields. However, if you need to attach additional information to products, you should start with this step. Toolset makes it easy to add custom fields and taxonomy.

Go to tutorial step 5

Step06

Customize your WooCommerce product page template

Learn to design your own templates for products using just HTML and product-fields. When you design product templates, you insert fields from a menu and use simple HTML for styling.

Go to tutorial step 6

Step07

Customize your WooCommerce shop page

The product catalog is where your visitors browse for products. You will learn how to break away from the standard-looking product catalog and create your own. Product catalogs can appear as grids, lists, tables and any other way you choose.

Go to tutorial step 7

Step08

Build a WooCommerce product search

Make it easy for shoppers to quickly find what they need using a powerful custom search. Custom searches can include any field or taxonomy that your products have. Visitors will be able to filter products by price, category and any custom field. Creating a custom search includes two steps.

First, you will design the search form (by inserting fields and designing with HTML). Then, you will design the search results in the same way.

Go to tutorial step 8

Step09

Create a custom WooCommerce product slider

Toolset lets you create sliders from anything. You will create the design for single-slides and choose the transition controls. Toolset turns your design into a working slider. You have full control over the content of slides. Insert the fields that will be displayed in slides from a menu and style them using HTML. We show an example of how to create a slider using the product category image, product category and product title.

Go to tutorial step 9

Step10

Creating a side-by-side products comparison

Product comparison allows you to select a few products and display them together, side by side, to compare their attributes. You will learn how to design the page that lists products available for comparison and how to design the side-by-side comparison itself. You guessed right. All this is done by adding fields from a menu and styling with HTML.

Go to tutorial step 10

Selected products are displayed side by sid

Step11

Creating front-end forms for adding WooCommerce products

Toolset plugins let you create forms for adding and editing WooCommerce products. Your users can directly add products from the front end without accessing the WordPress admin.

Go to tutorial step 11

Step12

Displaying more information from WooCommerce

Toolset plugins allow you to display WooCommerce information about you store’s orders. You can list orders on the front-end, display which products were purchased, and more.

Go to tutorial step 12

Build the perfect website today

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.