how to build an ecommerce website step by step (FREE)

how to build an ecommerce website step by step

how to build an ecommerce website step by step Tutorial, this Blog post will guide you on how toto create an ecommerce website. this tutorial are for those that want to have an online store and bring their businesses live in the digital world. Have this tutorial you will be able to set your own online store fast and easy for free.

Hi welcome to this Tutorial post. i will be recommending and also teaching you on how to create an ecommerce website. Please read to the end.

THEME NAME THAT WILL BE USED?

Woodmart WordPress theme. you can get it directly from themeforest here or get here on Get99tool.com.ng here for a Coffee low fee 50% off.

BEFORE YOU GET ANY THEME WHAT YOU MUST KNOW?

You should know that some premium free theme has Virus in them that can break your website, so it is not advisable to download Premium for free so i recommend this website if you can’t afford the price on themeforest the website has virus free theme and plugin 100% safe.

1. Getting Started

In this first section of how to create an ecommerce website using WOODMART theme, we will go through the essential steps required to start building your website with the WOODMART theme to have a wonder Ecommerce website for your online business. We will explain how to install the theme, import the included demo content, as well as how to update the theme. At the end of this Tutorial you will you will be able to build an ecommerce website you can check site demo here. Lets get started now.

Requirements & WordPress set up

how to create an ecommerce website

You need to have a WordPress installation on your web-site to use our theme.

Note: if you want to install dummy content from Woodmart theme, we highly recommend installing it on a fresh WordPress without any data.

General steps to install WordPress CMS to your site

  1. Download the latest WordPress version from https://wordpress.org/download/
  2. Upload zip file to your web-site root folder and unzip
  3. Create database (using your hosting panel)
  4. Set up wordpress. Detailed instructions

Here the list of useful links to install WordPress CMS

Installation Process

Theme Installation

There are two ways to upload any theme into WordPress site: Admin panel and FTP. The most recommended way is uploading via Admin panel, however, sometimes there may be size limitation for files uploaded that is why this manual provides both ways:

Upload Theme through WordPress Admin panel

Way 1: install the theme through the WordPress Dashboard:

Locate woodmart.zip file and sign into your WordPress Dashboard (e.g., ). Go to Appearance > Themes > Add New > Upload, and select the file, click “Install Now“. Once the theme is uploaded you will need to activate it in Appearance > Themes.

  1. Sign in to your admin panel in yourdomain.com/wp-admin
  2. Navigate to Appearance > Themes > Add New -> Upload theme
  3. Choose woodmart.zip file
  4. Wait while the theme is uploading, install and activate it.

Make sure ZIP file contains folders and files of the  theme, not the inner additional ZIP.

Upload Theme with FTP

Way 2: upload through the FTP

You need to upload the theme zip file to your-site.com/wp-content/themes folder and unzip it. You can use

your web-hosting control panel (cPanel, ISPManager etc.) or you can connect to your server through the FTP client like FileZilla

and upload already unzipped  WoodMart folder:

  • Connect to your hosting (server) via FTP client
  • Upload your theme folder to your-site.com/wp-content/themes folder
  • Login to your WordPress Dashboard and go to Appearance > Themes and activate Theme.
  • Open your site and check if everything is okay

Install Plugins

Before start working with the theme, it is necessary to install required and recommended plugins that come with our theme package.

You can automatically install all plugins in Appearance -> Install Plugins. Alternatively, you can install plugins in the Plugins tab:

  1. Go to Appearance -> Install Plugins
  2. Check all plugins you want (required plugins are important for theme to work)
  3. Choose install and click “Apply”
  4. Wait until all plugins will be installed, activate.

As soon as WoodMart theme has been installed and activated together with all the related plugins, the Dashobord gets Theme Settings and WoodMart tab ensuring the possibility to customize the view of a web-site.

The next step after all the plugins have been installed is to enable the building plugin that would be used on site: WP Bakery page builder or Elementor plugin in the Theme Settings – > General.

Important!  WoodMart works with either WP Bakery builder or Elementor builder at once, but not with both at the same time. It is not possible to convert an existing site that is built on WP bakery page builder into Elementor. In order to have a site basing on the Elementor builder, it is necessary to replicate the site from scratch on a new WordPress installation with the Elementor plugin.

Install WooCommerce

If you skip previous section you need to install WooCommerce plugin
to set up your shop.

  1. Download the plugin to your computer.
  2. Unzip the file.
  3. Using an FTP client, or your hosting control panel, upload the unzipped plugin folder to your WordPress installation’s wp-content/plugins directory.
  4. Activate the plugin from the Plugins menu within the WordPress admin.
  5. Follow plugin’s set up steps and install shop pages
  6. Go to Products in admin panel and create your first products

How to install WooCommerce | WooThemes Documentation

Video | Installing and Uninstalling WooCommerce

Import Demo Content

As soon as the theme has been installed with the required plugins, the Dashboard gets Theme Settings and Woodmart tabs. The Theme Settings Tab provides all the options to configure the site as per the business needs.

WoodMart tab contains:

Base Import – opportunity to upload the full demo as it is;

Additional pages – opportunity to upload certain pages design from demos;

Header builder – special building tool allowing to create and configure the Header with various set of elements;

Theme license – the tab for license activation;

CSS generator – CSS optimization tool;

In order to upload the full demo, navigate to Base Import and upload Basic or full import. This is a compulsory step for demo uploading. You will find the right block with “Activate Base Version” Pressing the button will upload Base version.

After installation of the Base Version, the left block with Demo versions drop-down becomes available. Choose the Demo from the drop-down and press button “Set up version”

The theme can be activated twice with one and the same license key in order to ensure the possibility to develop a site on a staging platform and then transfer for the final domain. However it the theme is supposed to be used on different domains, it is necessary to acquire licenses for each domain separately.

Theme Settings Panel

WoodMart is a fully customizable WooCoommerce theme with drag & drop builder in Header and Footer as well as the extended options for different shop page templates, product page layouts, and a great deal of other comprehensive web-building tools.

As soon as WoodMart theme has been installed and activated together with all the related plugins, the Dashboard gets Theme Settings and WoodMart tab ensuring the possibility to customize the view of a web-site.

Instagram API

Age verify popup

Mobile bottom navbar

Typekit Fonts

Custom Fonts

Advanced Typography

Pages backgrounds

Buttons

Forms style

Notices

Products grid

Products styles

Categories styles

Sidebar & Page title

Attribute swatches

Brands

Quick view

Compare

Wishlist

Catalog Mode

Login to see prices

Cookie law info

Promo Popup

Header banner

Widgets

Product labels

Thank you page

Images

Show / Hide elements

Share buttons

Tabs

Reviews

Links to social profiles

Share buttons

CSS

JS

Lazy Loading

Preloader

Shop settingsWooCommerce tutorials setup

Naturally, you’ll need to begin by installing and activating the WooCommerce plugin. You can do this either on a new or existing WordPress site. In the following steps, we’ll walk you through the process of setting up the plugin and configuring its settings.

After installing WooCommerce, you’ll be prompted to walk through a setup wizard. It’s optional, but we recommend going through it in order to configure some key settings.

The first page of the WooCommerce setup wizard should look like this:The WooCommerce Store setup page

The WooCommerce Store setup page

Here, WooCommerce is prompting you to enter some basic information about your store. This includes its address, what currency you’d like to use, and whether you plan to sell digital or physical products (or both).

Keep in mind that anything you set here (or throughout the rest of the setup wizard) can be changed later on in your WooCommerce settings if necessary. For now, the next step in our WooCommerce tutorial 2019 is to select Let’s Go.

Choose Your Payment Processors

On the next page, you can decide what payments you’ll enable for your online store. By default, you can use Stripe and/or PayPal, along with offline payments such as checks and cash:The WooCommerce Payment page

The WooCommerce Payment page

Simply select the options you’d like to use, and WooCommerce will set them up. You can also use extensions to add more payment processors to your store like Paystack(work for Nigeria).

Configure Your Shipping Options

Next, you’ll find the Shipping screen:The WooCommerce Shipping page

The WooCommerce Shipping page

Here, you can decide how much customers will be charged for shipping. You can set one rate for your preferred zone, and another for customers who are in other locations. If you like, you can also offer free shipping to one or both groups.

WooCommerce product settings

To start setting up your online store, you can either follow the link at the end of the setup wizard or go to Products > Add New. Either way, this will enable you to add your first product, using the familiar WordPress editor:New WooCommerce product example

New WooCommerce product example

The first thing you’ll want to do is create a title and a short description of the product. Here’s what just a title and description looks like in a live preview:WooCommerce product title and description

WooCommerce product title and description

With this done, you’ll also want to add information about your new product to WordPress. In the next few sections, we’ll look at how to do so.

Adding Key Details to Your Product

If you scroll down below the post editor, you’ll see two new widgets not found on regular posts or pages. The first is the Product data section:WooCommerce Product data section

WooCommerce Product data section

Here, you can add all kinds of details about your product. At the very top, you can select whether or not the product is virtual (which removes the Shipping tab) and if it is downloadable. Then, in the General tab, you can enter in the regular and sale prices (sales can be time-sensitive).

If you’re selling digital products, you’ll also have to upload the file to be purchased, customize the download limit (leave it blank to mark it as unlimited), and set the download expiry (leave it blank to keep it available permanently):WooCommerce Downloadable product options

WooCommerce Downloadable product options

Next, in the Inventory tab, you can manage your stock by entering in the quantity of the product, stock status (in/out of stock), and if you’d like to allow backorders:WooCommerce Inventory tab

WooCommerce Inventory tab

Additionally, you can mark the product as individually sold, meaning only one can be bought in a single order. This is also where you can enter the product’s SKU (identification number) if you have one.

There are a number of other useful tabs here as well. The Shipping section will enable you to enter the item’s weight, dimensions, and shipping class. In the Linked Products tab, you can add upsells and cross-sells, while Attributes enables you to describe the product’s characteristics.

Finally, in the Advanced tab, you can enter custom purchase notes, give the product a set position in your menu, and enable or disable reviews. If you like, you can also view recommended extensions under the Get more options screen.

Creating Attributes and Variable Products

As you can see, there are plenty of options for adding details to your WooCommerce products and customizing them fully. Let’s take a closer look at two of the most useful options in the Product data section – attributes and variable products.

Attributes are key descriptors for your product, and they tell potential customers important information about it. This might include the item’s color, the material it’s made out of, its size or type, and more. If you add these details to your product in the Attributes tab, they’ll appear on the product page:WooCommerce product with attributes

WooCommerce product with attributes

No matter what type of products you’re selling, attributes are useful for communicating vital characteristics in a concise way. However, what if you also sell items that come in multiple options? For that, you can select the Variable product option:The WooCommerce Variations tab

The WooCommerce Variations tab

This will give you access to a new Variations tab, where you can create multiple versions of your product using the attributes you already assigned. So for example, let’s say you offer a shirt in red, green, and purple. You can add a variation for each color, then give each a unique description, price, and so on.

Your customers will be able to see all available variations on the product page:WooCommerce product with variations

WooCommerce product with variations

This makes it easy for visitors to view everything you have to offer at a glance. Plus, it means you don’t have to create separate product pages for slight variations on the same item.

Customizing Your Product Short Description

Underneath the Product data widget, you’ll also find a section labeled Product short description:The WooCommerce product short description widget

The WooCommerce product short description widget

Here, you can create a concise tagline that will appear underneath the product’s title. You can use this description to highlight the item’s primary benefits and incorporate one or more keywords to help customers locate it in searches.

After customizing your product’s data and description, don’t forget to check out the other options on the product page as well. You can add tags to your product, place it in a category, and include a featured image or even an entire image gallery.

Here’s what your final product might look like on the front end:A sample product in WooCommerce

A sample product in WooCommerce

Once your product is ready, hit Publish to make it live on your site. Then, you can repeat this process to create additional products as needed.

Managing Your WooCommerce Products

You’ll probably include a number of items in your WooCommerce store, which means you’ll need an easy way to manage them. Fortunately, you can do this through the Products tab in your dashboard.

For example, you can select All Products to see every item currently listed in your store. You can add, edit, and delete products here as needed:WooCommerce products

WooCommerce products

In the other pages under the Products section, you can view your product categories, tags, and attributes. Each of these pages looks like the standard WordPress Posts > Categories page and can help you keep your entire inventory organized.

WooCommerce email settings

Go to WooCommerce -> Settings -> Emails

woocommerce emails settings

Email notifications

By clicking on a given notification in the table will enable you access these settings.

In this section you have a preview of the settings of given emails. The table will show you, which format has got a given message (text, HTML, text+HTML) and who is its recipient. By going to configuration of selected emails, you can change their settings.

New order, cancelled order, failed order. These notifications are for shop service. Using these, you can make the following changes:

woocommerce emails order settings

Enable/Disable. You can decide whether to activate a given email notification.

Recipient(s). Decide, on what email addresses a given notification will be sent to. You can add several recipients, by placing a coma after each email address.

Subject. Here you can set email subject. The following tags are at your disposal: {site_title}, {order_number}, {order_date}.

Email heading. Change email heading or just leave default one.

Email type. Decide on email format: text, HTML or text + HTML.

HTML template. If you want to edit template of a given email, you can do this by copying and overwriting the currently existing one.

Order on-hold, Processing order, Completed order, Refunded order, Customer invoice, Customer note, Reset password, New account. These notifications are for buyer. By configuring them, you can make the following changes:

woocommerce emails order

Enable/Disable. You can decide whether to activate a given email notification.

Subject. Here you can set email subject. The following tags are at your disposal {site_title}, {order_number}, {order_date}.

Email heading. Change email heading or just leave default one.

Email type. Decide on email format: text, HTML or text + HTML.

HTML template. If you want to edit template of a given email, you can do this by copying and overwriting the currently existing one.

Extra options

Shall there be a need to customise email, WooCommerce naturally gives such opportunity to the user. There are many ways to do this. The easiest one is to apply the dedicated plug-ins. Users can also adapt email templates by themselves.

Email sender options

This section enables you to set, how email will appear in inbox.

“From” name. Here you decide what name of sender will appear in mailbox. It makes sense to think through the name, since it’s the name that initially lets recipient identify a given email. Make sure that name is explicit and that it lets customers promptly identify the sender. Do not make it too long either.

“From” address. Here you decide, what email address will appear in mailbox. Here too, it is suggested to make it clear-cut, by adding an easy to remember email address.

Email template

This section lets you customise sent emails. The following options are at your disposal:

Header image. By using this option you can add an image, which will be displayed in email just above its heading. Image should be added in the form of a link directing to a given file from media library.

Footer Text. This is just text, which will appear in email footer.

Base colour. Background colour, Body background colour, Body text colour. Hereyou can change default colours by using HEX code. Remember to make sure your email is readible, the aesthetics only come afterwards.

Share this:

Like this:

hyke

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: