WordPress eCommerce Website Tutorial with Woocommerce
Articles,  Blog

WordPress eCommerce Website Tutorial with Woocommerce


So in this video I’m going to show you how
you can take WordPress WooCommerce oceanWP and elementor to create a
great-looking online e-commerce store in a quick and easy fashion. I’m going to show you how to install all the basic plugins, set up WordPress install the theme
configure everything and then end up customizing it to make it a little bit
more interesting than just an out-of-the-box solution so let’s take a
look at how we can do all of that right now So, right off the bat I’m going to assume a
certain level of knowledge when it comes to dealing with building this website
and assume that you’re comfortable installing WordPress how to deal with
the server and all those kinds of things I’ve covered that in a previous video if
you’re not too sure how to do that and I’ll link that in the description below
so if you want to go right back to the basics then you can jump in at that
point and go right through to the process however like I say I’m going to
assume a certain level of understanding based upon what this is going to cover
also I’d like to say that if you’re considering purchasing any of the
plugins that are used in this particular video and you’d like to help support the
channel or we do around here please consider using the affiliate links in
the description below they cost you know more money but it does give a certain
percentage back to the channel to help support us anyway without further ado
let’s take a look at how we start now I’m going to develop in this on a local
server so in other words I’m not going to be using an online server but the
process is pretty much exactly the same I’ve created the database uploaded
WordPress and I’m now ready to start configuring everything so all I’m going
to do is refresh this page I’m going to see the installer for WordPress pop up
and we’ll then ready to start putting the information in to get the ball
rolling so all I do is choose the language that I want to work with which
in this example is English UK and a click on that click on continue that’s
gonna then take us over to the second step where we can configure some of the
basic information so this isn’t ever going to need to have the database
username and password and so on so let’s click on let’s go now I’m going to put
in the basic information like I say this is all being done inside a local server
on my local machine so it’s a little bit quicker so I’ve named the database in
this example ecommerce the username is route I have no password said that for
this and for security purposes what I would always recommend you do where
you’ve got this table prefix it’s just for some random letters and numbers in
there don’t use symbols and things because
that can cause a bit of a problem but just put something like this in there
just an example because what this does is if your website is trying to get
hacked it makes it a little bit more difficult because the table prefix isn’t
the default WP so it’s good practice to do something like that click on submit
I don’t know take a sua say alright we’re all ready to go let’s just run the
installation and then just we’ll wrap up the last parts are dealing with
WordPress so I’ll just pop some basic information in here we put the name of
the shop in there I leave my username put a password in now obviously you can
use the password that we press automatic generates for you that’s a very secure
password or you can put something you want in yourself and also keep this sort
of media to say how secure they think your password is because I’m working on
local server I’m not to bother so I’m just gonna put something in it just says
it’s a weak password that’s fine for me confirm the user a weak password and
we’ll just put an email address in there and we’ll just put just a random email
address in there just we’ve got something in it obviously you’re gonna
put your genuine email address in I would recommend not checking this box at
the bottom we don’t want to discourage the search engines from index and the
site we want them to index our site that our content so we can get found by the
search engines so now we’ve done that basic information we can just hit
install WordPress that will now finalize that and take us through to the next
screen which is where we can go through and we can specify we want to log in so
we say let’s login and we’ll just put in their usual details I put my password in
there remember me I will click login and there we go we’re now taken through into
the admin panel for WordPress we can now go through a configure sever that other
options we need to get the ball rolling with WordPress itself before we start to
move on and start adding in some of the plugins we want to work with okay so now
that we’ve gone through the basics of setting up WordPress we’re now into the
dashboard and you can see we’ve got some basic information and the screen is laid
out pretty simple at the top we’ve got this sort of welcome
press wizard which kind of says a few things that you can do to set up and
finalize the entire process below that we’ve got some different panels that we
can go through and we can customize these we can drag and drop them around
the area when you sort of install different plugins then different options
different panels become available to you I will deal with that in a moment
on the left hand side we’ve then got the basic navigation structure we can go
through any updates we can go to the home of the dash board posts media pages
and so on and again once we start to install things like Commerce we’re going
to get additional options available in this particular section as well what we
can’t do as you can see we’ve got a color updates available so if we jump
over to that we can take a look at what’s needs to be update obtained it’s
Ari and we can take a look at his things we want to keep in you or get rid of so
at the moment we’ve got this anti-spam Akismet I don’t really want that on here
and we’re going to use this and I select that and I could either update it or
what I can do is I could just simply come over to the plugins section and I
can say install plugins and from there I can go through or I can update any
plug-in so I can get rid of anything I don’t want so for this I want to get rid
of both of these which are installed as default is part of WordPress we’re going
to select both of those choose the bulk actions option and we’re just gonna
choose delete well click OK to say we want to get rid of those and they’re now
removed so we don’t need to have those in there we’ll take a look at adding
some new plugins in a moment but let’s finalize the setup process let’s go to
the set inspection and you can see we’ve got a range of different options
available in them let’s go through these and we’ll jump
into the general section first of all so you can see we’ve got some basic
information we can configure and tweak this to make sure it’s laid out exactly
as you want it to be I don’t want this tagline instant you’re gonna delete that
you can see it’s got the WordPress address and the site address we’ve also
got the email addresses associated with it the option to allow people to
register and so on and so forth we could even go through and choose things like
date format and time format and what day the week starts on so now I made a
change in there I’ll hit Save Changes natural Gible to the right in section
and you can see we’ve got some options we can go through and say what the
default post category is at the moment we’ve only got and categorized in there
when we create posts when you create post categories you can come in you can
tweak this to make sure it lands in the right relevant section when you create a
new post we leave that as is because this particular section isn’t really
relevant to what we’re going to create next up will come up the reading section
and you can see we’ve got some basic settings now even though it said it’s
about reading what we can do in this section is we can come in and we can
specify what our blog post page is and also we can either choose from the home
page being our latest posts which is automatically generated when new posts
are added or we can create a static page and associate that with our home page
now that’s what we’re going to do but at the present we haven’t actually created
any pages so we’ll come back to that a little later on you can see again we’ve
got some additional information below you can tweak this is all pretty
self-explanatory you can say that to the way you want the discussion panel deals
with everything to do with adding comments and things so if you don’t have
anything to do with comments on your site you can come in here and you can
disable or enable in the options you think but if you’re not did it with
comments most of this is fairly useless to you the media option allows you to
specify the different sizes that are associated with the media that you
upload in other words the photographs and any video you may upload and so on
so this deals with the photographs or images you’d upload you can see we’ve
got thumbnail medium size and large sizes we’ve also got the option to
organize our files now what this will do is if you leave this ticked which it is
by default it’ll create a folder based upon the year it’ll then create folders
based upon the month and every time something’s uploaded it’ll drop it into
the relevant folder so for example June of 2018 then you’d have a folder in
there that would drop all the images if you upload your anything during that
month and that year up to you how you want to deal with this it can be good or
it can be bad depending upon how you want to structure your site we’ll leave
that as is for now as with all the settings for the medium-large and the
thumbnail size what we are interested in though is the permalinks now permalinks
is basically the URL that is associated with any page or post on your site now
this is important to make sure you get this right because this will have an
effect upon your SEO your search engine optimization
but also it has an impact that if you were sharing a link with someone if you
got a link like this one for example you can see which is quite long-winded it’s
put to you it’s put the month is put the day it’s also put a name of the post it
all gets really convoluted and long so what I would recommend you do is use the
post name as a bare minimum gives you a much more streamlined URL to
anything you post on there if you want to create a custom structure you can do
that as well you can also see you’ve got optional four category Basin tag base
we’re not gonna worry about those we’re just going to leave the post name to be
the default setting for our permalinks and hit Save Changes so once we’ve done
that we’ve done the basics of setting everything up so let’s just jump back to
the dashboard what we can do on here now is we can get rid of this could pretty
much tell all the things I want to do so let’s just hit dismiss now just to go
back over this dashboard you can see we’ve got these different panels it’s up
to you if you want to see these you can minimize them by clicking the little
arrow in the top right hand corner but what you can do is jump over to the top
right-hand side and you’ll see we’ve got the option that says screen options in
there we’ve got a series a tick boxes that relate to the different tabs or
panels you can have displayed on your dashboard so if you want to you can
easily get rid of these and have a completely clean dashboard and you can
take that back up out of the way now each of the sections inside the
dashboard for WordPress has this option so for example if we dribble to the
pages section you can see we’ve got screen options in there and we’ve also
then got different tick boxes that are associated with the pages we’ve got one
for posts media and so on so you can customize the interface to a certain
extent by using the screen options in the top right-hand corner of any of the
panels inside the dashboard okay so now that we’ve got WordPress setup we’ve got
it configured is most basic fashion let’s go and add some of the plugins
that we need to get our online shop up and running ready to start putting
products in and creating pages so we need to do is just simply come over to
the plugins section and come down to add new once you do that that’ll take us
over to the plugins dashboard you can see it shows us some of the most popular
plugins we can filter things through on this – we can go through popular and
recommended and so on we can choose to upload a plug-in if we’ve got something
that’s not available in the WordPress repository so we could easy I put a
plug-in from them what we are going to do is just come over we’re going to
search for our first plug-in which in this example is going to be Roo Commerce that will then search there’s a database
find any plugins that match that particular keyword and you can see we’ve
got WooCommerce being the first option and then a range of different add-ons
and extras that we can associate with the WooCommerce plug-in itself we’re
gonna leave those for now what we’re going to do is come over and say install
now on the WooCommerce option that’ll download that to our copy of WordPress
and it will then go through and ask us to activate that and go through any of
the other options after we’ve activated it now before we activate it once it’s
already finished installing we’re gonna add a few more plugins that we can then
go in and activate all of them at the same time just to speed up the process
so the next one we want is elemental so we’re going to search for that and then
we can see we’ve got elemental page builder now the elemental page builder
is completely free you can use this for absolutely no cost
it’s a full-featured great way of creating drag-and-drop pages so you can
get really creative without needing to touch any underlying code but on top of
that we’re also going to install the commercial version of elemental or
elemental pro as it’s called and what that does is it builds on top of the
free version and gives us some extra functions some extra tools or widgets
that we can really use to enhance our layout and it works great
alongside WooCommerce so that’s gonna give us some more function but like I
say that is something that is a commercial add-on the link is in the
description below so if you want to check that I would recommend going to
take a look at the Elemento comm website where you can see exactly what’s on
offer but for now let’s install the free version so let’s go through the same
process we’ll just click on install that’ll go through and then ask us to
activate it once it’s downloaded a copy and put everything in place ready to
start working so again we’re gonna leave that deactivated for now the next
plug-in we’re going to look at is SEO framework now this is a great way of
adding in extra SEO or search engine optimization tools into your website now
one most common ones you’re gonna come across is the Yoast SEO framework which
is a great plugin but I have found that up until the current version I haven’t
tested the latest version it does tend to have a little bit of an impact upon
the speed that your site loads so the SEO framework I found just tends to be a
little bit quicker it still gives us almost users the
they need to get great SEO SEO options on their website so let’s just go and
find that so we want the SEO framework again we’ll let that load in and we’ll
install it from there so there we go da the SEO frameworks will install that now
again they’ll go to the process of installing and we’ll activate it a
little later on and the final plugin we’re going to take
a look at is to enhance the security on our site now again there are lots of
different security based plugins that improve the security of your WordPress
website and then what I prefer to use is a theme security so we’re going to
search for that and once that’s installed we’ll activate that later on
so there’s the basis of the plugins that we want we now need to go through the
slightly different process of adding in some of those commercial plugins that we
don’t have access to without sort of paying for them
so the process is pretty straightforward we can upload the plug-in from this
point so what I do is I go to download a copy of Elementor Pro and then we’ll go
through the process of uploading that to our system ok so we’re going to do is
click on upload plug-in that allows us to go through and choose the file form
our computer so I’m gonna click on there I’m gonna access the elemental profile
so we’re gonna click open and then click install now so that’s gonna upload that
go through the process of installing everything and you can see it now takes
at the point of activating the plug-in if you retired the plug-in installer and
let’s just trip over to the installed plugins section okay so we’ve got all
the plugins that we need we just no need to activate those you want to start
working with now for this I’m gonna go through first of all activate Elementor
because you need to have that installed before you can start working with
elemental pro next up we’re gonna click on activate elemental Pro that’s going
to go through and ask me to activate my license which I’ll do in a moment next
up we’ve got WooCommerce so let’s activate that and then we can go through
the process of setting that up before we come back and worry about anything else
so click on activate once you’ve activated it that’s gonna go through the
wizard and allow us to put some basic information in to configure the basics
of our store I don’t need to do this at this point you can come back and access
any of the steps or any of the options are all available so you’re still in the
settings section so you don’t need to do this I’ll recommend for
good way of doing it so the first thing we need to do is go through and put
where our store is going to be based so I’m just going to put some information
in here so we just put my street my city and I just put some random numbers in
there and letters in there okay so we put the information about where the
store is located next that we’ve got what currency you’re going to be using
mine’s gonna be in pound sterling but all you need to do is go through and
find the option that works for your particular store we’ve then got the
option to tell WooCommerce what type of products we intend to start sell so
we’ve got the option to sell both physical and digital or with yourself
just digital or just physical the reason it asks you this is basically because if
you sell digital products you don’t need to worry about shipping and you don’t
need to worry about delivery addresses however if you’re selling physical
products those options come into play so we’ll leave it to be selling both types
of products because then I can show you later on how we can deal with shipping
next up we’ve got a little option that says do you want to allow WooCommerce to
sort of gather data about what you do we’re gonna say no we don’t want that
now if you wanted to you could click on not right now this will close the wizard
down and take you back into WordPress itself but we want to sort of go through
the wizard so we’re gonna click on let’s go provided we put all the information
in that’ll take us over now to the next step which is choosing the payment
option so you can see we can choose stripe PayPal PayPal standard or offline
payments and if we expand this out you can see we’ve got a couple of different
offline payment options obviously choose the option that works for what you want
to do so for this example I’m gonna say I’m gonna give PayPal standard and we’ll
just leave the email addresses that let’s find it’s not my real email
address for it but that’s okay and we’re also gonna say we’re gonna have cash on
delivery this just gives me the ability to go through and test things out
without worrying about setting out a PayPal sandbox account to test if the
payment process works or use a PayPal live account so I just use that for
quick tests and then I’ll do a live test on the payment option that I’m actually
going to physically be using so the next step we’re gonna click on continue
that’ll take us through now to the next step which is to deal with shipping so
you can see we got the option for ship in zones we’ve got a flat rate we’ve got
free shipping we’re gonna angle to a set of costs and so on locations not
covered by your particular zone that you’re setting up we’ve also got then
the option for the weight unit it’s going to be used if you use in
calculating shipping rates based upon the weight of an item or you’ve got the
dimensions where you could use the shipping to be based upon the actual
physical dimensions of a product that goes about beyond what we’re going to
cover in this video so we’re going to do is we’re going to set some basic
parameters we just say a flat rate or for example 495 that covers us for any
of the purchases based upon the United Kingdom because that’s what we set at
the first step where our stores located and we’ll say anywhere else in the world
is going to be 995 again we can really come into this and we can configure this
in a little bit more detail later on down the line but if you want to see
about shipping I’ve got a couple of videos it’ll take you through the basics
but also take you through some much more advanced ways of dealing with shipping
I’ll link those in the description below so if you want to check that out in more
detail more lingo in to in this particular video I’d recommend checking
those out ok so we put the basics in there too click continue now with any of
these options we can go in or we can configure and tweak these later on down
the line so we don’t need to worry if we make a mistake we can go back in and
make changes later next thing we’ve got do we want to install the storefront
theme now the storefront theme is a free theme that the developers of commerce
have put together it is based around working with a WooCommerce website we’re
not gonna use that we’re going to be using ocean WP as the theme so I’m gonna
uncheck that to say I don’t want to use that you can see also the option for
automated taxes now this is a paid for service if you think this is something
that you find useful for your store then you can just enable that for this
example we’re going to leave both of those unchecked and click on continue to
go through the activation process now the activation process is basically do
you want to connect this up to the jetpack sort of suite of plugins now
jetpack is will contour say it’s WordPress is sort of suite of advanced
plug-ins for things like SEO for things like linking things through to your
social network accounts there’s a whole ton of things you can do with it
again if you think this is something you think is useful check it out beforehand
if you already know about jetpack and you’d like to connect to it just add
your account details on hand to connect a jetpack
go through and connect that I don’t want to do that I don’t want to use that on
my store if you’re looking on you and you’re thinking well where do I go now
there’s nothing has to continue without connecting to jetpack right at the
bottom in gray on gray you can see we’ve got skip this step so we’ll click on
that that goes through now and says you’re now ready you’ve done all the
basics we’re good to go so we can do now is you say do you want to get tips and
so on about how to work with WooCommerce up to you drop your email address in
there click yes please that’ll sign you up and you’ll start to
get notifications and information from WooCommerce next that we’ve got the
option for next step to create our first product or we can import products or we
can just say return to the dashboard or there’s some more options for some
guided tour videos and so on I’m going to say return to dashboard so we’ll take
a look at dealing with products a little later on down the line so click to
return the dashboard and you can see now we’ve got a couple of different options
that are popped up to do with the fact we’ve install this let’s just get rid of
those you can also see we’ve now got some new panels available on our
homepage so these are not specific to WooCommerce so if you are dealing with
selling things online then your dashboards going to start to give you
some information when you start to get orders and it’s a great way of sort of
seeing exactly what’s going on with your online store so there’s the basics we’ve
now configured the basic setup of WooCommerce now let’s take a look at the
next step which is getting our Elementor Pro activated going through and setting
up some other options so if you purchased a copy of Elementor Pro thing
you’re going to have to do is activate your license that’s pretty easy all you
do is click the activate your license that’ll take you through and you can see
we can now go through and point our our code in there and then we can activate
it so I’m gonna do that I pause the video just to get other way so you can’t
see my access code so let’s take a look at doing that okay so wall commerce is
now activated so I’ve got the ability to start working with the pro version so
we’ve got that done the next on our list is to install the theme that we’re going
to use and any related plugins that come with that so we’re gonna be used in
ocean WP now ocean WP is a completely free theme but what I’m also going to be
using is some of the commercial add-ons that are part of the theme pack that
allow you to get more out of the theme now again it’s one of those things you
don’t need to use this it’s just gonna make your life considerably easier if
you really want to get in and customize the way that your store looks so we’re
going to show WP and we’re gonna go and grab that
theme and install everything from thee so tripped over to ocean WP now and I’m
ready to go and download the theme so you can see the option for download
we’ve also got a lot of other options on the including the extensions that are
associated with it there’s a range of free ones which I recommend checking out
because there’s some really good ones in me but also like I say this commercial
ones let’s go to click on download that’s going to take us through and
allow us to put our first name and our email address in there to go and grab a
copy of ocean WP so once you’ve done that you’ll get a link you can download
ocean WP and then you can upload that ready to start configuring the way your
site looks I’ve already gone through and done that so I just going to upload my
copy of ocean WP now if you’re using an FTP program a file transfer protocol
program to upload your files to your hosting account you’d see the same kind
of structures we have here this would be in the public HTML folder and you’d have
this structure which is your WordPress structure so we’re going to do is go to
the process of just adding in the relevant files for our ocean WP
installation so what I do is I’m going to come over to the wp-content folder
open up and you can see we have the option there for languages plugins
themes and so on we’re going to come into the themes option and any themes
that you currently have installed will be listed in there so we’re gonna do is
with our two things the ocean WP theme itself is the theme that contains all of
the files that are associated with it however I always recommend putting a
child theme into your site because it’s much easier to make edits to the child
theme files and then if you later on down the line make some changes they
won’t get overwritten with updates and so on so this is the best way of working
so first of all let’s put ocean WP in it so I’ve downloaded that it’s not the
most current versions we’ll take a look at the update and I’ll in a moment but
all I need to do is just drag and drop the ocean WP folder into my themes
folder like I say this works exactly the same whether you’re working on a local
machine like I am or whether using an FTP program and uploading files directly
to your server so there’s the ocean WP folder next up we’re going to put the
child theme in them like I say this works in exactly the same way so we will
just drag that over the links for these will be in the description below so you
can just jump over and grab these yourself
the way you got inside the child theme is if we open that up we’ve just got a
couple of simple files got a function stock PHP file and a Styles dot CSS file
now these are the two key files that are required for a child theme so what this
basically means is if we jump back over to the oceanography folder you can see
there’s a ton of folders in there and files and so on all this makes up your
particular theme but what happens is when you activate the child theme as
long as the parent theme is as in the same folder then WordPress will look at
that and go okay we’ll all the files that are inside the sort of parent theme
will be used even though the child theme is selected now I can set a bit
confusion but what happens is if you make changes to the functions.php file
or you want to add your own custom styles and CSS classes in you can do
that to those files inside the child folder and that means that when you
update the core the master or the parent theme nothing will be overwritten inside
your child theme I’d say it might sound a little confusing but I would always
recommend like I say just work with a child theme it just gives you more
flexibility and less chance of causing problems later down the line if you make
changes to the actual files to your theme itself okay so we’ve done that
next up we’ve got a couple of plugins that I want to add which is part of the
ocean WP theme so I’m going to just jump back out of this I’m going to the
plugins folder again this works exactly the same if you were working with a
version on an FTP on a server so what I want to do is just upload those files or
those plugins that I want to use the first one is the ocean elemental widgets
and what that does is it gives you some extra widgets inside elemental that are
specific to the ocean WP theme now this gives you the ability to customize the
theme and do a lot more with it based upon using elemental so you don’t need
to know any short codes or cold or anything else so it’s a great way over
here to work and customize your site’s look so we’ll drag and drop that into
there next up I want to use the actual sharing
option so we’ve got ocean social sharing which allows us to share this via social
networks like Facebook and Twitter and so on again really really useful little
plugin and finally for now I want to put the ocean
cheering this gives us some sharing options for the products and works
really well with WooCommerce so we’ve got all the different plugins or add-ons
that we wanted we’ve also uploaded the theme and the child theme we now need to
go back into WordPress and activate those before we could start working with
them okay we jump back into the dashboard now of WordPress so what I
want to do is just come over to the appearance tab choose themes and now we
can go through and activate the theme so you can see we’ve got the child theme
and we’ve got the parent theme now at the moment we need to update the parent
sequence is a newer version than what I’ve uploaded so I’m gonna hit update
now let that go through and update it but we’re going to activate the child
theme so once that’s finished updating we’ve activate the child theme and then
we’ll start taking a look what we can do okay so let’s activate that that will
now change the look of our site tells us any plugins that need to be installed so
you can see we need to install the ocean Etra plug-in this is a free plug-in that
just expands the way that ocean works with your particular copy of WordPress
so let’s just install that so we say begin installing the plug-in so we
install it once that’s installed we’ll jump over to our plugins and we’ll take
a look at what else we need to activate okay so that’s done so let’s just chill
with our plugins go to install plug-in section and we’ll activate those plugins
and update anything needs to be updated so ocean elemental widgets the sharing
the sharing that’ll do once you’ve done that we click at the top and we’ll say
update we’ll update that and once they’ve finished updating we’ll just
come in and we’ll activate those so we’ll just select the plugins we want
come down and we’ll just say activate and I don’t then give us some more
options on the left hand side so you can see as we start to install more tools
more our dolls more plugins and themes and so on we start to get more options
in the main navigation in our dashboard so that’s gone through everything is now
set up ready to go so let’s just open up a copy of our shop and take a look at
what we’re currently working with then we can start taking a look at how we
want to customize the look of this to get to start to look the way we want so
this is what we’re currently working with pretty vanilla looking copy we’ve
got nothing really going on the layouts a little bit all over the shop we’ve got
no content in there so let’s take a look at start to customize this
back in – what first thing we want to do is create a couple of key pages that we
need so she’s coming to the pager section and we click on all pages see we
can see what’s currently installed now you’ll take a look and we’ve got a
couple of pages that we didn’t create the basket check out my account and shop
now these are automatic created when you go through the wizard creating a copy of
your commerce on your site so you don’t need to go to the process of setting
these up it’s done automatically then you can see we’ve got sample page now a
sample page when you install WordPress that’s one of the pages already created
so I would recommend getting rid of that so we’ve just been that now discuss
affirm creates other pages that we want so let’s click add new now we’re not
worried about put any content into these we’re just realistically going to create
the basic placeholders so we can then set up the structure create the menus
and so on so we can start creating our store so we’re gonna do is gonna call
this home page we’re gonna come down and we’re gonna well let’s just publish that
we’ll just leave everything else for now we’ll come back and take a look at these
options later so we publish that page we’ll click to
add a new page this won’t we’re going to call contact
again we click on publish add a new page it will have terms and conditions always
good to have terms and conditions on your online shop so you can make sure
you cover yourself it’s also very useful because you can specify that during the
checkout process that the person is purchasing items from you agree for the
terms and conditions this is a good thing to make sure you cover self in the
eventualities you may have a dispute further on down the line with the
product or service you might provide okay so we create this or the basic
pages next I’m going to do is go through and set up our basic menu structure so
I’m going to come down to appearance I’m going to come down to menus now in then
we can go through and create our menus so first I’m going to do is call this
one main menu click create menu and then you can see down the left hand side we
have a whole range of different options available we’ve got pages post custom
links categories menu icon settings WooCommerce endpoints we’ve also got
more options if we take a look at up in the screen options at the top so we can
really come in and we can find him and create some really complex navigation
should we need to with a whole range of different options we’ve also
got placement for our menu structure so we’re going to do is this our main menu
system with a key navigation area so we’re going to do is we’re going to put
in some key pages let’s click on View all and we’re gonna go through and
choose the ones that we want to put on them we’re gonna say home now you wonder
why we choose home instead of homepage this is one of WordPress is sort of
endpoints so it’ll know that whatever page is set is the home page that’s what
it’ll display so we’ll say at home we’ll put in checkout will have contact will
also have shop now terms of conditions will put in the bottom menu later on
we’re gonna do is we will click Add to menu once you’ve done that we’re now
created our basic menu structure we’re gonna specify this is going to be the
main menu now this is something that’s specific to the ocean WP theme so you
may find options about menu settings this section right here is a little
different if you choose a different theme it should all be pretty
self-explanatory and if you’re not too sure check out the documentation that
comes with the theme that you using it should tell you and explain exactly
what’s going on for creating menus okay so we’ve got this option set up it’s not
in the order that I want to work with so I’m gonna just reorder these by dragging
and dropping them around so we’re gonna say that we want our home sharp checkout
and contact if you wanted to you can easily indent any of these and they
suddenly become sort of sub menus then sub menu items so in other words if you
click to expand checkout then you see contact underneath it so this is a great
way of gonna create more complex sites one not having menus that stretch on for
miles so to get rid of that we just basically push that over to the left
hand side remove the indent now becomes apparent sort of menu item click on save
menu and we’re done with the basics name next that we’ve remember back to the
beginning of the video I said we can set up exactly what page we want to be as
our home page so let’s go and do that now we’re gonna come down to the reading
section which is reading and in the we’ve got the option to say your home
page displays by default is your latest posts but we wanted to be a static page
so we click on there when I set the home page to be homepage that’s now going to
display the content that we put onto our home page ourselves so when we go in and
start creating our custom layer to show the things that we want on the home page
that’s going to reference the right Paige when anyone clicks or views our
website so we click on Save Changes and we’ve done the basics so let’s just jump
back over now to my test shop refresh that and we should now see that we’ve
got a slightly different layout we’ve got rid of that area of text because
that was going to show us the sample post that we had we’ve got rid of that
our navigation structure is displayed we’ve also got some extra options in
there we’ve got our little sort of basket icon we’ve also got a search icon
we can come in and fine-tune all of this and we’ll take a look at that in the
second half of this video but let’s go through now a set of some of the basics
of working with our store itself now the reason I’ve chosen ocean WP as our theme
of choice is because it has a really advanced customizer in other words it
gives us a really intuitive way of customizing tons of options for our
theme to make sure that it looks the way we wanted to beauty of this is the fact
that even if you don’t purchase any of the extra plugins you still have a
really fully featured theme to work with absolutely zero cost so let’s just go to
the appearance section you can see that the option for customize gonna click on
there and that’ll take us into the WordPress customizer
the WordPress customizer is a way of going through and configuring your store
and all the different options that your theme or WordPress and allows you to
sort of customize so you can see what this does is on the left hand side got a
whole range of menu options we can click and you can see we’ve got options we can
come to other ones which have more options available so for example general
options we can click on me we now have second-level options so we click you can
see we’ve got a whole range of options in me we’ve also got in the main pane a
visual representation of a page that we’re working with you can easily come
in and change any of the pages you want to go somewhere else you can easily
configure that so you can see exactly what’s happening when you make a change so we’re going to do is we’re going to
go through some of the basic options things like the fonts the color scheme
is going to be used some of the layout options once you’ve done that we’re
gonna take a look then and how we can start to customize the different pages
and the different page elements like the footer area for example or maybe even
the navigation we’re gonna take a look at how we can create custom options
there so we can make sure that our store stands out from the rest it isn’t just
using some kind of cookie cutter theme to half a dozen options that you then
kind of stuck make it look like everybody else is ocean WP with a couple
of plugins really gives us a ton of options to create really customized
looking websites okay so let’s get some of the basics out of the way so we can
deal with the layout of the web pages then we can jump over and start creating
those pages in a more manual fashion the first thing I’m going to do is gonna
come to the general options section in there we’re gonna come up the general
settings as you can see we’ve got a whole range of different options that
allow us to specify the default way that pages are displayed as part of our theme
now don’t worry about this you can override this on a page-by-page basis
when you create those pages but I like to set this up right the way at the
beginning so it means that I’d not have to go through what edit every page where
I don’t want things like the right column and things along those lines so
you can see because things like the layout style the container width and so
on all I’m really interested in at this point is to set this app to be full
width with no columns on the left or right so once I do that you’ll see the
preview in the right-hand side then displays exactly what I’ve chosen
we’ve got rid of some of the actual information on there we now need to go
through and configure some extra steps so I don’t really want this title bar at
the top I want to create a custom footer and the navigation is okay at the moment
we can go in and change that if we want to let’s just jump back out of this you
can see we’ve got a whole range of different options in like page titles
and so on so if we come in there you can see we’ve got the page title at the
moment homepage is showing up what I can do is I could specify whether that’s
gonna be visible on devices the style what tag is going to use padding colors
and so on when do it’s gonna come down you can see we’ve got style we can
choose from center central minimal background image and so on but what I
want is hidden that’s gonna get rid of that and give me a nice clean blank page
to start working with jump back out of this but come down and choose the scroll
to top option and in there we can create our own customized scroll to the top of
the page this will appear in the bottom right-hand corner when you specify it’ll
do is it’ll basically mean that when you scroll down the page instead I’m to
scroll all the way back up you can simply click that little link in the
bottom corner and that will then take you right back to the top of the page
it’s one of those things when you’re dealing with longer pages it’s a great
way of giving some user interactivity and making things just a little bit more
intuitive for the end user so you can see we can choose from any
kind of arrows so we want to use the button size and so on
I’m gonna keep this pretty simple I’m just gonna use this little arrow by here
and leave all the default colors for now that’s fine you won’t see it at the
moment we don’t actually have any content on there but we’re gonna say
we’re good with that jump back out of this now ready to just deal with some of
the styling so we’re coming to the general style of option and you can see
we’ve got the primary color the harbor cover and so on I don’t want the blue
color while they do is click on there and I’m gonna put my own code in color
I’ve chosen that’s fine we jump to the next one now to create the harbor color
and what I’m going to do on they set the same color again but what I’m going to
do is just drop this down to make it a little darker so we’ve got a nice sort
of subtle change when the mouse button hovers over things like buttons and so
on so good with that come down to the hover
color on the bottom again and just set the color that I wanted me so we create
some of the basic options jump back out of this jump back out again and what you
can see is we got the option for things like typography and home page settings
and so on let’s just jump in the typography and see what’s available in
there you can see we can go through we can specify a body font we can go
through a set of heading fonts and so on for now we’ll leave that as is because
the font that’s being used is perfectly fine but you can at any point come in
and start to adjust this to make it look exactly how you want what we were
interested in is the header section and that gives us the ability to customize
the way this header section looks up here so that logo on the left hand side
our navigation and so on so you see this is broken down to various different
sections we go to general you can see we can go through and choose the style of
head of this going in there so you can see got a whole range of options as well
as custom header a custom header means that we could use something like element
or to create our own custom layout use some widgets that are part of the plugin
that we purchased to go with the theme the ocean WP theme that gives us the
ability to sort of drop in there the menu is going to be used gives us a real
amount of control over what we want to do with this I’ve got some dedicated
videos to show you how to create this in more detail that I’m going to cover in
this video so I’d highly recommend check and those that drop the link to that in
the description below along with the one on how you create custom footers
but you’ll see if we just choose any of these say for example Center you see
what happens is it gives us an update and shows exactly what’s going on we
then get options that are specific to that particular style of heading let’s
go for medium and you can see that gives us a nice
layout we got a search bar on the left hand side I will logo in the middle and
it’s plenty of space then underneath that if we want to have a shop with a
lot of different sections or categories or individual pages because there’s
plenty of scope again you can see we could the option for things like bottom
borders which we can turn on and off so if you want to just disable that you can
see the ball it disappears we got the bottom border color so we can set that
on there so we’ve got a whole range of different options that we can work with
if we want to do we can come right the way down you can see we can customize
the color the search form and so on so let’s go into there and just change that
color from the blue to the green color that we’d be new since we’ve got
consistency throughout our site okay so you can see we’ve got the menu position
left right center height and so on I’m happy the way that looks for now so we
leave that as is and just jump back out of that you can see we’ve got things
like head of media logo menu if we come into there you can see we can customize
this but a whole range of different options for customizing our menu at the
moment is pick up the nice green color we’ve got but if we want we can come in
and change those over as well we can even control the type of effect that’s
actually displayed when the actual menu links have taken sort of your mouse over
them so you can see that we start to get different animation effects and again
let’s just go in the link effects color change that to the green color we’re
working with and you’ll see now that immediately picks up that different
color on this so very easy to work with gonna put that back to no effect for now
but very easy to work with and customize user notion WP okay so I’ll leave it at
that for now we’re gonna hit publish on this so we can sort of commit those
changes we’ve just made to the theme layout we’ll come back in a tweak as we
go along as we see different things but that’s enough for now we’re going to do
now is gonna jump over and start working on the actual home page and customizing
the layout of that to fit in exactly how we want to display our products speaking
of products we need to either add some products or import some products that
have previously been created and that’s what we’re going to do again if you’re
not familiar with WooCommerce and you want to find out how to create your own
custom products how the create products add different options to them and how
you recommend check out the videos that I’ve got on the channel to show you
exactly how to do all that in a huge amount of detail for now we’re just
simply going to import some products we can start working with a layout as
opposed to concentrating on creating a WooCommerce store okay
if you’d like to follow along and use the demo data that we’re going to use in
this particular video for your products just to save you the hassle of going
through an ad in a pile of products the easiest way of doing that is just
importing them now when you install WooCommerce it also installs some extra
little bits and pieces that you can use one of those is the actual demo data the
other thing is the ability to import your products in there but what we need
to do is activate that importer so when we in the dashboard of WordPress if we
come down to tools we’ve got the option for import so I click on that and you’ll
see we’ve got WooCommerce products and WooCommerce
tax rates we’re gonna run the importer for the products so we’ll click on that
that’s going to run the import it’s gonna say right we need to choose the
file where is this file located well let’s click on choose file before we do
I’m just going to bring in the folder structure so you can see this is your
normal WordPress install if you’re on the ftp like we’ve seen in the previous
view this is exactly what you’ll see in the public HTML folder so if we go into
the wp-content folder into plugins and into WooCommerce you’ll see there’s a
folder in there called dummy data if you open that up there’s a couple of files
in there there’s a sample tax rate if you’re dealing with that you want to
import that option we’re not going to what we’re interested in is the dummy
data if you go to a CSV version and an XML file version so we’re gonna do is
we’re just gonna load those in through the importer just just close that down
say choose the file I’m wanting to do is gonna find that file on my system so I
know that’s in the C Drive I’m just going to come down and find that file so
now they located that on my computer I’m going to choose the CSV file and click
on open you can see it allows us to choose to update existing products if we
already have some products added in there I don’t need to worry about that
so instance to click on continue there’s Advanced Options should you need them
and you can see you can go through and you can specify some other information
on there but because we’re dealing with an official product sort of official CSV
file that’s being shipped as part of all commerce I don’t need to worry too much
about that I just click on continue that’s not going to go through and see
we got column mapping which again we’re gonna leave all that information as it
is because it’s all been laid out by the developers of WooCommerce so everything
should be in place so we don’t need to worry about that click on run the
important that’s going to go through now and it’s gonna start important as prod
she’s gonna pull the files down from the internet so we got access to the images
and things that are associated with the individual products and once that’s
finished we can then move on okay so the import is now finished and it’s imported
28 products for us if we want to we can click on view products or we can just
jump back over and start working let’s click on view products and take a look
what’s happened so you can see now we’ve got a whole range of different products
in this and variable products products on sale just so we can see we’ve got
some information in there that kind of covers all the bases that we’re kind of
really gonna work with or we did it with a WooCommerce store okay so we’ve got
the product in it now let’s go and start creating our custom home page so let’s
go back to the dashboard and in there now we’re ready to start creating our
customized home page now we’ve created the basic page we can now go through and
start laying that out and populating it with some information to really get a
nice looking page so just go back to our pages we’re gonna come down and we’re
gonna choose our home page once we’ve done that we’ve got a pile of options
available to us before we start editing the page and creating things without a
mentor let’s scroll down and take a look at the ocean WP settings now you can see
we’ve got a range of different tabs on the left-hand side you may see some
different ones in here depend upon what plugins you may install as part of ocean
WP but you can see we can override things so for example the content layer
the sidebar the margins and so on we can override the basic information that’s
part of the default copy of ocean WP so we get a huge amount of control over how
we can lay our pages out of what is displayed and what’s not displayed on an
individual page web page basis should we need to feed up at the page after bit on
the right hand side we’ve also got the option because we’re working with
elemental to deal with the elemental canvas which basically means it gets rid
of any header or footer and gives us a completely blank page for this example
we’re not gonna worry too much about that but if you did with landing page
especially if you want to focus on one product and drive sales to it then
that’s a great way of working where you can creat create a entirely custom page
from scratch without any of the other sort of theme options being displayed
anyway we’ll leave that as is for now we’ll leave the default template content
layout we’re just gonna set that to be 100% full width once you’ve done that
we’re just gonna update the page then we’re ready to start working with
Elementor to create the actual page layout itself
now if you’ve never used elemental I’m not gonna put a huge bunch of data in
this video and what each different component does I’ve already covered
element with a lot more detail again and Link the description all the videos in
the description below so you can check those out and really get a good idea of
what you can do with elemental but fundamentally elemental is a visual page
builder which allows us to create page layouts based upon rows and columns and
we can drag and drop individual widgets for example a graphic widget or
animation widget or text box widget into the various different cells and we can
create a really customized layout because there’s a huge amount of
flexibility and link in that in with some of the widgets we can use with
WooCommerce it means we can create truly customized pages to display product
information so to access this we’re simply gonna click on edit with
elemental and that’s then going to replace our normal screen with the
elemental screen and allow us to start creating content now what it does is it
gives us much the same kind of layout as we get with the customizer but this time
it only to be working with elemental so you can see we’ve got our header element
we’ve got our footer element and then the area in the middle is completely
customizable through using elemental so if we take a look on the left hand side
you can see what all of these different widgets on then if we scroll down we’ve
got a whole range of different widgets or you can kind of think of as
individual little component elements that do a particular job so for example
things like testimonials and tabs and sort of social icons and so on you can
also scroll down you can see you’ve got the various default WordPress widgets
which you could also put in the start to use now the thing you’re gonna notice on
here is if you’re not using the pro version of Elementor then some of these
options are not going to be available so you can see there section depths this is
the pro element so all these different widgets are only available as part of
the pro copy of elemental you can see we’ve also got theme elements which are
specific to the ocean WP theme and the elemental plug-in as part of the
commercial option knee so you are gonna get sort of a cut-down experience if
you’re not using those so I would highly recommend taking a look at check-in
those so it really just gives you so much more control over your website and
if you’re really committed to creating a great looking website then these are the
tools that are gonna get you there much quicker and easier without breaking the
bank ok so let’s start off by creating a nice call to action header
right at the top is gonna grab the users attention so what we’re gonna do is
we’re gonna drag over heading we’re gonna drag over some additional widgets
and then we’re gonna start styling them so the next thing I do is gonna drop in
a divider and finally we’re gonna come back and drop in a button so we’ve got
the basic elements there next thing you need to do is set everything up now so
all the components including the background image are all displayed so
that’s pretty easy what we need to do is select the actual contour row itself
once we’ve done that we can go through and set some parameters for this so
we’re gonna set this to be stretched so the background image is going to stretch
it we’re gonna leave the content width width boxed because I want the content
to stay inside the normal flow of the page but I want the image of the
background to expand right the way out so next thing we need to do is go
through to these styles and we’re going to do is we’re gonna set a background
image in there so make sure we’ve got that selected we can click on a
background type click on classic and that allows us to put a background image
in it so we’re gonna click on the choose the
image we uploaded insert the media and you can see now the images in there but
it kind of looks just a little bit weird so what we need to do is specify a few
more bits and pieces now just to make sure that it lays out the way we want
first thing we need to do is tell it how we want to position it so we’re gonna
say we want this to be Center left we’re then going to come down the attachment
we’re gonna say that this is going to be scroll so it’s gonna scroll with a page
so if we set it to fixed we’d have that sort of parallax effect for this example
I don’t want that repeat I don’t want any repeat so I’m gonna say no repeat
and sighs we’re gonna leave to be cover once we’ve done that we’re gonna jump
down to the background overlay option Internet we’re going to put an overlay
over the top of this so it means that the text and the button will stand up
just a little bit better to do that all we need to do is choose the background
type we’ve got two options we can choose a classic background type or we can
choose a gradient for this example going to keep it really simple and just choose
a background color so we’re gonna choose black on me you can see that now puts a
semi-transparent black overlay and we can control that overlay effect by
adjusting the opacity on this you can see if we take that to the left the
overlay becomes clearer in other words it becomes more
more transparent if we to go to the right hand side it because morale Pakes
we lose a lot the background image so we set that back to be fifty to start off
with if we need to tweak that we can do that later on so these are the basic
elements in there we no need to start styling things so we’re gonna do is
going to come in we’re gonna choose the different elements now before we do that
we’re gonna make sure we’ve got this row selected check the Advanced section and
check this link values together and we’re gonna add a 150 pixels at the top
and 150 pixels at the bottom now this means that we’ve got a nice amount of
space above and below the text and the button and so on in there so it means
that we can see we can see more of the image and just have a little bit more
space to let the entire sort of layer breathe so as you do that let’s just
jump almost start editing and styling these different elements so start off
with headings let’s click on that you can see now the context options on the
left hand side change with your set this to be centered now I’m gonna run through
this pretty quickly I’m not gonna explain everything on there but I just
want to sort of go through and you can see what I’m kind of doing to get the
effect we want leave it as h2 header HTML tags we’ve got a heading to set on
me jungle to the style option check check and set our text country white
we’re gonna enable typography so it means we can go through and style the
way the text looks choose a custom font family and I’m going to use Montserrat
for this because it’s a nice heading set the weight to be around 600 pixels
transform to be application everything is capitalized and what we’re gonna do
is we’re just going to increase the size on the until we get roughly where going
to be so around about 75 looks pretty good now you’ll notice that above this
75 we’ve got pixels M’s and RAM that allows us to choose the different kind
of elements that we’re going to use all the different kind of settings you want
to use whether you want to use a pixel value and M value or a Ram value
you’ll also notice we’ve got this little icon next to the size you click on there
we can set the size for your desktop for your tablet and your mobile now once
you’ve set everything out we’ll come back in and we’ll tweak some of these
things to make sure they look good on both a desktop a tablet and also on a
mobile very easy with elemental but for now we’ll leave it we’ll just set up the
basics next up let’s come to this line in the middle of what we’re gonna do is
tweak some of that so we’re gonna set that to be 3 pixels to be white to match
so matches in we’re going to set this to be a width of
about five percent set and at that so we know got that styled again we can adjust
the gap on if we want this we can tighten it up if we need to or we can
open up that gives a bit more breathing space let’s tighten things up on there
so it goes like that okay so next up we’ve got the click Me button we click
on that again we set to position we want it to be so you can change your
alignment on there we can change the click me and we’ll put start shopping
the type you can see got a couple of sort of predefined options in there
we’re gonna leave that for now set that size to be large we’re then going to
come into the style option you can see again we’ve got typography so we can
click on that and we can choose everything we want anything like we did
previously so again we’ll set this to be monserrat making sure that the weight
and everything all kind of complies we’re going to set up to 600 as well
transform is to be uppercase style is fine you see we’ve got things like lion
height and so on we can even control the different sort of text based upon the
harbour of state and so on we’re going to change the background color of the
button and we’re going to set that to be the same green colors we used earlier so
we’ll set that on there so we’ve now got the right matching color border radius
we’re gonna set that to zero because I don’t want to have the sort of curved
edges what we’re also going to do is we’re going to give us a little bit of
an animation effect so there’s some interaction with the element so people
know when they hover over it something will happen so we click on
harbour what we’re gonna do in there is we’re going to change that and we’re
gonna set an animation in there so we’re gonna set that to shrink so what’ll
happen is now it’ll change color and shrink when you mouse over it so that’s
a great way of setting up some kind of interactivity that shows the end user
that something happens okay so let’s just change this now from being this is
a heading element to super clothing store even though it’s not just clothing
on you that’ll be fine we’ll just leave it at that for now so if we click on
this little arrow on the left hand side that will shrink down the left-hand
column and show us a visual display of what the page will look like without all
the different elemental elements it’s a great way of just checking to make sure
everything looks the way you expect if you click on that so you can see now
we’ve got this nice sort of call to action set at the top with a start
shopping button other than that we’ve got nothing else
on the page so let’s go through now has started now adding in our custom
WooCommerce layers for our homepage so the aim of any online shop is to make it
as easy and as intuitive as possible to get the end-user to buy something so the
ability to create a custom shop layout is a really great way of being able to
control what you want to display on your homepage and not just rely on the
default settings that may be part of the theme that you’re working with so to do
that we can simply come back onto our widgets and we can go through we can
take a look at some of the Pro elements now the pro elements give us some
WooCommerce based options things like products Add to Cart elements categories
and so on now that might seem pretty simple and not really giving us much in
the way of options but the reality is there’s a lot more functionality hidden
in there than you may think so let’s just say for example we choose the
categories option or the products option let’s just drag that in drop it onto our
page and you can see we’ve got some information on there and it shows the
representation of what we’re kind of going to see so you can see we’ve got
things like the number of columns in the post count pretty self-explanatory we
can set that to be 3 for example or weakness here to be 5 and we want to
sort of do it all very simple so that’s for that back to four we’ve also got the
product count so that allows us to limit the number of products that will be
displayed in this section so again it gives us some basic control where the
power really comes in and you start looking at the query option so we expand
that out you can see we can go through we can filter out exactly what we want
to display in this block so we can use various different blocks together but
each one display in different information so for example you may want
to use product categories so you can see any of the categories we currently have
created as part of our store are all listed in there and we don’t need to
type anything in we could simply click in there and it’ll go through and show
us all the different options that are available same goes with the author you
can see if we start typing in it there’s multiple authors it’ll go through a
layer to sort of filter it based on that and the same goes for product tags if
you apply tags to a product you can then use those to actually pull those out and
display them via this method we also have some extra options and the Advanced
section so you can see we’ve got a filter by featured and sale we can order
by and a range of different options on how we want to order them again we got
order again and if that and we can also exclude things so you can exclude the
post or a manual selection if it is manual selection you can see we can
start typing in there and really sort of cut down what’s displayed for this
example let’s keep it fairly straightforward and fairly simple let’s
just say we want this to be our featured product section well that’s really easy
to do you can see we got filtered by click on there and we can choose
featured now you’ll find that all our product disappear because we don’t have
anything featured just yet so we’ll save this out we’ll jump back and I’ll show
you how easy it is to set your products to be featured so they start a display
in this section so let’s just save the page so we make sure we commit all the
changes we made we close then out of Elementor and we’re gonna say cut the
dashboard once we’ve done that it takes us back to the page we’ll hit update to
make sure that any changes you may have made have been committed and then
finally we just jump back to the product section of WooCommerce click on all
products and you can see now we’ve got a list of all I’ll try say we saw you’re
on so if you’re wondering what this star option is is one of the columns that’s
where we can specify your product is featured and all you need to do to make
it a featured product is simply click on it so we click on the first four
products we’ll find that they will then update and we’ll have the little star
beside them and that now sets those to be a featured product so we just jump
over to our test page and refresh that so we can see all the changes you’ve
just made we’ll find we now have our four featured products listed on the
page pretty cool now let’s get in and make some changes to this this just jump
back into the admin section and start customizing this a little bit more just
jump back onto our dashboard I’m gonna come back down to our pages and click on
all pages to go back to our home page go back in start editing that and click on
edit with Elementor that means we can go back in and start carrying on editing
the page we’ve currently been working on so you can see everything is back to
where it was if we scroll down you’re gonna see this some kind of little weird
glitch that you kind of get when you’re working with this particular widget and
Elementor it seems to double up what you’re seeing on there I’m not really
sure what’s going on there but it’s something to be aware of it
doesn’t affect the actual page itself you can see that you know it shows on
there we just jump out go to our test page and refresh it it’s exactly as we
laid it out okay so there’s the basics so let’s go through now and add some
extra information at the moment the end-user doesn’t know
what these products are you know it doesn’t know that their featured
products there’s no with our sale products or what they are so let’s go
ahead and style this a little bit more let’s just some come into this section
we’ll click to add a new section above our featured items and let’s put some
information in this let’s just drop in a heading and let’s do the sins we didn’t
last them jump back and we’ll just drop in a divider so the aim of this is to
make sure that everything has a consistency based upon the actual style
that you’ve used on your site so we’re gonna do is we’re just gonna simply
style these up to make sure that in keeping with everything else so let’s
just click on this our heading is going to be monster up again so we’ve got it
selected we can simply come into the style option and we can start styling
the text so again we will set the typography set the text color this time
going to go for this dark slate gray we’re going to make sure that we use
montserrat again as i were heading our size we can control that as well so we
can specify exactly we want on this that’s cover so like 32 pixels so it’s
nice and bold set that to be the same weight we’ll set the transform to be
uppercase and if we want to we can deal with things like the line height and so
on so we can adjust that to set that where we want it to be jump back with
this and set to be centered so there’s the basics the same now with our line
click on that set that to be centered we’re gonna set the width to be 5% so it
matches that the weight to be three and we’ve set the gap will just reduce that
right that way down so we can kind of control everything all right while we’re
at it we actually come into this and we’ll reduce the amount of actual line
height on there so everything kind of butts up a little bit nice and neat okay
that looks pretty good we’re gonna do though is we’re gonna suddenly just
change this and make it the same green as the rest of the sort of layer that
we’ve got on them so making sure we have that consistency throughout okay let’s
add a little bit of space in it so we can click on this come to the Advanced
section and what we can do is we can add some padding so we’ll unlink that I want
to add something like 50 pixels of padding to the top and 50 pixels of
padding to the bottom okay so there’s our sort of heading section now it tells
it exactly what’s going on I see this just make that a little bit
yeah just come in we’ll just bump that up a little bit 42 someone there I will change this to
be featured products okay so now the end user will see this and they’ll know
exactly what’s going on so we’ve now got our featured products there so
everything is all lay that we want next thing I want to do is let’s put some
sale items in there let’s just choose items to be displayed there specifically
on sale well we’re gonna duplicate a lot of this information so do we really need
to go to the whole process of doing it all over again no we can easily just
duplicate things on the page drag them and drop them around the page so we can
speed up the process so let’s just do exactly that let’s just duplicate this
entire section for a featured product so all you do is come over that duplicate
the section that’s duplicated that will so we drag that down below our featured
products drop it in the rename this on sale or sale items okay so everything is
now set up we’ll do the same again on this we’ll just duplicate this one so
copy duplicate that we’ve got a duplicate we
drag that down below our sale item section click on the widget itself and
we now need to change the query to be from featured to sale items so we’ve got
our sale items in here so we can hit save on the page we now have if we just
jump back take a look refresh the page we’ve now customized
our homepage to create this nice simple clean layout that shows both our
featured items and our sale items very quick and easy and a really great way of
displaying products that you want on me okay so there’s the basics of our
homepage created next thing to do is go through and start editing and laying out
the various different other pages on the site so let’s just jump back over to the
admin section we finished with this page now so we’re gonna simply click to close
this down and say go to dashboard making sure that you save this before you exit
will update the page to make sure that everything is nice and neat it’s all
saved and then we will jump back to the appearance section and go into customize
now this is gonna allow us to go through and customize some of the other pages
that are part of will commerce and part the way they laid out now if you want to
get more detailed in this want to cover this in more sort of like
depth and you want to go in and create your own custom pages for the actual
product display as opposed to the category display you can’t really do
that out of the box with this particular theme but you can do it with another
plugin that you can purchase which is anywhere elemental Pro we’ll be taking a
look at that in more detail further on down the line
there’s also the fact that elemental Pro itself is due to be bringing out
different sort of options that allow you to customize the WooCommerce shopping
pages so it’s worth waiting to see what will happen there if you don’t need it
right now but let’s take a look what we can do to customize those pages okay so
we’re looking at our homepage if we click now to go through and take a
look at a product page we can cut start to customize that so you can see the
layer is pretty much the same we’ve got the sort of navigation at the top well
footer at the bottom we’ve got the sort of normal layout then this part of this
particular theme and the way it styles the actual product page you can see
we’ve got a list on the left hand side which is a sort of sub column I want to
customize this a little bit more and to do that we can come down to the rule
commerce section in the customizer if we click on there you can see we’ve got a
range of different options we’ve got general menu card archive single and
advanced styling so we take a look at general for example you can see we’ve
got custom WooCommerce sidebar display featured image cart page cross-sells and
so on so we can go in and we can start to
customize things a little bit more so let’s just jump back at this and let’s
go to our single product page this is the page that we’re currently working on
and you can see this gives us a whole range of different ways we can customize
this layout at the moment it’s got the left-hand column set we could choose
between left and right if we wanted to if you want dual columns you can do that
if you don’t want to have a column display which is the way that I want it
to be set up you can just simply choose the full width option and that will then
completely get rid of it and give us a nice simple clean page layout you can
see that we’ve got various different things like related products and so on
underneath which is automatically populated as part of all commerce itself
you can manually go in and specify what products are associated with which
product so you can control this again I’m not going to go into too much detail
about that you can do it if you want to you’ve also then got the option to do
things like choose what information is going to be displayed so you can see
we’ve got things like the title if we click the little I icon that
will then hide that you can see that now gets rid of the title there at the top
same goes for things like rating and excerpt and so on so you can customize
exactly what’s going to be displayed we’ve also then got the tabs position so
at the moment got description and reviews and it’s set to be centered well
we can set that to be left we want to all right so we can control that a
little bit we’ve also got the option to control the upsells and the upsell
columns which is this section below and the same goes with the related products
we can choose exactly what’s displayed the number of columns displayed and so
on so you can easily tweak that to get a layout get a number of columns or so on
that kind of works for what you’re doing so it gets a pretty nice-looking layout
the option to sort of display the image different thumbnails and so on
underneath so we can just jump back out of that we’ve then got advanced styling
as an option and here you can see we can control things like the on sale
background for example so we take a look at this product you can see the on sale
the little tab in the top left hand corner we can change that so let’s set
that to be something like a red symbol kind of stands are just a little bit
more same as the Stars and similar to things like that the grid Harbor color
and so on will have changed those now so they match in with the actual green car
that we’ve been using throughout so let’s just choose the green color so
you’ve got that consistency throughout our layout now you notice the ending
show up on here because they’re not being referenced on this but we are
going to just change those a little bit quickly just to make sure everything
sits nicely same goes the price color at the moment it’s using the different
green to what we’re using so let’s just change that over so it all matches in so
you can see now it starts to style up the way we want it to be same goes with
the hover color States the same for the title and so on so just simply coming in
and just changing where we’ve got this blue being reference and changing that
to the green that we are using for the layout that we’ve got okay so this takes
a couple of seconds price colors seem good on there so you saw working with a
single product now so you can see we can come in and we can set different sort of
settings for each of the different product categories the different product
views and so on so we can really come in and fine-tune how all this is displayed
to make sure it matches up exactly what you want with the store that you’re
creating so again like I say it’s all very simple very intuitive just coming
through and setting these up just making sure they’ve got everything
in there the way it should be with little symbols okay now we do the same
on there so pretty good so sin come down so you’ve got quite a few different ones
to do on here so I’m gonna quickly pause the video make those changes and come
back to you okay so I’ve gone through now I would just add the colors to the
way that I like them and you can see everything is kind of looking a little
bit more in keeping now we’ve got all the Styles looking pretty much the same
so we can scroll back up and we just jump back over this and you can see
we’ve now got a really good-looking page layout so there’s one thing that
I’m not really too fussed on the moment and I said little icon we’ve got for the
shopping cart all the basket at the mall looks like a little handbag which is not
really in keeping with the type of product we’ve got displayed on the
website well I can change that I didn’t Iike the menu cart and you can see I’ve
got a range of different options in there I can choose the cart icon that I
want if you want to create custom ones I can create exactly what size I wanted to
be to Center it vertically whole range again of different options
that we have available to us there so let’s just change that to something a
little bit more in keeping so let’s say for example we want to use this icon or
this icon or the basket icon you can see it updates on the page there now
sometimes you may notice a little kind of quirk with this that when you jump
over to your test site or your actual page itself
it shows the old icon you simply just need to refresh your cache it’s
basically just cache in that little icon it is gonna update and it is gonna
display you just might need you to refresh your browser first okay so we’re
happy with all that we’re gonna click on publish to commit all the changes that
we’ve made we now created a more customized product
page so let’s just take a little look at what we’ve done in action already so
let’s just jump back over to our test site refresh the page to make sure
everything is done so you can see if we scroll down let’s go and choose a
product who will say we want to take a look at this one so click on that we’ve
now go in and take a look at our product page layout so you can see all the
things we’ve just done of all been set up and configured in the so everything
is laid out and styled the way we’ve set set it up to be so we’re looking pretty
good so far we’ve covered most of those bases to get our online shop up and
running we create our own custom home page just to make sure everything is
displayed the way we want so let’s take a look at dealing with some of those
different pages now we need to go through and make sure that we’ve got
things like the checkout page and the cart page
styled and laid out the way that we want them to be so let’s first of all just
add a product to the baskets we’ve got something in the basket to make sure we
see exactly what’s going on so we’ve now got that in the basket let’s click on
View basket and take a look so things are looking pretty good at this point
everything is styled the way I want it to be let’s now proceed to the checker
and make sure everything looking good there as well so jump over and you can
see the checkered is all laid out nice and neat all the styling is in place all
the colors that we’ve used are all fine looking exactly the way we want it to
so those pages are looking pretty good but you’re gonna find this a couple of
things that we haven’t done yet if we jumble to the shop page for example
which is the default page we’ve now got this sort of left-hand column that
doesn’t really relate to anything to do with the shop so we can get rid of that
in a moment we also need to go through and specify exactly what information is
to be on the contact page so we can do that as well in a moment and we also
need to finally deal with the footer area so the eagle-eyed among you will
probably notice as well that we’re looking at the shop in pages other than
the individual product page that the buyer at the basket button just looks a
little bit strange it’s not really in keeping with everything else well let’s
go and change that the only thing with this is and this is down to the ocean WP
Themis we need to go in and change that through using a little bit of custom CSS
to do that we’re just going to jump back with the customizer jump back out of
this jump back to the sort of main section and come into the custom CSS GS
section in there we can now start adding in custom CSS code and also custom
JavaScript code if we want to so things like your Google Analytics codes for
example they can be dropped into there without the need to then go in and do
anything or install any plugins then you co decided to every single page so it’s
great this is on a theme level doesn’t require anything else to be added in so
let’s take a look at the CSS code we need to drop in there and again I’ll put
this in the description below so if you want this information you could easy
just copy and paste it into site and adjust the colors accordingly it’s very
simple so let’s take a look at that now okay so copied the code now for changing
the buttons I’m just going to paste that in here okay so let’s take a look at
what’s going on with this you can see the first part we have is the different
selector that’s going to be used to call up the particular piece of sort of code
this used for the buttons next up we just got some basic style is the
I’ll color the color of the text any transformation to the text padding and
border and so on and in fact we’ve also got exactly the same just this time for
the harbor effect so all you need to do if you use this code is changed this
first number to be the number that you want to be the normal state of the
button in other words nothing going over to what you can see there the lighter
green the next one is just to change the second value and set that to be the
darker value or the lighter value or the harbor state value whatever you want to
use you can see when we mouse over we get the slightly darker version of it
and that’s all there is to it it’s pretty simple pretty straightforward
like I say this would be available to you so you can literally just copy and
paste this in hopefully this is something updated in a future release of
ocean WP because it’s one of those things it’s not difficult but it’s one
of those areas that I don’t really understand why it’s not been updated and
why we sort of still need to do this manually anyway that’s just a little
personal Enclave other than that that’s all we need to do
so let’s click on publish on there and let’s take a look at the front end of
the site to make sure everything is working the way it should be just jump
over refresh this you can see our buttons now take on this the right kind
of state that we want on this that’s all looking pretty good looking pretty nice
shovel to the home page make sure things like on me again
all the buttons are set up the way they should be all displaying all in keeping
so that’s that piece done so we’ve covered that tick that off the list jump
back over to the admin section now let’s jump out of this and we’re pretty much
good to go onto the next step okay I’m back in the dashboard now of WordPress
and we’re gonna deal with the shop page the shop homepage let’s jump over take a
look at the page I’m talking about click on there we need to deal with this
left-hand column I don’t want that to be part of my store so when we come back to
the dashboard we’re gonna come into our pages section I’m gonna take a look in
there and we’ve got shop as an option so we’re gonna click on that you can see
now we can go through and we’ve got edit with Elementor so if you want to create
some more customized layouts for this we could do if we wanted to we don’t need
to we’re going to keep it as is but what we are going to do is come down and set
the content layout to be full width so in a click on that update the page we’ll
just jump back over there and refresh the page and take a look so there we go
we’ve now set that up so it’s displaying just the product without that right
handmade oh nice so your left hand money so a nice simple clean looking layout
that looks great obviously if we wanted to change the layer to this you want to
sort of increase or decrease the number of columns we can do all of that very
simply from within WooCommerce itself for me I’m happy with three column
layout that’s looking pretty good obviously you’ve got the options then as
default where you can go through the sorting options and the way things are
laid out all again really just install as part of we’ll call this an ocean WP
so that all works pretty nice out of the box so now let’s move on to setting up
and creating our customized footer this is pretty easy we just jump back over to
the dashboard what we’re gonna do is we’re gonna come down to the theme panel
and then they’re gonna go to my library so I think in my library and as you can
see currently there’s nothing in there now the library is basically templates
that you can call up and use in various different parts of your site so we’re
gonna do is we click on add new we’re gonna create our custom footer you’ll
name that custom footer will echo to the template section on the right hand side
and this is we’re gonna choose the elemental canvas because what we want is
a completely blank page nothing on it at all choose that scroll down we’re gonna
do is we’re gonna specify that we’re going to disable any margins I’m gonna
set the content layer to be 100 cent full width so we’ve now got control of
exactly what’s going on on me I will hit publish so we’ve done that we created
the basic hole that we no need to go into Elementor and start creating the
actual layout itself so let’s just edit with elemental once we’ve done that is
loaded in we can start creating the layer that we want so you are only
restricted by your imagination of what you want to achieve with this for this
example we’re going to keep it fairly straightforward we’re gonna create a
multi-column layout and we’re going to put in some key information into it so
we’re going to do is we’re simply gonna come over and we’re gonna drop in some
text it’s an information and so on so let’s just grab the text editor bring
that over drop it in the way to do now is we can simply click on this top left
hand corner and we can now just add in two extra columns so you’ve now got a
simple three column layout so to start off with I’m gonna just duplicate the
contents we’ve got three text boxes so in the click duplicate those
drag-and-drop them over to the relevant different columns okay
now you can’t put exactly what you want in here for me I’m just gonna keep this
really straightforward the kind of thing that I would do on most sort of
e-commerce stores is sort of company address and we’ll just drop that the
next line we’re going to put something like useful pages again got that in the
next line I will put some about s information in this point so about us if
I want now I can also go in I can styled the different elements we’ve set this to
be for example I’ll have that as heading for and the same on the other two so
let’s just click on those to activate those heading for finally heading for
one company address as well okay so we could leave it at that if you wanted to
we could do things like added some extra widgets so let’s just say for example we
wanted to have social media in there where we could simply drag in some
social icons in the style those up set into what we want the size and so on so
easily customize and tweak those to get them exactly as you want official color
or custom colors you know you can do whatever you want with this there’s just
a line those to be to the left so it thinks it’s nice and neat and we’ll hit
save so there’s our basic page created or our basic footer created now if we
just jump back over to the page and refresh it you’ll see that nothing has
changed the footer isn’t being used to do that it’s very easy let’s come back
out of this go back to our dashboard jump back over then and into our
customizer once you’re in the customizer we’re
going to find the footer section once that loads in and you can see we’ve got
of to footer blocks if we scroll up the page and take a look we’ve got the
footer bottom which is this section that has the copyright information in it and
we’ve got the footer widgets click on me now you can see say it says enable
footer widgets if you uncheck that it’ll just completely remove that even if
you’re not using widgets on it so we say enable that but what we’re going to do
is you can see we’ve got visibility fixed footer on and so on we say yes to
fix foot because that means that no matter how
toward the pages the football always stick to the bottom of the page which is
just a good way of working you can create a parallax footer effect if you
want which is quite cool again entirely up to you what we are going to do though
is choose from this light you can see at the moment says choose a template
created in theme panel my library which is what we’ve just done so they click on
there and choose custom footer which is the name of the photo that we just
created in there so whatever you name it if you create multiple different sort of
templates inside the my library section they’ll all be listed in there so once
we click on that you’ll find that it’ll refresh the page if we take a look now
there’s the three column layer that we just created our custom footer what we
can’t do is we can come down we can adjust the padding and the margins and
so on we can come in and choose the background color so you want to change
that to a different color we can easily do that text color let’s lighten that up
a little bit so it stands out a bit better of the background and you can see
we’ve got links color and border colors and so on well I’ve just changed the
links color again to be the same Green’s we’ve got everything else we have that
consistency throughout our instead entire store let’s just change that so
we now know that our links are going to be consistent
now this again one of the little quirks with this particular theme you can see
because you created a custom footer we don’t have the styling done on these
particular sections well that’s very easy to do so this again jump back at
this and go back to the custom CSS section and we can create our own custom
CSS so we can just come into this we know it’s in the footer so we’re gonna
put footer and we’re gonna put H four which is the H four we chose the head at
we chose sorry open and close our bracket so I’m going
to do is we’ve set the color in there and we’ll just set it to be white so you
see as soon as we do that it immediately updates and that’s now put the
information in there a style those the way that we want so pretty easy nothing
too difficult on there so that’s our custom footer in place you can also see
that we’ve got in the scroll it’s hot button that we created right back at the
top of the video because we now have more information on the page you can
click and scroll up again really really easy to deal with
so we’re pretty much on the home straight now we’ve covered off most of
the things that I wanted to show you go hit publish on this to make sure our
changes are saved and committed to the actual layout itself what we need to do
now is just go through and do a couple more little
things jump back out of this come back to our full listing so we can go and
control exactly what’s going on me now one of the things I really love about
ocean WP is the ability to restrict what you actually search for because we did
it with an online shop I don’t really want to go and search for pages like the
checkout page or the about page in terms and conditions we can do it without very
easily kept the general option set in and what we go in there is general
settings if we scroll through we’ll find the search results page and you can see
the source is currently said to be all post types click on there you can see we
can tell it to restrict what’s searched again so in other words we could say we
only want to search posts pages or in this instance of products you click on
that and now any searches that are carried out using the search bar the
search function as part of the web site will only search the products I think
it’s a really cool little feature again we’ll hit publish to make sure that
that’s saved on there we’re going to do now is we’re to jump back out of this
close this down I’m going to deal with setting up the custom menu that I want
at the top that allows the end user to go into their account and things like
that so that’s pretty easy to do when do is going to come down to appearance and
menus click on me and once we’ve done that we can now go through it start to
customize this we’ve got to create another custom menu so what we need to
do is say click on create a new menu and name this account menu create the menu
all we need to do now is add in the relevant things that we need in the
other relevant links we’re going to use the WooCommerce
endpoints so you can click on there and you can see we’ve got a range of
different endpoints on this so things like orders downloads and so on if you
don’t see this for any reason just click the screen options in the top right hand
corner and make sure that WooCommerce endpoints is checked and that will then
appear for you so we’re going to do is we’re going to choose the various
different options on here forget the downloads but that’s not really relevant
so we will say add to menu there’s our menu structure so we could
lay this out any way we want so we can say where we want addresses and account
details for assent orders then lost password and finally logout so that
looks pretty good problem being is if we do it like this
we just have a pile of different icon was put with different
links across the top which isn’t what we want so we’re going to come back to
custom links I’m gonna get rid of the URL and then just put in the hash symbol
and we’re gonna put account ok so what’s he done that was hit add that to the
menu take that up to the top I’m going to indent all of these underneath the
account menu so what this is basically going to do is these are all going to be
subsection of account then all we need to do is click on top bar and save the
menu once we’ve done that we’ve now created a custom menu that has address
account details orders lost password and so on underneath the account menu if we
jump back onto our page and refresh this you can see at the top now we have all
those relevant links that we just created so we clicked are going to see
that and redresses you can see we now have all the information for addresses
again if you want to any orders we’ve placed they’ll all be listed in here so
you’ve given the end user an easy way of finding out how to access their account
information for me I don’t really like that on the top left hand side so we’re
gonna do is jump back into this come back into the customizer and we’ll
specify we what not to be over the right-hand side that’s very easy to do
what we need to do is wait for the customizer to load in then we need to
come over to the top bar section click on me and you can see we’ve got general
if we could enable or disable it specify what devices is shown on if that’s
relevant the colors and so on so again has changed that to make sure it’s got
the same green color as you been working with so jump back out of that content
you can see if we wanted to want to create our own custom layout we could do
that there get rid of that and social we can clear it and specify that so we can
disable the social if we want to and get rid of that completely so we need to do
now is just jump onto the general section and specify that we want this
menu to be over the right-hand side so you can see at the moment it says left
content right social click on that and we can say left social right content
once you do that you’ll see it will just pop it over to the right-hand side now
even though you see it says place your content here don’t worry about that
because that’s disabled when you actually see the site and if you don’t
like having that on there you can see me come back at this go to content
taker what’s in there and that they will get rid of it
pletely so we published that to make sure it’s all saved out on there and
then we’re pretty much good to go so let’s jump back over refresh the page
and there’s our account details over on the top right hand corner so you’ve now
said to have all those different fundamentals that an end user needs when
they want to go shopping they can buy their products they can go through to
the account section they can view all that they can go through search for
products everything you kind of want final thing we need to do is just deal
with a contact page just to finish to finalize this store then we’re pretty
much done so let’s just jump back over to the admin section come back out of
the customize that we finish with that for now and what we’re gonna do is come
back go to the pages section go into all pages and come down to contact and we
can start editing and creating this page so the first thing I want to do before I
actually start creating the content is just simply come down to the content
layer and set this to be full width watch that I’m gonna click update just
to make sure they’re saved the changes then we’re gonna jump into edit with
Elementor I start creating our contact page okay we’re gonna keep this really
really simple first thing to do is just drop in a map so gonna say we have a
Google Maps in there drop that in the top click on this and what we’re gonna
do is we’re gonna specify what is he full width like we did before so you say
full width we don’t want the content to be box this time we want this to be full
width so you can see that now this is a nice full width map column gap you know
we can kind of control this kind of stuff if we want until we had multiple
columns we don’t so we don’t need to worry about that what we are going to do
is just click for this column show me the Advanced section and set any padding
to be 0 on there so it gives us a nice full width finally we can do is you can
come into this we’ll leave it to the London one that’s fine we’ll just set
the zoom level to be 14 so a little bit closer to what we’re doing and we’ll set
the height to be 500 so it’s kind of a nice full width map on there so they can
see exactly when they land on this how to contact us okay so next up know how
to find us I should say next up let’s go in and we’re going to choose a form
now the forms option inside elemental pro will give you a lot of options so
let’s just start by setting up some of the basic parameters we want to make
sure this all sets in style wise with the actual content we put together so
let’s click on the actual element I’ll go through and see what we can do
so you can see we’ve got a couple of simple form elements ago named email and
message if we want to add more in there we can do so let’s just say for example
you want to put a phone number in we can click expand that out and we can just
change that to whatever we want so text is fine and we’ll say telephone
placeholder telephone again you can see we can specify where it’s a required
field or not we can also reorder these to make sure that everything sits
exactly as we wanted to so let’s just say for example we wanted to have the
email address and the telephone numbers side-by-side well that’s easy to do
expand that out set it to be 50% same with the telephone option set that to be
50% and you can see it automatically then positions itself as you want so
that’s pretty cool very easy to deal with input size we can specify on there
so we’ll adjust that to be large we’ll take off the labels I don’t really want
those on there I’ll keep it simple and clean submit button you can see at the
moment that’s sort of full width and we can specify again make sure exactly how
its styled on there we’re going to come over and we’ll say put the Style section
come on to the button and you can see we can come into that and we can do the
same as we done before so we can set up some simple typography on there let’s
just say we want that to be montserrat as well there we go
we’ll say we want that to be 600 and we want it to be uppercase again so you can
see it’s just very very easy to deal with
we’ve got the text color which is fine we’ve said that a white to make sure
it’s all styles we want and we’ve got the background color we can come into
that now again we can do what we’ve done previously which is set the relevant
color there so everything is consistent final thing we need to do once we set
the color on there is to get rid of that border radius because we don’t have that
one in the other ones so squeeze that off nice and neat and tidy if we want to
we can choose the typography as well so we can easily style that what I am going
to do though is I’m going to come to the field element test covers filing and
leave that as it is but the border color I’m just gonna lighten that up a little
bit so it’s just a little bit easier to see sort of hide away as it were so
streamlines things and just make the text color just a little darker so that
it kind of stands out nicely okay so there’s the basic elements put together
in there the next thing we need to do is specify how the form actually works so
when you do it come back to content and you can see we’ve got some options so
we’ve got a submit button which you can control that information they we’ve got
to do what to do after you submit something so you can see at the moment
it says the action is to send an email you can do more than that you can set
this and link it up to throughs to things like MailChimp and webhook and
drip and so on so if you were doing this is a sort of signup form you can easily
link that through to the relevant sort of system that you’re working with for
now we’ll leave that as the email next that we expand the email option you can
see that now gives us the ability to choose what happens who gets the email
what email subject what fields are transferred over and so on and so forth
so you can see we can add in multiple different emails what all we need to do
is just separate them with a comma so this is the – in other words who’s the
recipient for the email next that we’ve got the email subject so we can put in
whatever we want from there the from email we can have that to be sort of
like the from email account which is generally going to be the same as you
sort of to email next up we’ve got the from name so you can set that to be
whatever you want your Sharp name for example then we’ve got the reply to now
this is the thing that needs to be careful by default this is set to be the
same as your from email and your to email what you realistically want to do
with a form like this is change that over to be the email field so whatever
email address is included in the email field and with the person that sends it
to you from your shop that’s who your reply to would be again you can see see
at BCC this so if you want to send a copy of any emails you send back from
the OL you get from your store to someone else want to see see them in or
BCC them in you can do that and again you can set that to multiple different
recipients just by separating things with a comma then we’ve got a metadata
now the metadata is fundamentally what inflation sits underneath the
information that the user that actually sends the form to you is included so for
example the date that it was sent the time
the page URL the user agent in other words was it sent through from Firefox
or from sort of Chrome or something the remote IP and a credit to elemental you
can take out anything you think is not particularly relevant so for example you
may only want to include the date and time or you can do that
you can also specify whether the email the sent is going to be HTML or plain
and finally you’ve got the additional options and again these are things you
don’t really need to worry about if you want to set up custom messages for
example so when the form is sent what happens well you can set custom message
and someone there so that’s the basics of creating your form we’ve now created
the form I did that it necessary now going ability for through the contact us
so the final thing I want to do is just make this a little bit more intuitive to
kind of be a bit more in line with the rest of the site that we developed so to
do that we’re just going to come in and we’re just going to create a new column
so that add a new section in there we’re going to drop a heading in there and
finally we’re gonna come back to the widgets and we’re gonna drop a divider
in there okay so now we’re going to style these up to
this same as the previous ones now obviously we could have saved those out
as a template and call those back up and that would speed up the process and I’ve
covered that in its own dedicated video so if you want to take a look at that
check out the Elementor playlist there’s a ton of different videos on there
that’ll show you how to really get the best out of element or an elemental pro
but for now let’s just keep this really easy
let’s click let’s just add in first of all a little bit of padding in there so
we click on the add in 50 pixels padding top and bottom like we did previously
okay so that gives us some nice spacing on there we’re gonna click on the
heading step that to be centered heading 2 is fine we’re gonna do is go through a
start styling that so before we do say contact us style I’m gonna come in to
that choose that sort of dark grey header typography yet we want to use
that we’re going to come in and we’re gonna say we want this to be montserrat
again weight 600 transform uppercase and what we’re going to do is just bump the
size of that up so it’s nice and neat with 42 would think before we did the
last time next up we should come into the little
line set that to b3 change the color to our green color and then when they set
that we centered reduce the gap down so you don’t want to deal with that and set
that to be 10% what was it five tens five for this
one okay so we’ll hit save on that and that’s our contact page then we’ve got a
map to show where our stores located and we got a nice simple contact section
that’ll s with the contact that should they want to and request more
information contact us web products and so on and so forth so let’s just jump
over to our test page now and take a look at what this page looks like on
screen so let’s just jump over and as you can see everything is looking pretty
good except for this large gap at the top here now that’s pretty easy to fix
or way to do it jump back jump out of this and go back to the dashboard
that’ll take us back to a page at the moment it’s because you’ve got the
margins enabled so what we’re gonna do is disable those update our page and
that’ll remove the default margins that ocean WP says at the top and the bottom
of your page so refresh that that then gets rid of thats basically but it means
we’ve now got to fix the alterative underneath so come back into this edit
with elemental on all we’re gonna do is just add a little bit of extra space in
a little bit of extra padding at the bottom of our contact form come back
into this and we’ll just drop in there and we say at the bottom we’re gonna add
50 pixels of padding at the bottom save that jump back over and take a look
and there’s our space in drop back in the map and everything is all looking
nice and neat and tidy so there’s our shot pretty much put together we’ve got
our home page or a short page or check out sections all done our contact page
is created we’ve got a basket all set up nice and neat and tidy we’ve gone
through create some custom pages some custom layouts all looking pretty good
there’s one final thing we need to before we wrap this video up and that is
making sure that it all looks good on smaller devices so let’s just jump back
in we’re going to do is going to come out of this page we’re gonna go to our
home page and I’ll show you how you can do it on the home page and the principle
then for every other page it’s pretty much exactly the same jump back to our
pages open up our home page what we’re gonna do is edit with Elementor once
you’ve done that we’re gonna then switch it over to look in tablet view and in
mobile view so at the moment we look at a desktop if we come at the bottom in
this gray bar you can see we’ve got responsive mode if I click on me it
allows me now to switch between tablet mobile and desktop so switch over
to tablet and take a look in me so we click on that and you can see it
looks okay but there’s some things we might want to find – like I say you’ve
got a strange sort of duplication of information that’s part of the preview
but that’s an element or things you don’t worry too much about that so
everything is looking okay other than like I say the fact that well that’s
looking a little bit we guys a little bit too big so we can now fine tune and
tweak things based upon the device that we’re looking at so if we click on this
particular section put the Advanced tab you can see it’s already picked up the
fact that we’re dealing with a mobile or a desktop so a tablet view so what we
can do is we can fine-tune things as unlink those and at the moment it’s set
to zero padding so let’s just change that now to be let’s just go for
something 15 pixels top 15 pixels bottom so by doing that we’ve taken away some
of the excess space that wasn’t required and can take up a huge amount of real
estate on a tablet or a mobile view what we can also do is just change the size
of the text to make that a little small a little sort of less in-your-face so
click to edit that element we’re gonna do is come with the style typography is
selected you can see we’re now looking at the tablet view so we can do is just
use the size option so we can adjust this to get where we want to go for
something like this so we can keep it on to two lines that look a bit better now
if we like the look at that and we want to check it out now on a smaller screen
we can simply come down again click and choose mobile so you can see now we’re
getting the same thing we’ve got the text is becoming a little bit truncated
so we need to deal with that so making sure we’ve got that element selected you
can see it’s automatically picked up the fact we’re on a tablet mobile view so we
can now adjust that to make sure that everything sits nice and neat and tidy
again if you want to make changes to the actual sort of button we can do that now
we want to make sure that these sort of sub headings which are a little bit big
as well also shrunk down a little bit so we can do that very easily same again
come to the style adjust now to make sure it everything sits nice and neat
and tidy can’t let’s just jump down to the next subheading and do the same date
again so click on that style adjust the sizing to make sure it sits exactly as
you want so all very easy you just need to go through the different various
elements and adjust them based upon their values on the different devices
you so if we switch this back to being a
desktop you can see it’s all going back to looking exactly the same as it did
text is the size we set originally took the tablet it adjusts things again to
make sure it looks good on a tablet view and finally in mobile view same again
you can see it’s now everything is laid out the way you want the menus change
over to the relevant sort of mobile menus and so on so it’s very easy to go
through with element or an elemental pro to go through and find him to make sure
everything looks great on mobile devices so that no ticks off the whole sort of
development and design side of working with setting up eShop find a couple of
things we want to do is go through and make sure we’ve got a payment gateway
set up and configured to start working with taking payments so let’s just save
this to make sure what all those changes we just made are save that I’m gonna
come back out of this then and go back to our dashboard update our page to make
sure everything is looking good and saved and then we’re gonna do is gonna
come over to WooCommerce I’m gonna come down to settings now obviously this is
dependent again upon the particular sort of payment gateway you’re looking at
what we’ve done is we’ve used PayPal so that’s very easy to deal with what we
need to do is come in to checkout and in there you can see all the different
checkout options are listed we chose pay for up PayPal so we’re
gonna click on that so that now takes us into the PayPal area and all you need to
do is input the paypal email address that you’ve got set up associate with
your PayPal account save this out and you’re pretty much good to go you are
pretty much done well that’s what I wanted to show you we’ve gone through
and created installed and set up everything to create our own custom
ecommerce WooCommerce website we’ve used WordPress we’ve used WooCommerce
Elementor Pro an ocean WP to create a fully-fledged working ecommerce website
it’s so much more I could show you and how to deal with this and so many more
options we could take a look at but this is going to get you up to speed with
creating a great-looking clean layout easily capable of helping you create an
online store and selling products quickly and easily well I hope you found
the video useful if you did please hit that subscribe button smash that like
button and hit the bell icon to be notified of every new video we upload
every single week if you’d like to support this channel please consider
using those affiliate links in the below like I said at the top of the
video it costs you no more money but it does give a small percentage back to the
channel and how to support what we do around here if you any comments
questions or feedback on this video or anything else you’d like to see covered
in future videos please pop those in the comment section below until next time
take care

53 Comments

  • WPTuts

    Okay, this ones a biggie!! A full tutorial on building an eCommerce website with OceanWP, Elementor, WordPress and WooCommerce.

  • Lorcan Crooke

    Hi, great video as usual. Im in the process of building a custom woocommerce store using elementor, its main feature being a large search box in the middle of the page, thanks to elementor, I can make one that looks great but cant seem to get it to search products only. Can you help with this at all? Thanks in advance!

  • Rob Wilson

    Can you tell me how to create this type of checkout that's under the video. It's a wordpress site. Any help would be great.

    https://www.veritasprep.com/business-school/school-packages/

  • Seyann Design

    Nice Tutorial,I hope all viewers are learning in this tutorial.I am a WordPress web developer,please have a look my website https://goo.gl/WVcDp1 and my services https://goo.gl/yyPPwx

  • Shoptop Products

    Hallo. I am using the oceanwp personal which is a very good theme but when I copy an HTML file having about 60 products of 8 rows and 6 column it looks okay on the desktop view. But on the mobile version it only shows one row and one column…that means people can only see a product one at a time. How do I make my mobile version show about 2 or more rows and many columns…thanks

  • Anthony Jones

    Fantastic tutorial, Paul. Followed through from start to finish and turned out great. Loving the fact that the ad I saw before the video started was for Wix haha!

  • Iliyan Ivanov

    Thanks for the great tutorial! I want to ask you how can we change the "View basket" button icon (button that appears after "Add to basket" s clicked). I have managed to change view basket button style, but still can not find a way to change the icon to match the one in the main menu. Thanks in advance!

  • Pelle Karlsson

    what does this mean under general styling "Styling Options Location
    If you choose Custom File, a CSS file will be created in your uploads folder." options are wp head or custom file

  • Crystal Dru

    When I download the WP ocean theme, the filed downloaded on my pc is different to the ones showned. For example I don't have htcdocs folder, or ecommence folder , I only get "assets, inc, languages, partials sass templates tribe-events and woocommerce" folder. There are no content folder ects. Please tell me what is it that I am doing wrong ?

  • Muriel Cormier

    I have an issue with the product import from woocommerce I can't seem to run it, can you help me please? When I run it , it give me a page not found??

  • Richard Grayley

    Hello
    I'm going build a website purely on your tutorials. I'm going to use WordPress, Elementor, Ocean WP and Woocommerce. Can you point me to your setting up WordPress video please? Are there any other videos you suggest I watch before I start building anything? I'll use you affiliate codes for purchases as you might have a few questions coming your way along this journey. Thanks Richard

  • Gold Sphynx

    Hi, great video done well ! Question, if I start with another theme basic it's ok it will work well? Thank you in advance !!!

  • Eric W

    I follow this to a T, but I cannot get my categories and subcategories to show on the sidebar. Can you do a video on that?

  • Davinci Resolve For Beginners

    Very helpful! I just set up my WordPress site using this theme and your video. Thanks for the help!

  • Elliot Finkelstein

    Okay, I'm a little ADHD, and I can't sit through this in one sitting, in fact 15 minutes at a time is all I can handle. I'm 29 mins. in and I have a question. Unless I cough up some money for Elementor Pro, will any of this work, or am I going to get disgusted half way through?

  • Keerthana Santharam

    Hi,
    I am unable to upload the CSV file in the product import section. I get this message "Invalid file type. The importer supports CSV and TXT file formats." But its a CSV file! Please help.

  • Ivan farians

    I advise everyone who wants to build a site to see this Tutorial, he is Explain carefully and I love it , Thanks for help me <3

  • Shweta Pendse

    Thanks for the great tutorial! In this tutorial you have pasted a CSS code for giving colour to the 'Add to cart' button. Could you please paste the CSS in the description, so we can get rid of that plain looking button color in OceanWP..?
    Thanks!

  • Omar Mtc

    Awesome Tutorial Thank you very much , but please I can not find the changing buttons custom css code in the description so could you give it to me ?

  • actargis

    I have the probem that the VAT is not shown in the cart. Also I need to customize the the cart layout. Can I do it by Elementor ?

  • Pavel Bělík

    24:05 – Please where did you get the "Child theme" folder? Can't find a link in the description and would hate to download sth. wrong.

  • mfresh2o

    Great video Paul, finally a complete tutorial. Although I have a question, is it possible to recreate you website from scratch, after making several confusions, by just uninstalling everything, like plugins and themes and start from scratch and follow this tutorial? I am currently creating an ecommerce website using OCWP, Elementor & WooCmrc… but it is giving me a lot of error probably because I didn't uncheck the Storefront option on WooCommerce and it is giving a conflict on OCWP and Elementor not calling my headers from the shop, then image of products are all out of proportions… i just am lost and confuse. After watching this video and followed it step by step on local… i didn't have any problems… BUT THE BIG QUESTIONS IS how can i do that to the website I am currently creating which is a Live website not Local ( still not showing since i put it on Maintenance Mode).. but putting all the products and trying to design the page using OCWP and ELementor, is not helping because of the storefront…. I wanted to recreate everything from scratch, will it affect everything, can i just remove all plugins and start from scratch… thanks Paul more power to all your tutorials, I am a big fan.

  • Pavel Bělík

    Hi, please, help, how do I ad a "Register" option (I would put it next to Account, but it isn't one of Woocommerce's endpoints and I cannot findit anywhere else either.

  • Richard Grayley

    Hi Paul, really useful video. I particularly liked the custom account menu set up. However, a question…I prefer to disable 'anyone can register' on the wordpress dashboard. However clicking on this menu I can still register. Is that unusual?

  • A Deus

    Hey Paul! Every time I edit mobile version it messes up the desktop one that was edited before. Is there a solution to that? Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *