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
Join The Conversation
Great video as always….
If you could ask the guys at Astra if they can make it possible to be able to add the Cart also in above Header as a menu item, and add a feature to make products as Coming Soon, which can hide add to Cart, and have a different badge…
I think you should be able to do that because the Cart icon can be placed anywhere with a shortcode. you can read their knowledgebase for instructions.
Thank you Adam
Hi,
Nice post I have see your post it’s very helpful for ecommerce website I have need help to you, can you tell me which popup you did use for subscribe and can you tell me one more which postgird addons you did use your fullsite page? thanks
I currently use Thrive Leads and the grid is from Elementor.
Adam, could you make a tutorial on how to build a membership dashboard, or is there a plugin that handles that … thanks Tony
Thank you for the suggestion Tony.
Hi Adam,
When i see your post there is showing youtube video tutorial I’m really happy for kind this help. I needed to ask.. when i’m play the video and going down to see for full details this video automatically showing in simple box. How to I can do this like this.
Its done with a plugin on Code Canyon names Sticky Video.
is it possible to show the prices of the same product we are selling on our store from different websites just to compare and what plugin we should use. I know there are a lot of plugins which compare prices between various products but i want one in which i can sell my product showing as it’s on the minimum price from other competitors
There may be a WooCommerce addon that does that. None that I am aware of, but I haven’t gone out looking.
Hi Adam, i know this is way off the topic here, but i needed to ask. In your homepage the animated words that goes from CONFIDENTLY SECURE – GROW – CREATE etc. is that feature in the elementor pro? if so could you please direct me on where to find it? …. and by the way Adam, you are awesome! you videos are really amazing
Yes that is Elementor Pro‘s animated text module.
Hi Adam, thanks so much for all your videos(i just started following your videos on YouTube anyways and they’ve been really amazing). Please can you make a video on multivendor eCommerce website? Maybe with free themes too. Thanks!
Hi,
Thanks for the amazing tutorial. Can you please let me know as to where can I download the dummy XML data file you mentioned in your video ?
Sorry, but I wanted to test Thrive Comments using the Thrive Comments blog post, but it’s not up yet and I want to see if I’m allowed to edit a comment after posting it. Thanks!
Hmmm… Doesn’t look like I can edit my own comment, even within the first five minutes or so of posting it. Unless you have that option turned off, that’s an issue for me. I definitely want people to be able to make clarifications and quickly fix mistakes they only noticed after they hit Post.
Hey @Dan,
Do you know if they’ve enabled the editing capability?
Hey no problem at all and as you discovered that is not an option. I think it may be more of a WordPress restriction but I will ask Thrive about it.
Thanks Adam. For what it’s worth, I am currently using WPDiscuz for comments and that plugin allows for comment editing (and a bunch of other things). But I like the look of Thrive, so I will keep an eye on it.
Two other quick questions for you, since you know more than I do and you seem to have some pull, too. 🙂
1. I hear that there is no way to set links in comments as No Follow. That sounds like a good feature to have. Am I wrong?
2. If you think of it, and are so inclined, consider suggesting that they add Twitter Login alongside Facebook and Google. 🙂
Thanks for everything!
I’ll make those suggestions to them. Regarding the no follow links, for auto link replacements yes, but not links that someone enters in if you allow that.
How do you enable the cart icon in the header? Did the setting change?
The setting did move since I recorded this video. Now you need to enable it in the customizer. You can display the cart icon in the menu by going under Layout – Primary Header option and enabling WooCommerce as Custom Menu Item.
What are you using to have the cart icon in the menu of the Astra theme here?
It’s a feature in the theme, nothing additional added to the website. I think you may have to enable it in the customizer.