How to Create an E-commerce Online Store with WordPress 2024: Complete WooCommerce Tutorial

hey everyone and welcome to my WordPress playground I'm Sam obiri and I'm super excited today because we are diving into the world of creating your very own online store with WordPress now I know Tey stuff can be a little bit overwhelming but don't worry in this course I'm going to keep things as simple as possible in this course we're going to learn how to create website that look great and actually do the things we want it to do we start from installing WordPress on our computer and then taking it up to a live deployment imagine your online store being open 24 hours in a day and 7 days in a week ready to welcome customers from anywhere in the world so if you're ready to make your very own corner of the internet hit that subscribe button and let's start the WordPress journey [Music] together [Music] WordPress is an open source content management system based on PHP programming language and MC database what press has become the most popular content management system globally powering over 42% of all websites and dominating the CMS Market with a 60% share with WordPress you can create a Business website e-commerce stores blogs portfolios rumes forums social networks membership sites and pretty much anything else you can dream of it's important to understand that there are two main branches of Wordpress we have wordpress.com and wordpress.org wordpress.com and wordpress.org are not the same getting started with both platform involves an entirely different set of steps wordpress.com is for profit paid service and fully hosted platform this means that wordpress.com takes care of Hosting security and maintenance for you it's simple to use but you lose much of the flexibility of a selfhosted WordPress wordpress.org often called self-hosted WordPress is a free open-source WordPress software that you can install on your own web host to create a website that is 100% your own most of the time when people refer to Wordpress they meant the selfhosted WordPress available at wordpress.org if you want to truly own your website save hosted wordpress.org is almost always the best option and this course focuses on wordpress.org WordPress is powered by PHP programming language that requires a server to run hence WordPress cannot run without a server the web server is a piece of software that accept users web request and serves them the appropriate result generally if your web server supports and executes PHP files it should be able to work with WordPress so WordPress can be installed on a server running locally on our computer or remotely on a live server a local server is set up on your personal computer for development and testing purposes while a live server is a remote computer that host your website and makes it accessible to users on the internet as a beginner friendly course we will start off by setting up WordPress on our local computer so we can experiment with our website design and changes after which we can now deploy to a production environment or a live server where your site is publicly available to users on the internet via a domain name so without Much Ado let's get started in this section I will guide you step by step on how to set up a local server on your PC for WordPress design or development local servers or development environments are essential for web developers and designers they allow you to work on your website or applications offline speeding up development testing and troubleshooting today we'll explore one of the popular options local by Flyway but there are alternatives such as zamp vagrant laragon and others I've chosen local by Flyway for each user friendly interface seamless WordPress integration and robust features where you're a beginner or an experienced developer locco by Flywheel provides a hasslefree setup and Powerful tools for building and testing your WordPress sit locally now let's go through the stepbystep installation process fire up your favorite browser and search for local by Flyway then I will click on the first link that appears on my search result and I will be redirected to the official website or simply visit ww. loal wp.com then hit the free download button next choose your platform and you'll be asked to enter some basic information only the email feed is mandatory and it's just so you can be kept in the on new features and functionality then click on get it now and your download should start right away give it a few moments to complete the download Once the download is finished click on the setup file to begin the installation process now follow the onscreen installation prompt and within minute you will have it up I'm running now my application is ready I will click on the desktop icon to fire up the application you may be asked to accept terms and conditions make sure you do that to proceed once the application launches for the first time you may choose to create an account and as well choose to enable error reporting but all of these can be skipped for now and after you'll be taken straight to your new local dashboard next up let's create a brand new local WordPress we website to do so select create a new site in your local dashboard then click on continue this will take you to a simple Setup Wizard where the first step is to create a name for your site you may want to make this something descriptive especially if you plan to create multiple local sites you can always change the name of your site later on so I will just enter the name of my site as B business we will definitely change this later because we are creating an e-commerce website in addition you can expand the advaned options tab to configure a few optional settings if you'd like once you've entered the name for your site you can continue to the next screen here you have two options as a beginner you should choose the preferred option to set up your local site using a recommended set of tools on this screen you will create a WordPress username a secure password and an admin email address so I'm going to enter a username I can always remember and a password too then hit the add site button then your site configuration will begin it's likely that you will encounter a number of popups from Windows Defender so make sure to click the allow access button on each of these so that the various parts of locco can communicate on the network after a few moments you will see your new site listed on the dashboard along with all of its information Hello friends and welcome to this section in the last section we are able to install WordPress and everything went successfully so now we are going to move further into configuration now we have two important buttons which is WP admin and open site so the wp admin is also known as the administrator or the back end and then the open site is known as the front end now I'm going to click on the wp admin and this is going to open up in the browser and here you can see the URL business. lo/ WP login and so on now this is also known as the back end and the back end in WordPress is the area of your website where you manage content where you manage users settings and so much more now this is where you add post Pages change thems and configure the entire site settings so this is also where you have access to your WordPress database and so much more so now I'm going to log in with my username and password that we set up earlier and then I'm going to click on login and here we go so you can see welcome to the dashboard welcome to Wordpress dashboard and here you can see we have post so we can add a new post we have media we have Pages comments appearance plugin users tools and settings so these are the WordPress dashboard menus so in summary this is where we manage our website now if if we go back to the local by fly whe now we have the next button so I'm going to click on the next button and this is going to open up what we call the front end of our website now the front the front end of our website is what visitors see and interact with when they visit our website and this is liking to a store that has a front door and a back door so the front door is where the customers come in and buy products and then the back door is for staff only and leads to places like storage room offices and code room that customers never sees so we have the back door and then we have the front door so every visitors to our website can navigate through our website buy a product and make payment and then on the admin or the back end this is where we set prices we input some products upload some products so that our visitors can see all right now let's start configuring our website now in the last previously we gave our website a title of business and if you can see see we now have our site titled business and this can actually be changed so if we to go back to our WordPress admin and then settings and then we'll go to General and here you can see the site title we can modify it so let's say we want to call our business Zenit so let's say Zenit Zenit stores now I'm calling it Zen stores because this is going to be an e-commerce website and then we have a tag line so I can say top let's say top um top stores in town so let's say top stores in town or number one store in town so let's say number one store one store in town and then we're going to leave everything by default and this our default URL so this can be changed later when we upload our website to a live server So currently we are working on Local Host so we upload it a live server so this could be zen.com so instead of business. loal so this could be zenet do or zenet stores.com so I'm going to leave all this by default and then we're going to hit on Save changes so now if we go back to the front end so we have back end front end so whenever we make changes we go to the front end and refresh and when we refresh now you can see we have Zen stores so now let's go back to the back end and now in WordPress there are two important things in WordPress so we have thems which can be found in appearance if I hover on appearance and then here we can see teams and then we equally have plugins now the team defines the appearance of your website so if I on appearance and then go to teams and here we have some teams so we have three teams namely 2024 2023 and 2022 2022 press so these are the default things that you see once you install a fresh copy of Wordpress so this them comes with WordPress and you can see see we have an active team which is the 2024 so if I go back to our front end so here you can see the team and this is a beautiful team so if I go back to the back end if I activate the 2023 and if we go back and refresh the front end so you can see that the appearance has changed so teams Define the appearance of our website next is the plugins so if I go to the plugins installed plugins So currently we do not have any plugin now what are plugins plugins add functionality to our website so if I want to add a new plugin I will simply click on add new plugin and you can see we have a list of plugins with different uses so for the purpose of this e-commerce site we are going to be needing a plugin called woocommerce so let's go and search for wo Commerce wo Commerce wo Commerce and here we go so so here you can see everything you need to launch an online store in days and keep growing for years so we are going to install this team this plugin so to install it I'm going to click on install now and make sure you have a network connection and this will begin the installation process so be patient because this is going to take some time and now that the team is installed the next thing we are going to do is to activate it so I'll click on activate so for now I'm going to skip the guided setup so I'm going to skip that so I'll go back so I'll go back to my site so right here you can see it's no longer inactive so currently we have activated it so here we have other plugins that we may need in future so if you want to accept a strip payment take credit card payments on your store so you can install we have Paypal payment if you want to accept Paypal payment you can install if you want to accept PDF invoices and so much more so we can click on installed plugins and here we go so currently we have just one plugin so which is woocommerce so wo Commerce is an e-commerce tool kit that helps you sell anything beautifully next we are going to install our team because we're not going to be using the team this team so let's go back back and click on appearance and then teams then I'll click on add new team then I'm going to search for a team called Astra now Astra is a free team that can help us set up an e-commerce website now there are other premium teams if you're not comfortable with the free thems that WordPress provides so you can go to Google and let's go to google.com oops think I misspelled it the typo and then right here I'm going to search for team forest team forest and then I'm going to click on the first link welcome to team forest and here we go so the team forest website is a Marketplace for WordPress teams so here you can see WordPress thems e-commerce template and so much more so we'll click on WordPress teams and we can click on e-commerce and here we go so we have a lot of them so these are premium teams that you have to purchase before you can use them so you can see this has been sold over 290 times if we screw down and we can see a lot of Premium teams but for the purpose of this course everything we are doing is free so we're going to install a free team and the team is called Astra so I'm going to click on install and this is going to take a little time and now the team has been installed so we click on activate and here we go so you can see that we have an active team called Astra so if I go back to the front end of our website and refresh and here we go so you can see that our site appearance has changed so now let's go back to our dashboard so when we install a new team most teams usually come with a menu so here you can see Astra has been added and when we installed the plugin who Commerce it has also added a menu for us and this is where we can manage the plugins so if I hover on Astra team and then go to the dashboard and here we go hello user welcome to axtra so we can start customizing our team immediately or we can import what we call a demo data so we have some useful plugins that we're going to install so next we'll navigate to Startup templates and stter templates we click install and activate and this will start installing our stter template and here we go we have a classic stter templates and one of the advantages of installing a starter template is that it saves time and effort by eliminating the need for designing a website from scratch so we'll be working with some of the pre-designed template and then we can modify and make changes to it so let's click on build with template and we're going to select Elemental there are different page builder in WordPress so we are going to select Elemental for now and this is going to show us the different templates that is offered for us for free and then the ones that are not for free so for example these are free so we have a premium one that you would want to buy and then we have different categories of stard template so if you creating a website for business so you click um business starter template you creating a local business personal care professional and so much more so we are on eCommerce so if I click on e-commerce so we have this so this is an e-commerce starter template for free then we have this this is a paid version free free and all that so I'm going to select this so click on it and this is how our website is going to look like after installing this stter template so here we are provided with a logo to choose from so we can upload a logo but for now I'm just going to skip and continue and here you can choose your site color so I'm going to skip this and continue so here we have all of this so you can enter your name so let's say sam and email so here can say I'm a beginner or expert so you can choose whatever I'm building for my clients or you can skip this so you can choose to agree to receive a newsletter or you can ignore that so the starter template is going to to import a customizer settings import some widgets install required plugin so this is going to add additional plugins to the ones we have it's going to import a Content So currently on our front end we don't have any content so this is going to import some content and non it's going to share nonsensitive data so submit and build my website so I click click on this and the installation will begin so be patient because this is going to take a while for for for e e e for e e congratulations so we have successfully installed our sta template provided by Astra WP so we can click so I click on view our website and this is going to load in a new tab and here we go so we are good to go so here you can see we have some featured products and don't worry all of these we can make changes to them and start setting up our website so this is the front page that our visitor sees when they hit our domain name so let's suppose our domain name is Zenit store.com so this is the first page they are going to see then they can now begin to navigate to the different links we have so these are the navigation links we have so if I click on accessories so it's going to take them to accessories and here you can see the different products in this category so if I click on men so it's going to take them to the different products on the main categories and if we click on [Music] everything so it's going to take our users to all product on our website and here they have to navigate to the next page and so on we're going to start off by changing our logo so we're going to change our logo and then we are also going to change our navigation links now there is a problem in our navigation link let's suppose the user wants to go back to the front page which is the first page they see when they hit our domain name so they want to go go back is going to be difficult and the only way is by looking at the bread Chrome and not every of our visitors can navigate through this so the only way I can go back to the front end is by clicking on home and instead of having it here we're going to have it right here okay and here we go so let's switch back to our back end so let's go back to our back end so I'm going to exit to the dashboard so now I'm going to change my logo so I will go to extra and then go to customize so the name of our team is Astra and then customize then I'm going to go to header Builder I click on header Builder and then we have site title and Logo so I'll click on that and here we go so I'm going to change the logo so click on change logo and then we have three options so the first tab is to upload a new logo and make sure that your the logo size is 180 by 60 pixel so 180 by width and then height is 60 then if you already have a logo uploaded in your media so you click on this you have your existing logo you can upload that or you can simply go to free images so let's go back to upload I already have a logo and make sure that your maximum size is not above 300 so for this can be changed so for the purpose of this course we are just going to maintain the image size so click on select file and then I'm going to search for my logo so here we go Zenit stores so I'll just click on it and open and the upload will start so this just a simple logo just a simple logo for example then I'll click on select and you can choose to skip the cropping or crop the image so if I skip crop pin and here we go so I'm also going to change the retina logo so change image so instead of uploading a fresh logo I already have it in my media library so when you upload for the first time it's going to be stored in our media library so select it again choose the image and here we go and then I'm going to scroll down okay everything is fine and then I will publish and here we go so we have Zen stores so is changes is been updated here logo on this page is set is set from the transparent header section and all of that so in case you don't like the C the logo and you are comfortable with Photoshop so I can simply go to photoshop if you have Photoshop installed and I'll go to file and open that logo so I will go to my desktop and I'm going to open that logo in Photoshop so I have it right here so I'm just going to go to use one of the selection two I'm going to use magic one two so you can do this if you are familiar with Photoshop so I'll hold shift and then select each of the letters I'm selecting each of the letters by holding shift my keyboard and after that I'm going to go to the forr I'll click on this and then set that to be white and after that I will go to the brush to I go to the brush to I want to make sure the size and increase the hardness then I can brush on my selection once I'm done I will go to select and deselect it then I'll go to file and save as so I'm saving to my computer then make make sure it is saved as PNG then I'll click on Save override existing yes okay so now let's go back to our WordPress dashboard so I'm just going to remove this I will call it remove this so let's select a new logo upload select files then I'm going to select the new logo so I'm going to select that skip cropping or you can crop image that's fine so next so here we have it so retinal logo select that again choose the image and here we have have it and make sure you hit on publish so I think the image is the logo is looking much more better so next is my menu so right here we have if I click on this so this is the above header and then we have they both header it's anything the space before the navigation links and here you can see we have the site title and Logo so which is this and then we have the primary menu so which is this primary menu or navigation link or menu and then we have the secondary menu and then we have the cat so this is the cat and then we have the account and this is the account so don't worry I'm going to guide you on how to create a primary menu and a secondary menu so for now I want the secondary menu to be here I okay and then I'm going to add something to the above header so I'll click on the plus sign and I want to add social so click on that and here we go have some social so I'm going to drag this I want that to be right here okay so we have our secondary menu right here and then we have some icons so you can click on each of these icons and then you can edit them and you can equally add other ones so if I click on this so you can change the icon if you want to you have the Twitter if you want to change it so you can add a link so that one once the the icon is been clicked it will redirect to your Twitter handle your Instagram handle and so much more all right so now we can save changes by hitting on the publish button so now let's go back to the customizer go back and let's go back okay so next we are going to build up our navigation links so if I refresh on the front end so don't worry if the logo is not reflecting right now but we can see that some changes has already been made so now we are going to delete this and then make our own custom navigation links but before we do that we are going to create some product categories and these product categories are the different products or the different categories of products that we going to be selling in our online store so I'll go back to the dashboard and then I'll go to product so if I go to product and then [Music] categories so here the we have some category already created for us when we installed the stter template so we have the accessories category created we have the men and then the women so we are going to create some more categories so right here I'm going to make a category for let's say men clothing and then the slug you can choose to include the slug main clothing is optional and then you can write a description can say these [Music] are these are clothing for men so whatever you want to add to your description you can do that you can equally upload and image so I'm going to click on add new category and here we go so you can see men's clothing is added so let's add more category so let's say men shoes men shoes so men shoes so you can choose to add a description or you add new category so let's add more let's say men's men's or main bags I want to make sure that this slug is in lower Cas I'm going to add more category so this is women cloting add category and women bags add category women shoes women shoes add category and we're going to add more category like Electronics this will be electronic I'll add category so you can add as many as you want depends on the product on the different types of product you want to sell on your store all right now let's navigate to the menu so we can add all of them right here on our primary menu so we have our primary menu location right here and then we have our secondary menu so let's go back to the dashboard and then we can find the menu when we hover on appearance and then menus now on the menu we have select a menu to edit so we want to select the primary menu first and then hit on select and here you can see by default we have the the four menu navigation everything women men and accessories same as what we have in our front end so now we want to make changes to this now on the left hand side we have the different menu items or the different items you can add to your menu so we have pages so if you have Pages created you can add them to the menu so currently we have some default Pages installed for us on our stter template and if I want to add that to menu I will simply click on for example if I want to add a contact us I'll click here or let's say my account and then add to menu so right here you can see has been added and if I click on Save menu so if you go back to the front end and refresh so you can see we have my account has been added but this is not what we want so let's go back and I'm going to delete that so click on the drop- down icon screw down and and then remove that so un unfortunately the free version of the extra team do not allow us to add the product categories we just created to our menu so we just have a regular category and this is not the one we created if not it would have appeared here so it's a regular category if you are making a a blog or news kind of website so you can use this and then we have other ones but we do not have the product category we just added so I'm going to show you a a tip or tricks you can achieve this result so I'm going to delete all of these CU we don't want them okay so we can um we can leave the accessories so we can remove the women for now we can remove the women can remove the men because we want to create a drop- down navigation menu so I remove everything so we just have the accessories okay so now I'm going to create a custom links so click on this drop down and I'm going to push an ash symbol so that it's not going to be clickable so Ash I'm going to call this men and right here the link label is going to be men so I'll add that to menu and I equally do the same for women and women add that to [Music] menu all right so next I'm going to have a drop down which is going to be the men's clothing the men's shoes and the men's bag so on the link I'm going to say clothing and then the link I'm going to get it from so what I'm going to do is I'll go to product right click on it and open in a new tab so I have another dashboard right here so this the one the previous one and then I have a new dashboard and then I'm going to go to categories now on categories I'm going to screw down so so we have clothing so for men so I'm going to focus on men first I will go down to men's cloting to have men cloting so I click on The View tab this is going to give me the link so what I'm going to do is I'll right click on The View and then I'm going to copy link and then I'll go back to the menu and put that right here so we can see we have the clothing so you can see our site and Then followed by the men's clothing so I'm going to add that to menu so right here I'm going to move that and drop it right here now we have a sub item so I'm going to do the same for shoes then I'll go back sorry I'll go back to main shoes right click and copy the link so go back and past that here add to [Music] menu I'm going to have that beneath this then the next one is for bags and I'll go to the back category right click and copy the link I'll paste that on the URL add to menu then I'm going to have that right here so now I'm going to focus on the women so we have also clothing for the women so I'm going to copy the link go back put that on the URL and add to menu so I'm going to drag this so it's going to be a sub item so it's going to appear under the menu so next we have the [Music] shoes for the women so I'm going to right click copy link then paste that on the UR then I'll add to menu okay now next we have bags for the [Music] women then I'm going to go to the women bags right click copy link then paste that URL and add to menu and then I'm going to move that to this okay I want the accessories to appear right here also want to make for electronics Electronics so I'm going to go and copy the link for Electronics so here right here we have it so copy the link go back and put that right here add to menu and if I save that if I save the menu and now let's go back to our front end so if I refresh the front end and here we go so if I Hoover on men so you can see we have clothing shoes and bags category me women clothing shoes and bags accessories and all of that so if I click on clothing you can see takes me to the main clothing category and currently we have no no product so you can see no product we have found matching your selection so in future lecture we are going to upload some products so you can see currently on the categories we have accessor men and all of that okay now something is missing in our menu so we want to add a home and this is going to be the first or the front end of our website so whenever our user hits on our domain and for this example is Zenit store.com they need to be able to navigate to this homepage so to do that I'll will go back to my menu and if we go to Pages I'll go to Pages all pages and we want to find out if we have have a page already assigned as a front end so you can see we have a home and it's assigned to our front page so let's go back to appearance and menu and now on the pages we're going to click on view all and here we go home front end and it was designed using Elemental page P so just click on it and add to menu and we are good to go so if I click on Save menu now if we refresh our front end and here we go so if I click on home it retains the homepage so if I am on accessories and I want to go back to the home I can simply click on [Music] home and then takes me to home so now we are done with our navigation menu so the next step is to customize our homepage or our front end so you can see we can make changes to our front end simply by editing with elemental or we can go back to the dashboard and go to all pages and if I screw down so you can see this is our front end so you can edit with elemental so so I'm just going to click edit with elemental okay so we have a very big header and if I want to make changes to this I will click simply click on edit section and here we have the edit section settings on the left side so we have the layout and then we have the style and we have the advance so let's suppose I want to change this image so I'll go to style and right here you can see choose image so if I click on choose image I have some image on my system so I can go to up upload files or you can go to free images so these are free images and these free images are powered by piab now these images are free to use so you can do a search on the image you want and then you are good to go so I already have some images on my desktop so I'll will go to upload files then click on select files so right here I'll be using this image and this image is gotten from unsplash so these are images you can use for free without any copyright issues so now the image is SE is uploaded now I'm going to select the image and here we go so we have uploaded our image so we have image resolution is full the position is centered attachment fixed so want the image to be fixed so as we are scrolling on it so you can see the image is fixed so if we change that from fixed is going to scroll so if I change that to scroll and if I scroll you can see the image is scrolling so we're going to leave it as fixed and the display size want it covered okay then I'm going to close the drop- down background and then open the background overlay now on the background overlay we can add some color if we want a color on it for example if I want something like this so you can see so you can choose between the this so let's go with something like this okay all right and once we are done we can hit on update so now if I go to the front end of my website and refresh and here we go so we have our image so if we go back and if we want to go back to the previous settings so we can click on history and click on Section Global color and here we go so we can update that and we go back to the front end and refresh and this is going to give us the default color all right so now if we want to make changes to the text so we can click on edit heading and here we can make changes to our text so we have this also can make changes to our title and then this a button so we can make changes to our button so if I screw down so these are want to make changes to this section so you click on edit section and right here you can see we have different five images selected so you can add more images or you can delete them so here also we have some images and some text on top of it overlaid on top of it so you can select the section and when you select the section if you go to style if I click on this if I click on this so you can go to sty can change the image if you want to I want to make changes to this click on this can make changes go to sty can change the image and so on so if I scroll down so these are featured products and these featured products are coming from the uploads you made on your website so if I click on this so you can see we have a shortcut featured product so we have colon five so 1 2 3 4 5 so if you want four colon so we can make changes to four so we say four so here we go we have four colons right so if I update this and let's go back to our front end if I switch so you can see we have five so if I refresh we'll be having four so here we go we have four products so I'm going to leave it as five so if I update that you can see we have limit of 10 and then the next section if I hit on this then here we go we go to style you can change the image you can change the text and if I screw down down we can make changes to all of these and if we do want to add a section additional section we can click on the plus button and we can choose the colon how many columns we want this section to be so let's say I needed a two column if I select that and then here we go we have two so I'm going to click on this plus icon to search for what I want to add let's say I want to add a contact so I want to add a WP form so I'm going to drag that to this and currently I will select a contact Ox form and then you can see we have a contact form us for example and then right here I'm going to click and let's say we want to add um a button or a Google map so let's say we want to add a button I'm going to drag that and on the button I'm going to go to style so we can go to advance and here we can set the size of our button so if we want the the button so we can enter some margin you can see the button margin is in increasing and if we want to change a Content so we can say buy now or something like that so if you update and go back to the front end of our website that's after this section if I refresh and now if you scroll down and here we go so you can see we have a form and then we have a button so these are just for example sake so I'm just going to remove this section the section is removed so let's update our changes and here we go so if we go back to the front end and refresh so everything is set next I'm going to show you how to add some product if you look at some of the products so you can see um the products we have a product title and we have the category and then we have the price so we have the price and then we have the star rating so this product if I click on this we can hover product the product is going to zoom out and then here you can see we have the product name and then have a short description about the product now this is just a dummy text for demonstration purposes so this is a dumy text so if you're creating a real life e-commerce website you need to make make sure this is descriptive and in English so this is a domit text so you can add to cat and then we have the product long description and if there is any review so the user can write a review and then submit and then we also have related product okay now if we go to accessories so you can see we have some products under the accessories category so now I'm going to show you how to add a product and assign them to a category so if we go back to the dashboard and we are going to exit to the dashboard let's exit so I'm going to decide later each time you exit where you're going to be exiting to so let's exit to the dashboard so let's apply that so let's leave to the dashboard okay so now we go to products and all products so here these are the sample products installed for us from the starter template so these are just for example sake so you can see in stock so these are the different products so let's suppose you want to edit any of these product so you can click on Ed so click on edit then if you scroll down you can see the product featured in image the product featured image are the images that shows on the product page so this is the product featured image so this is product featured image and then equally have some product Gallery so let's just view this product directly so I'm going to right click so this is the link to this product if I right click and open in a new tab so you can see now this is a product image which is what we are seeing right here product image and then this product have some variations so you can see we have this this this and this and as your switching we are equally switching is visible so these are the product Gallery so if you have different variations of your product you can upload them to your product gallery and then your product category you're going to select it right here so instead of women I'm going to add this to men's shoe so click on men's shoe and you can select more than one category so we can also select women's shoes and then scroll down if you have some product tags you can include that it's optional and then you can leave every other thing by default and then we have the product short description this is the product sh description and this is going to appear right here so this is a product sh description and then we have you can see this is a product data so this is where will set prices and other information so your product data if you have different variation of your shoe you want to make sure that you have a variable select a variable product otherwise you can choose a simple product so if just a single type of product without any variation you can select a simple product if it has variation you have to select a v product so that's why this is a variable product if you go to shipping here you can set your weight the weight we have linked product we have attributes now the the variations of this product is color so if you have different sizes you can equally add a new and that will be for the sizes and the variations for the color are blue aqua red and green and once we are done with that then we can update so I click on update and this is going to update so now if you refresh so here you can see you can see that the category has been updated so now if we go to men and if we go to shoes and here we can you can see we have the main shoes so if I select on Aqua you can see the prices will change blue the prices will change so each of the variations you can set your prizes so equally if I go to the women and then to shoes and then you can have it right here so if I click on the product itself as long as you are logged in as an admin you can equally edit with elemental so you can edit the product if you click on edit products you're going to have the same page that we are into and if you click on edit with elemental you're going to have more options like adding some more long product description adding additional images and additional information on your product or you can simply edit with elemental so to add a new product I'm going to add a new product right now so still on your product menu so you can click on add new product or you can click on the button at the top so add new or add new so if I click on add new so this product I want to add a product let's say red me or let's say iPhone then the product description I'm just going to copy some dummy text so I'm going to copy some dummy text I will add that right here and then this I don't have any variation so this just going to be a simple product so the regular price is let's say it's $800 so I'm selling it for $650 then inventory you can leave it as in stock ship shipping you can set shipping linked product attributes if you don't have all of that so next what I'm going to do I'm going to add this in electronics category and then the product image so I'm going to add a product image gallery or a product image itself so set a product image and I don't have an iPhone so I'll just go to free images and right here I'm going to search for iPhone now you want to make sure that these are real products that you have and is in your store room I'm going to look for something much more better these are free images so okay I'm just going to select this save and insert so this is downloading and here we go so now I'm going to screw down and then equally add the product description and this is the short description so once I'm done I'm going to hit on publish so now let's go to our front end so I click on home and now let's scroll down and let's go to electronics and here we go so we have an iPhone so you can see it what the regular price is $800 and then selling at 650 so if I click on it and here we go so you can see iPhone 14 so you notice that the image appears so big so to be on a right track with your images when adding a product so let's say I want to remove this image so click on remove then click on ADD product you need to check for other product Dimension so for example this product has a dimension of 1,200 by 1,200 so what you need to do is if you have a photo editting to so you can simply open up Photoshop and go to file new and then go to pixel set this to pixel and then enter 1,200 by 1,200 click on Create and you can create your image so go to file let's suppose we have an image so let's say let's go to Google and let's say free iPhone 14 images if I scroll down so we have unsplash so I'll click on on Splash so I'm going to click on this and then I'm going to download the free image so now that I have it downloaded so I'll go to my Photoshop and go to file then Place embedded and then I'm going to search for my download file so this is a recently downloaded image select it and place so I'm going to resize it resize it and hit okay so next I'll go to file save as save on my my computer and then you can choose to save in jpeg or you can choose to save in PNG so if I choose to save in jpeg so let's say iPhone this is iPhone 14 so make sure you give it the name and I'm going to save this on my desktop WordPress images and hit on Save okay now I'll go back to my WordPress site so if I cancel this now I'm going to upload my product image so click on product image upload files select files and here we go [Music] open and then hit on set product image so here we go then update now if you refresh our front end and here we go so we have a perfectly fitted image so you can see all these images on our s are now having the same size so here we go can see that so if we go to home and if we scroll down you can see all these images are of the same sizes so this is how we can add or upload products to our website so right here so you can see we have men we have 14 products on the main category we have one product on the men's shoes women and on electronics we just have one product so which is the iPhone 14 all right so we have our our e-commerce site almost ready and the next thing we are going to do so the next thing I'm going to to show you is how you can make changes to the footer but before we do that let's go back and make changes to our logo because in the previous lecture we tried changing the logo and it doesn't affect the overall website let's go back to the customizer so on the WordPress dashboard I'm going to overover to appearance and then the team customizer then I will go to the header Builder and then site title and Logo so we made changes to the logo previously so now we're going to set for the transparent header because currently we have a transparent header and what this means is that we have some navigation links without a background so we do not have a background so for example if I click on the primary header gear icon and then if I go to design right here I can choose to add a background so if I click on this and I can choose to add a background or I can choose to add a gradient and then I will publish so but we don't want to do that so I go back to the general and then the primary header and now I want to customize the transparent header so I'll will click on customize transparent header and if I enable this this is going to enable on the complete website so we don't want the transfer header completely on the website so for example if I go back to my website and then I click on the accessories category now you will notice that the transparent header is not applied to this category so it's not completely on the entire website so if I enable this this is going to make it complete so I'm going to leave this the way it is and and then I'm going to scroll down and here we have different logo for transparent header so I'm going to change the logo so I will click on change image and then I'm going to select our logo and then I'm going to scroll down again for the rtina I'm going to select our logo to now here we can change the logo WID if you are not comfortable with the logo WID so we can make changes to the logo WID and want to make sure that this logo is applied to desktop and mobile so now let's save and preview our website so if I publish now we can go back to home and here we go so we now have our logo on a transparent background so let's click on the category and let's see and right here we have a logo but the logo is a white background so we need to change this to a black background so we go back to the customizer and then let's switch back from the transparent header and then we'll go to site title and logo and right here I'm going to change this to Black so change logo so I will choose this and select can skip cropping and then for the retina I'm also going to change this to Black and choose image so now if I publish and here let's refresh and here we go so if I go back to the transparent here we have our logo and for our categories we have our black logo so we have successfully updated our logo and everything is fine now let's scroll down and then you can see that we still have the DNK logo imported for us so I'm going to show you how you can make changes to this so let's go back to the customizer I'm going to switch back then I will go backward again so here we have our footer Builder so I'm going to click on the footer Builder if I over on this we have the above footer and then we have the primary footer and then we have the below footer so for example if I go back to the front end of our web website we have above footer we have the primary footer and then we have the below footer so now in the primary footer area we have four wigets so we have 1 2 3 and then four so the this widget represents this this wiget represents this this wiget represent this this wiget represent this so if you want to make changes to to this widget I'm just going to click on the gear icon and then here we have it so what we can do is we are going to change this so I can say the best best store in town so next we're going to change our logo so this logo so I'm just going to go to replace and I'm going to open my Med media library instead of upload if I go to my media library and I can choose our logo select that and I'm just going to resize it a bit so I think this is okay and once you're done you can hit on publish so now we go back to our front end and refresh our e-commerce site and here we go and this is going to apply for the entire site so if we go back to our homepage or or front page of our website and if we scroll [Music] down and here we go so likewise we want to make changes to this footer area so we can go back and then click on this so we can click on on the box and we can update this so here you can include a title you can see for her and then you select your menu on this drop down so if I click here so you can see we have different menu if I select my main menu you can see our main menu is going to be populated right here so you can see that so but we don't want that so we can go back and select for her so you can always go to your menu so let's go back to the dashboard so you can make a new menu and then add it to your footer area or update your existing menu and the way you do that is if I open my dashboard on a new tab and then I'll hover my mouse on our store and then go back to dashboard then I'm going to go to appearance and then menus and then if I scroll down so right here I can create a new menu or I can update the existing menu so we have for her so let's check the menu for her so we have for her and then select the menu if I screw down so here we can update our menu so if I click on the drop down so we can add a link to our different categories just like we did in our main menu so for example let's say we want to create a new menu so I'm going to click on create a new menu and I'm going to call this menu footer links and then and I'll click on create menu so now that my footer link menu is created so I'm going to add items to the footer links so I'm going to add some endpoint so if I go to wo Commerce endpoint I'm going to add ERS going to add log out I'm going to add lost password account details and then I will add that to menu so let's also go to Pages view all I'm going to add my account so since we have Account Details I'm going to leave that I'm also going to add about so add that to menu okay I'm going to save my menu so now let's go back and we're going to refresh this save changes changes you made May not be saved so let's reload that then I'm going to scroll down to the footer Builder and this time let's make changes to this and maybe I'm just going to sell top categories let's suppose these are categories so if I publish so so we now have top categories so I'm going to select this and I'm going to change this entirely so I'm going to call this let's say useful and I'm going to choose my menu footer links and publish and here we we go so we have just made changes to our footer and then lastly we have a copyright so if I go back to the front end so here we have copyright 2024 Zen stores powered by Zen stores so if I want to make changes so I'll click on the copyright and then I can adjust this so we have some tags so these are tags if you want the current here you enter a square bracket and then current here and then enclose it with a square bracket then your site title and then we can say powered by or if want to change that we can say developed by this and we hit publish so this is how simple it is we can make changes to our footer area so let's go back to our dashboard and next we are going to configure our woocommerce store so the woocommerce is a plugin that enables us to sell on our website so for example if I go to our main page and let's try buying one of these product so let's say I love this product I can click on it and we can add to cat so we just have one item I can increase this and add two to cat so if I add that to cat so you can see that it has been added to cat so we have two items added to cut and which is $150 time * 2 which is going to give us $300 so we can view our cards or we can simply click here so by view cards and here you can see we have one item if you have a coupon we can add that coupon and our buyers can have a discount so I scroll down so here we have the total money on our card so if I click on checkout so I can proceed to make payment and here we are provided with a form or billing details that our buyers or customers can enter and once they are done with that so they can make payment but you can see on our store it says sorry it seems there are no available payment method please please contact us if you require Assistance or wish to make alternate Arrangement so this is what our customer sees when we haven't set up a payment method so I'm going to guide you how to set up a payment method to collect payment from our store so if we go to the dashboard to do that we simply hover on wo Commerce so you can see if we have orders this is where we can view our orders so here you can see when you receive a new order it appears here so currently we don't have any order so we have customers here you can view your total customers reports settings status and all of that so right here we are going to go to settings so we can set up a payment m method and other features so right here you can see we have different tabs so I'm just going to close this dismiss this no thanks okay so close this close this tab so we can also so here we are asked Astra work simy with who Commerce so they are asking us to upgrade so we can get additional features for now we don't want to upgrade so I'm going to close this also so you can see the various settings we can do so you can make settings to the general we have the product um settings we have shipping payments and all of that so let's start with the general so here we can add an address our store address so let's say our store is located at Garis gisin boss stop BS stop Port po stop P haut so we can enter a second address and then we can enter a city you can say what haut and then the country we can come and select our country so we can choose to select whichever country we are selling on if I'm selling in Nigeria so I will simply go and hit that let's say I'm selling in Lagos or I'm selling in rivers so you can make that changes then you can input your post code then how many countries are you selling to you can choose sell to all countries except this or sell to specific countries then your shipping location you can select the countries you shipping to you can also enable tax rate and calculation so if you are shipping to different countries and you aware of their tax rate you can select that and enable different tax rate then here you can choose your currency so let's say I'm selling in Nira so if I hit on that and then save changes now if we go back to our website so if I refresh so you can see our currency has changed to naira you can see that so if I go back to the main page home so you can see everything has been updated to naira so now let's go back so if you are selling in US you can always always make sure you are using a United States dollar so here you can set your currency position on the left or right the Thousand separator decimal and all of that then you save changes so next we have product now this is a base page if I click on this this is going to display all the pages you have on your website so we have a page set up for us when we imported our demo content which is store so you can equally change that so when our visitor clicks on store they see the entire product on the website or all categories so now if I view the card I can also remove item from our card so let's say I don't want this so I can remove that so you can see it has been removed without refreshing our website so this is the Ajax we are talking about so you can see enable Ajax out to cut buttons on archives so we have placeholder image and all of that so most important thing is our payment so let's go to payment now on payment here we have some demo payment that has been added so we have alip pay accept payment using alip pay this Gateway support the following currencies so if you want payment in Euro the Australian dollar the Canadian dollar and all of that so you can enable this payment so we also have stripe card processing so you can enable this payment also so if you want cash on deliver so you can enable this and your customers pay with cash upon delivery so you can finish the setup if I click on finish setup then have your customer pay with cash upon delivery so you can enable cash on delivery and then we have a title cash on delivery Bay with this and then if you have instruction when your customers hit the checkout button and try to make payment so you can add an instruction so your customers can see or if you Hoover on this so you can see instruction that will be added to the thank you page so this is it and now we have an active setup so let's go back to the payments again so you can add other payment method if you want to so let's say I want to add payment method by PayPal or paystack so all I need to do is I will go to plugins and add new plugins and here I'm going to search PayPal PayPal and here we go wo Commerce Paypal payment so if your country supports PayPal which is one of the largest payment GTO in the world so all you need to do is install now and then we activate so you can see is included as part of our plugins so here you can see we come as papayal payment so let's add another one and this time I'm going to add a payment Gateway mostly for Africans Nigeria and other African country so we can add a pay stack and here we go pay stack who commers payment Gateway so all we need to do is to install now and then activate then another payment Gateway so we can add a new one again and this could be flutter wave so this is another payment Gateway for Africans and here we go flutter with payment and then you install so once that is done so we can go back to our W Commerce and then settings and then payment and now you can enable some of the payment method so we have PayPal so you can enable PayPal so if I click on PayPal and then we can continue with the setup so with PayPal you can pay with all of these payment methods so we have enable Paypal payment which is what we have done and then standard card processing so if we go back to payment and let's enable pay stack and then you hit on finish setup so you can set up your pay start payment Gateway so right here you can give it a title payment uh payment option you can select one of the payment option you want a pop up or you want when a customers click on this payment Gateway they will be redirected to paystack if you don't want a redirection you can just select popup text key and then you have a public key now these keys are provided when you sign up on payack so to create account on payack you have to go to pack website and then you can see mod than and offline payment for Africa and then you can create a free account and once your account is approved you'll be provided with a key a test key a secret key and a public key so all you need to do is to input that right here and here and then you save changes so now let's go back to the front end of our website and let's see if this payment method has been updated so let's click on Cut again and now I'm going to click on check out and on the checkout so I'm going to wait and here we go so we have cash on delivery so this is the only payment method that we have currently so they can place order and the reason is because we are yet to set up pay stack and other payment method so this is how we can set up payment method on our website welcome to the next phase of your WordPress journey in this section we'll explore the why and how of migrating your site from a local setup to a Live host using the WordPress migration plugin but first let's understand why this step is essential why migrate or go life taking your site from local to live means sharing your content with the world a live website is accessible to anyone with an internet connection let's suppose you want to implement search engine optimization it's recommended to do that on a live website because search engines wither life sight and going life improves your sight chances of being discovered and ranked higher in such results such as Google and being now let's dive in into the Practical steps of migrating from local to life using a WordPress migration plugin in your local WordPress dashboard go to plugins add new search for allinone WP migration and install the plugin then activate now you should see the migration plugin menu on your dashboard simply Hoover on it and click on export then on the export option choose file if your website isn't that big it may be the easiest option to export to file and the packaging process will begin this will take some time to package your WordPress website depending on the size of your website once you've accomplished then click on it to download it to your computer and you should have a nice export file ready to be deployed on a Live host what is hosting think of Hosting as your website home on the Internet it's where all your side files images and content are stored popular hosting providers include name chip blue host GoDaddy side ground H stinger and others what is a domain your domain is your website address it's how people find you on the internet like ww.you website.com you can register a domain through a domain register often offered by hosting providers in this video we shall be using name chip as our preferred hosting provider feel free to check out other hosting services that best suits your need I've been using and loving name chip hosting services for quite some time now and I think it could be a game changer for your website so I recommend them for their reliability speed and excellent customer support so I've left some Link in the video description below feel free to check out the hosting provider I've left some Link in the video description below if you decide to sign up through this link you not only get a discount but an awesome hosting service so to get started don't forget to click on the link in the description of this video now on the name chip website I will go to hosting and there are several hosting plans on name chip but for now I'm going to select shared hosting then I'm going to scroll down and here you can choose your billing cycle monthly or yearly or 2 years interval and as you make selection the prices of the different packages will be adjusted you also have the option to select your preferred data center location us UK and others so here we are presented with three hosting packages the Stellar plan Stellar plus and Stellar business and each of these comes with different offers so select the one that fits your need then click on get started once the plan is selected you will be redirected to the domain name connection page here you have the ability to connect an already existing domain on name chip or third party or simply register a new one if you don't have a domain yet you have the possibility to search for a new domain let's say I want to search for the availability of Zenit stores and here we are presented with a search result of the ones that are taken or available so since Zen stores.com is taken I can adjust my domain name by adding an underscore just to differentiate the too note this is based on what you want you can add whatever you wish and here we go our new domain is available in the do extension so select your preferred one and click on the connect to hosting to proceed in case you decide to change the hosting billing cycle to a monthly one the price for the domain will be changed here we have a total sum based on my selection which includes the type of Hosting package and the domain which amount to $4 4.54 as at the time of recording this video you can get a discounted rate if you click on the link below if everything is fine click on the ad to cut button on the next step you can reveal your other details and apply a coupon if you have one then click on confirm order to proceed to the checkout here I have been redirected to the login and sign up page if this is your first time then you can create an account or if you have an account already on name chip you can log in to proceed for me I do have an account already so I will enter my details to sign in next you verify your siging process once done choose the payment method for your hosting package you can choose one of the three payment method credit card PayPal or account fund then click on continue to make payment and complete your order for the purpose of this tutorial I'm not going to make a payment right now for this domain I already have a domain I bought recently so once you have completed the entire process and made payment you can access or manage your domain by simply navigating to Account dashboard then click on domain list and here we have a list of domain most especially I have the Apex techy do site as my new domain now in order to start uploading our content I will navigate to posting list Tab and then I will go to C panel then on the C panel click the WordPress logo click install now to proceed on this page choose the domain you wish to install WordPress on then you need to enter some information for your website note this can be changed later enter a username and a password for login access this can be different from the ones used in your local host and then hit install when you are ready oops our password strength is low so I will add more characters to our password make sure you add what you can remember if I hit uninstall again the C panel sof TS now takes over it will run the installer with the settings we've provided and deliver a success message on completion and here we go congratulations the software was installed successfully now I will click on this link to log into my WordPress dashboard I will right click and open this in a new tab and here here we go we have automatically logged in to our dashboard via C panel I can also access the front end from here all right now to upload our Local Host content now to upload our Local Host content we downloaded we need to go to plugin and install the all-in-one migration plugin on this new site install and activate then Hoover your mouse on the plugin menu and this time click on import select the file option to locate and upload your your Local Host content and the uploading process will begin wait for some time for this to complete and now we have a warning click on proceed to complete the input here we go we have successfully imported our Local Host content into our live website now hit on finish now it's time to test our website let's head over to the front end of our website and refresh the page awesome our mission is accomplished now our website is up and running on the Internet thanks for joining this WordPress course we've covered the basics but stay tuned for future videos on SEO and security hit that subscribe button and comment with any questions or topics you would like me to cover need help reach out see you in the next video happy creating

Channel: NextTechGem

Views: 2,783

Keywords: wordpress tutorial, wordpress tutorial for beginners, wordpress website, woocommerce, namecheap hosting, local by flywheel, domain name

Id: Txl6c1k8Gno

Length: 127min 21sec (7641 seconds)

Published: Fri Feb 09 2024