How to Make An Ecommerce Website With WordPress Using WooCommerce & Astra (EASY – FAST – FREE)

In this video many show you how easy it is to create a full e-commerce website in just a matter of minutes hi my name is Adam from WPCraftercom Remick WordPress tutorial videos for non-techies if you knew your consider clicking on the subscribe button if you don't want to miss a thing click on the bell off to the right YouTube let you know when I have a new video and work to be looking at the Astra Theme today in this video let me show you what we are building right here is the website and were building a whole website but this is what the WooCommerce e-commerce platform is going to look like it's going to show us our products in this beautiful grid right here and then in this video I'm to show you how we made this a beautiful pricing page right here or product page that features your products and then this is how beautiful our shopping cart is when someone puts an item in the shopping cart and lastly this is going to be our perfectly looking checkout page for this shopping cart and if you notice let me get out of the picture there's this beautiful little shopping cart badge in the header when someone hovers over it it's good to show them exactly what's in the shopping cart and give them a chance to go to the cart or check out let me show you what that's gonna look like real quick if I hover over it there it is the product in the cart button and the checkout button and someone can even remove a product if they chose to really do this all in this video is not to be a long video because this is so easy to implement it so let's not waste any time let's just go ahead and get started so here I am in a fresh installation of WordPress so the first thing we need to do is install the Astra theme and the way we do that was a good we go to appearance and then we click on themes and this shows us the themes we have installed her to go ahead and click on add new and then click on the popular tab or go where it says search themes and enter Astra so I just entered Astra and right here you want to go ahead and click on the install button it's been a download this to your WordPress installation and then click on activate now because I'm using some new features that are going to be released in a matter of days not weeks days so if you're watching this video in a couple days this is going to be added and you're gonna follow this step I need to install the beta version that is going to be released here real soon so I'm in a go ahead and actually delete Astra and manually install it through the version that I have downloaded okay now I've installed this version that I manually downloaded but don't worry if you're watching this in a couple days you'll be able to do it just by searching for Astra and installing it right there so next thing we want to do is we want to install a plug-in called Astra Sites some of the plug-ins add new and on the search area here a minute enter Astra again and here it is the first result*starter site someone click on install now and then I'm in go ahead and activate this know what this plug is gonna do is allow us to just with a few mouse clicks have an entire website built for us in a matter of seconds so to go ahead and activate that and I want to go to appearance and there's this new option right here that says Astra sites so let's go ahead and click on that now the first thing is you want this to be based on the Beaver Builder page builder or Elementor for this example, click on Elementor now there's many different websites to choose from but I'm going to choose a particular one and that is this auto repair or was the template down here I must've skipped over it I always have a tendency to do this up and it was right there the whole time this car repair template but you can see there's so many high quality templates that are practical to actually use some to go ahead and click on appearances details and preview then I'm to click this button here that says in stall plug-ins it's going to install a contact form plug-in so that you can receive information that people give you via contact form it's can install Elementor the page builder and its can also install a bundle that will allow you to add buttons and things like that just like the one we see in the top right such is going to download and install those okay now that that is done we want to click right here it says import this site we get this message here that saying you really only want to do this on an brand-new WordPress installation some to go ahead and click on okay so right now it's going you download all the pages the menus it's can configure everything for you it's gonna download the images so this just might take a moment or two and just like that it's done so now what I want to do is click on this X here to shrink this demo and now her back into WordPress so now what we need to do is install the e-commerce platform called WooCommerce circuit to go to plug-ins and were going to click on add new and we can do a search for it right here just enter WooCommerce now WooCommerce is the leading e-commerce platform not just for WordPress but in general they are the leading e-commerce platform so go ahead and click on install now that this one might take maybe a minute to download and install and right after we activated it's going to take us through sort of an onboarding process with several steps and were going to have to make some choices but I will walk you through all those choices right now in this video okay so now it's downloaded all I have to do is click on the activate button and it should pushes right on into that onboarding sequence and here it is so we need to just go through these steps so the first thing is we need to specify where the store is based so for me I'm in the United States and I'm specifically in California now you have to put in your address here I'm in a put in a PO Box and then right here when we can choose the currency so it's automatically switched from pounds to dollars because of the choice that I made where the store is based now right here we need to let WooCommerce know for selling virtual products physical products are or both so by default it says right here it's selected both now don't worry if you choose the wrong thing here because you can always go back and change it later so I'm going to just leave this at both now this last thing here's a checkbox that is you saying it's okay for data that's collected in on your WooCommerce store to go to WooCommerce for them to analyze this is just that identify bugs and to see how people are actually using it I'm kind of a private guy so I like to uncheck that I don't want my information shared some to go ahead and fill this addressee if I click on let's go is not to let me go without putting in an address on the put in the address and then I'm going to click let's go okay so here I am on the second step in this is what I want to use to collect payments you have several options that are included for free with WooCommerce the first option is striped anyone can go to striped

com get a free merchant account there is no real approval process and there is no monthly cost or anything you just pay 29% of every transaction plus I believe it's $030 per transaction these are typical costs in order to receive a credit card payment on the Internet so for me I can leave stripe on you could turn it on or off you can change this later they do have a process here I haven't tried it out worth you check this box it will actually go through the process of setting up a stripe account for you not to go through that in this video and then right here if you also wanted to accept PayPal or maybe not stripe in just PayPal you could do that now I will say the top PayPal option here you need a certain level of a PayPal account it's not just the normal PayPal account that everyone has this PayPal standard is the normal PayPal account that everyone has work when you turn it on you just put in your PayPal payment email address and that's how it's all done so I can go ahead and leave that on the also have the option to collect off-line payments right here this would be payments via check or one of these other options cash on delivery I'll leave those off and go ahead and click on continue to go to the next step now this is the step about shipping so obviously if you have a physical product you need to know how you're going to charge for shipping or maybe you're not going to charge for shipping so right here we have these shipping methods now some of the steps in the WooCommerce process it WooCommerce is going to try to install additional plug-ins that you may not want in this is actually one of those steps right here it says right here if you have this set to live rates WooCommerce is going to install WooCommerce services and is can install another plug-in called jetpack so this is where it is right here if you are going to choose for the shipping method live rates now I personally like to buy things from stores where the shipping is free or maybe just a fixed shipping cost so you could use a flat rate or you could use free shipping so for this I'm just going to go ahead and choose it free shipping and right here I'm going to choose free shipping as well internationally but you have all these options the live rates essentially is no put this plug-in in so you can put information on every product and it can dynamically figure out what your cost is going to be to ship it I'm not in a cover that in this video but I do happen about three weeks time coming out a full WooCommerce tutorial dedicated to WooCommerce where we dive a little deeper into these different options here and then you would choose how you weigh things whether it's ounces or kilograms or pounds or whatever and your dimension some to go ahead and just move forward to the next step now right here is a another step where they try to see if you want this you have to also opt into additional plug-ins being installed and that is this automated taxes now this might be good if you have to charge tax for did dynamically for the areas that you ship it to I know in the United States it's pretty complicated so I live in California and there's all these different counties in California that all have their own different sales tax rate that I would have to charge so this is one where you might say you know it's actually good to have this WooCommerce services because they will update that for me as things change and is pretty complex but I will leave this off right now to go ahead and click on continue in this is another step where they're trying to get me you could see they really want to get this jetpack and will cover services this is another step where they want to put jetpack and this is a plug in that add some stuff to WooCommerce that isn't so crucial but it adds a bunch of other stuff and I typically don't like to have jet pack on my websites so instead of clicking on connect with jetpack I'm in a go here it says skip this step because I don't want jetpack particularly on this site so here we are in the last step right here I can create a product manually or I can import products from a CSV file when I want to do some to click on instead of in a go to return to dashboard now you're going to notice that there are a few new options here that were here before mainly WooCommerce and products so before I get move forward in this process I'm going to import some dummy products into WooCommerce I can demonstrate all the ways that it can integrate with this website that we built so what I need to do is I need to go to tools I need to go to import and hear some options but what I want is this word WordPress import right here summit click on in Saul now is get a download and install this plug-in so be able to import these dummy products into WooCommerce so now I'm in a click on run importer and I have this import file right here and I'm in a drag and drop it right there, click on upload file and import this is just for me to demonstrates the WooCommerce integration better is to install the urge import these dummy products so will essentially have a store that is full of products with images and everything and will be able to better demonstrate how this is done why I said I will be having a full in-depth tutorial on WooCommerce and this can be how to add products in all the different options there that are the most used option certainly but all the options you have a full understanding of that and also go through the various WooCommerce options so that you have a full understanding of that as well okay so this import is done now the next thing that I want to do is add the shop item to the menu so if I go to the WordPress site or if I go to the front end of the site right now this is what we see there isn't anything new other than we have this new shopping cart badge in the header but I want to add an menu item that says shop so first thing the minute dues go to appearance in the number to go to menus now what happens is when we installed WooCommerce and went through that process it added the essential pages to WordPress that WooCommerce needs mainly a a shopping page and this is where all your products are to be in a list and also a checkout page and a cart page a card and then a checkout page so I want to add this shop page to my menu so here's my menu and here's the shop page, click on this checkbox here click on add this to menu and let's make that the second menu item right there now I have to click on save menu for to actually be saved so when I go here to the front end of the website and do a refresh we have this new shop option right here so when I click on the shop option right here it's going to show me the products and if you can see it's already looking great it's already looking branded and that's because the Astra Theme the way they've integrated WooCommerce is it's automatically going to pull the color scheme from the colors that you've already set up for your website so it will always be perfectly branded now I want to go in first take a look at some of these options that you have available in the customizer for WooCommerce so here's this customize option right here there's also another way of getting into the customizer it's under appearance and then right here words is customized you can click on that and it's gonna take us into all of these settings and options we have for this theme and this WordPress site but since were to look at the WooCommerce ones I want to go ahead and click on the shop page so that we can see these different options that we have available to us so the first thing I want to look at is is the layout so you can see this is a layout where we have our products here on the left and then we have a sidebar obviously haven't put me widgets into this sidebar and I probably actually don't want the sidebar there so what I'm to do is click on the layout option right here and then I'm in a go ahead and click on the container option and here we have the WooCommerce layout options now it's actually said to what I wanted the default which is tied to this right here there are other options you could go boxed content box and you can also do stretched him and Aleave that there this is not actually where I get rid of the sidebars to let me go back and we have this option here that says sidebar so when I click on this here is the setting where I can control this sidebar so right here for WooCommerce it set to default which is to show this right sidebar to go ahead and change this to no sidebar because I just want to show the products at this stage and then here we are getting larger images here now we can actually add him we can add products to each row right now it's said to show a grid of three products I might want to change that to four and four single products let me click into a single products you can see what that looks like and we can decide if we want the sidebar so right here is the single product and here's a blank sidebar where we could put some widgets and I think for a single product I also want to get rid of the sidebar so instead of default to go no sidebar on that as well now you can also have full control over the width of the sidebar right here select summon up back up a little bit and go into these specific WooCommerce options and here are let's just go through them we have our general options which is to show this card in the menu so you have it in the menu right now I can uncheck that in it will disappear next we have our shop options so let me go back into the shop by clicking on shop right here and this is where we can choose how many products we want or how many columns which is how many products we want in a row announce it to three but I can increase that to four this would essentially allow me to show more products at the same time I think for it looks a little better if you're not can I have a sidebar and then right here we can choose how many products per page so right now said to nine which probably isn't a good number because that was a three rows of three which is nine so here we might want to make it eight or 12 so we can have either no third row or a full third row so for me I'm an enter 12 okay now that I've entered 12 you can see now we have three rows each row has four products in it and this is looking really good so far now what's really nice is we can control this information right here so these are the options of what I can show underneath a product image now I can choose to hide an item or reorder them so right here words is posters this is the category but if I didn't want to show the category I can click on the little I and it will just disappear and I can totally rearrange everything as well so if I wanted the price on the top I can click right here and move it up and now the price will appear above the title just like that I think it makes sense for the title to be first certainly and if you didn't want to show the ratings we can go ahead and make that go away and we also of course have our add to cart button there and it's looking a bit more clean there but I do like the ratings actually being there obviously if you have a lot of products that don't have any ratings you might want to hide the ratings because you don't have them Summit go back and now we have some single product options so essentially our single product option is whether we want to show the breadcrumb so we jump into a single product right now and then I'll go ahead and show you here's the breadcrumb I can go ahead and click on this checkbox and that breadcrumb will disappear and everything is moved up so certainly up to you whether or not you want to show in this display this breadcrumb option so far I'm really happy with the weights looking we have this option here to show all the different images that we put in here for the product we have our description we have our reviews right here and also related products are right here in this grid right there in you saw how simple this was the set up I mean I really didn't have to configure much it was working almost perfect actually was very perfect there's just a couple things I personally wanted to change which was get rid of the sidebar but just out of the box he could see I didn't have to go into five dozen different settings to make it look good it just looked good right out of the box so then you'd want to go ahead and click on publish to actually publish these changes that we just made now just in case I want to go and show you where if you did want those sidebars want to show you where you would go to put different widgets in them so underneath the appearance of theirs is option here that says widgets in your to see we have a couple new widget areas so we have a WooCommerce sidebar this would be that shop page and then right here we have the product sidebar and this is where you would put the widgets for the individual products so now let's jump into the front end of this website again and see what it looks like checking out or adding a product to your shopping cart and then checking out some of click on shop again and here we have that net beautiful grid now if for products in a row I'll go ahead and click on the first one right here and then I'm in a go ahead and right here I'm in a choose add to cart but you have this thing here were you hover the mouse you can see the image larger and if you wanted to have this image popped up in the light box you click on the little magnifying glass and there it is so let me go and click out of that summit go ahead right now and click on add to cart but you notice out the color scheme is perfectly on brand here it's fabulous summer click on add to cart and now what we see happen is it takes us to this message here that is also following these branded colors that shows us that the products been added to the cart if you look at the cart in the top right corner it now says one and that's just to give you a visual indicator that there's an item in the shopping cart now when you hover over the one you now get to see all the items in this nice little pop up all the items that are actually in the card and there's an act X to take it out of the cart if you wanted you see your total right there you can view the card and you can check out so for someone to click on view the card and it could take us right in there and I just love how perfectly minimal this card is right here at your standard WooCommerce cart but it's beautifully styled right out of the box so I can except coupons if you issue out coupons in your store and then I can go ahead and click on proceed to checkout and it's the same thing the checkout is beautifully styled here on the left billing information on the right a snapshot of the order it just looks perfectly branded out of the box so that is pretty much everything that you're going to get in this WooCommerce integration I think it's amazing that you can have a shop in just a matter of minutes on your website where you don't have to fiddle with dozens and dozens and dozens of settings where it's already overwhelming to learn this new thing of adding e-commerce bites then to have to worry about all the settings and how to get it all rights and to make it fit with everything else on your site the way that Astra has done it is it it just perfectly integrates with the branding in the style of your site and there's very little left for you to have to do obviously I just got rid of a few sidebars we could've kept them and put widgets in there and I just tweaked how this grid looked because I wanted to fit more products in there I really didn't have to do much else and I have this a beautiful e-commerce platform integrated and what's very amazing is you notice I didn't have to buy anything I didn't have to buy a WordPress theme it's all in the Astra Theme that is freely available to have this beautiful website puts altogether I didn't have to go and buy something I use the free Astro starter site plug-in in order to get this and also to get this e-commerce platform where I'm now able to take payments I didn't have to buy anything I just Inc installed WooCommerce and now I have this beautiful e-commerce website so anyways this is a snapshot overview of how easy it is to have an e-commerce website now in the next two weeks here's what you can expect number 100 have a full tutorial on just WooCommerce and number two I'm going to have a full site build from beginning to end building a fully custom WooCommerce and that's gonna be the longer tutorial word no step is skipped I follow all the various steps from beginning aide to be together A-Z not aid to be paid is the every single aspect of having an WooCommerce e-commerce based website I'm going to cover from installing the hosting installing the plug-ins everything and that is coming as well sure are exciting times if you are into WordPress and you want to have a website things have never been this easy now there is also more to come as dry as building a professional extension in the Astra Pro version that's going to give you some additional controls in WooCommerce to further customize it to be exactly how you want it now if you're not familiar with Astra you can visit WPCraftercom/Astra and you can see all the information about what comes with the Astra Pro version but as you see it's not something that you absolutely have to have if you're just getting started is something that you may want if you want more powerful features in your website but you could see there really is nothing holding you back from getting started today so let me know what you think of this WooCommerce installation in the comments section down below thank you for watching and if you enjoy this video thumb give the thumbs up and I'll see in the next video

Free Email Updates
We respect your privacy.

wordpress themes for business

affiliate marketing