How to Transform Any WordPress Site Into an Online Store With Elementor

this week we’ll be taking a regular
website and turning it into an online
store so easily that you’ll be able to
bounce back to business selling products
and services in no time
[Music]
unfortunately the covert 19 crisis
hasn’t just forced us to stay at home
it’s also preventing many small and
medium brick-and-mortar businesses from
making any income and with so much
business being conducted online these
days the question is why why are there
still so many businesses not taking
advantage of the Internet and the reason
as it turns out is that there is no
shortage of people who are still
intimidated by the notion of creating an
online store and we’re hoping to change
that in this masterclass so whether
you’re new to web design and yet to
build your first online store or you’re
an experienced web creator looking for a
cool way to shorten and improve your
workflow this week we’re showing you a
simple way to get an online store up and
running what we’ll need for this
masterclass
are the following items a basic
functioning WordPress website and we
won’t be building a basic site in this
masterclass but we will include some
links to where you can learn how to do
that in the show notes below we’ll also
need at least one product for obvious
reasons we’ll need to have the elements
or website creates a platform installed
and we’ll be installing WooCommerce the
preferred ecommerce plugin for WordPress
we’ll also need to add at least one
payment gateway these are online payment
services like stripe or PayPal etc who
have great reputations for secure online
transactions now our test case will be a
small business a brick and mortar sports
equipment store until now they’ve only
needed their website for providing basic
information about the store and special
offers but with the local health
regulations forcing the store to remain
closed they have no choice but to start
selling products online and this is what
the store’s website currently looks like
and if this site looks familiar it’s
because we use the gym template kit to
create this example really
quickly now because we want to grab our
customers attention from the get-go
we’ve come up with a great product to
launch on our new online store a home
fitness package that will include a
skipping rope a pair of weights a
roll-up mattress and a pair of
resistance training straps just the kind
of thing for certain master class
presenters who could stand to lose a few
pounds if they ever want to fit into
their shirts again anyway that’s enough
backstory let’s get cracking on with the
build
whether we’re professional or not it’s
considered good practice to first put
our site in maintenance mode and this is
easily done in the WordPress dashboard
we’ll just go to the elemental tab and
select tools and in the tools section
will select the maintenance mode tab and
in the mode drop-down menu will select
the coming soon mode as it serves our
purpose much better of course we could
also use this option here to upload or
create a template with customized
designs in elemental perhaps with the
countdown widget ticking down to the
moment we open our new online store like
this template that I created earlier now
when we’re done we’ll save our changes
and get to work with step one download
and install WooCommerce now we’ll
install WooCommerce the same way that we
install any other plug-in on the
WordPress dashboard we’ll go to plugins
and click on add new we’ll search for
WooCommerce or click install and once
that’s done we’ll activate it once we
activate the plug-in the WooCommerce
setup wizard should appear and if it
doesn’t we’ll click on the WooCommerce
tab that has appeared on our dashboard
select settings and here in the top
right hand corner we’ll click on help
and on the left of this expanded section
we’ll click on setup wizard and move on
to step number two setting up
WooCommerce using the setup wizard this
is as straightforward as you can get and
the guys behind WooCommerce have done a
great job at making the setup process
user-friendly will input the store
details and as we’re selling physical
products and node
digital or downloadable products we’ll
leave this as it is and then we’ll move
on to the next part for now I’ll agree
to using the user tracking because I
personally have no problem with it and
in the payment settings we’ll select our
payment options and link them to our
accounts using our email address there
are a lot of options and they each have
their pros and cons and if you can use
stripe then I would definitely add that
as an option it takes a little longer to
set up but they provide good service for
low fees and if not PayPal is great too
the fees are a little higher but it’s
quick and easy to set up and customers
can use it whether they have a PayPal
account or not now as you can see there
are some other options below for offline
payments but we strongly suggest using
the online payment gateways because
we’ll save a lot of time and effort on
security and even the design with the
payment options set up we’ll move on to
the shipping section where we’ll select
the weight and measurement units that
will be simplest for our customers to
use and the next few items are
recommended plugins that you could use
if you wish but I’m going to disallow
because we already have the option to
link things like our Facebook and
MailChimp accounts to our site via
Elementor so for us this is redundant
and we don’t really need jetpack either
so we’ll skip that and with the setup
done we’ll move on to step 3 create or
add our first product we’ll click on the
create a product button which will take
us back to the products tab just below
the WooCommerce tab on the wordpress
dashboard and this is where we’ll be
able to add remove and edit all of our
products in the add new products section
we’ll fill in all of the necessary
details of our product we’ll enter the
product name and a description we’ll
define the type of product which in our
case is a simple product and not a
virtual or downloadable product we’ll
enter our price and add a short
description then in the panel on the
right will add our product image and we
could also take advantage
of the option to add tags and categories
but I won’t do that here because we only
have the one product we’ll just check to
make sure that we’ve set up our product
perfectly before we click here to
publish our new product and with that as
surprising as it may seem we’ve
completed the hard part now let’s have
some fun and move on to step number four
and our product to the page and tweak
our websites design to better suit its
new purpose as an online store to do
this we’ll open the main page of our
website in Elementor and as you can see
we’ve made a few small changes already
such as removing the old special offers
and adding an announcement that the
physical store will be closed due to the
health and safety regulations of the
current situation now the easiest way to
add a product to our page is by going to
the widget library in the editor panel
and searching for the WooCommerce
products widget we’ll drag it and drop
it into the section where we want it to
appear if we had more than one product
we would also do the following with the
widget selected on the Edit panel in the
content tab we’ll go to the query
section and we’ll select our source as
manual selection then we’ll use the
search and select for exactly that to
locate the product that we want to sell
here we can then go into the style tab
and customize the widget to suit the
rest of our pages design then we’ll
publish or click on save draft now if
you’re a more experienced user you might
want to try the more customizable
alternative solution this would involve
using some heading and text widgets
perhaps even an icon list like we’re
using here we’ll also add a regular
image box widget and finally we’ll add a
customizable add to cart widget from the
library once we’re happy with the way
our product or products look on our page
we can move on to our cart and checkout
pages these two pages were automatically
created when we installed WooCommerce
and being WooCommerce pages there isn’t
too much that we can customize so to
make these pages look better we
two separate headers in the elemental
template builder and in the conditions
we assigned each header to only appear
on the cart or checkout pages
respectively as always we’ll be adding
links in the show notes below to videos
on how to build headers and other
components using the theme builder the
safest and simplest way to keep the
design of these pages consistent with
the rest of our site is by defining our
website’s default fonts accordingly and
this is because these are the settings
that WooCommerce will turn to to know
how to present these pages I should add
that WooCommerce also includes a generic
Thank You email which I feel is
sufficient enough for this type of store
obviously we can always use the theme
builder to create a pop-up with a thank
you message designing it exactly the way
that we want to and create a condition
to have it appear only after leaving the
checkout page alternatively you can also
invest in a WooCommerce add-on that will
provide your site with a customizable
thank-you page or pop-up but these do
cost a little extra now with that done
we can move on to step number five and
finish setting up our store before we
set it running now most of the default
settings should be good for the vast
majority of online sites and that said
we can go into general settings and edit
things like store address general
options currency options in the product
settings we could select the option to
redirect to the cart page after
successful addition or selection of a
product and I’ll select this because
right now we only have one product we’re
also showcasing our product on our home
page but we could just as easily create
another page and use this option here to
link our site to that page now as you
can see this is also where you can edit
and define measurements reviews
inventory and so on I wouldn’t play
around with the default settings in the
rest of these tabs and definitely not
those in the taxes tab however I would
like to spend a few minutes on the
shipping section because it is an
important part of an online retail
business now yes there are plenty of
efficient plugins and
add-ons that could provide you with
shipping calculators even once that are
service specific and can calculate
shipping via fedex or via the USPS and
yes some are free but most do cost money
and right now we’re trying to save money
or at least avoid extra costs and if
possible also avoid adding anything to
our platform that could slow it down or
create confliction x’
and as it happens we can do this and
we’ll do it all right here the way that
this works is by setting up shipping
zones and shipping classes I would
strongly suggest that you research the
price of shipping and delivery to the
areas that you want to do business with
find out what it will cost you to
package and ship each product according
to its weight you might want to ship via
registered mail you might want to add an
express postal service research here is
important because charge too little and
you’ll lose money and charge too much
and you’ll lose customers
once we have all this information we’ll
come here to the shipping settings now
the product that I am currently setting
includes a couple of dumbbells or
weights but I may decide to sell some of
the athletic clothing too and in terms
of shipping costs these are two
different categories or shipping classes
which is why I’d like to start by
defining my shipping classes first for
this demonstration we’ll just define two
simple classes we’ll click here to add a
class we’ll call it heavy items the
slugline here isn’t important and
WooCommerce can fill it’s automatically
any way we’ll define the class for our
cells or our employees or coworkers as
items weighing over two kilograms and
we’ll create a separate class the same
way we’ll call it light items and define
it as items weighing less than two
kilograms now the system also needs to
know which of our products are heavy or
light and we do that back in the
products tab where we’ll click on the
edit option beneath our product in the
Edit production section we’ll scroll
down here and select the shipping tab
and here we can keep it simple we don’t
have to define weights and sizes instead
we’ll just select the appropriate
shipping class for this specific product
with that done we’ll click on update and
return to the WooCommerce settings and
back to the shipping tab right here as
we know besides weight the other
important variable that dictates our
shipping costs is location and that’s
what we’re going to do right now in the
shipping zone section now our test case
is based in the UK so let’s click on add
shipping zone give our zone a name call
it domestic select a region United
Kingdom and we could also do this
according to post codes or zip codes
next we’ll add a shipping method as I’m
mostly interested in local business and
because I would personally like to make
my life much simpler will select the
option for free shipping I’ve already
calculated the cost of posting packaging
rounded up that number and added it to
the final advertised price in fact it’s
the base price of the product that I’m
selling now let’s say we’re interested
in expanding to Western Europe we’ll
just add another zone call it Europe
enter all of the countries we want to
sell to and select a shipping method
flat rate now I know the term flat rate
might seem confusing to some of you
right now
but it’s just a temporary definition if
we ever want to make any changes to our
shipping preferences we can always come
back here and click on the edit option
that appears under each category in each
section which as it happens is what
we’ll do here right now to define this
shipping method the first thing that
we’ll do is change the name of the
method from flat rate to Europe regular
shipping will leave the tax option alone
but here we have the option to add a
general shipping cost to this shipping
zone or we can define our shipping
method according to the shipping classes
that we’ve already set up here I will
define the shipping costs so that a
European customer will pay 30 dollars in
shipping for a heavy item like the home
fitness package or ten dollars in
shipping if they order a light item like
a pair of sweatpants for example the
default calculation type over here
should suit almost all of our needs so
we won’t touch that
and we’ll click Save Changes before we
forget – now I also want to offer
expedited shipping so I’ll add that here
as an additional shipping method to this
shipping zone in the exact same way by
adding a new method selecting flat-rate
clicking on edit’ and redefining its
name and the costs of this method
according to the shipping class and of
course we’ll save changes you may also
want to check out the shipping options
over here where we also have some
helpful self-explanatory options and
let’s move on in the payments tab we
might want to rewrite the default
description for the paypal payment
option and this is in case we aren’t
having a separate credit card option
we’ll want to be sure that our customers
know that they can also click on PayPal
to pay via credit card even if they
don’t have a PayPal account to do this
we’ll go into the payment tab and next
to the PayPal option we’ll click on
manage to access the details we want to
edit in our case the PayPal description
back in the settings we’ll skip the
account settings because we’ll be
running our transactions the same as we
would in the physical store where we
didn’t use accounts perhaps our online
store will grow which would be fantastic
but also an entirely different type of
online store now the last thing we
should consider is in the Advanced tab
where we can make sure that all the
pages are linked correctly but more
importantly we might want to create a
page for terms and conditions that are
specific to our online business and this
is where we would link it to our site
last but not least we’ll want to save
all of our changes and there we are we
are practically finished and I say
practically because we shouldn’t be
launching anything without testing it
first
as you can see we’ve added some
animation to the widgets to draw more
attention to our new product and our new
store we also made a few other minor
changes to let customers know that the
physical store is now closed I’ll just
let you know that I change the price of
the product from $99 to $0.99 in the
product details and not here because
this is just a heading so that when I
run test after test I’m not transferring
$100 each time and if you do this it’s
extremely important to remember to
change the price back to what it should
be once you’re done with the testing so
now I’ll click on the products Add to
Cart button and this will take me to the
cart page and from here we’ll go to the
checkout page we’ll just fill in our
details now as you can see i’m using
paypal right now because it’s probably
what we’re almost familiar with just
running through the standard payment
procedure so far so good now we’ll go
back to the wordpress dashboard and in
the WooCommerce tab where we can already
see that my order has registered but if
we click on the orders section we can
see that our test order has registered
correctly and of course we should also
check our email account to make sure
that we received our order confirmation
correctly and here it is our order
confirmation and the thank you message
that I was telling you about this week
we looked at how we can take a standard
website for a small business and
transform it into something as complex
as an online store but in the simplest
way possible now it’s no secret that our
main reason for doing this is to help
the small businesses and self-employed
professionals in our community to get
ahead rather than lose out as we see our
way through this crisis as best we can
if you have any tips and advice that
could help other users with designing
and setting up their first online start
then please add them in the comments
below
and if you have any criticisms we are
equally interested in your thoughts and
if you’ve enjoyed this masterclass and
you found it helpful
insightful or inspiring
make sure that you click on the
subscribe button and tap that bell so
that you don’t miss out on our next
master class because after all our goal
is to be the best at helping others
excel at their craft so stay safe stay
creative and get productive thanks for
watching Cheers
[Music]