Overview
Transcript
Overview
In this Monday MasterClass we create, build and launch an online store from scratch, using Elementor and WooCommerce in WordPress.
This episode covers a lot of valuable web-building information for all levels looking to learn how to:
00:00 – ✔︎ How to build an online store with WooCommerce
00:52 – ✔︎ Install and set up the WooCommerce plugin
01:12 – ✔︎ Set up a WooCommerce store
03:21 – ✔︎ Add products
07:31 – ✔︎ Build a product page
07:50 – ✔︎ Use Theme Builder to create a header
Transcript
if you’re part of the elements or
community you know how WooCommerce is a
subject that keeps coming up among users
and this is partially because building
an e-commerce website with WooCommerce
seems like a daunting task even for
experienced developers however like many
other technically complex tasks
understanding how the process works and
going over it a few times does make it
so much easier this is the first in a
series dedicated to working with
WooCommerce and in this Monday master
class we’ll be showing you how to set up
your own store and start selling
products such as my brand new fictional
ebook tell me why I freaking love
mondays now let’s get started
[Music]
in this Monday masterclass we’ll be
going through the whole process from
setting up our WooCommerce account to
building and launching our store so far
all we’ve done is downloaded and
installed the WooCommerce plugin the
same way as we would any other plug-in
on WordPress once that is done we get
this WooCommerce setup wizard now as you
can see the ux is wonderfully welcoming
and intuitive making this part of the
process easy and simple on the first
page will register and setup our store
by adding our physical address and
contact details as well as defining the
type of store or type of products we
intend to sell in our case I’ll select
the plan to sell both physical and
digital products because I may want to
sell a hard copy version of my wonderful
book in the future after we’ve reviewed
the terms and conditions we’ll click on
the let’s go button next we’ll link up
our payment method so that all the money
will be making will go into our
designated accounts like most people
we’ll be using our paypal accounts and
click continue next we’ll define the
size and weight of our products in case
we decide to ship a hard copy version of
the book we prefer measurements in
kilograms and centimeters to make it
easier for most of the world and click
continue
we’d rather not add any of these
recommended products I mean you might
find them helpful but we’re going to
uncheck them and click continue we’re
nearly done with the setup now here you
can choose whether you want to use
jetpack or not we’re going to skip this
one too and click on skip this step and
there we are so the setup is done and we
can now create our product by clicking
here but we feel that it’ll be much
better if we go back to the wordpress
dashboard and see how we do it from
there so back on the wordpress dashboard
we can check to see that our details are
all in order
as you recall apart from the one book
there won’t be anything else to buy from
this page at least not now so we want
the user to be redirected to the
checkout or cart page
as soon as they’ve clicked on our only
item to do this we’ll go to the
WooCommerce tab and select settings and
here we’ll go to products and under Add
to Cart behavior we’ll mark the option
to redirect to cart page now that we’ve
finished setting up the WooCommerce on
our WordPress dashboard the next thing
to do is to add and define our products
or in this case the product to do that
on the WordPress dashboard we’ll go just
below the WooCommerce tab and click
products and select add new in the
product info page we’ll enter a product
name me why I friggin love Mondays as we
can see the default permalink to this
product is a bit messy but we can make
it look more professional by clicking
change permalink and in the WordPress
permalink settings we’ll select the
custom structure and create that
structure by typing forward slash
the word product name one word and then
the % again and the forward slash then
click Save this simple phrase tells
WordPress to use the name of the product
in the permalinks slugline now we’ll
return to our product page and refresh
it to find that our new slug line looks
a lot more professional if this seems a
little complicated for you you can
always add a slug line field to this
product form and whatever you write in
the slug line box will appear in the
address next we’ll add some info about
the product and about yours truly we can
also insert photos by clicking on add
media selecting a photo and clicking
insert will add some text here
select it and use the formatting options
to align it nicely will make this part
look more like a heading and on to the
product data our product is a simple
product meaning that there are no
customization options or changes that
will be made to the product in other
words it is sold as is and my book is
also a downloadable product a PDF file
so I will select this option here I’ll
be charging $18 for one digital copy of
my masterpiece yes I agree it’s a
wonderful bargain notice that if we want
to we have an option to set a special
sale price and set the schedule for it
we will now upload the downloadable copy
of our product and give it a name we’ll
set the download limit or the number of
times a customer can download this
product to one we’ll also set the
download expiry to 30 days you can also
see that if we ever want to sell
physical products that need to be
shipped we have all kinds of great
options related to things like inventory
and shipping over here we’re going to
add a short description of the product
in this editor box over here this will
be displayed on the top half of the page
alongside the image of the product I’ll
add a nice little blurb here and then
we’ll add some quotes from reviews using
the block quote format option and put
them in bold to make them look a little
nicer moving on to the right-hand side
of our product form we’ll insert an
image of our product in our case it’s
the cover of my new book notice that the
default settings are cropping the image
that I have uploaded and the way to
repair this in WooCommerce
three-point-three the version that I am
currently using is to go to appearance
on the WordPress dashboard and select
customize and from the tabs on the left
here we’ll select WooCommerce and select
product image and in the image options
in the top left corner here we’ll select
the uncropped option and click publish
now we’ll add some product tags and
remember to separate each tag with a
comma I’ll add book autobiography
WordPress adventure pirate treasure I’m
telling you guys this is an amazing book
you may have categories in your online
store but we’re only selling one item so
we’ll skip this part here now that we’re
very happy with this product and the
setup we’ve done for it
we’ll hit publish to make this product
available the last thing we need to do
to sell this product is create a storm a
web page a place to display the goods
for sale as many of you have seen before
to create that page I’ll go to pages
then add new I’ll give it a name and
then I’ll click on edit in elemental now
notice that I have this header with a
menu at the top of the page this belongs
to woke immerses default theme called
storefront that is installed and
activated when we activate the
WooCommerce plugin if we want to remove
the header or use a header of our own
design we’ll have to deactivate this
theme regardless we just prefer to work
with the hello thing for several reasons
you’ve probably heard before such as
speed and flexibility so what we’re
gonna do now is we’re gonna go back to
the wordpress dashboard to appearance
select themes and we’ll activate our
hello theme when we go back to the
element or editor you’ll notice that
everything is back to normal we even
have the header we created for our store
using the theme builder for those of you
wondering how we do that we’ll leave a
link in the show notes to our
masterclass on building a one-page
website where we saw how to build cool
headers and footers with theme builder
meanwhile I’ll go to settings and hide
the page title now for our page we’ll
use a template that we prepared earlier
by clicking on the template icon and in
the template window in the my templates
tab we’ll select the template we
prepared and insert it as you can see
we’ve built it the same way as we would
every page using sections and widgets
but let’s get down to business and add
section that will allow visitors to
place an online order and purchase our
product the first thing that we want to
do is insert an anchor widget here in
the editor panel under the content tab
I’ll name it order now I’ll go to the
buttons labeled order now such as this
one in the hero section and in the
editor under this buttons content tab
I’ll add the name of our anchor in the
link box we should also do the same
thing for the order now button in the
header by going into the header template
which I can do by opening the elements
or finder with command or control e and
typing the name of our header selecting
it once we’re in our header template
we’ll do the same process again click on
the order now button and in the editor
enter the name of the anchor we’ll click
update
and hitting the command or control and
eqi’s will bring up the elements or
finder and go back to our main page back
on our page the next thing we’ll do is
add a new section with two columns I’ll
drag an image widget into the left
column then in the editor panel I’ll use
the option to select my image now I’ll
drag a heading widget to the right-hand
column in the editor we’ll set the
alignment to Center and then go here and
duplicate it in the top heading I’ll
type the title of my masterpiece the
name of our product I’ll go up here and
copy this heading then come back down to
our product section and paste the style
onto the heading widget because after
all we want to keep our page design
consistent and this is a very quick way
that we can do that in the next heading
will type the price of our product in
the editor under the style tab we’ll
give it a color that appears elsewhere
on the page
we’ll go to typography and change the
font to Anton and make it size 70 to
weight 300 now let’s just go into the
editor under the Advanced tab and add
some padding to our column on the right
hand side here we could also make the
image on the left really stand out by
adding a negative value of say 100
pixels to the widgets top margin okay so
now we’ve got the basics of our product
section done we’ll add one of the
WooCommerce widgets that are added to
our library automatically we could use
the search box to find it but I want to
show you where these widgets appear in
the library here we’ll grab the custom
add to cart widget and drag it down to
here now we’ll customize it really
quickly by copying this button here and
just like we did before we’ll paste the
style until our Add to Cart button in
the editor tab will change the text to
order now in the style tab we’ll change
the buttons color scheme to complement
the top heading of this section okay so
it looks great but it also has to be
functional so let’s make sure that this
button is set up correctly under the
content tab in the product section we’ll
make sure that the correct product is
selected we also have an option to show
or hide the quantity of the product but
I think we’ll keep it hidden because
customers can always change the quantity
later on on the checkout page now we’ll
go to the buttons options and align it
to Center and we’re done we’ll save our
draft and preview our store and as you
can see it looks great but let’s test
the buttons now let’s test our Add to
Cart button and as you can see it’s all
working brilliantly all of this the
shopping cart page the checkout page is
set up and ready to go now
professionally speaking all that’s left
to do now is to tweak the site for
responsive use so that it’ll look just
as great on all devices but look at that
an online store set up in no time at all
well my store is ready and everything is
up and running and it’s just a matter of
waiting for the orders to come storming
in and my new fictional ebook tell me
why I friggin love Mondays to become an
international bestseller aha
it started already I’ll have to man the
helm and tend to my very first order but
not before I remind you that this is
part of a series dedicated to
WooCommerce so you are going to want to
click that subscribe button and tap that
Bell to be sure that you don’t miss out
on any master classes like this one
until next time and the possible release
of my second novel why I have issues
with Tuesday’s thanks for watching
