Download Subtitles for How to Create a FREE eCommerce Website

In this tutorial, I'll show you how to

create a fully professional and amazing

looking e-commerce website for

completely free. We'll be using the best

resources to build this online shop.

We'll use a free theme, a free page

builder, and all free plugins to create

everything step by step. To create this

online shop, we have taken inspiration

and features from some of the world's

top e-commerce websites like Amazon,

AliExpress, Walmart, Flipkart, and many

more. Even though we're using only free

tools, your website will still have all

the core and necessary features of a

modern professional online store. You'll

be able to sell any type of product.

Physical products, digital or

downloadable products, products with

different colors and sizes,

even affiliate products that redirect to

other websites. Basically, you can think

of it like you can sell it with this

website. We'll also cover some really

advanced e-commerce techniques. Your

customers will be able to add products

to the cart very easily. Then their

shipping cost and tax rate will be

calculated automatically based on their

location. On the checkout page, people

will be able to pay using different

payment methods like PayPal, credit or

debit cards and even your local payment

gateways depending on your country. So

customers don't need to visit any third

party website. They can complete the

entire purchase directly on your store

as we're handling payments. So, our

website must be 100% secure. Don't

worry, I'll show you how to secure your

site properly by adding an SSL

certificate. And I'll even make a real

purchase so you can see everything

working perfectly from start to finish.

And we're still not done. Whenever

anyone buys a product, you'll receive an

instant order notification on your phone

or email. This website will include some

powerful extra features that many

premium themes and plugins don't give

you out of the box like wish list

feature order autotracking style

experience variation swatches for colors

sizes and more. On the top of that we'll

design this beautiful online shop from

scratch without using any readymade

templates. The good news is you don't

need to write a single line of code.

Everything will be done just using drag

and drop. So even if you have never

created a website before, this tutorial

will still be perfect for you. We'll

make this entire e-commerce website 100%

responsive for tablets and mobile

devices. We'll also set it up in a way

that's SEOfriendly so your store has a

better chance to rank higher in Google

search results. This video will be your

one-stop e-commerce solution. You'll be

able to create any type of online store

for yourself or for your clients. So,

before we start, please pause the video

for a second, give this video a big

thumbs up, and comment down below how

excited you are for this master class.

It really means a lot and helps us to

keep making these long in-depth free

tutorials for you. Now, before we create

everything step by step from scratch,

let me quickly show you what we will be

building in this tutorial. First, we'll

add a professional header. On the left

side, we'll place your website or brand

logo. And on the right, we'll create

navigation menus that let visitors move

through your website easily. We'll also

add a search bar so people can search

for any products by name or category.

Then we'll be adding user or account

button so customers can log in or

register, manage their orders,

addresses, and account details. And of

course, we'll have a cart button, the

heart of any e-commerce website with a

mini cart where people can quickly

review their products, update

quantities, go to the full cart page, or

proceed directly to checkout.

Next, we'll design a beautiful hero

banner that instantly grabb attention

with simple layout and clean color

combinations will give your shop a

modern aesthetic vibe. Right after that,

we'll create category cards like people

can go to men or women categories by

clicking on them. Then, we'll add a

product section to showcase some of your

bestselling products where people can

add items to their cart directly.

Then we'll add testimonials to show what

people think about your store, building

extra trust and credibility.

After that, we'll highlight some

featured products with a stylish layout

that looks like a premium theme. Right

after that, we'll create a feature

section to highlight your store's key

strengths like worldwide delivery, live

support, special discount, and more.

Then we'll nicely show some of our blog

posts. From here, people can click on

these and read the full blog. And

finally, we'll design a clean and

flexible footer where everything will be

easily changeable. Text, images, links,

and a nice copyright area that you can

fully control from the dashboard. Then,

we'll create a professional shop page

where visitors can see all the products

in one place. They'll be able to add

products to the cart directly or add

them to wish list by clicking on hard

icon. On the sidebar, we'll add powerful

widgets like product search, price

filter, recently viewed products,

categories, and tag filters so people

can quickly find exactly what they're

looking for. When someone clicks on a

product, they'll be taken to a full

product details page. We'll set up this

properly with product name and

description, main product image,

multiple gallery images, product

variation like size and colors, a stock

progress bar, quantity selector and add

to cart button, full description,

additional information and product

reviews section and related products at

the bottom. So your product page will

feel complete, trustworthy and

conversion focused. We'll build a

detailed cart page where customers can

review their products, remove items,

update quantity, and see the exact costs

on the right side. Also, I'll show you

how to set up coupon codes so customers

can apply that to have discounts. Then,

we'll customize the checkout page where

customers will enter their contact

information, fill in their billing

details, choose a payment methods. will

set up different payment methods like

cash on delivery, online payments like

card, PayPal, Stripe, and other options.

See all order details including taxes,

discounts, and totals. And finally,

place their order. Then they'll see a

clear thank you page. We'll also create

a blog page where you can publish

articles for SEO and authority building.

We'll design the blog listing and single

blog page.

Then we'll build a contact page very

easily with an invaded Google map for

your business location. Then clear

contact information like phone number,

email, and address and fully working

contact form so customers can send

messages. Can you believe we'll create

all of these just by using free plugins

and free page builder? And I'll show you

everything step by step. Now let me

introduce myself. My name is Ton Nishad.

I'm a professional web developer and

even in the past I have completed many

freelance WordPress projects for my

clients. So inside this tutorial you're

learning the same methods and techniques

that we use in real client projects. I'm

really excited about this. Please give

this video a big thumbs up. That's the

only thing I ask from you. Other than

that, this video is completely free. And

if you like this video, you can always

find it later easily from YouTube's like

videos section. All right, we'll be

building our beautiful e-commerce

website in easy four steps. First, I'll

show you how to get your domain name and

web hosting. I'll also provide you with

a 78% discount link so you can save a

big amount on hosting. Then, we'll

install WordPress. Next, we'll install

and set up U-commerce plug-in. Finally,

we'll start designing our amazing online

shop. I'll be also adding timestamp in

the description so you can always jump

directly to the exact part you need.

Let's now start with the step number one

which is to get your domain name and web

hosting.

So first of all, what is a domain name?

Domain name is basically your website

address like Facebook has facebook.com,

Amazon has Amazon.com, we have

jimfadigital.com.

Similarly, for your website, you need an

address that will be your

websiteename.com.

And what is web hosting? Web hosting is

the storage space for your website. All

the images, all the texts you'll have in

your website all will be stored on your

own web hosting. As you are owning your

own web hosting, so there won't be any

limitation. You can run ads, you can

upload any text or images, you can

upload any themes or plugins you want.

you are the in charge of your own

website. Now, how to get your own web

hosting with a free domain name. So,

first just click on this very first link

in the description below this video or

you can just go to jimfadigital.com/best

host and this will take you to a special

discounted Hostinger page. But why

Hostinger? In my opinion, Hostinger is

the most affordable and also the fastest

web hosting provider. are available.

Just have a look into their trust pilot

reviews. People are super happy with

their hosting speed, affordable pricing

and customer support. Now, from here,

you can change the language if you want.

Maybe you speak Spanish, Portuguese or

Hindi. You can select your language from

here. One thing I also want to say is

that this page changes quite often. In

fact, they probably change it once a

month. So, if the banner or interface

looks different, don't worry, don't

panic. This happens quite often. It's

the same website. Let's scroll down a

bit. You'll find all the different

plans. By the way, we can see four plans

here, but sometimes you may see three

plans here. Just don't worry because you

can create your website with any of

these plans. But as you are starting

out, I recommend taking this premium or

business plan. With both of these plans,

you can create up to 100 websites. For

example, today you're creating a

portfolio website. Tomorrow you want to

create a business website. and next week

you want to create an e-commerce

website. So you don't need to purchase

hosting each time you can create all the

websites within this same web hosting

plan. So here with the premium plan

you'll get 100 GB of storage. With the

business plan you'll get 200 GB of

storage and with any of these plans

you'll get all the features like

unlimited free SSL. So all of your

websites would be encrypted and super

secure, unlimited bandwidth. So there

won't be any limit how many website

visitors you'll have. You can create

hundreds of professional email addresses

like info at the rateyousite.com

or admin at the rateyousite.com

like really professional email addresses

like these free automatic website

migrations. So if you want to move your

existing website from another hosting

provider to Hostinger, just contact

Hostinger support. They'll transfer it

on behalf of you for free. Then free

domain. Yes, like I said, you'll get a

domain name for free. And that's not

all. You'll also get tons of WordPress

features like one-click WordPress

installations, free one-click Google

integrations. It will help your website

monetize with Google AdSense and

significantly improve its SEO. They have

added awesome AI features as well. So,

you can create website contents using

Hostinger AI very easily. Now, let's

talk about security. Personally, I'm

very serious about website security and

Hostinger just nailed it with all of

these features like cloudfare protected

name servers, malware scanners and all

these. I've had very bad experiences

with other web hosting providers. We

have so many malware attacks and we had

to pay the hosting providers

additionally to use their other security

tools. But here in the hostinger, you're

getting all of these security tools for

free. Now, let's select a plan. And like

I said, you can take any of these plans

based on your needs. If you are just

starting out and on a budget, the

premium plan is a great option. Also,

you can always upgrade later. However,

if you ask me, I'd recommend the

business plan. Here's why. NVME storage.

SSDs are great, but NVMemes are

incredibly fast. Free Cydian. This

feature can make your website load up to

40% faster. Daily backups. This is my

favorite feature of the business plan.

This ensures your data is safe and

secure every day. Okay. So, let's click

here on choose plan.

All right. First, you can select the

hosting period.

48 months, which is 4 years, then 24

months, 12 months, and 1 month. I don't

recommend the one month plan since it

cost around $14 per month, which is way

too expensive. Instead, you can go for

12 months, 24 months, or 48 months. If

you ask me, the 48-month plan is the

best deal. For the first four years, you

only pay $3.49 per month, saving you

over $500. After that 4 years, the

renewal rate is just $8.99 per month.

Still very affordable for a hosting up

to 100 websites. If you prefer starting

smaller, you can choose the 12 months

plan which costs 3.99 per month for the

first year. After that, it renews at

13.99.

But remember, the longer the initial

term, the bigger the discount you will

get when you renewing. If you can afford

it, I highly recommend choosing this

48-month plan. It gives you the most

savings and locks in the lowest rate for

4 years. But wait, there is more. You

can click on have a coupon code and

enter my special code which is JFD10.

Once you apply it,

you'll get a 78% discount. As we have

applied the coupon code, if we take a

look at here, the 48 months plan drops

to 3.14 per month and the 12 months plan

becomes 3.59 per month. Can you believe

we're getting super fast web hosting

with a free domain name for an entire

year for just $43? What an amazing deal,

right? For this tutorial, I'm selecting

the 12 months plan. So, let's click

continue.

Now, let's quickly create a hostinger

account. From here, either you can

continue with Google or you can just use

your email address. So, I'm going to use

mine.

And make sure you use your vest email

address because later all the

verification code will be sent to this

email. Now let's put a really strong

password. All right. Now let's click

continue.

All right. After successfully signing

in, now we're here. You can fill up all

these informations like your name,

country, and then details and then click

continue. Now you see you can pay using

credit card, PayPal, Google pay or even

you can pay using cryptocurrency. Also

you may see more different local payment

options based on your country. So here

I'm putting my card information

and then just click on submit payment.

Now after successfully completing the

payment you may see some onboarding like

this but for some reason if you don't

see this or accidentally your tab is

deleted during the payment process you

can just go to hostinger.com

then click on login

and you'll be inside your Hostinger's

control panel and now all you got to do

is go to our email inbox and you'll see

an email from Hostinger says verify your

email address. Just open it and click

verify email.

Now the email will be verified and you

will be again inside the control panel.

From here click on this continue

creating or migrating a website. Click

on this continue button

and again we'll be on the same

onboarding we have started with. So from

here I'm just going to skip the surveys.

Just click skip.

And here it says do you want to create

or migrate a website? So as we are

creating a website, I'm going to check

this one. Create a website. Now just

click next.

So this is the option to create a

WordPress website. So make sure you

select the WordPress from here instead

of this Hostinger website builder and

click next.

And here's the login details for your

WordPress account. First of all, you can

change the language. Then you can change

the email address for the WordPress

account and also the password. So, I'm

going to leave this email address here.

And I'm going to enter a really strong

password.

All right. Now, let's click next. And

here it says, what type of website do

you want to build? So, instead of

choosing anything from here, I'm just

going to click on this create blank

site.

And here's the exciting part. We get a

free domain name from Hostinger. We can

claim a free domain name from here. So,

here we can search for any domain name

available. You can choose any domain

name that fits your vision or business.

Like you can just type your business.com

or your name.com. And here you can check

if this domain name is available or not.

All right. So I'm just going to search a

domain name for me.

I just typed it and we can see this is

available with the com extension. You

can choose any extension like nme.net.

I'm going to choose the.com extension

because it looks more professional and

legit. Okay, just click on here. And

after selecting it, just click next. And

here we have to register our domain name

real quick. So from here, just click on

this next step. And of course, make sure

this is your own country. All right,

next step.

And it says your domain name will be

registered using these details. So make

sure every information is correct. So

from here I'm selecting my division

Dhaka

and also the city and address.

Then I'm going to put my zip code. I'm

going to type in my phone number and

finish registration.

And you'll see an onboarding like this.

It says where is your targeted audience

located. You can select any country from

here. I'm just going to select United

States, Arizona. And now click next.

Now it says it's installing the

WordPress. This loading can take up to

one or two minutes. And now it says it's

ready to go. It's time to build your

online success. And here, let's hold up

for a moment because it's redirecting us

into the WordPress. All right. So this

is our WordPress dashboard. And by the

way, for some reason it did not redirect

you here. You can always just go to your

Hostinger control panel, then go to the

websites. And now inside the control

panel we have to enable some settings.

It seems overwhelming but it's too easy.

We just have to enable one or two

settings. So from here just click on

this dashboard.

Then click on this WordPress overview

and just make sure you have enabled this

force https. After enabling this click

on this WordPress admin and this is

again redirecting us into the WordPress.

All right. So finally we are at our

WordPress admin panel also known as the

dashboard. From here I'll make you

familiar with everything that you need

to build an e-commerce website like from

the posts to media pages, comment

appearance, plugins and more. But before

that let's clean up our dashboard a bit

because currently this is looking a bit

messy. So we can just close this welcome

popup then close all of these

unnecessary widgets or you can just

click on this screen options and

deselect everything one by one like

this.

and the screen will be clean. But there

is more stuff to clean up. Click on this

plugins

and you'll see a bunch of plugins

installed here by default. So if you're

new to the WordPress, doesn't matter

what plug-in you have here, just select

all of them like this.

Then from the bulk actions, select

deactivate. Now click apply

and all the plugins will be deactivated.

Now select all the plugins again. And

this time from the bulk actions select

the delete and apply and click okay.

And all the plugins will be just

deleted. All right. Now let's go ahead

and do some basic settings like changing

your username and password. So just

hover over the users and click on

profile. So here first of all we can see

admin color scheme. with it. We can

actually change the whole color scheme

of our dashboard. But this doesn't

matter that much because only we can see

this as a admin. So I'm just going to

keep it default. Okay. Now scroll down

and you'll find the language option.

From the language you can choose any

preferred language. There is so many

options here but I'm going to keep it

site default. Now let's scroll down. You

can set your first name,

last name, then your nickname

and here on this option you can select

any variation of your name. So this one

is a bit important because this is the

name which will be shown in your blog

posts. So if you write a blog post this

variation of your name will be shown as

the author name there. So make sure you

select the best variation from here.

Right now let's scroll down. So here we

can change email, we can change website

address, but I'm not going to mess with

these right now. So let's scroll down

more and you'll find that new password

option. Just click on set new password

and it will just suggest your strong

password. You can keep it and of course

you can type your own password.

So I just type my password although it's

saying medium but I'm just okay with it.

So scroll down and click update profile

and all the changes will be saved we

have made here. Okay. Right now let's do

some other settings. So hover under the

settings and click on this general.

First we have the site title. We can

change it to anything like

my e-commerce website and as you can see

this title will be instantly updated on

here. Then we have the tagline. In the

tagline, put some meaningful stuff like

best online

clothing store

in California like this. So, this

tagline actually can help you rank on

the search engines. Okay. All right.

Now, let's scroll down. You'll see this

membership option. If you check this

option, then anyone visits your website

will be able to register on your

website. And since we're making an

e-commerce website, so we should

definitely check this option. Right now,

scroll down. You'll see the time zone

setting. You can select any of these

options according to your location or

you can change the date format, time

format, anything in between. Okay. So,

let's scroll down and save the changes.

And under the setting, I'm going to show

you a really important setting, which is

the permalink setting. Click on here. So

here on the permal link structure we can

see by default this is selected the

plain permal link but in your case it

might be set to day and name month and

name number anything but I highly

recommend you to choose this post name

permal link because I'm going to show

you an example for example you choose

this plain permal link then your website

address will be looking like your domain

name slash some bizarre characters and

numbers but if we choose the postname

permal link it will be looking like a

page name for example about us

or contact. So this is more readable, it

looks good and this can also help you

rank on the search engines. Okay. So

make sure you keep it post name. Okay.

Now scroll down and save changes. All

right. So at this point I'm going to

make you familiar with two basic terms.

One is the back end and other is the

front end. So basically everything

you're seeing here, all the options, all

the contents is part of back end or the

dashboard of your website. But if you

want to see your front end website, you

can hover on the site title and click

visit site. And I'm going to open it on

a new tab. And let's go to the tab. So

this is our front-end website. And the

whole world can see this portion of your

website. Like if I just copy our domain

name and let's open a private tab.

And if anyone from anywhere in the world

just paste the link in their browser,

they'll just get to see this front end

page. They cannot see anything on our

dashboard or back end. Okay. Although

right now our front end website is

looking like this, but we can change its

look and feel using themes. So let's go

back to our dashboard. And if you hover

over this appearance, you'll get the

themes.

In here, we have some themes by default.

And this one, the 2025 is the active

one. But for example, if I activate this

2022 one,

then go to our front end website and

refresh,

the whole look and feel of our front end

website will be changed. Okay.

And of course, you can add new themes.

Just click on this add new theme. And in

the WordPress store, you can find

thousands of thousands of themes. you

can just install that and use that. So

from here I'm going to search for a

theme which is Wooifi

and from here I'm going to click

install.

Then let's go back to our themes

and activate this Ostify theme.

After activating this we'll have some

alerts and notification. I'm just going

to close all of these.

And also if we notice we'll see this

newifi option in our sidebar but we'll

get to that later. Now if we go to our

front ended website and refresh

and our website is looking like this

right now. I know it's still boring

nothing special because themes actually

don't have such control over the website

design. Themes just can add some base

functionalities some basic base designs.

But to really control our website

design, we have to use page builders.

And I think you already know what is the

best page builder for WordPress. Yes, it

is Elementor. With the Elementor, you

can just control every inch of your

website. And for this tutorial, we're

going to be using the Elementor's free

version. So, let's go ahead and get the

free version of Elementor.

You can just go to jimfad

digital.com

or if you just cannot find this post,

I'll just paste the link of this page in

the description. So just scroll down and

here you'll find this link get element

free account. Just click on it and we'll

be in the element's official page. From

here if you scroll down you'll see the

element page builder plan. Although we

using the element's free version but

with the element pro version you can get

so many features that is really helpful

for any e-commerce website. So if you

are making any e-commerce website in the

WordPress element pro version is highly

recommended. You can still make your

website with element free but element

pro just makes everything really easy.

Okay. All right. Now let's scroll up and

click on this element.

And from here click on this login. And

from here click on this create an

account because we don't have any

account. And you can just continue with

your Google, Facebook or Apple account.

But of course you can continue with your

email address. So I'm just going to put

my email

and choose a strong password

and just click create my account.

And after successfully logging in, we'll

be in our element's dashboard. Right?

Now that we have created our free

account, now we can close these tabs and

go back to our dashboard. So now it's

time to add the element as a plugin in

our website. So we have to just go to

the plugins. We don't have any plugins

right now. So click on this add new

plug-in.

And on the search plugins, I'm going to

search element.

And you'll see the element here by

element.

And we can just click on install now.

And now after installing it, let's

activate this. Click on activate.

And it will show an onboarding. So we

can just click on this cross to close

the whole thing. All right. Now, if we

go to the plugins, we can see the

element is here. Now, we actually need

more plugins to create our website

because as we are not using the element

pro version, so we're going to be

needing some other plugins. So, just

click add new.

Now, from the search, I'm going to

search for elements kit. Just search it

like this. And you'll see elements kit

element add-ons and templates by Roxnar.

So, this plug-in will add so many

widgets for our design purposes. Just

install it.

Then we need some other plugins. This

time I'm going to search Met form

and you'll get this one. With this you

can build contact form, survey, quiz and

custom forms using element page builder.

So install it. This is also by Roxnar.

And now we need one of our main plugins

which is called oocommerce.

Search it.

You'll see U-commerce by by automatic.

And this is the plug-in will turn our

website into an e-commerce website. So

install. Okay. Now let's get more

e-commerce plugins. Search here more

convert wish list.

And you'll see this. This is by more

convert team. Install it. Now let's go

for our final plug-in which will be

variation

swatches. And you'll see the variation

swatches for oocommerce by Imran Ahmed.

Click install. And if we go to the

plugins, click on plugins. We'll see so

many new plugins has been added which

are not activated yet. So what I'm going

to do, select all of them like this.

Okay, we cannot select some of them. So

after selecting from the B action,

select activate and click apply.

All of these plugins will be activated.

Now before activating this plug-in, we

have to activate this one. So click on

activate manually and this one will show

some setup from here. So just click on

no not ready now just to skip this and

go back to the plugins.

Woocommerce is activated. Now let's

activate the variation swatches. Okay,

now all of our plugins are nicely

activated. Elementor is for creating our

website or building our website from

scratch. Elements kit will add more

widgets into the elementor. Made form

will add functionality to create uh

forms, quizzes with the elementtor. Then

this plugins like more convert wish list

will help to build wish list for

e-commerce. Then variation swatches will

help us to create variation products for

our website. And finally, last but not

the least, Woo Commerce will turn our

website into an e-commerce website

easily. And if you notice, after

installing and activating all the

plugins, we have extra options. So many

options like MC wish list, WooCommerce,

product, payment, analytics, marketing,

so many options, right? So all the

options will help us to build our

preferred website. Okay. Now, as we're

ready to go with the plugins, we're

going to set up our oocommerce. Click on

the oocommerce

and it'll show us setup. Just click on

this skip guided setup. But we have to

select a country or state here. So,

select your state and click on go to my

store.

It'll load for a few moments and it will

be in the oocommerce. Now I'm going to

skip all of this stuff and directly go

to the settings.

All right. So under the general first

we'll set up our store location.

So if you have any physical store or

even any office you can just put the

address on this address line one like

city, zip code, avenue, road number, all

of these. Okay. And address two is

optional. You can put if you want but

I'm going to put the city name here.

San Diego and scroll down. So in the

country or state I just selected the

California. Okay. After that add your

zip code here.

So I'm just going to add my zip code

here. All right. So this was the

location or address of our store. Okay.

Now scroll down. We have this general

options. We have the selling location.

On the selling location we have three

option. Sell to all countries. Sell to

all countries except for then sell to

specific countries. If you select sell

to all countries, your product is

sellable to all the countries. If you

select the specific country, you can

select any specific country to sell your

product to. For example, I'm typing

Canada. So, currently your product is

only sellable in the Canada. Okay. So,

I'm just going to delete this. Then we

have another option which is sell to all

countries except for. So basically you

can exclude any country. For example, I

type United Kingdom. So now your product

will be sellable to all the countries

except for United Kingdom. Okay. So this

is how it works. But for me, I'm going

to select this sell to specific

countries and then select United States

because I simply don't want to sell my

products overseas. All right. All right.

Then we have got the shipping location.

We have options. Ship to all countries

you sell to, ship to all countries, ship

to specific countries only, disable

shipping and shipping calculations. So

the first one is obvious like ship to

all countries you sell to like if I sell

to all the countries it should be

shippable to all the countries right and

we have other diverse options like ship

to all countries even if you don't sell

to all countries then ship to specific

countries only like you sell in every

countries but don't ship to that

countries maybe you have digital

products like ebook or any virtual

products then only you sell those

products but you don't actually need to

ship in that case You can select this

one or you can select disable shipping

and shipping calculations. But for me,

this one suits the best.

So I'm basically shipping all my

products to the countries I actually

sell to. So basically my store is based

on the United States only and my

products are only shippable within

United States. All right, simple. After

that we have this tax option. By

enabling this tax option, we enable all

the tax rates and calculations. This is

actually really important because if you

sell your products in multiple

countries, you should have different tax

calculations for different countries.

Even only United State has state based

calculations like each state has

different tax calculations. So I'm

definitely turn this on and we'll

understand and set up the taxes later.

Okay. After that you have the enable

coupons option. With this you can enable

coupons for your store. So by using some

codes your customer can get discounts.

All right. After that we got the

currency options. So first of all we can

set up the currency that what currency

we accept. You can choose US dollar, you

can choose Canadian dollars, euros but

for my store I'm going to choose USD.

All right. Now that's it for the

general. Let's now save all the changes.

All right. After we have products tab,

right, so first option here we have shop

page. So in here we can select which

page do we want to make our shop page.

Basically this is showing all of our

pages. So I'm just going to keep it

shop. Okay. Do you have this placeholder

image? So when there is not any product

image by default as a placeholder it

shows some default image. So we can just

set the maximum size of that image. I'm

going to put here the seven. Okay. After

that we have the measurements. First on

the weight unit we have multiple options

like kilogram, gram, ellipse. And

because we're selling furnitureures, so

it will be best to choose kg or ellipse.

Okay. So I'm going to choose the kg for

now. Then you got the dimension unit. In

here we have meter, centimeter,

millimeter, inches. So I'm going to

select the inches. And here we have this

product reviews. You can turn on the

product reviews on any product so people

can add reviews or feedback on that

product. Then product ratings to enable

star rating on the product. So I'm just

going to keep everything checked except

for this one. Okay. So let's save the

changes.

All right. Now let's move to the tax

tab.

So under the price entered with tax we

have the option yes I will enter prices

inclusive of tax and then no I will

enter prices exclusive of tax. So if you

set this to yes your product price will

be shown with the tax charge included.

But if you select no your product price

will be shown without any tax rate or

any tax charges. But of course, people

will be able to see the tax rate later

when they're checking out the product.

Okay. So for me, it makes sense to

select the no option so that customer

only can see the original price of the

product, not the tax included. Right? So

I select the no. Okay. Now scroll down.

Keep everything as it is here. But on

this additional tax classes, we have two

option. One is reduced rate, one is zero

rate. And we actually can see this

option on here. The default one is

standard rates. Then we have reduced

rates. Then we have zero rates. We don't

have to understand these really deeply

for now. But just on this field, I'm

going to add my own rate.

And I'm going to call that

custom rate. Okay. Now scroll down.

Skipping everything just save the

changes.

And after saving it, you can see this

custom rate has been added on this tab.

Okay. So this is our custom rate. We

will edit this custom rate. So just

click on it and we'll be here and this

is the place we will calculate the text

rate for our different states or

countries. So let's pay attention here.

So first click on this insert row. It

will simply add a row here. And first

thing here we have to add a country

code. And because the USA has

state-based tax rate, so I have to add

the state code. So to find out the

correct tax rates and code, let's go to

the Google and search for USA tax rates

tax jar

and you'll find this state link. Just

click on it and it'll just show the

whole map of USA with all the state

codes like California, Nevada, Arizona,

New York, everything. Okay? And if you

notice different state has different tax

rates. This one has 2.9% tax rate where

Washington has 6.5% tax rate. Okay? So

we need the tax rate for the California

which is 7.25%.

All right. So we got the tax rate. Now

let's go back and here on the country

code we'll just add USA. Just type US

and United State will be selected. And

then on this field we have to add the

state code which we can see for the

California this is CA. So just type CA.

Then I'm going to skip all of these and

go to the rate. So as California state

has 7.25%

tax rate. I'm going to just type that

number first. And after typing the

number, I'm going to add two zeros. I

just added two zeros to complete the

four decimal places. Okay. So, the whole

number just means 7.25%.

All right. Then on the text name, just

put tax like this. Nothing else. On the

priority, keep one. And on the shipping

turn this off because I don't want any

tax charges on the shipping. Now after

making it like this you can save the

changes. So basically we have calculated

and decided the tax rate 7.25 for

California US. Now any product we sell

into this location will cost this

percentage of tax. Similarly you can add

more row like let's add a new row here.

type US then instead of California this

time let's say we select New York so the

code is NY

and New York has only 4% of tax rates so

just put four here and add four zeros

just to have four decimal places okay

and on here type tax then priority one

and uncheck the shipping

and save changes and now we have just

calculated the tax rate for New York and

now let's say let's insert one more row

and here let's say I type USA but on the

state code I don't put anything just on

the rate let's say I put 5% tax rate and

let's fill up all of these and save

changes

so I have made a new rule which means

doesn't matter which state you're

selling your products to it will only

cost 5% tax. Okay, because I just didn't

select any specific state code. All

right. Now, if you want, you can remove

any selected row. For example, I

selected this. You can click on this

remove to remove that. You can select

like this and remove it like this. Okay.

So, I'm just going to keep one row for

now. All right. Now, save the changes.

So, this is how you make any rule for

tax rate and calculate them correctly.

And for example your store is outside of

USA. So in this case you can search

Google that what is the tax rate in your

area and based on that information you

can just calculate your own tax rate

here. All right. Okay. I think that's it

for the tax. I hope you at least get an

idea about this. So now let's move to

the shipping.

Okay. So in the shipping you can add

shipping methods and rates. So first

let's add a shipping zone to add the

shipping rates and shipping methods on

it. Click on add zone. You have to put

the zone name. So I'm creating a zone

setup which is rest

rest of the country. You can name it

anything. Now this is zone region.

Currently this is everywhere but you can

select any specific region like here I'm

searching United and I'm selecting

United States and you can select

multiple regions as a zone. Now for

selecting we can click on add shipping

method. So first here you see create

shipping method which is we have two

option which is free shipping and flat

rate. For now I'm going to click on flat

rate and click on continue.

So you can rename your rate here. You

can rename it anything like regular

rate. And you can keep the text status

taxable or none. If you want to add text

on shipping, you can keep it taxable or

if you don't want keep it none. Now this

is cost. So this is basically shipping

cost or delivery cost. If I make it

5.00. So basically my product shipping

cost will be $5. Now this $5 is actually

per order. I'm going to show you

example.

So this is a product right and we can

select the quantity of the product. For

example, a customer buys five of this

products. In the quantity they select

five and purchase five watches in a

single order. So the shipping cost of

the five watches will be only $5. But if

you want the other way, like every

quantity of product should cost $5, you

can do that as well. Just leave a space

and type star. Leave a space third

bracket. Type QT y close it with third

bracket.

Now what will happen?

Before it was costing the customer only

$5 for shipping this five products. Now

it will cost $25.

So $5 for each product or each quantity

of the product. You can actually do it

if your products are heavy or really

hard to ship. But as a electronics

product, it makes sense if you keep it

only five, not quantity based. You can

charge them $10 for shipping, $9 for

shipping. So in a single order, doesn't

matter how many product they choose, how

much the quantity is, they'll cost only

$9 per product order. Okay.

So here I'm keeping $5.00

per order. Now from here I'm going to

click on create and save. So here I

added a regular rate which is $5 per

order. Now if you want you can add more.

Click on add shipping method. This time

I'm going to show you how to use the

free shipping. So select the free

shipping. Click continue and you'll have

some option. You can choose the name

first then then free shipping

requirements.

What free shipping requires? Click on it

and you'll see multiple options. First

no requirement then a valid free

shipping coupon. Then minimum order

amount. Then things like a minimum order

amount or coupon. Then a minimum order

amount and coupon.

So let's select the minimum order

amount. So in the minimum order amount,

let's say I put $150.

So if any customer orders for more than

$150, they'll get free shipping. This is

the requirement of the free shipping.

They'll have to spend more than $150 or

$150. This is the minimum amount. Now in

here, you can click on uh create and

save. and this method will be added. Now

we can select any method during the

creation of the product any time. I'm

just keeping all these options

available. Okay. Now we can also create

shipping classes, different shipping

classes other than the regular rate or

free shipping. Scroll up, go to the

classes. We can click on add shipping

class. So for example, you have some

product in your store that is really

heavy or really hard to ship or it has

really expensive packages. You can

create different class for that like

premium shipping. You can add any slug

in here. So you understand that you can

add any description. Actually you have

to add a description for for the

heavy

packages.

Okay, then you can click create.

Now if we go back to the shipping zone

and we we can see the rest of the

country is already added. We can click

on edit

and it has two shipping methods regular

and free shipping. We can go to the

regular rate. Click edit. Now in here

you'll see more option has been added.

The shipping class costs. Now we can set

up if that product has the premium

shipping what that will cost. Maybe I

type here $12. And here in the no

shipping class cost, if it doesn't have

any extra packages or premium packages,

it should be back to by default $5.

Okay, just put the same amount here as

this amount. So when we will be creating

products, we can select whether it's a

premium shipping or any regular

shipping. Okay. And you can add as much

classes as you want. Okay. So let's save

and we'll discuss more about it and more

practically about it later during

creating the products. Okay. So now

scroll up enough ideas for shipping. Now

we have to set up payments for our

e-commerce website. Right. so that

customers can pay us directly on our

website. So click on payments

and you'll see few options like accept

payments through u then PayPal payments

then things like take offline payments.

This is basically cash on delivery. If

you click on it this is the basic step

like you can click on it and see direct

bank transfer, check payments, cash on

delivery. These are the offline

payments. But we want to add really

popular payment methods like Stripe and

PayPal. And for that, we're going to

need two simple plugins. One is for

Stripe and one is for PayPal. So, you

can really quickly go to the plugins.

Scroll down, click on add plug-in,

and in here we can search Stripe

and you'll see this one, payment plugins

for Stripe Woo Commerce. And this is by

payment plugins. We need this one. We

don't need other ones like this. So

click on install here. Installed. Now we

need one for the PayPal. So from the

search I'm going to search PayPal. Just

search it. And the same way you'll get

this one uh payment plugins for PayPal

WooCommerce. And this is also by payment

plugins. So click install now. Okay.

After installing, let's go to the

installed plugins

and simply activate these two. Selected

like this from the bulk actions. Select

activate. Click apply. And these two

plugins will be activated. Okay, we're

done. Now we have to go back to the

oocommerce settings. Hover on the

oocommerce. Go to the settings and then

click on the payments. Now once we go to

the payments, you'll see so many option

has been added after installing the

plugins. So before we didn't have the

Stripe option, but now if you scroll up

here,

you'll see this credit cards Stripe by

payment plugins. This one, this is a

really nice one. And this one is already

activated. We can see, but we have to

manage this one. Before that, let's

enable the PayPal one also. So scroll

down all the way to the end. It should

be here. Okay, this is here. PayPal

gateway by payment plugins. This is

inactive. So click on enable. If you

want, you can also turn this PayPal

credit card gateway by payment plugins.

But this one is good enough. Now we have

to set up the Stripe with our e-commerce

website. So click on the manage.

You'll land here. But we need to go to

the API settings. We need to connect the

API of Stripe with our plug-in here. So

if you have the stripe account, log into

the stripe.

So after logging in the stripe, you

should see a dashboard like this. And

from here, click on developers

and click on API keys.

Scroll down. You'll see the publishable

key and the secret key. First click on

here to copy the whole key. Go back to

the oocommerce or dashboard.

And here scroll down you'll see the

publishable key. So on this field delete

and everything and paste that

publishable key from the stripe. Now go

back to the stripe and copy this secret

key. Go back here, delete this secret

key and paste the new one. This is our

secret key. Now if we click on

connection test and this is saying

connection test to stripe was successful

and this is on the test mode but when

you're doing it for real when you're

connecting the stripe account for real

it will the procedure will be the same

but make sure on your stripe you are on

the live mode. Click on the switch to

live mode here it will show some setups

like adding your real cards and stuff.

So after completing this verifications

and all you'll be in the stripes live

mode not in the test mode and also in

here before pasting the publishable key

and secret key make sure the mode you

select is live from here. If you want me

to make more detailed video about

connecting stripe let me know in the

comments. I'll make a detailed video

about connecting Stripe with oocommerce.

Okay. So for now I'm just keeping it on

the test mode so I can show you how

purchasing works. And in the test our

method is successful here. Now I'm going

to scroll down and click on save

changes.

So our Stripe is all done. Now during

the purchase we can select Stripe card

to pay. Okay. Now the Stripe is done. We

can go back to the payments and manage

the PayPal account. Scroll down. You'll

see the PayPal gateway and click on

manage.

Click on API settings again. And the

method is exactly the same from the

environment. When you're doing it for

real, don't select the sandbox. Just

select production. That means live. Then

from the PayPal's dashboard, you can

copy the production key. You can paste

the production client ID and production

secret key. But if you don't want to do

that, you can just click on connect to

PayPal.

And just after logging in with your

PayPal account here, everything will be

automatically connected. The payment

gateway or or the payment method will be

automatically set. Okay. So here I have

connected my PayPal account and it the

status says connected. Okay. Now save

the changes and we're done with our

payment methods. We have two options.

One is Stripe credit card and other is

PayPal payment gateway. Now we have the

other options. Now these options are not

that essential but if you want you can

just check them out. I'm just keeping

everything default here. Then let's go

to the side visibility. In here we

actually got to do some things. So if

you notice here it says store coming

soon because our store is on the coming

soon state. But from here, if we just

select the live option and save the

changes, our store will be live. Okay,

so this can be really useful when you're

doing the production and finally

releasing it. All right, now let's go to

the advanced and you'll see you can

actually set up the pages for cart page,

checkout page, my account page. So for

the cart page, I'm going to keep the

cart. For the checkout, I'm going to

keep checkout. And for the account, I'm

going to keep the same account. Okay,

just keeping everything default. All

right, now let's move ahead to creating

our products for our online store. And

this is my favorite part. So from the

sidebar, scroll down and click on this

products.

And obviously, we don't have any

products in our website yet. So from

these options, we can click on this

physical product because I'm going to

show you how to create a physical

product first. Then I'm going to move

ahead to show you how to create variable

products, group products, then virtual

products. So let's click on here.

All right. So here first we have to add

a product name.

So I just pasted a name for my product.

Now we can close this popup introduction

pop-up. Okay. So after we have the

product description. So if I show you

the description is basically this text

right here, right?

So let's add a description here.

I just added by the way this is a really

high rich text editor. This is fully

like a Google doc or uh Microsoft Word.

You can select any text and edit that

specifically like you can make it bold.

You can make itallic like that if you

want. And also you can select any text

and color that text specifically like

this. Okay. So I'm going to keep it as

it is. Now if we scroll down this is the

product data. First of all from here

make sure you select simple product

because we are creating a simple

product. Under the general this is

regular price and this is sale price.

For example I put regular price as $70.

Type the price like the $70

0. Okay. Then if you want you can add

sale price like $65.

Now on the product page this price will

be cuted and this this price will be

shown as current price. Okay. Now you

can select the tax status as taxable

shipping only or none. I'm going to keep

it taxable and we can select the tax

class and you'll see the tax class you

have created on the tax setup. Right now

after that we can go to the inventory

and on the SQ the full form of the SQ is

shopkeeping unit and this is basically

an unique identifier for each product.

So as an SQ I'm just going to copy the

whole title from here. Paste the title

in here and delete all the space instead

add hyen like this

just like this. And this is an unique

identifier for this specific product.

Then we can select the stock management.

If we check it, we can show the

quantity. How much quantity is left for

this particular product. If this is 10,

customer will see only 10 products left

on the store. If you make it 100, you

have 100 of these watches in your store.

So, let's skip it 50. Okay. After that,

you can go to the shipping and this is

the shipping informations like weight

and dimensions. So, weight is on the

libs. So, you can put the product weight

exact weight in the libs here in the

libs unit. So I'm going to put a

specific weight like this 0.22 libs

which is around 100 g. Okay. But if you

want you can change the weight unit as

kilogram or g and the dimension is in

the inches. So you can add the length

like 2 in. Then width which is actually

refer to the whole box of the watch. The

width should be like 1.7 in and height

should be like half of an inch. Okay.

And from the shipping class, you can

choose the created shipping class which

is this premium shipping if you want,

but I'm not selecting it because this is

a regular product. So, no shipping

class. Now, you can go to the linked

products. You can add any products as an

upsell or cross sales. If you have any

other products on your store already,

you can show that you can show that

product as a upselles or cross sales.

But we don't have any product in our

website. This is our first product. So

I'm going to tell you I'm going to talk

about this options later when we have

more products. Okay. Also, I'm going to

show you all these options attributes

when we are creating the variable

product when the watch will have

multiple colors. Okay. So this this all

you need for a simple product. Nothing

you have to do. Just scroll down and

this is the short description. And

that's the description you see on the

products. Short description right here.

So we can add a really short description

like this. Okay. Now let's focus on the

right side of the product. All of this

metadata. First we can save this product

as draft and save it later and publish

that later. Then you can edit the status

visibility. Then publish on date. You

can edit the date and all of the meta

data. Now, if you scroll down, we have

this product image. We can set any

product image as a thumbnail of our

product. If I show you

in the shop page, we'll have this

product images or product thumbnail,

right? Then if we click on any product

here, it's showing the product real

image. So this is the place we we can

set the product image from. So click on

here and it will open the media library

where we keep all the images, all the

videos files for our website. And this

is currently empty. I'm going to upload

some images in here. By the way, if you

want to use all the images I'm going to

be using here in this project, you can

just go to jimfodgial.com.

Link is in the description. And if you

just click on this download the

resources I have used in the tutorial,

you'll get a asset zip file and from

Google Drive just simply download that

file.

Then unzip that folder

and in the folder you'll see two

folders. One is templates. We're going

to be needing this later. Then one is

images. Click on the images and you'll

have all the images I'm going to be

using in this tutorial. So, let's go

back here. From here, I'm just going to

upload all the images by dragging and

dropping it in here.

Now, all of our images is being uploaded

in the image library.

Let's wait a few moments.

Okay, all the images has been uploaded

perfectly. Now, from here, we can choose

a thumbnail for our product.

I'm going to select this one and click

on set product image and this image will

be here. This is a transparent image and

we can see this image as a thumbnail and

the product image like this. Now if you

want you can add product gallery from

here. Click on this add product gallery

images.

So from here we can select multiple

images like this like select an image

and click on add to gallery. it will be

added. Then click on gallery again.

And select another image.

This will be added.

Okay. After that, we have the

categories. We can categorize this

product by using categories. So I'm

going to deselect this uncatategorized

and click on this add new category. We

can add any categories like men's watch

and click on add new category.

Then add another category like

women's watch.

And we can dis we can select multiple

categories like this or select only one

category like this. After that we have

the product tags.

You can add any tags related to that

product like women

red strap

analog like this. Okay.

So these are the tags and categories.

Then here you can add the brands like

from what brand is this watch for. Then

of course you can add a product video

URL and the video will be played as a

product intro video. Okay. So after

adding all the information, all the

metadata, all the images, you can just

click on this publish to actually

publish this product on our website

store.

Now if we go to our front end website,

this is a this is showing a random post

page. But we can go to our shop page by

entering an URL. So after our domain

name, if we type /shop

and click enter, it will take us to our

shop page. And we can see this watch has

been added. We can open it. And by

default, without any customization, this

is looking like this. We can see the

real image. We can see the original

image. We can swipe through the

galleries like this.

And we can see all the information like

the product name, product price, short

description, product stock, then

quantity selection and add toart button

and all the metadata like these. We can

see the description. You can see the

additional information, the weight,

dimension and also the reviews.

And we'll fix everything here messed up

like the buttons are overlapping each

other. We'll fix that everything in

customization. But we can say we have

created our first physical simple

product.

And now I'm going to show you how to

create variable product. If you have

products or watches that has different

sizes and different colors, I'm going to

show you how to do that. So let's go

back to the products. And from here we

can click on the product.

We can see one product. Now we can click

add new product.

So, first of all, we got to add a title,

right? I'm going to rename this timeless

elegance man's chronograph watch. Nice

name. Now, let's add a product

description. I'm going to paste the

description here.

And as you can see, we can actually add

tables as well because this is a rich

text editor. But on this watch

information, we can just select it and

make it heading two to make it bigger

looking. Okay. Now I'll scroll down. We

have the product data. So first of all

from the selector we're going to select

the variable product. Now after

selecting variable product you see that

uh price option is gone. The price

option will be on a different part. I'm

going to show you. But first of all what

is variable product? I'm going to

directly show you an example product. So

this is a variable product. It has

different color variables blue, gold and

silver. And as you see for different

color variation, it has different

prices. The price is being changed when

I'm selecting different ones.

So we want the color variation for our

own product.

And here the pop-up is saying start by

adding attributes. Add attributes like

color sizes and all. So we can go to the

attributes and add the attributes color

sizes and all but I recommend you to go

to this attributes under the products.

Go to the attributes but let's open it

on a new tab so we don't lose this

progress in the product creation and

also if you want you can just publish

it. So it's saved. So as it's saved now

we can go to the attributes. So in here

first we got to add a name of the

attribute. I'm going to name it color

and on the slug you can add like accent

color accent color of the watch. It

means that now under the type let's

select color and then click on add

attribute.

Now we can see the color is added here.

Now we can click on configure terms.

Now we can actually rename the colors

directly. like first I'm going to make

it blue and here like blue accent color

and if you want you can add a

description but we have this color

picker here we can pick a color directly

from a color picker like I'm choosing a

blue color from here and clicking on add

new color this blue will be added here

now we can add another color like gold

then on the color picker. We can choose

a gold color. Something like this. You

can also add color code in here if you

want. So, we got the golden color. Now,

click on add new color. And let's add

our last color, which will be silver.

And from the color picker, you can first

select the white and choose a gray color

that looks like silver. Or if you can

Google the silver color code and add the

code in here. So this is the exact

silver color I have added. Now click on

add new color.

So basically we got three colors silver,

gold and blue. And these are our color

variations. Okay. After creating it we

can close the tab and go to our product

creation and make sure you update it

first so it saves the product creation

and it'll automatically refresh as well.

So scroll down. Now if we go to the

attributes then we can add existing

attribute from here. So I'm going to

search for color and the color is

showing. Select

and you'll see the color will be added

like this. Then on the select values we

can search for different uh color

variations like blue, gold, silver. But

I'm going to click on this select all

and it'll select all of the colors. Now

I'm going to click on save attributes.

Okay. After saving the attributes I'm

going to go to the variations and this

is the important one. So here we have

two option. One is generate variation

and add manually. I recommend you to

click on generate variations

and it will ask for the confirmation.

Just click okay.

And it'll generate three color variation

blue, gold and silver. And we can edit

the individual ones. Like if we open the

blue, we can add different image for the

blue. We can add different im different

price for the blue. We can add different

sale price for the only blue. Then

things like weight, dimension, we can

add all of those things for specifically

blue color variation. Okay. So from the

upload image, I'm going to click on it.

So for the blue variation, I'm going to

select this watch image. It will be

thumbnail for the blue. Then for the

blue, I'm going to add the price here.

So the regular price 110 and the sale

price maybe $90.

And this is in stock. You can add

different weight, length, width, height.

I'm going to put it quickly.

Okay. Then you have option to select

different uh shipping class like this,

text class like this, and uh different

description for different product. But

I'm not going to add the description

because we already have the description

field otherwhere. Okay. So, let's close

this blue one, blue variation, and open

the gold variation. And for the gold,

I'm going to choose the image. So, from

here, I'm going to select this one.

And this one's price 100 and sale price

$80. And you can add so on. Now, I'm

going to close the gold and add the

silver image.

and choose this image. This watch has

silver accent color. Then on the price,

maybe the price is $100 and sale prices

$75.

Okay, so we have added the prices and

all the information for each variations.

Now we we can still go to the inventory,

add an SQ. I'm going to add the SQ same

as the title, but of course modified

like remove the spaces and add hyphen

instead

like this. I'm going to also turn on

stock management and make the quantity

30 only. Then globally we can add all

the metadata and product image. So,

choose a product image for the whole

product. I'm going to scroll down and

choose the golden one as a thumbnail of

the product. This will be by default

shown. Now, of course, we can add other

gallery images. Click on here. So, in

the gallery, I'm going to put blue.

Also, I'm going to add the silver one as

a gallery. And if you want, you can also

add a hands-on image from the gallery

like this. this. I'm going to choose a

random one. And of course, you can

choose the categories. Deselect the

uncatategorized. Select men's watch. And

if you want, you can add another

category.

You can add brand name as a category

and select that. Then on the tags, just

put anything you want.

You can also click on here and choose

from previous categories you have

created.

I selected analog.

then choosing

or making blue, gold

and silver.

Okay, so just adding randomly some

categories and as a brand you can add a

brand name like this. Okay, so this is

enough. So this is our variable product.

Let's publish this or update it and see

how it's looking in our page right now.

So after publishing, let's go to my

store.

Go back. Go to the shop page. And we can

see the variable product is added. And

on hover, it's showing the gallery

image. And as you see, this is showing

it a little bit differently. On hover,

this is showing add to cart, which is a

simple product. But on hover, this is

showing select options. Let's open this

product.

And we can see alongside all of the

information, this is showing color

attributes or color variations. So we

can click on the blue. The image will be

changed to blue. We can select gold.

Image will be changed to gold and it

will be silver like this. We can also

click on clear to clear the variation

choosing. And also the uh different

color has different prices as we set up

right. So it has all the informations

and here this is now showing related

product like the it's showing this

product as related product because it

has a similar tag and similar category

as this product we have right this is

men's watch the category is men's watch

and also this products category is men's

watch so this is showing as a related

product

everything is like smart and automatic

with oocommerce. We don't have to worry

about tiny details. Okay. So this was

our variation product where we can add

same product but with different

variations. The same way we have created

the color you can create other

variations like sizes, brands, all of

them. Okay. All right. Now I'm going to

show you how to create virtual product

or digital product.

If you want to sell any digital product

on your website related to watches like

an ebook, you can do that. I'm going to

show you how to do that. So click on add

new product.

And first I'm going to show you an

example of it.

So in our shop you see this product.

This is a digital product or virtual

product.

This is about complete guide for strap

adjustment, time setting and maintenance

for a watch.

So after anyone buys this product, they

can directly download this PDF file

attached with this product. And I'm

going to show you how to do that exactly

like this. So first let's add the

product name.

And one more thing I didn't show you.

This is the perma link and you can see a

link generated as a page link and this

is based on the exact title we're having

here. So if you want you can click on

edit to edit that permal link. I'm going

to show you what this is for. So if you

if you open a product right on the

address bar you'll notice the product

title is on with the link right. So if

you want you can adjust or edit the

product title as a permal link right

from here. Okay.

All right. Now let's go ahead and add a

product description

here. Now scroll down and from under the

product data this time we're going to

select the simple product but on the

right side I'm going to click on virtual

and also check the downloadable option.

Virtual makes the whole product virtual

and the downloadable makes the product

downloadable. We can attach files like

PDFs, videos or anything we want. Then

first we have to set the price here.

Let's set the regular prices $50. And we

don't have any sale price. Then we have

the downloadable files option. Just

click on the add file and we can add

files through any link or click on

choose file and directly choose any

files from your media library. So in

here I'm going to upload my PDF file. So

I have a PDF file which is this all

about the watch. Now I'm going to upload

that PDF file in our media library.

Just drag and drop the PDF file like

this in here. it will be uploaded

pretty easily and just click on insert

file URL and this URL will be selected

and this URL is from our web hosting or

our media library. If you want you can

add more files but I'm okay with this.

Now we can set up a download limit. How

many times a customer can download the

PDF file after purchasing. I like to

keep it unlimited. Then download expiry.

I like to keep it never. Then uh this is

taxable status. I'm keeping it taxable

and tax class keeping it standard. Okay.

Now in the inventory just put a simple

sq really simple like this and it'll

work. Now let's go to the right part and

add an image for the PDF. So click on

here choose thumbnail and in here I have

a thumbnail already for the watch PDF

and insert this image. Now scroll down.

We can add a new category which will be

called ebook selected. Now on the

categories we can add

many categories like this

like this. Okay.

Now you can just publish this product.

Now if we go to our store,

we can see this is our virtual product.

We can open it. We can purchase it. You

can select the quantity. But it doesn't

matter how much you how many you are

purchasing because this is a digital

product. But other than that, this is a

simple product with all the information.

But you can see there is no extra

description at all because this is a

virtual product. It doesn't have any

dimension at all. Also, there is no

related product because we don't have

any categories or tag matched with any

product. Okay, this is the difference.

Now, we learned how to create a digital

product.

Later, I'm going to show you if a person

buys this product, how they can download

the PDF file. It's really easy. So, we

got three kind of products. simple,

variable and virtual. Now I'm going to

show you the last type of product which

will be really interesting which is an

affiliate product. So let's click on add

new product.

Okay. So first thing let's add a name

then add a description.

After that now from the product data

select external or affiliate product.

Now everything will be gone and this

product URL and the button text will

show up. First you have to put your

affiliate link like here I'm putting my

Amazon affiliate link. Now here on the

uh button text you can say buy product

or you can type buy from

Amazon like this. So people know this is

an affiliate product and it will take

them to the Amazon product page. Now you

can uh put the price. I'm going to make

it the exact price as the Amazon $107.

And the rest of the options doesn't

matter like taxes and tax classes

because this product will be purchased

from Amazon page, not our page. Okay.

So, we can of course select a thumbnail

for this. So, you can see the image from

here. I'm going to select this one.

And as a gallery image, we can add one

more image like this.

And also we can select any category for

from existing ones like this. And also

add tags from existing ones.

Now we're ready to publish this and

we'll see how it looks. Publish. Go to

our shop.

Refresh the page.

And you'll see the affiliate product has

been added here. So, we can click on the

product. It'll take us to the product.

Okay, we didn't add the short

description here. So, we can go ahead

and quickly add the short description

here like this. And update

and go back there. Then refresh the

page.

And we can see this is the product and

this is an affiliate product there.

There's no quantity selection or stock

left showing. We can see all the details

all the related products to this. Now if

we anyone clicks on this buy from Amazon

it will take them to that exact Amazon

affiliate page and from there they can

easily buy that product.

So with the affiliate link you earn the

commission from Amazon selling it on

your store. Okay. So these were the four

kind of products. simple product,

virtual product, affiliate product, and

the variable product. Now you know how

to create all of these. So we can go to

our dashboard and click on the products.

We can see we only have four products,

but to fill up our store to make it look

good, I'm going to quickly add more

products behind the camera. I'm going to

quickly add the products and come back

to you.

Okay, I have added all the products the

exactly same way. Now if we go to our

store, our shop, we can see this is full

of products. Now our store is looking

fulfilled. You can add as many products

as you want. The process is exactly the

same I've showed you. By the way, here

I'm going to show you a thing. You see

the star rating here. So you can

basically star rate any product and the

product you star rate will be basically

featured products and later we're going

to add featured product in our homepage.

It will look really nice. Okay. So now

before we start to showcase our whole

e-commerce system how it works. Let's

create coupon codes for our products. So

through the coupon code we can add

discounts on our product and it's really

easy just go under the marketing and

click on coupons

and from here click on add new coupon.

So here basically we have to add the

actual coupon code. So for example I'm

adding JFD

20 and in the description I'm typing 20%

discount. Okay. Now after that we have

coupon data. So in here we have the

option discount type. Currently this is

fixed card discount. So for example on

the coupon amount if I make it 50

doesn't matter what the product price

is. The coupon code will give $50

discount. But if we select the

percentage discount and we type 50,

doesn't matter what the product price

is. By using that coupon code, the

product price will be 50% less or

discounted. So I prefer the percentage

discount and also the coupon amount I

want 20. So it will be 20% as our

description says 20% discount. Then we

have the option allow free shipping. So

if we allow this, if we check this by

using this coupon code, the shipping

will be free for that product. Okay. So

I don't want that. But if you want, you

can allow it. After we have the coupon

expiry date. So if you click on here,

you can choose any specific date. For

example, I choose 14. So after this

date, the coupon code will be expired

and no longer eligible to use this

coupon code to have discount. Right?

Then let's go ahead and go to the usage

restriction. In here we have so many

options like minimum spend, maximum

spend. So in the minimum spend, you can

add a number. For example, 100. So, in

order to use this coupon code, customer

has to at least purchase or at least

spend $100 while purchasing the product,

right? And this field, this maximum

spend, this field allow you to set a

maximum number a coupon can be used on.

For example, we have 20% discount and

the maximum number of product is $500.

So if anyone buys product more than

$500, they cannot use this coupon code.

They no longer will be able to use this

coupon code to have discount on the

price. Okay? Even if it's $51,

the coupon code won't work. Okay? But I

don't want any limitation, any usage

restriction. So I'm just removing all

the numbers. So the minimum spend and

maximum spend is unlimited.

Okay. So let's scroll down and we have

the other options like products. You can

choose any specific products to attach

the coupon code on. So for example, I

select a product in here, this luxury

goldplated women's. So this coupon code

will be only available for this specific

product which is this. You can add more

products, more than one products in here

if you want.

Exactly like this. So this coupon code

will be only available to these two

products and you can also exclude

products like if you select any products

here just search the product

and you select one product here. So on

that product you cannot use this coupon

code. It's like this. But I don't want I

don't want to uh include or exclude any

product from the coupon code. I'm going

to keep it empty. And also you can uh

associate this coupon code I mean make

the coupon code exclusive for product c

specific product categories specific

product brands then allowed emails all

of these. Okay.

Then we have the usage limit here. It

has usage limit per coupon. You can set

a number like 10 1 2 3 any any number or

keep it unlimited. So this coupon can be

used unlimited amount of time. Okay.

Then you have the limited use to X item

and usage per usage limit per user.

Let's set the usage limit per user 10.

And the rest I want to keep it unlimited

and empty. Okay. So we are basically

created a coupon. Now we can just

publish it and the coupon will be

available to use. Okay. During the

checkout I'm going to show you how to

use the coupons. And now actually we're

going to overview the whole system of

e-commerce. How people can buy it, how

people can add to cart, add to wish

list, then after how they can purchase

it. So let's start with adding some

products in our cart. So from the shop

page, let's add some few random products

like this. Just click on add to cart

and it will be added to the cart. a

sidebar. A mini cart will be show up

here. You can just close it like this.

Then let's add one more from here. And

then let's add this virtual product

also. And as you can see these are being

added nicely here. Then let's add one

which has multiple variation like this

one. So for this one we have to click on

select options. Then it will take us

inside the product. And from here we

have to choose colors and variation.

Like from here I want the blue one which

price is this and select the quantity.

Then click add to cart. This one will be

also added to the cart. And we can see

the shopping cart is the number is four.

Right now for product is selected or

added to the cart. So we can open the

cart right from here and click on view

cart to open the cart. By the way,

before that, let's see how wish list

works. So, from here, I h click on add

to wish list

and the product will be added to the

wish list. Okay. And we can see the wish

list by going to the dashboard. Click on

the users icon and go to the dashboard.

Here we have so many settings like

dashboard, my wish list, order,

download, so many things. I'm going to

go through every of them later. So first

let's go to the wish list. My wish list

and you'll see true product I have just

added into the wish list showing here.

And from here you can also click on add

to cart to move the product to the cart.

From here you can share this product or

wish wish list on any social media in

here. And this is the wish list. And I'm

going to show you all these options

after we make a purchase. Okay. So from

here let's open the mini cart. Then we

want to see the whole I mean full cart

page. So click on view cart

and it'll open the full cart page where

you can see the products all product

details. Then you if you want if any

customer wants they can increase the

quantity of the product. Then if they

want they can remove the product from

here. Then also on here it has a add add

coupon option. In here they can add

coupon codes but I'm going to add the

coupon codes in the checkout. Okay. Then

they can see the subtotal here. Then

they can see the regular rate which is

the shipping rate. And this is the

estimated total which is this amount.

Okay. Now after seeing all the

information people can click on proceed

to check out.

And this is our checkout page where we

fill up our contact information like

email then shipping addresses. In here

we have to select the country or region,

our first name, last name, address,

city. So very quickly I'm going to add

all the details and come back.

Okay. Then it has a phone number which

is optional. And then if we scroll down

here we have the payment options. First

the card is selected which is by stripe

but you can choose the PayPal also. And

during the checkout it will ask for the

PayPal login or PayPal payment request.

Okay. But now for now I'm going to click

on the card number to add my card. Okay.

So let's add the card card number.

Then if you scroll down, you can click

on save payment information to my

account for future purchases. Okay. So

I'm going to do it. I'm going to check

this

so it will be easier for me to buy

products with my card in the future.

Okay. Okay. Now if we focus on the right

side, we can see the order summary. All

the products are showing here. Now here

we have a option add coupons. Okay. So

here we can add the coupon codes we

have. So earlier we have created a

coupon code called JFD

20. And if we type the coupon and click

on apply the coupon code will be working

and we're getting $100 discount. This is

showing it like this. And all together

with all the discount and charges our

total price is this amount. So after

seeing this just scroll down and click

on place order

and after placing the order it'll show

the thank you page. It says thank you

your order has been received. It'll show

the order number, date, total, payment

method, all of these. And it has a

section which is downloads because if

you remember, we have added a virtual

product into our card and purchased.

This is called complete guide for strap

adjustment, time settings and

maintenance. So we can just click on

here under the download and a PDF file

will be downloaded directly which we can

read like this.

It's cool. And under the order details,

we can see all the order details. The

individual prices, subtotal, discounts,

shipping, and total. Every information

we want to see, it's available here.

Okay. Now, it says order has been

received, which means the order

information is sent to the administrator

of the website. So as an admin from our

dashboard we can just go to the orders

to see the order. Uh from here scroll

down hover over the oocommerce and go to

orders

and we can see this order is pending or

processing. We can see the name of the

client and if we click on here we can

open that particular order. In here we

have so many options. We can see all the

details all the order details we we need

to see. Now from the status we can we

can make it processing on hold completed

canceled refunded failed or draft. So

I'm going to make it completed as an

administrator.

And from under the orders actions, we

can choose actions like send order

details to customer, recent new order

notification, then generate download

permissions.

So I'm going to click on send order

details to customer and click on update.

And the customer will get a order

details copy and the order will be

completed. Now as an user if we go to

our dashboard

then we go to the orders

we can see we have this order. We can

click on view and we can again see all

the details and we have the download

link for the PDF file. Okay. So this is

our orders. Now we can go to the

download option and from here we can

again download the PDF file. The

downloads manage all the downloadable

things. Now we can go to the addresses.

If a customer wants they can edit their

billing address and shipping address

just by clicking on edit billing address

or edit shipping address like this. They

can totally change all the information

like first name, last name, street

address, country, city, zip code, phone,

literally anything. Okay. Then they can

go to the payment methods to add more

payment methods or delete existing

payment methods. Then we can uh they can

go to account details to manage all the

personal information, password and all.

Then finally they will have a option to

log out from the account. All right. So

this was the basic overview of how the

whole e-commerce system works. So we can

say our e-commerce is working perfectly

fine but one problem is our landing page

or the main website is looking really

ugly like there is nothing there is no

cache there is no interest of exploring

the website. So we're going to replace

our landing page or the front page with

a nice and professional website design.

I'm going to show you the design we're

going to be adding today.

So for that just go to kitninja.com.

I'll put the link in the description.

So this is kitninja.com. Here you'll

find super professional e-commerce

websites designed. These are made by

professionals with years of experience.

The designs are super dedicated for each

niche. And there are so many categories

of website design, so many categories of

niches. And the perk is they're super

affordable. So from here, I'm going to

search for the template we're going to

be using today or creating today. So

from the search here, if you search

wristy

and in here, you'll get an element

template kit which is super professional

and at the same time affordable. Let's

watch it. Click on here.

So from here you can click on live demo

and you can see the website like this.

You can check the mobile responsiveness,

tablet responsiveness, everything. And

of course if you click on this visit

site,

you can experience the whole website

live like this.

This is really super professional. As

you can see, everything just looks

really good.

So, we're going to be designing exactly

the same template today for our

e-commerce website. But as you know,

designing a website like this takes some

time. Although I can show you how to

create these kind of website in 2 three

hours. But to actually build those

following me can take one day or

multiple days. So if you don't have such

time to create an website like this, you

can actually get this exact design and

you already know where to get it. Just

go to kitninja.com and from here you can

easily purchase this template for a

really good price. But let's say you are

a freelancer or an agency. In that case,

you can actually grab all the template

kit Kit Ninja has in one go. Just click

on grab buy all deal and here you can

get access to all premium template kits.

You just have to download the templates

and import it to Elementor. And if you

scroll down in here, you'll see the

single versus all access comparison. So

with the all access, you're not only

getting 100 plus template kits rightway,

you're getting five plus new templates

per month. And of course, you'll get all

of their future updates in the single

plan. That means everything they upload,

if you have the lifetime access plan,

you'll get those templates right away.

And everything you are getting with this

plan is just for $59.

If you are a freelancer or an agency,

with all of these template kits, you can

easily earn $1 to $5,000 making websites

for your clients because the design of

these templates are the greatest. All

right, now let's go back to our

tutorial. So, if you want to buy the

template we're going to be using in this

tutorial, which is this one, it's called

wristy. You can just buy it really

easily. Then watch 2 minutes video guide

and you can just install it on your

website and your website, your

e-commerce website will be looking like

this in no time. But still, if you want

to make the whole website step by step

with me, then let's continue and go back

to our tutorial.

Okay. Now in order to create a homepage

like this, we have to create page right

then when we'll be creating other pages

like uh blog page, contact page, about

page, we're going to create those pages.

But first let's create a homepage. So

let's go back to our WordPress

dashboard. From here, click on the

pages.

So under the pages we can see so many

page has been added and it's mostly by

oocommerce by default uh some pages like

cart page, checkout page, dashboard, my

account all of these added by

oocommerce. Okay. Now we have to create

our own page. Click on add page to do

that

and you'll see an interface like this.

So on the add title I'm going to name it

home. just home and click on publish.

Then again click on publish and the

homepage will be published. So we can go

back

and we can see the home is added here.

We can click on this uh view

and we can see the homepage is looking

like this. There is literally nothing.

This is a fully white empty page. But if

we go to our front end website, like if

we just type our domain name, it's

landing us to a totally different page

where you can see a random post and

random informations. We don't want that.

We want our homepage to show to be shown

if we type our domain name. So to do

that, go back to the dashboard

and scroll down under the settings. Go

to reading and we have the option your

homepage displays. Currently this is

your latest posts which we can see this

random posts but instead we'll select a

static page and from the homepage we

want to select the page. So we have just

created this homepage right? So I'm

selecting this home as homepage. Then

scroll down and click on save changes.

Now if we just go to our domain name

from anywhere in the world from any

browser, it will always take us to that

homepage we have created. Although it is

fully empty and white, but we're going

to turn this empty and boring page into

this masterpiece of a design in this

tutorial today. Just trust me and follow

the process.

In order to customize this, we already

have Elementor page builder. So, let's

go back to the dashboard. Go to the

pages and open the homepage. Just click

on the home. And we want to edit this

homepage using element page builder. So,

we have the option edit with Elementor.

Click on it.

And from here, just close the

notification. And we can see our

homepage is opened by element page

builder. And the real fun will begin

from now. We can see our front end

website and the element page builder

looks exactly same. We have a default

header. We have a default footer and in

the middle this is fully empty exactly

like this. Right? So in in the empty

space we will add elements like these.

Okay. all of these. I'm going to show

you exactly step by step how to do it

all.

But before we dive into creating our

design, let's understand or get familiar

with Elementor page builder like how it

works. Okay. So on the right side, as

you can see, we'll build a website from

scratch. But if you notice on the left

side, it has a sidebar. And inside the

sidebar, it has widgets and elements

like layout, containers, grid, heading,

image, text editor, video, button, all

of these basic elements. But if you

scroll down a little bit more, you'll

see the pro drop-down. In the pro,

you'll have some advanced tab like

search, posts, portfolio, gallery,

image, galleries, loop, carousel, all

all of these. But these options or these

widgets only comes with the Elementor's

pro version. But don't worry, we can

build our website only by using

Elementor page builder because in the

free ones there are so many elements and

widgets and also we have our third party

plugins like elements kit. With the

elements kit there's there comes a lot

of plug-in and widgets. Then with the

mid form so many we'll get so many

customization widgets. Okay.

Here you can see one more uh widget or

plug-in which is more convert. Using

this we can create design of wish list.

Okay. So for now I'm just going to turn

this off like this like fold this and

we're going to use mostly from the

layout and the basic. Okay. So let's see

how element page builder works. First we

can drag any elementtor and drop it

inside this box. Let's say I add this

container. And the container basically

adds a basic box like this. And if you

now notice on the left side, the whole

thing has been changed. We have so many

options just for this newly added

containers. So we can control this

container right from the uh sidebar. For

example, we can make the content width

full width. Now, if we decrease the

width like this, you can see the box

width has been decreasing. Then you can

use main height to control the height of

this box.

Then if you want, you can go to the

style and click on this background type

classic. And if you click on the color,

you'll be able to pick any color for

this container

or for this box.

Okay. Now, within this box, inside of

this box, you can also add items or

contents. So, click on this plus or this

plus and all the widgets will come up

again. Now, let's say I add this heading

widget inside of this box. It will be

inside of this box. Now you can triple

click to change the text or you can use

this field on the left side to type any

text

exactly like this. Right now if you want

to style this text, you can go to the

style tab of this text. Then we have the

alignment with it. We can center the

text like this. Then we have the

typography. We can open the typography.

And there are so many options like font

family. There are so many font styles or

family available for free. We can choose

any font family like this and it will be

instantly changed to that. Then we can

search for font family like one of my

favorite font family is poppins. I'm

searching and selecting it will be

instantly changed to that. Then using

the size slider we can decrease or

increase the size of the text or if you

want you can put the exact value you

want for the text. Then using the weight

we can make the text thin or bold.

Higher number makes it bolder. Lower

number makes it thinner. Okay. Then we

have the transform. Using it we can make

the text uppercase, lowerase, capitalize

all of these. Then with the decoration

we can make the text underline,

overline, line through all of these.

Then using line height we can increase

or decrease the line height of any text

line. Then with the later spacing we can

literally add space between each of the

letters. And similarly with word spacing

we can uh increase the space between

each of words.

So combining all of these options you

can create really nice typography. Okay.

So I'm just uh selecting the value and

and clicking backspace to delete and

making it back to default. Okay. Now

let's close the typography. We have

other options like the text color using

it. Obviously we can change the text

color to anything we want.

I'm making the text color like this for

now. Okay. So this was an example. Now

let's add more kind of uh elements or

widgets to showcase. Let's say I add

this text editor. The text editor also

adds a text widget or text element. But

this time we get this super rich text

editor with it. We can literally select

any portion of text like this and

individually stylize that like changing

its color. You see the color has been

changed then styling it making it bold.

itallic, underline, all of these. So

this is basically like Google Drive or

Microsoft Word. With it we can do many

things. Okay. But of course it has

global stylization like go to the style.

You can of course make it center. Then

open the typography to choose a font

family like popins, increase or decrease

the font size like this. Then uh control

the font weight and all of the other

option comes with the header. Of course,

you uh will be able to change the text

color to anything.

So, this this text editor widget is more

suitable for paragraph kind of text and

this heading widget and is more suitable

for heading text like big text. Okay.

Now, let's add one more final element

like this button. Just drag and drop

under the widget and a simple button

will be added. You can change the button

text from here like change to anything

read more like this and under the link

you can put any link you want for

example you type here google.com

now if any person clicks on this button

it will take them to google.com another

example like you type Facebook.com

your

account. Now by clicking on this button,

it will take them to your Facebook

account. How cool. Okay. Now this button

also has its style tab. In the style, we

can make the position center to make it

center. Then the button also has the

typography because it has text in it.

Like we can open the typography, make uh

choose any font family. And of course we

have the size slider like this. Then we

have so many other options like the text

color. By the way, you can click on this

color sampler and pick any color

anywhere from your screen. Just click on

the color and select the color. And the

button color will be exactly like this.

Then we have the buttons background.

Select classic. And you can change the

background color of this button like