How To Make An Ecommerce Website (Easy, Fast, Free)

In this video many show you how easy it is
to create a full e-commerce website in just

a matter of minutes hi my name is Adam from
WPCrafter.com Remick WordPress tutorial videos

for non-techies if you knew your consider
clicking on the subscribe button if you don’t

want to miss a thing click on the bell off
to the right YouTube let you know when I have

a new video and work to be looking at the
Astra Theme today in this video let me show

you what we are building right here is the
website and were building a whole website

but this is what the WooCommerce e-commerce
platform is going to look like it’s going

to show us our products in this beautiful
grid right here and then in this video I’m

to show you how we made this a beautiful pricing
page right here or product page that features

your products and then this is how beautiful
our shopping cart is when someone puts an

item in the shopping cart and lastly this
is going to be our perfectly looking checkout

page for this shopping cart and if you notice
let me get out of the picture there’s this

beautiful little shopping cart badge in the
header when someone hovers over it it’s good

to show them exactly what’s in the shopping
cart and give them a chance to go to the cart

or check out let me show you what that’s gonna
look like real quick if I hover over it there

it is the product in the cart button and the
checkout button and someone can even remove

a product if they chose to really do this
all in this video is not to be a long video

because this is so easy to implement it so
let’s not waste any time let’s just go ahead

and get started so here I am in a fresh installation
of WordPress so the first thing we need to

do is install the Astra theme and the way
we do that was a good we go to appearance

and then we click on themes and this shows
us the themes we have installed her to go

ahead and click on add new and then click
on the popular tab or go where it says search

themes and enter Astra so I just entered Astra
and right here you want to go ahead and click

on the install button it’s been a download
this to your WordPress installation and then

click on activate now because I’m using some
new features that are going to be released

in a matter of days not weeks days so if you’re
watching this video in a couple days this

is going to be added and you’re gonna follow
this step I need to install the beta version

that is going to be released here real soon
so I’m in a go ahead and actually delete Astra

and manually install it through the version
that I have downloaded okay now I’ve installed

this version that I manually downloaded but
don’t worry if you’re watching this in a couple

days you’ll be able to do it just by searching
for Astra and installing it right there so

next thing we want to do is we want to install
a plug-in called Astra Sites some of the plug-ins

add new and on the search area here a minute
enter Astra again and here it is the first

result*starter site someone click on install
now and then I’m in go ahead and activate

this know what this plug is gonna do is allow
us to just with a few mouse clicks have an

entire website built for us in a matter of
seconds so to go ahead and activate that and

I want to go to appearance and there’s this
new option right here that says Astra sites

so let’s go ahead and click on that now the
first thing is you want this to be based on

the Beaver Builder page builder or Elementor
for this example, click on Elementor now there’s

many different websites to choose from but
I’m going to choose a particular one and that

is this auto repair or was the template down
here I must’ve skipped over it I always have

a tendency to do this up and it was right
there the whole time this car repair template

but you can see there’s so many high quality
templates that are practical to actually use

some to go ahead and click on appearances
details and preview then I’m to click this

button here that says in stall plug-ins it’s
going to install a contact form plug-in so

that you can receive information that people
give you via contact form it’s can install

Elementor the page builder and its can also
install a bundle that will allow you to add

buttons and things like that just like the
one we see in the top right such is going

to download and install those okay now that
that is done we want to click right here it

says import this site we get this message
here that saying you really only want to do

this on an brand-new WordPress installation
some to go ahead and click on okay so right

now it’s going you download all the pages
the menus it’s can configure everything for

you it’s gonna download the images so this
just might take a moment or two and just like

that it’s done so now what I want to do is
click on this X here to shrink this demo and

now her back into WordPress so now what we
need to do is install the e-commerce platform

called WooCommerce circuit to go to plug-ins
and were going to click on add new and we

can do a search for it right here just enter
WooCommerce now WooCommerce is the leading

e-commerce platform not just for WordPress
but in general they are the leading e-commerce

platform so go ahead and click on install
now that this one might take maybe a minute

to download and install and right after we
activated it’s going to take us through sort

of an onboarding process with several steps
and were going to have to make some choices

but I will walk you through all those choices
right now in this video okay so now it’s downloaded

all I have to do is click on the activate
button and it should pushes right on into

that onboarding sequence and here it is so
we need to just go through these steps so

the first thing is we need to specify where
the store is based so for me I’m in the United

States and I’m specifically in California
now you have to put in your address here I’m

in a put in a PO Box and then right here when
we can choose the currency so it’s automatically

switched from pounds to dollars because of
the choice that I made where the store is

based now right here we need to let WooCommerce
know for selling virtual products physical

products are or both so by default it says
right here it’s selected both now don’t worry

if you choose the wrong thing here because
you can always go back and change it later

so I’m going to just leave this at both now
this last thing here’s a checkbox that is

you saying it’s okay for data that’s collected
in on your WooCommerce store to go to WooCommerce

for them to analyze this is just that identify
bugs and to see how people are actually using

it I’m kind of a private guy so I like to
uncheck that I don’t want my information shared

some to go ahead and fill this addressee if
I click on let’s go is not to let me go without

putting in an address on the put in the address
and then I’m going to click let’s go okay

so here I am on the second step in this is
what I want to use to collect payments you

have several options that are included for
free with WooCommerce the first option is

striped anyone can go to striped.com get a
free merchant account there is no real approval

process and there is no monthly cost or anything
you just pay 2.9% of every transaction plus

I believe it’s $0.30 per transaction these
are typical costs in order to receive a credit

card payment on the Internet so for me I can
leave stripe on you could turn it on or off

you can change this later they do have a process
here I haven’t tried it out worth you check

this box it will actually go through the process
of setting up a stripe account for you not

to go through that in this video and then
right here if you also wanted to accept PayPal

or maybe not stripe in just PayPal you could
do that now I will say the top PayPal option

here you need a certain level of a PayPal
account it’s not just the normal PayPal account

that everyone has this PayPal standard is
the normal PayPal account that everyone has

work when you turn it on you just put in your
PayPal payment email address and that’s how

it’s all done so I can go ahead and leave
that on the also have the option to collect

off-line payments right here this would be
payments via check or one of these other options

cash on delivery I’ll leave those off and
go ahead and click on continue to go to the

next step now this is the step about shipping
so obviously if you have a physical product

you need to know how you’re going to charge
for shipping or maybe you’re not going to

charge for shipping so right here we have
these shipping methods now some of the steps

in the WooCommerce process it WooCommerce
is going to try to install additional plug-ins

that you may not want in this is actually
one of those steps right here it says right

here if you have this set to live rates WooCommerce
is going to install WooCommerce services and

is can install another plug-in called jetpack
so this is where it is right here if you are

going to choose for the shipping method live
rates now I personally like to buy things

from stores where the shipping is free or
maybe just a fixed shipping cost so you could

use a flat rate or you could use free shipping
so for this I’m just going to go ahead and

choose it free shipping and right here I’m
going to choose free shipping as well internationally

but you have all these options the live rates
essentially is no put this plug-in in so you

can put information on every product and it
can dynamically figure out what your cost

is going to be to ship it I’m not in a cover
that in this video but I do happen about three

weeks time coming out a full WooCommerce tutorial
dedicated to WooCommerce where we dive a little

deeper into these different options here and
then you would choose how you weigh things

whether it’s ounces or kilograms or pounds
or whatever and your dimension some to go

ahead and just move forward to the next step
now right here is a another step where they

try to see if you want this you have to also
opt into additional plug-ins being installed

and that is this automated taxes now this
might be good if you have to charge tax for

did dynamically for the areas that you ship
it to I know in the United States it’s pretty

complicated so I live in California and there’s
all these different counties in California

that all have their own different sales tax
rate that I would have to charge so this is

one where you might say you know it’s actually
good to have this WooCommerce services because

they will update that for me as things change
and is pretty complex but I will leave this

off right now to go ahead and click on continue
in this is another step where they’re trying

to get me you could see they really want to
get this jetpack and will cover services this

is another step where they want to put jetpack
and this is a plug in that add some stuff

to WooCommerce that isn’t so crucial but it
adds a bunch of other stuff and I typically

don’t like to have jet pack on my websites
so instead of clicking on connect with jetpack

I’m in a go here it says skip this step because
I don’t want jetpack particularly on this

site so here we are in the last step right
here I can create a product manually or I

can import products from a CSV file when I
want to do some to click on instead of in

a go to return to dashboard now you’re going
to notice that there are a few new options

here that were here before mainly WooCommerce
and products so before I get move forward

in this process I’m going to import some dummy
products into WooCommerce I can demonstrate

all the ways that it can integrate with this
website that we built so what I need to do

is I need to go to tools I need to go to import
and hear some options but what I want is this

word WordPress import right here summit click
on in Saul now is get a download and install

this plug-in so be able to import these dummy
products into WooCommerce so now I’m in a

click on run importer and I have this import
file right here and I’m in a drag and drop

it right there, click on upload file and import
this is just for me to demonstrates the WooCommerce

integration better is to install the urge
import these dummy products so will essentially

have a store that is full of products with
images and everything and will be able to

better demonstrate how this is done why I
said I will be having a full in-depth tutorial

on WooCommerce and this can be how to add
products in all the different options there

that are the most used option certainly but
all the options you have a full understanding

of that and also go through the various WooCommerce
options so that you have a full understanding

of that as well okay so this import is done
now the next thing that I want to do is add

the shop item to the menu so if I go to the
WordPress site or if I go to the front end

of the site right now this is what we see
there isn’t anything new other than we have

this new shopping cart badge in the header
but I want to add an menu item that says shop

so first thing the minute dues go to appearance
in the number to go to menus now what happens

is when we installed WooCommerce and went
through that process it added the essential

pages to WordPress that WooCommerce needs
mainly a a shopping page and this is where

all your products are to be in a list and
also a checkout page and a cart page a card

and then a checkout page so I want to add
this shop page to my menu so here’s my menu

and here’s the shop page, click on this checkbox
here click on add this to menu and let’s make

that the second menu item right there now
I have to click on save menu for to actually

be saved so when I go here to the front end
of the website and do a refresh we have this

new shop option right here so when I click
on the shop option right here it’s going to

show me the products and if you can see it’s
already looking great it’s already looking

branded and that’s because the Astra Theme
the way they’ve integrated WooCommerce is

it’s automatically going to pull the color
scheme from the colors that you’ve already

set up for your website so it will always
be perfectly branded now I want to go in first

take a look at some of these options that
you have available in the customizer for WooCommerce

so here’s this customize option right here
there’s also another way of getting into the

customizer it’s under appearance and then
right here words is customized you can click

on that and it’s gonna take us into all of
these settings and options we have for this

theme and this WordPress site but since were
to look at the WooCommerce ones I want to

go ahead and click on the shop page so that
we can see these different options that we

have available to us so the first thing I
want to look at is is the layout so you can

see this is a layout where we have our products
here on the left and then we have a sidebar

obviously haven’t put me widgets into this
sidebar and I probably actually don’t want

the sidebar there so what I’m to do is click
on the layout option right here and then I’m

in a go ahead and click on the container option
and here we have the WooCommerce layout options

now it’s actually said to what I wanted the
default which is tied to this right here there

are other options you could go boxed content
box and you can also do stretched him and

Aleave that there this is not actually where
I get rid of the sidebars to let me go back

and we have this option here that says sidebar
so when I click on this here is the setting

where I can control this sidebar so right
here for WooCommerce it set to default which

is to show this right sidebar to go ahead
and change this to no sidebar because I just

want to show the products at this stage and
then here we are getting larger images here

now we can actually add him we can add products
to each row right now it’s said to show a

grid of three products I might want to change
that to four and four single products let

me click into a single products you can see
what that looks like and we can decide if

we want the sidebar so right here is the single
product and here’s a blank sidebar where we

could put some widgets and I think for a single
product I also want to get rid of the sidebar

so instead of default to go no sidebar on
that as well now you can also have full control

over the width of the sidebar right here select
summon up back up a little bit and go into

these specific WooCommerce options and here
are let’s just go through them we have our

general options which is to show this card
in the menu so you have it in the menu right

now I can uncheck that in it will disappear
next we have our shop options so let me go

back into the shop by clicking on shop right
here and this is where we can choose how many

products we want or how many columns which
is how many products we want in a row announce

it to three but I can increase that to four
this would essentially allow me to show more

products at the same time I think for it looks
a little better if you’re not can I have a

sidebar and then right here we can choose
how many products per page so right now said

to nine which probably isn’t a good number
because that was a three rows of three which

is nine so here we might want to make it eight
or 12 so we can have either no third row or

a full third row so for me I’m an enter 12
okay now that I’ve entered 12 you can see

now we have three rows each row has four products
in it and this is looking really good so far

now what’s really nice is we can control this
information right here so these are the options

of what I can show underneath a product image
now I can choose to hide an item or reorder

them so right here words is posters this is
the category but if I didn’t want to show

the category I can click on the little I and
it will just disappear and I can totally rearrange

everything as well so if I wanted the price
on the top I can click right here and move

it up and now the price will appear above
the title just like that I think it makes

sense for the title to be first certainly
and if you didn’t want to show the ratings

we can go ahead and make that go away and
we also of course have our add to cart button

there and it’s looking a bit more clean there
but I do like the ratings actually being there

obviously if you have a lot of products that
don’t have any ratings you might want to hide

the ratings because you don’t have them Summit
go back and now we have some single product

options so essentially our single product
option is whether we want to show the breadcrumb

so we jump into a single product right now
and then I’ll go ahead and show you here’s

the breadcrumb I can go ahead and click on
this checkbox and that breadcrumb will disappear

and everything is moved up so certainly up
to you whether or not you want to show in

this display this breadcrumb option so far
I’m really happy with the weights looking

we have this option here to show all the different
images that we put in here for the product

we have our description we have our reviews
right here and also related products are right

here in this grid right there in you saw how
simple this was the set up I mean I really

didn’t have to configure much it was working
almost perfect actually was very perfect there’s

just a couple things I personally wanted to
change which was get rid of the sidebar but

just out of the box he could see I didn’t
have to go into five dozen different settings

to make it look good it just looked good right
out of the box so then you’d want to go ahead

and click on publish to actually publish these
changes that we just made now just in case

I want to go and show you where if you did
want those sidebars want to show you where

you would go to put different widgets in them
so underneath the appearance of theirs is

option here that says widgets in your to see
we have a couple new widget areas so we have

a WooCommerce sidebar this would be that shop
page and then right here we have the product

sidebar and this is where you would put the
widgets for the individual products so now

let’s jump into the front end of this website
again and see what it looks like checking

out or adding a product to your shopping cart
and then checking out some of click on shop

again and here we have that net beautiful
grid now if for products in a row I’ll go

ahead and click on the first one right here
and then I’m in a go ahead and right here

I’m in a choose add to cart but you have this
thing here were you hover the mouse you can

see the image larger and if you wanted to
have this image popped up in the light box

you click on the little magnifying glass and
there it is so let me go and click out of

that summit go ahead right now and click on
add to cart but you notice out the color scheme

is perfectly on brand here it’s fabulous summer
click on add to cart and now what we see happen

is it takes us to this message here that is
also following these branded colors that shows

us that the products been added to the cart
if you look at the cart in the top right corner

it now says one and that’s just to give you
a visual indicator that there’s an item in

the shopping cart now when you hover over
the one you now get to see all the items in

this nice little pop up all the items that
are actually in the card and there’s an act

X to take it out of the cart if you wanted
you see your total right there you can view

the card and you can check out so for someone
to click on view the card and it could take

us right in there and I just love how perfectly
minimal this card is right here at your standard

WooCommerce cart but it’s beautifully styled
right out of the box so I can except coupons

if you issue out coupons in your store and
then I can go ahead and click on proceed to

checkout and it’s the same thing the checkout
is beautifully styled here on the left billing

information on the right a snapshot of the
order it just looks perfectly branded out

of the box so that is pretty much everything
that you’re going to get in this WooCommerce

integration I think it’s amazing that you
can have a shop in just a matter of minutes

on your website where you don’t have to fiddle
with dozens and dozens and dozens of settings

where it’s already overwhelming to learn this
new thing of adding e-commerce bites then

to have to worry about all the settings and
how to get it all rights and to make it fit

with everything else on your site the way
that Astra has done it is it it just perfectly

integrates with the branding in the style
of your site and there’s very little left

for you to have to do obviously I just got
rid of a few sidebars we could’ve kept them

and put widgets in there and I just tweaked
how this grid looked because I wanted to fit

more products in there I really didn’t have
to do much else and I have this a beautiful

e-commerce platform integrated and what’s
very amazing is you notice I didn’t have to

buy anything I didn’t have to buy a WordPress
theme it’s all in the Astra Theme that is

freely available to have this beautiful website
puts altogether I didn’t have to go and buy

something I use the free Astro starter site
plug-in in order to get this and also to get

this e-commerce platform where I’m now able
to take payments I didn’t have to buy anything

I just Inc. installed WooCommerce and now
I have this beautiful e-commerce website so

anyways this is a snapshot overview of how
easy it is to have an e-commerce website now

in the next two weeks here’s what you can
expect number 100 have a full tutorial on

just WooCommerce and number two I’m going
to have a full site build from beginning to

end building a fully custom WooCommerce and
that’s gonna be the longer tutorial word no

step is skipped I follow all the various steps
from beginning aide to be together A-Z not

aid to be paid is the every single aspect
of having an WooCommerce e-commerce based

website I’m going to cover from installing
the hosting installing the plug-ins everything

and that is coming as well sure are exciting
times if you are into WordPress and you want

to have a website things have never been this
easy now there is also more to come as dry

as building a professional extension in the
Astra Pro version that’s going to give you

some additional controls in WooCommerce to
further customize it to be exactly how you

want it now if you’re not familiar with Astra
you can visit WPCrafter.com/Astra and you

can see all the information about what comes
with the Astra Pro version but as you see

it’s not something that you absolutely have
to have if you’re just getting started is

something that you may want if you want more
powerful features in your website but you

could see there really is nothing holding
you back from getting started today so let

me know what you think of this WooCommerce
installation in the comments section down

below thank you for watching and if you enjoy
this video thumb give the thumbs up and I’ll

see in the next video