WordPress eCommerce Website Tutorial – (NEW FOR 2018)



so in this video I'm gonna show you how you can take WordPress WooCommerce ocean WP and elemental to create a great-looking online e-commerce store in a quick and easy fashion I'm gonna 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 now right off the bat I'm going to sue a certain level of knowledge when it comes to dealing with building this website and it 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

48 thoughts on “WordPress eCommerce Website Tutorial – (NEW FOR 2018)

  1. 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?

  2. 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.

  3. 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.

  4. 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 ?

  5. 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!

  6. 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.

  7. 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?

  8. 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

  9. 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 ?

  10. 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

  11. 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!

  12. 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

  13. 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!

Leave a Reply

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