How To Make A WordPress Website With E-Commerce

Hi everyone I'm Katrina and in this video let's go over how to set up SuperStore, the WordPress e-commerce theme by WooThemes

So I received a note from Figo requesting I do this tutorial so thank you Figo for inspiring me to check out this, this particular theme I love it It's a beautiful e-commerce WordPress theme So let's take a quick tour around the theme we'll be building in this video So in this video this is once again a premium theme by WooThemes, it's called SuperStore

You'll see it looks like this, we're on the homepage There's two different menu navigation items One on the top right hand side and one right here in the middle Then you can see there's a slider here where you can have a call to action if you'd like So when I click on this you see there's a button here, Shop Now, to go directly to the shop page

Or you can just have an image with a title So I'll show you in this video how to set that up Scrolling down you'll have your different product category sections in this theme You'll have some featured products You can also add your new products

And just under that there's a content section where your blog will begin with a sidebar on the left hand side At the bottom of the blog area there's a footer area with all this customizable content which we see right here So I'll show you in this video how to set up the homepage and the website in general And just keeping in mind any of the sections you do see here can be removed if you don't want to include them on the homepage So for example when I have an e-commerce website I really just want the products to be featured on the homepage so I would probably remove this section with the blog

But I will show you how to add it in the event you do want to have it on the homepage So it's really up to you So let's take a look at one of the product pages I'm just going to click on this link here to go to the womens product page This is what the product page will look like with all of your different items and product categories

I'm going to click on this one right here just to check out the actual product page Now we can really see when you go from a free theme to a premium theme the bar really is raised in terms of design Like all the different features, the typography, the buttons, they're really a lot, I think a lot nicer when you go to the premium theme So let's take a look at the product page Here we'll have an image on the left hand side which when you click on it will open into a really nice lightbox display

And when I click on the arrow here you can go to the different angles of the particular product So I'll show you in this video how you can set up the product image gallery Then here on the left hand side or the right hand side I should say, here you'll have the title, the different attributes, and I'll show you how to set up the different attributes, then you'll have a product description and an additional info section as well So I'm going to add this to the cart by clicking on add to cart And once you click on add to cart you'll have a message here that says "okay, this item was successfully added to your cart"

You can click on view cart to view the cart So I'm going to click on that, and here you see on the cart page, here is a small thumbnail image, you'll have the title the price and the quantity And then notice down below here here are the cart totals So I'll show you in this video how to set up the different shipping We see here this is free shipping but there's many other kinds of shipping you can set up and I'll show you in this video how to set up the shipping

Also notice there's a coupon here, so this theme gives you a really easy way to create coupons So I had created one earlier so I'm just going to apply that now by clicking on Apply Coupon And now you'll notice now my cart total displays this order discount of $5 since I added a coupon to it So it's a really great feature with the SuperStore theme that you can easily apply coupons to your products on your website So let's go to Proceed To Checkout by clicking on Proceed To Checkout

And here we are on the checkout page So here you're customer would simply fill out the billing address and here we see on the right hand side we see the order details once again And then when all the info is filled out we can just click on Place Order to place the order Also note right now it says PayPal so I'll show you in this video how to set up the payment method to be PayPal, but of course you can add other payment methods as well and I'll show you i this video how to do that So I'm just going to click on place order so we can see what that looks like

And then when we click on place order we end up on the PayPal screen, which on the left hand side we see we're on PayPal Here is the order summary, and you can either sign in to PayPal and pay with your PayPal account, or if you don't have a PayPal account you can also simply just sign in as a guest and you can pay either by credit card or by debit card So your customers do not have to have PayPal in order to pay via PayPal So they can just have a credit card and they can pay directly with their credit card So this is the website we'll be building in this video

Once again it's called SuperStore and it's a WordPress premium e-commerce theme by WooThemes So, let's get started So before we get started how much is this website going to cost? Well we need several things Number one we need a domain name and we also need web hosting In this video I'll be using Hostgator

com for web hosting and at Hostgator you can get both the web hosting as well as the domain name I'll also be using a coupon to get an extra discount off of my order at Hostgator, and that coupon is wpcoupon25 So if you decide to go with Hostgator, be sure to use wpcoupon25 as well so you can get an extra discount off of your order also I also want to mention as well I do receive a small referral from Hostgator, so thank you in advance for your support for helping me continue to make these free WordPress training videos Once you have the domain name and the web hosting, the next thing we'll need is the theme

As mentioned in this video we'll be building out the SuperStore e-commerce premium theme by WooThemes, and you can get that theme at WooThemes for $70 So once we have these three things the last thing we need is some time to put the website together and I'm estimating it should take roughly about an hour, an hour and a half So the total to get this website up and running is less than $95 Again, this is the SuperStore theme by WooThemes, it's a WordPress e-commerce premium theme So what are the three steps we need to take to get the website up and running? Well the first step is we need to get the domain and the web hosting

Second, we need to install WordPress And finally, step 3, we need to build out the website So let's head on over to Hostgator so we can take care of step number one which is getting the domain and the web hosting So here we are on Hostgatorcom

To view the web hosting plans go ahead and click on the button in the middle that says "View Web Hosting Plans" And here we see there are three different plans to choose from We have the Hatchling Plan, the Baby Plan, and the Business Plan If you are a small business owner, or if you are just getting your website up and running for the first time, most likely the Hatchling Plan or the Baby Plan would be a good fit for you The difference between these two is that the Hatchling Plan gives you a way to host one website domain, whereas the Baby Plan gives you a way to host as many website domain names as you would like So there's definitely more of a value in the Baby Plan since you can host as many websites as you would like under one account

But if you are just getting started as mentioned, most likely you only have one domain at the moment, then you can give ahead and click on the Hatchling Plan to sign up for that So I'm going to click on the "Baby Plan" because I want to order that one And next we'll see that the next step is we need to choose a domain If you already have a domain then you can just enter that in this field and go ahead and click on "Continue to Step 2" And, if you need to get a domain name for your website then you can enter the domain name you would like here and you can click on "Continue to Step #2"

Now just note that down below here it says, "enter a coupon code", and by default you'll automatically get a coupon from Hostgator But if you want to add even more of a reduced rate on top of that, you can use this coupon which will give you an extra amount off of your order So I'm going to put "wpcoupon25", that's a special coupon that you add to get more off the total when you go to check out of your order So I'm going to leave it at wpcoupon25 to get a little more off of my order, and I'm just going to put in a random domain name for the moment just to show you for the demo purpose what the next page looks like So I'm going to click on continue to step two which brings us to step two, the billing information page

Now on this page we see the first thing at this page is the package type I had signed up for the Baby plan so we see that right here And then we see the current billing cycle that I am signing up for Now I do not want to sign up for 36 months of web hosting all at once I want to keep my expenses much lower than that

And I prefer to pay month-by-month So I'm going to click on this here and I'm just going to choose a billing cycle of one month at a time that way I'll be paying one month as I go for my web hosting The next thing you want to do is you want to choose a username and a security pin Then you can fill in your different billing information right here Then when we come down here we'll note that there are hosting add-ons

By default, Hostgator has you signed up for the domain privacy as well as the SiteLock So you can choose whether you want to include these add-ons or not I'm going to uncheck the SiteLock because I have some other ways that I intend on protecting my website when I start building it so I don't want to sign up for the SiteLock And the privacy protection, this is really optional as well So it's optional if you want to use it

I do recommend signing up for privacy however, and this is why When you create a web hosting account on any kind of web hosting company, by default if you do not have privacy your account details including your address, your email address, and your phone number may show up in the web host database for anyone on the internet to be able to access So I prefer keeping my address, my phone number, and my email address private So whenever I buy a new website domain name I always sign up for privacy protection If you don't want privacy protection though, you can save some money by un-checking this

I'm going to leave it on for the moment though Then you can just come down here and here you can see here are the details of your order We note that with this coupon, wpcoupon25, we're getting almost $10 off so essentially the first month of web hosting is free with this coupon And we can see that here is our domain name, and our hosting add-on of $995

So in total, we're looking at under $25 to get started If you want to save some more money as mentioned, you can uncheck the privacy protection and you'll note that now the total is under $15 But once again, I like getting privacy, so I'm going to leave that on And the last thing that you want to do, is that you want to make sure that you click on this little box here that says, "I have read and agreed to the terms and conditions of use" So, once you have your hosting order all ready to go and when this looks good to you, you can go ahead and click on "create account" to create your new web hosting account

So once you click on create account, you get this page, which will thank you for your order and will tell you to go check your email for information related to logging in to your web hosting account So, I'm going to go check out my email And here we see on my email account, here's the email from Hostgator with my account info So I'm going to click this email to open this and I want to point out two things Number one, the first link that they'll share with you in the email is the billing system link

So if you want to check out any info related to your billing you can go ahead and click on this link and use the password that they give you And then right below that, you'll see that there's a link for your control panel with your user name and the temporary password So, I'm going to copy this password here, the temporary password And to log into your control panel, you'll use this link So, this is a really good email to keep in a safe place for future reference because you'll be needing this information, as well as the link to the control panel, to log into your Hostgator web hosting account

So, I'm going to click on this link here, and then here is my user name You want to type in your User Name here that was found in the email and you want to add your password right here as well Once you've have that set up, you want to click on log in to log into the control panel of your web hosting account So, here we are on the Hostgator control panel The next step that we want to do is step number two, we want to install WordPress and thankfully with Hostgator, there's a really easy way to install WordPress using their simple wizard script

So, I'm going to scroll down to where that is located You want to scroll down to where it says "Software and Services" and you want to find this icon that says "Quick Install" So, this is what we're going to use to install wordpress really easily in Hostgator We're going to use this Quick Install link, so I'm going to click on that And once I click on that, you'll note that there's all these different kinds of software listed here on the left hand side bar

So, right at the top, you'll note that it says, "Blog Software" and there's a link here for WordPress This is what we want to install, so I'm going to click on that and then you'll note that there's a button here that says continue Also note that we are installing version 351 of WordPress, which is the most current version available at the time of this recording

So, we are installing WordPress 351 and then I'm going to click on continue to continue the process And here you want to choose the domain name that you want to install WordPress on I'm going to install it on this domain name here

The next thing that you want to do is you want to create an Admin email, a Blog Title, an Admin User Name and you can also if you like add a First Name and a Last Name I'm just going to add an Admin email here, so put in my email Also you want to give it a title So I'll just call it the name of the domain Now, the Admin User, this is an important one to keep in mind, the default for WordPress websites is "admin", the Admin User default is "admin" and that's not really the safest User Name to use so you want to create a User Name that is anything other than admin

So, I'll just use my name for the moment and you can add first name, last name if you like I'm not going to do that and I'm just going to click on here, and click on Install Now Ok, "Congratulations Your installation is ready" So, you can access the installation of your new website by clicking on this link here

And also note that here is the Admin Area log in URL that you will use in the future to access the log in panel, to access your website in the future You want to make a note of this link here It's usually your domain name followed by wp-admin So that's an important link to remember as well So that going forward, you can easily log into your WordPress website

Also make a note of your Username and Password This is also what you will need to log into your website when you click on this link So, I'm just going to highlight this temporary password here and copy it, and then I'm going to click on this link here to log on into my new WordPress website So here we are in the log on screen of our WordPress website To log in, you want to enter your username in the Username field and your password in the Password field and then you want to click on this button that says, remember me, so that the next time you come to WordPress, your username and password will be remembered

In the event that you forget your password in the future or perhaps even now, you want to click on this link here that says, "Lost your password?" and WordPress will send you a password reset to the email that you used when you were creating your WordPress website So, for the moment, here I have my username and password I'm going to go ahead and click on the log in button to log into the WordPress website So here we are on the WordPress Dashboard, this is the first thing you'll see when you log into your WordPress website And when you first install WordPress, you'll also see this message that says, "Welcome to WordPress"

Within this message box, there is a number of links and each of these links represents some of the first things that most people do when they install their WordPress website For the moment though, I'm going to go ahead and dismiss this message, by clicking on Dismiss in the top righthand hand corner here, so that we can just see the Dashboard without that message So here we are on the Dashboard, let's take a look what the website looks like, right out of the box when we first install WordPress So, to see the site, I'm going to go to the top left hand side and click on visit site right under the name of the website So right here where it says "visit site", I'm going to click on that and here we see this is what the website looks like now, without doing anything, so it's pretty bare bones

This is the Twenty Twelve theme that comes with your WordPress installation and we'll be making quite a bit of changes so that it will end up looking like this at the very end So this is what we're headed toward, but for the moment, our website looks like this So let's go back to the dashboard and start building out this theme To do that you want to go to the top left hand side, hover over the website name and the first link is Dashboard We want to click on Dashboard, and here we are on the dashboard of our WordPress website

So this is the first thing we'll see when you log in to your WordPress website For the moment, the first step we want to take is we want to change the theme of the website So to do that on the left hand side the first step is here you want to click on Appearance, and here we're on the Manage Themes screen So notice that the current theme is the Twenty Twelve theme This is the theme that comes with your WordPress installation

So the next thing we need to do is we need to add the SuperStore premium theme to our WordPress website To do that we actually need to go to WooThemescom and we need to purchase the SuperStore premium theme So I'm going to head on over to WooThemescom right here

And at the top you'll notice there's a link here that says Themes I'm going to click on Themes And then I'm going to filter for WooCommerce themes since SuperStore is a WooCommerce theme And then I'm going to click on Search to filter the results Now you can see I have all the WooCommerce themes available by WooThemes

They're all listed right here, lots of beautiful themes to choose from And the one that we want is SuperStore So I'm going to click on SuperStore Then you'll notice at the top is says $70 So I'm going to click on the button that says $70

Then down below here you want to choose the package you would like for SuperStore There are three packages The least expensive one if you just want the actual theme itself is the standard package for $70 There's a developer package, and if you want access to all 84 themes in the WooThemes collection you can click on Join Club to join the WooThemes club So I'm just going to click on Standard here and I'm going to keep the support at one year of free support and updates

And I'm just going to click on Add To Cart to add SuperStore to my cart And here we see that SuperStore has been added to my cart and it's $70 So I'm just going to click on Checkout Now to check out And here you just want to fill out your billing address and your information And then you want to come down to the bottom here and you want to click on Place Order

So I've already purchased SuperStore so I'm not going to place my order again, however, after you place your order you want to go check your email for a confirmation of your order from WooThemes Also note that when you did sign up you created an account username and an account password What you want to do is you want to log in to your account on WooThemes to download your WordPress theme So I'm going to log in to my account by clicking on My Account And then here on the My Account screen you want to log in to your account using the username and password you just used to create your order

Then you want to click on Login to log in to your account So when you first log in to your account you're going to land on the My Accounts page where you'll be in the Dashboard tab in the lefthand side To download the new SuperStore theme you want to click on Downloads right here Or, if you signed up for the Theme club then most likely you have a Subscription Downloads tab as well, and you can click on Subscription Downloads to download your SuperStore theme So it's one of these two different tabs depending on which type of package you ordered

So I have the Theme Club so I'm just going to click on Subscription Downloads right here And here on my Downloads screen where it says SuperStore I'm going to click on Theme to download this theme Once the SuperStore theme has been downloaded I always like to drag it to my desktop so it's easier to find So I'm just going to take this and I'm going to drag it over to my desktop and release it And now going back to our WordPress website

Now we need to install the SuperStore theme So to install the new theme we want to click on the tab here that says Install Themes And then here at the top you'll notice there are a number of different links We land on the Search page but what we want to do is we want to upload a theme so I'm going to click on this link here that says Upload Next we need to choose the file and we need to install the theme in a

zip format so I'm going to click on Choose File And then I want to choose the theme So here's the theme right here in zip format I'm just going to highlight SuperStore and click on Open to choose this particular file Then I'm going to click on the Install button to install the SuperStore theme

Okay the theme has been successfully installed The next step is we want to click on the middle button right here that says activate to activate the SuperStore theme Once you activate the WooThemes theme you'll land on this page which is the Theme Options page for SuperStore At the top there's a little message here that says Enhance your theme with WooDojo We're going to need that for, to make everything work

So go ahead and click on the Get WooDojo button right here I'm going to click on that And it's going to send us back to WooThemes where we can download WooDojo for free So I'm going to click on Download WooDojo right here And once WooDojo is downloaded, Just like we did before with the theme I'm gong to drag this particular zip file, I'm going to drag this to my desktop so that it's easier to find

So i'm just going to drag it over to my desktop and I'm going to release it Then you want to go back to your WordPress website and this time you want to click on Plugins on the left hand sidebar So I'm clicking on Plugins and then at the top we want to add this new plugin WooDojo is a plugin so I'm going to click on Add New to add the new plugin And then as we did before with the theme there's a link here that says Upload

I'm going to click on the Upload link And then I'm going to click on Choose File to choose the WooDojo file I'm going to elect it and click on Open to open this file Once WooDojo has been chosen then you want to click on Install Now to install the WooDojo plugin Okay once it has been successfully installed go ahead and click on Activate to activate the WooDojo plugin

Okay and the plugin has been activated So once the WooDojo plugin has been activated then on the left hand sidebar here you'll see a new link called WooDojo So we're not quite done with WooDojo we actually need to click on WooDojo now to go take a look at this plugin So I'm going to click on WooDojo, and here you'll see all the different features you can add using the WooDojo plugin So WooDojo is a toolkit as it mentions here with tons of different features to enhance your website

So the one that we need at the bottom is called WooCommerce So I'm just going to scroll down and here where it says WooCommerce I'm going to click on Download and activate to download and activate the WooCommerce plugin from WooThemes This is once again located in the WooDojo plugin toolkit So once you've downloaded and activated WooCommerce then within the WooDojo screen you'll have a message at the top that says Welcome to WooCommerce, you're almost ready to start selling And there will be a button that says Install WooCommerce Pages

So I'm going to click on this button here to install the WooCommerce pages Okay, welcome to WooCommerce 20 So we're all done with WooCommerce for the moment Let's go ahead and click on Settings to make sure we are set up properly

So I'm going to click on the Settings right here And then here we are on the Settings screen for the WooCommerce plugin So over here on the right hand side or at the top I should say there's a tab called pages so I'm going to click on Pages And here we want to make sure that all the different Shop pages have been automatically added by WooCommerce So when you clicked on Create or Install WooCommerce Pages then this is what should have happened

All the different pages should have automatically have been created and they should be set up here on the Settings screen for Pages So let's take a quick look to se what the website looks like now after we've added these two different plugins, the WooDojo plugin and the WooCommerce plugin So to visit the site I'm going to go up to the top and click on visit site So here we are on the homepage of our WordPress website using the SuperStore theme And as we can see we can just see the bare bones version of the SuperStore theme and we have quite a bit of work to do

So the first thing I want to do is I want to change this logo of WooThemes SuperStore to the website name or logo of my own store and I also want to add this slider here as well So what we're going for is, here is the demo version This is the website I've already created The next step is I want to add the title or logo and tagline of my own website here and then I'm going to add this slider with the different calls to action So to do that you want to go back to your site and click on Dashboard

And then on the left hand side you want to click on SuperStore, Theme Options Here we are on the Theme Options page of the SuperStore And you can also note you most likely have a message box up here that talks about how WooThemes encourages everyone to use the WordPress SEO plugin We'll come back to that in just a moment Right now though I want to replace the logo and the tagline of the default WooThemes tagline that we just saw

So to do that here we are on the General Settings screen of the SuperStore theme options You can see right here that you can either upload a custom logo by clicking on this button here Upload and then uploading a logo or, you can just add a title, a text title So I am not going to add a logo I'm just going to add a text title So I'm just going to click on this button And then you'll note here it says "enable the text based site title and tagline, setup title and tagline are in the General Settings

You can also change the font if you'd like I'm going to keep this as it is I like it the way it is There is a note here, Site Description, enable the Site Description tagline under the site title And I do want my site tagline to show up so I am going to check on this box here

So going back to this link you'll see that setup of the title and tagline are in the General Settings So I'm going to click on this but of course first I need to save these two settings So I'm just going to scroll up and click on Save All Changes to save those two check boxes And then I'm going to click on General Settings to set up the title and tagline on the General Settings screen So here we are on the General Settings screen and as we see at the top I have my site title and I am going to keep that as it is

It's just my domain name And then right below that we have the tagline So when you install WordPress, the default tagline for all WordPress sites is Just Another WordPress Website, which is never a great tagline to have for your website So at minimum I recommend deleting this altogether However I am going to use a tagline so I'm just going to pop that in right here: the most awesome t-shirts in the universe, since the e-commerce website that I'm setting up is a hypothetical t-shirt company

So once you have your site title and tagline then you just want to scroll down and click on Save Changes to save your changes So we'll come back and look at the site in just a moment to see that those changes have been saved Before we do that though I also want to set up the slides on the homepage So to setup the slides on the homepage you want to go to the lefthand side here where it says Slides and you want to click on Slides Once you're on the Slides page you want to click on Add New to add your slide

So I just clicked on Add New So I want to give this a title This is going to be a photo of the beach so for this I'll just say "2013 Surfboards & Surf T-Shirts Have Arrived" And then you want to come down to the bottom right side here where it says Featured Image and you want to click on Set Featured Image Then I'm going to upload my new image

So I'm going to make sure I'm on the Upload Files tab here and I'm going to click on Select Files And then you just want to select the file you want to use as your slide So I'm going to use this one here, I'm just going to select it and click on Open to open that image Once the image is uploaded it's always good idea to give it a title and an alternative text so I'll just add the same title right there And then you want to click on set featured image

Once the featured image has been set and you see it down here below then you want to click on publish to publish this slide Okay so the post was published So we can either view the post or we can add another slide So I'm going to just add another slide right now by clicking on add new And then just as we did before I'm going to give this slide a title so I'm just going to add my title here and then once again I'm going to click on set featured image

I'm going to click on upload files and then click on select files Then I'm going to select the file by highlighting it and clicking on open And then once again once the image has been uploaded and I can see it right here I can add a title and an alternate text So I'll just add my title and alternate text and then you want to click on set featured image to set the image Now we'll come back to this section here and we'll add a call to action button in just a few moments

We need to create some pages first so that I have a link that we can actually send the call to action button to So first we need to create another page and then we'll come back here and we'll add some detail here with a call to action So for the moment let's just click on publish to publish this slide And once the slide has been published now we can go check out the site by going up to the top and clicking on visit site So here we are on the homepage and we see the site title and the tagline have been added however we do not see our slider showing up here

So the next step is we have to configure which sections we want to have displayed on the homepage You want to go back up to the dashboard by clicking on Dashboard And then on the dashboard you want to click on SuperStore on the left hand side So I'm going to click on SuperStore, and then you'll see now I'm back again on the Theme Options screen of the SuperStore theme So on the left hand side, there are two different sections

There's the Featured Slider section and the Homepage section So this is where you configure what shows up on the Homepage So first I'm going to set up the featured slider by clicking on featured slider and then when I click on that you'll notice at the top it says "enable featured slider" So I want to check this box to enable the featured slider on the homepage Next you want to set the number of slides you want to have displayed within the featured slider

I only have two slides right now so I'll just say 2, but you can obviously as you see here you can click as many slides as you'd like And then let's take a look at the other features on this particular page So you can select a slide group I have not added a slide group for my slides so I'll just keep it like this But if you have a group you can select it right here

And then you can choose whether or not you want to display a title on video slides Next you can select what order you want the slides to be displayed in by clicking on this box here Either Newest to Oldest or Oldest to Newest I'll just keep it as it is and I'll click Save All Changes to save all changes Now before we take a look at the site again I also want to click on the Homepage right here, this link, so I'm going to click on Homepage

And this is where you can configure all the different sections that show up on the homepage The alternative way to do exactly the same thing, as it notes here, you can optionally customize the homepage by adding widgets to the homepage widgetized area on the widgets screen with the Woo-Component widget Wow, that is a mouthful We'll talk about widgets in just a few moments but for, as we see here, we can just set up the homepage by enabling each of these different sections by simply clicking on these boxes So we can see if you want to enable the product categories you want to check this box, to enable featured products you want to check this, then you can also add recent products to the site on the homepage, testimonials, as well as a content area

So in this video I am setting up the SuperStore theme to look just like the WooCommerce WooThemes SuperStore demo And for that reason I'll leave all of these checked Actually, I'm going to uncheck testimonials because I do not want Testimonials on the homepage It's a great idea to include testimonials but just in the essence of time I'm not going to include that but you can see right here that if you do want to include testimonials just keep this box checked and then you want to click on this link to get the Testimonials plugin So that's another plugin that you need to get in order to enable this and I'm not going to do that in this video

So, once you have all the sections checked that you'd like for the homepage go ahead and click on Save All Changes to save the changes So now let's take a look at the site I'm going to go up to the top and click on visit site Okay now we see we have the site title and tagline and the featured slider So when I click on this we see here are my two images for the slider

I still do not have any of the sections for the homepage listed here, we still need to set those up But the good news is that the homepage is ready to display those once those different sections have been created So let's go ahead and add the different sections now So the first thing we want to do again is go back to the dashboard And then the next step is we want to start adding products to our SuperStore e-commerce website

So to add products you want to go to the lefthand side and click on products And her eon the Products screen you want to click on Add product to add a new product The first step here is we want to add a product name so I'm just going to add a product name right there And once you've added a product name, the next step is you want to add a product description in this box here Now note there are two different tabs, there's a visual tabs and a text tab

The visual tab is the what you see is what you get view And you'll see there a row of all these different formatting icons that you can use to format your text Note also that there's this icon here that when you hover on top of it it says Show/Hide Kitchen Sink When I click on this link, this icon, another row drops down with an additional set of formatting buttons So this is just like using an email or writing an email or using some kind of word processor

You can just add in some text right here, I just copied some text that I had right here And then just like an email you want to highlight whatever it is that you want to format and when you hover over each of these icons you'll see a little tooltip that will tell you what each of the icons do or does So anyway, you just want to highlight it and I'll click on the B to bold this text and there you go So the good news is that with WordPress you don't need to know any code you can simply use all of these awesome little formatting icons to help you format your content So now let's just compare the text view here

When I click on text, you'll notice here there are the strong tags, this is html, and this is the behind-the-scenes code that WordPress is generating to create the formatting of your content So again the good news is that you don't have to actually know this code at all, you can simply stay in the visual tab here and let WordPress take care of formatting for you So once you have your product name and description the next step is coming over here to the right hand side and you want to create a product category So I'm just going to click on Add New Product Category here and this is the mens' td-shirt so I'll just call it Mens And then you want to click on Add New Product Category

I'm also going to give this a product tag, so this is a peace t-shirt so I'll just give this a tag of peace and then I want to click on Add And then you want to come down here to where it says set featured image and you want to click on set featured image to set the image for this particular product So I'm going to click on upload files to upload a file and then I'm going to click on select files And then here on the files you want to select the file that you want to be used for the product image So this particular one is this one, the peace t, so I'll just highlight that and then I want to click on open

And once again it's always a good idea to give it a title and an alternate text So I'll just call this Peace T-Shirt For Men, and I'll just copy that and paste it in the alternative text field and I'll click on Set Featured Image So once the featured image has been added I'm just going to click on Save Draft to save all the changes I've made so far Now on this page we need to scroll down and we need to set up the different product data including the price and the sizes for this product So here in the Product Data section here you'll see it says Product Data

Here when you click on this you'll see it will say Simple Product, Grouped Product, External/Affiliate Product, and Variable Product So for this one, for the first product we're adding to the website I'm just going to click a Simple Product, we'll just make this a really simple product And I'll show you the difference between Simple Product and Variable Products in just a moment So let's click on Simple Product And then here on the tab here you can a SKU if you'd like, a regular price or a sale price

Also note there are these question marks here throughout the site which when you hover on top of it it will give you a really cool tool tip that will tell you exactly what the field does SKU refers to a stock keeping unit It's a unique identifier for each unique product and service that can be purchased So if you want to use a SKU system you can go ahead and add that there I'm not going to add that but I am going to give this a price

So I'm just going to add my price in here, $40 It does say pounds so we're going to have to change that but for the moment it will just say 40 and I am going to give this a sale price as well for a limited time So I'm going to make it $30 on sale and I"m going to click on Schedule to schedule the sale The sale price dates I'm just going to click on this here I'll say from Thursday the 9th until, and I'm going to click on this calendar here to make the end date to be until Sunday the 12th

Okay so now that we have that step, you can click on Inventory if you'd like Here are a bunch of inventory options you can set, manage stock, stock status, allow backorders yes or no, do you want to sell this individually yes or no, so you can set up these different options here on the inventory tab Next I'm going to click on Shipping I'm going to talk about shipping in just a few moments, so I"m not going to take care of shipping right here But we do see that shipping, this is where you would come to configure shipping for this product

Again here is linked products Again here we can also add any up-sells or cross-sell products that we want to add Now this is our first product so I don't have anything to up-sell or cross-sell this to, but this is where you would come once you do have all the products you want added to your website So the thing that I do want to take care of though is attributes So I'm going to click on attributes right here

And this is where you can add things like different sizes and different colors to your site So I'm just going to click on add right here to add an attribute And I'm going to click on size, I'm going to make an attribute name called size Then I'm going to give this a value of one size fits all since this is a simple product, with simple products you pretty much just have one product There's no variations or no different attributes for the product

So for a simple product I'll just have one size fits all And then I'll click on save attributes to save the attributes And I do want to click this box that says visible on the product page so that this shows up on the product page So I'm going to click on this, and again I'm going to click on save attributes to save these attributes So once you have that set up then I'm going to go to the top and click on publish to publish this product

So once the product has been published the next step is you can either view the product or you can add a new product In the essence of time I'm just going to go directly to add a new product and we'll view all of the products in just a few moments when I've added more products to the site So the next thing I want to do is add a new product by clicking on add a new product right here at the top And as we did before the first step is to give your new product a product name So I'm just going to add this new product here

This will be the Faith Love Hope Sweatshirt And then you want to come down to this section and you want to add some content So I'm just going to paste in some content right here I'm just going to copy this and paste this in here and then as we did before I'm going to highlight the name right here, I'm going to highlight it and then I'm going to format it with bold So I'm just going to hover over the bold right here and click on the B to bold this particular product name

And then I have my content So once you have the product name and the product description set up, the next step is you want to come over to product categories and you want to give this particular product a product category So so far we only have the Mens category This is a women's sweatshirt so I'm going to add a new product category by clicking on add new product category And then I'm going to add Women's right here and then I'm going to click on the button that says add new product category to add the womens product category

So now this is checked so my category is ready to go, the next step is I need to add some product tags This is the Faith Hope Love Sweatshirt so I'll just call it Love and maybe faith right here as tags and I"ll click on Add I could also perhaps add the tag of sweatshirt since this is a sweatshirt And then you want to make sure you have commas separating each of your different tags So then I'm just going to click on add to add the tags and there we go

So now I have the product name, the description, the category, and the tags set up The next step is I need to add the featured image So I'm going to click on this link that says set featured image Then I'm going to click on upload files to upload a new file Then I"ll click on select files

And here I want to select the file So here's my file right here, here's the image So I'm just going to highlight it And then I'll click on open to open this particular, upload this particular image And here we see it on the right

So as we did previously it's always a good idea to give your image a title and an alternative text So I'll just call this Faith Hope Love Sweatshirt And then I'll just copy it And then I want to add it to alternative text Then I want to click on set featured image right here

And there you go So I'm just going to save the work so far by clicking on the Save Draft button right here And once the draft has been saved then we can continue So I like to just keep saving my draft as I go that way in case anything happens at least my work has been saved up to that point So just scrolling down let's take a look at the other things we need to add to this product settings page

So here we notice here we have a product gallery So a new thing I want to show you is how to create a gallery of images on your product page So to do that I'm going to click on this link that says add product gallery Then I want to click on upload files to upload some files And then I'm going to click o select files

And then I want to find each of the different images that I want to add So for example here's one of the first ones so I'll click on this one And then I want to click on open to open this particular one And once again I want to give it a title of the Faith Hope Love Sweatshirt with an alternative text and click on add to gallery And here we see that there's just one image here in my product gallery

So I want to add some other angles of this product so once again I'm going to click on this link that says add product gallery images And then I'm going to click on upload files Then select files And I'm going to choose two images at once now by just highlighting both of them, the back and the side angle and clicking on open Then they'll both pop up here

So again I want to give this a title, so I'll just call this, this is a sweatshirt but it's a back though so I'll put back And then the alternative text, I'll give it an alternative text there And then I'm going to click on this one right here and once again I'm going to add the title and the alternative text And then once you have that ready to go and you have your two images selected, you want to click on add to gallery, this button right here Great

So now we see the three different images that will be displayed in the product gallery So once again I'm just going to go to the top to click on save draft to save this draft Then I'm going to scroll down and this time instead of giving this a simple product this time I want to give this product multiple sizes So this will be a variable product So I'm going to click on the simple product and then you'll get a drop down box and this time you want to click on variable product

Now if you have a SKU you can set that up I'm not going to deal with SKUs, I'm just going to go directly to the attributes section right here by clicking on attributes I'm going to click on add and then I'm gong to give it an attribute name of Size Now you'll note that when we enter the values here you'll see it says enter some text or attributes, separating them by these pipe values So the pipe is located on the righthand side of your keyboard just above the return key, and it's a line that looks like an "l" or a capital "I"

It's literally a line that just goes from the top to the bottom So it's located once again on the right hand side of your keyboard above the return key, and you want to hold down your shift key and then click on the pipe, the pipe key to make that pipe show up So here we go I'll have a small and I'll add the pipe key and I'll make this a medium and then once again you want to add the pipe key to separate the values And then I'll offer this in a large

Then you want to click on both of these boxes here One to make this particular attribute visible on the product page and also we want to use it for variations So I'm going to click on this right here Then I'm going to click on save attributes to save the attributes Once the attributes have been saved the next step is we need to go to variations to set up the variations

So I'm going to click on this right here And then we see there is a default selection so we can choose a default selection This is an important part not to miss because if you leave it at default size then your add to cart button will not show up on your product page And it's always really important to have a call to action on your product page so make sure when you click on variations that you do set the default to some attribute that's listed here I'll just keep it as a default of small

And then I want to click on this button here that says add variation So here it says any size, you want to select the size I'll select small right here and I'll give this a price of $40 I'm not going to create a sale price right now, I'll just leave it at $40 And then I want to add another variation by clicking on add variation

And this time I will click on the medium, the medium attribute And again I'll give it a price of $40 And finally I"m going o click on add variation one more time And this time I'll choose the large size, the large attribute And this time I'll give this a price of $45 just to show you the variation of prices as well as the variation of sizes

So this is how you can give the same product a different price depending on what variation of the product you're selling So you notice that the small size and the medium size are $40 Actually it says pounds, we'll take care of that in a moment Anyway it says 40, and the large is going to be 45 So once you have your variations set up and your default selection selected right here, go ahead and go up to the top and click on publish to publish this product

Okay so now let's take a look at this variable product by clicking on view product So here we are on the product page of the variable product This is the Faith Hope Love Sweatshirt and we see here I have the image of the particular product which when I click on this link right here it opens up into a really nice lightbox display and then I have these other different images, these angles that I can see So when I click on the arrow for example, one by one the different angles of the product will be displayed in the lightbox So that is really a cool feature of this SuperStore e-commerce WooThemes theme

So now that we have the product gallery set up, we also see on the righthand side here's the title, the size is small, medium, or large Also note that it says on the righthand side it says from 40 pounds So we'll change pounds to dollars in just a moment but the from indicates that the price range starts at 40 but there's some other prices that are somewhat higher So it starts at 40 dollars and then as you note here when we click on large, then the price goes to 45 So the small and medium are 40 and the large is 45

So there you can see how you can create different prices for the same product, different variations for the same product Then you have your add to cart button, your description and your additional information And then you have any reviews you'd like to submit you can submit some reviews down below So one thing to point out, this is not exactly how I want the product page to be displayed If we look at the demo site that I've already created, I really prefer this larger image on the left hand side, I don't want a sidebar

So this is the website that I created already, what we're headed toward Also note that on this page there's also some different related products down here So we need to add some more products in order for this to be displayed But for the moment let's take care of removing the sidebar so that the image is really large like this so that it looks pretty much a lot cleaner without that sidebar So here we are right now, this is what it looks like for the moment

And I want to get rid of the sidebar To do that you want to go back to edit the product by clicking on edit product at the top Then you want to scroll down to the very bottom of the page and you'll see it says SuperStore Custom Settings So this is the layout and you'll see there's some really small type here that says select the layout you want on this specific post or page So currently you'll see this one is highlighted with the sidebar on the left hand side

You can also have a sidebar on the right hand side if you'd like However I would prefer for my product page to simply have the focus be on the product image and the description with no sidebar So I'm going to click on this box here this is the full-width page right here And then I'm going to go to the top and click on update to update the product Now once the product has been updated by clicking on view product to view the product, the product is exactly how I want it, the sidebar is removed and now I just have my product with my really cool little product gallery here and the call to action add to cart

So we need to continue doing this, we need to continue adding either simple products or variable products in these different product categories so that the other related products will show up down below So in the essence of time I'm not going to go over how to add more simple products or variable products since I just showed how to do each of those So just go ahead and add your different products, variable products, or simple products to your website and I'll see you on the other side So here we are on the homepage of the SuperStore e-commerce theme by WooThemes, and when I scroll down you'll notice quite a few products are now being displayed in the New Products section of the SuperStore theme There are however quite a bit of blank spaces here still on the homepage so we still have to fill all of this out

So I had mentioned that I was only going to do a demo on the simple products configuration and the variable configuration once for each of those but I think I'm going to do it one more time So let's do one more So at the top, I'm just going to go to the top, click on +New, and then I'm going to click on Product to add a product So I"m going to be adding a variable product here so I'm just going to give my product a product name Next in the description area here I'm going to add in some content here for the description

This is a womens t-shirt so in the product category on the right head side I'm going to click on Womens I"m going to give this a tag of surf since this is a surf sweatshirt, so I'll just add surf right here and click on add And then I'm going to come down here and click on set featured image to set the featured image At the top in the upper left I"m going to click on Upload Files to upload a new file Then I'm going to click on select files to select a new file

So this is called the just surf t-shirt so I'm going to select the image and click on open to start uploading this image Once the image has been uploaded I'm going to give it a title and an alternate text And I'm going to click on set featured image Okay so we're good to go so far Now I'm just going to click on save draft to save my draft

And then I'm going to scroll back down to start configuring the product data section So I"m going to make this a variable product so I"m going to click on variable product here Then I'm going to click on attributes to set the attributes So I'm going to click on the add button, this blue add button And I'm going to give it a couple different sizes here

So I'm going to give the attribute the name of size, and I'm going to add my different sizes, Say small and medium and again we're separating these with this line, this pipe symbol here Then I'm going to click on those two boxes, one to make the attribute visible on the product page and also to use these attributes for variations Once that is all set I want to click on save attributes So I also want to make sure that this product comes in other colors other than navy So the other attribute I'm going to give it is color

So here once again where it says add I'm going o click on add And I'm going to give it a name of color And then the values will be navy and I'll separate it with this pipe symbol And then I'll give a white t-shirt for example So this will come in navy or white

Actually I'll add orange too So it comes in these three colors, and I'm separating each color with the pipe symbol Then I'm going to click on this box here to make it visible on the product page and also to use the attribute for variations and then I want to click on save attributes to save the attributes Once the attributes have been saved then I want to click on variations to set up variations So the first thing we want to do here is give the product a default variation and color so I'm going to click on this and make small be the default size and navy will be the default color

Then I want to click on the add variations button to start adding my different variations So here I'm just going to make this small and any color I'm going to make this navy So I'm going to set up the small in navy first And we need to give a price for every different variation So I'm going to make this 40 right here

Again we need to change the pounds to dollars but for the moment I'll just leave that as 40 So the small in navy is set up Then I'm going to click add variations once again, and I'm going to say small in white And I'll give it the price of 40 once again You do need to make sure you give it a price because if you do not give it a price it will not show up on the product page

Okay so the next one is to add a variation one more time, then once again I'l do it in small and the color will be orange, and the price will be 40 And then I need to do it three more times for the medium size So I'm going to click on add variation, click on medium, any color will be navy, give it the price of 40 And then two more times, add variation, click on medium, click on white, and once again 40 dollars for the price, and lastly add the variation one last time I'll just make it medium, any color – orange, and this time I'll give it this price, same price, 40 dollars

And then, I want to come down to the bottom here and I want to click on SuperStore Custom Settings and I want to have this wide page version so I'm going to click on this larger box here That way the sidebar will not show up on the right and side or the left hand side, because I'm choosing the wide settings right here Then you just want to scroll up to the very top and click on publish to publish this product Once the product has been publish go ahead and click on view product by clicking on the view product link right here

And okay here we go, when I click on this it opens up into a really nice lightbox display so I can see it nicely there And then notice on the right hand side we have our different attributes being displayed here so when I click on this box then I can also choose it in a medium, and when I click on this color box here I have these different colors that I can choose Also we see here is the price, it's the same price for any of the different colors Here's the call to action, the add to cart button And here is the product description and the additional information related to the product

Then when we scroll down now because I've added all the products to the site, now we're seeing a bunch of related products down below Keeping in mind if there's a sale item it will have this kind of flashing sale sign that gets larger and smaller here in the left hand corner So that's pretty cool So it looks like we're good to go on products Let's go back to the homepage by clicking on home right here

And it looks like the next thing we need to do here is add some product category boxes Also note that right now there are only three categories showing up so I want to add one more category to kind of fill out this extra section So the next step is we have to add an extra category and we need to add the thumbnail images to each of these product categories So to do that you want to go up to the top and click on dashboard Then you want to go to the products link here, hover over that and her where it says categories, you want to click on the categories link

Here on the product categories page you can see that here are the three product categories that we have so far So first I want to add a new category So this one I want to call it the 2013 On Sale Category And then you don't have to add a slug, it will automatically be added for you And then I'm going to come down here

Display type is default I'm let's see, I"ll just add it as the default right there And then you do need to give it some kind of thumbnail So I'm going to click on this link here to upload or add an image

And then I'm going to choose something here from my existing media library So let's see, the one I want to choose I'll just make it this one And then I'm gong to click on this button here to use this image And then at the bottom where it says Add New Product Category I'm going to click on that link right here Okay, so here we see this new category was added

Let's go ahead and add product images to each of these categories right here So we need to add the thumbnail images So to do that I'm going to click on edit to edit the kids product category And here at the bottom where it says thumbnail I'm going to click on upload or add an image Then I'm going to click on choose image to use that image

And then I'm going to click on update below Okay so now we have two of the four thumbnails Let's do this two more times One for the mens, I'm going to click on edit Then here's the thumbnail I'm going to click on upload or add image

And then I'm going to select the image And then click on use image And then at the bottom I'm going to click on update Finally, I think we're getting the hang of this For Womens I'm going to click on edit

And then once again upload/add image And then I'll choose a women's t-shirt this time How about this one and click on use image And then click on update

And now we see all the different thumbnails for our product categories have been added So now let's go take a look at the homepage So I'm going to go up to the top and click on visit site And now when I scroll down we see that now the images are showing up Note however, that the fourth one is not being displayed here

So we need to configure the homepage so that it includes this fourth thumbnail So to do that we need to go up to the top and click on dashboard, then where it says SuperStore you want to click on SuperStore right here ONce you're on the SuperStore Theme Options screen you want to scroll down and you want to click on this link here that says Homepage Then you want to click on Product Categories So note that the product categories are already set to four

So we've already set that So we don't need to really change that What we do need to do though is we need to add a product to that fourth category So just to play it safe I'm going to click on save all changes just to make sure that 4 has been set Every time I come to one of these pages I always end up clicking on save all changes again just to make sure everything is set and double-set and triple-set

So what we need to do now is we need to add at least one product to the On Sale category So to do that I'm going to go to the left hand side and click on my products here by clicking on products And then I need to find the product that is on sale So it looks like this is the product that is on sale, it was originally 60 and now it's 50, so I'm going to click on quick edit right here, this quick edit link Then I'm going to add it to the category called On Sale

So we see here on the right hand side it's already in the category called womens But I want to add it also to the 2013 On Sale category So once I check that box then I want to click on update to update this particular product Now when I go to the homepage by clicking on visit site, now we see there's a thumbnail image being displayed for every one of my product categories So that's great

So we're still missing a few things here, including our featured products right here So let's go ahead and add that So to add our featured products we need to go to the dashboard once again, and then you want to click on the products link right here so I'm going to click on products And then whatever products you want to have included in the featured section you need to add them here So I want to add this Just Surf t-shirt so I'm going to click on Quick Edit

And then you'll notice there's a box here that says featured So I'm going to click on the box here that says featured And then I'm going to click on update to update this particular product And then I'm just going to go down the list and select al the different products that I want to have displayed in the featured product category, in the featured product section of the homepage, I'm going to add them here So once again I'm going to click on quick edit, here where it says featured i'm going to click on the featured box and click on update

And then I'll add this one as well, quick edit, then I'l click on featured and update And then I'm going to keep doing this, quick edit, I'll feature this as well, and then I'll click on update So I have four items that I've selected to be featured as a featured product So now when we go to the homepage by clicking on visit site, now we'll notice that we have our slider, we have our product categories, and now we see we also have the items we wanted to have in our featured section right here So then when we scroll down we have our new products, and finally we have our blog

So it looks like the last thing we have to configure on the homepage, two things actually, three things actually We need to add the blog section here, we have to configure the footer, and the last thing is at the very top there's a missing row here where we can add different links to twitter and Facebook and our phone number So the first thing is let's take care of the content section right here, the blog So we see here that we do have one blog post, this is the blog post that comes with your WordPress installation and we'll be deleting this blog post in just a moment But let's go ahead and take care of adding some additional blog posts

To add a blog post, you want to scroll to the top and click on Dashboard Then you can either click on plus New here and click on Post, or on the left hand side you can click on Post here as well Then underneath that you can add a new post by clicking on this Add New link You can also add a new post once you're on the post screen by clicking on Add New right here So I'm going to click on Add New to add a new post, then I'm going to give my new post a title

Once the post has a title I'm also going to add a description here for the post Then we can place it in a category if we like This is a blog category not a product category so go ahead and click on Add New Category right here I'll just call this blog and then I'll click on Add New Category This particular post is going to be about surfboards so I'll give it a tag of surfboard

And once again these categories and tags are related to the blog posts, not to the products So you'll have product categories and blog post categories, and you'll have product tags and blog post tags so they're two different types but they're pretty much the same thing I'm going to click on Add to add this tag The other thing is I want to add an image above my text So to add an image to your blog post I'm just going to place the cursor where I want the image to be displayed and then I'm going to click on Add Media right here to add my media

Then I'm going to scroll down and see if there's any images here It looks like this one, the same image that I used for the slider I'm going to use that again for my blog post by just clicking on it right here to highlight it Then notice here on the right hand side we can add the alignment to be left, center or right I'll just click on center Then we can link it to a media file, an attachment page, a custom URL, or nothing

I'm not going to link this image to anything I'm just going to click on none Then you see that here when I click on the size you can select what size you would like the image to be, whether a thumbnail, a medium size, large or full size I'll just click on large to see how that one displays and then I'll click on Insert into Post Here we have my image right here The next step is I want to scroll down and I want to set the featured image

I'm going to click on Set Featured Image and I'm going to pull the same image to be the featured image The difference between the featured image and the image within the blog post, I'll show you what that looks like in just a moment Here is the featured image, I selected it and you want to click on Set Featured Image So there you go, now we have the featured image Then we're just going to scroll down, it looks like I can't scroll down any further and I'm just going to scroll back up and I'm going to click on Publish to publish this post

Now let's take a look at the post When I click on View Post here we see the image within the blog post but when I go back to the home page you'll note that the featured image is also now being displayed on the home page I'm going to click on Home right here, and when I scroll down we'll see here is the featured image for this blog post This is the featured image and then when you actually click on the blog itself the blog title, then you'll note here is the image that you inserted into the actual post I'm going to add one more blog post

You can also notice when I scroll down there's an about the author section here Then here is the comment section as well Let's add one more blog post so I'm going to go to the top and click on Post Then as we did before I'm going to give my new post a title so I'm just going to add my title in right here Then in the description section I'm going to add some content right there and this time I want to add an image gallery, not just one image but a number of different images

I'm going to click on Add media to add my media and then once we add on the media screen we want to click on the Create Gallery link right here on the left hand, top side I'm going to click on Create Gallery to create my gallery Then you want to select the images that you want to have included in your gallery so I'm going to add this shirt, this shirt and let's see maybe this shirt right here Then I'm going to click on Create a New Gallery Here are the items that will be included in the gallery

If you would like to reverse the order, or change, or move things around you can just simply drag them You'll see here you can just drag however you want the images to be displayed You can just do so like that I'm going to keep it like that and then on the right hand side you can see if you want to have three columns and I have three items I would like to have three different columns but you can select however many columns you want to have displayed right here

I'll keep it at three and then I'm going to click on Insert Gallery to insert the gallery So okay now that we have the title, the gallery, and the description here I'm going to add it to the category called blog right here and I'm going to call this also Surf T-shirts I want the tag actually to be surf t-shirts not surf and t-shirts so I'm not going to put a comma in between these two If I add a comma, then I'll have two tags One tag would be surf and the other tag would be t-shirts so I'm just going to leave it as one big tag right there and click on Add

Next I'm going to come down here and I'm going to set the featured image by clicking on Set Featured Image Then I'm going to upload an image by clicking on the Upload File link right here on the top left Then I'll click on Select File to select the file and I'm going to find the file that I need here I want to add this waves image right here, so I'm going to highlight the image Highlight the file and click on Open

Here we have the file that I want to use Once again I'm going to give it a title and I'm going to give it an alternate text and click on Set Featured Image Then I want to click on Publish to publish this post Now the post has been published however the gallery is not set up quite the way I want it set up For example if you just check out the post right now the gallery is just going to lead one image will go to its own image page

What I would like to have is I want to have the gallery be displayed in a lightbox so that when you click on the image the images stay on the blog post Before we can actually check out to view the post and the gallery, let's go add the light box to the site We need to add this plug-in called Jetpack so I'm going to go to the left hand side and click on Plug-ins, then at the top of the plug-ins screen I'm going to click on Add New to add a new plug-in The plug-in we're looking for is called jetpack so I'm going to do a search for it right here Then I'm going to click on search plug-ins to search for the jetpack plug-in

Here we see it's at the top it's called Jetpack by wordpresscom I'm going to click on this link here to install now Are you sure you want to install this plug-in? Yes, okay Once the plug-in has been successfully installed you want to click on this link that says Activate Plug-in

Okay your jetpack is almost ready, however a connection to wordpresscom is needed to enable the features We need to connect the plug-in to wordpresscom so I'm going to click on this button here that says Connect to wordpresscom

Here we see we need to connect the website with the plug-in and with wordpresscom The good news is that wordpresscom is free so if you do not already have a wordpresscom account you can go ahead and click on this link right here that says Need an Account

Then you'll see here on wordpresscom all you have to do is add your e-mail address and create a username and password, and then you click on Sign Up to sign up for wordpresscom Once again the good news is that wordpresscom is free

Once you've created your wordpresscom account then you want to go back to the page here where it says connect the website with jetpack and with wordpresscom I already have a wordpresscom account so I'm just going to add my username here along with my password

Then I'm going to click on Authorize Jetpack to authorize jetpack Okay you're fueled up and ready to go, the features below are now active Click the Learn More buttons to explore each feature The cool thing about jetpack is that with jetpack you get a number of different features you can add to your website to enhance the functionality of your website When you scroll down you can see all these different features that you can now add to your website

The one that I want to add here is called Carousel and it's here on the left hand side I'm just going to click on Activate to activate the Carousel The Carousel has been activated so this now allows that gallery that we just created in the blog post, it will now allow the images to be featured in a light box We'll look at that in just a moment The other thing that I do want to add since we're on the jetpack screen is that I'd like to add jetpack comments

Jetpack comments as you can click on here Learn More it gives your comments kind of extra functionality so that when anyone wants to comment, they can use their Twitter or Facebook accounts when they're commenting on your site I really love this commenting feature function here so I'm going to click on activate to activate jetpack comments Okay so now let's go on the home page and take a look at our home page so far I'm going to go to the top and click on Visit Site Here we see we have our slider, we have our product categories, our featured products our new products and now when we scroll down we see that we are starting to see a semblance of a blog post right here

Then when I click on my latest post right here I'm going to click on the title right here Here you'll see we have our different images and then when I click on each one of them it opens up into a really cool, really nice light box display That is how you add an image gallery with a light box to your blog post Also note when you scroll down to the comment section right now when it says Leave a Reply and when I click in the Enter Comment Here box now you can see that I've already logged in so I just have my little image here and its says that I'm commenting using my katrinahcom account

If someone else has not yet logged in they also have a way to leave a comment with their Twitter or their Facebook account That's a really cool extra feature Now notice here there's an author section and this is not filled out Let's take care of filling out the author's section here To do that you want to go up to the top right hand side and you want to click on Edit My Profile underneath your username

Then you want to scroll down to where it says Bio about yourself a bio, and then you want to add some information about your bio I'll just write this is my bio and this is something about me My bio will show up in the author's section on any blog post I write Please visit my website and I have the actual website domain name Then I'm just going to add that in this About You, this biographical info section

I'm going to come to the bottom and I'm going to click on Update Profile to update the profile Now when I go to the blog post by clicking on Visit Site and scrolling down to the blog post here and clicking on the title of the blog post, now we see when I scroll down here there is some information showing up in the author's section right here The next thing that we need to do on this site is that when we go to the top, notice that the bar is not showing up here We have an extra row that we can add here with different links like Facebook, Twitter and your phone number Let's add that now

I'm going to go back to the dashboard by clicking on Dashboard Then once you're on the dashboard you want to click on superstore on the left hand side So I'm going to click on SuperStore to go to the theme options screen of the superstore theme Here on the superstore theme options screen you want to scroll down and where it says subscribe and connect we want to click on set up Then here I want to click on this link here that says enable subscribe and connect on the single post so I'm going to check this box

You can leave a subscribed title if you'd like to enter the title to show in your subscribe and connect area I'll just say connect on the web Then I'm going to have this one as checked down below as well and then I'm going to click on Save All Changes to save the changes Next I want to go to the subscribe settings here and you can either add an subscribe by e-mail ID, a feed burner ID here or if you have a Mail Chimp account you can add your Mail Chimp subscribe URL and you can just click on this right here I'm going to leave this empty for the moment I just wanted to point these two different options out

Next I'm going to click on connect settings right down below and the subscribe and connect sections I'm going to click on connect settings; I am going to uncheck this because I don't use RSS much anymore I'm not sure it's kind of not as popular as it used to be If you'd like to keep it though go ahead and leave it checked I'm just going to fill out all my different social networks here

I'll add Twitter, and then you can add Facebook, also just keep in mind you want to start with http://, and then it would be like facebookcom/ and then whatever your URL is after the Facebook domain I'll also add YouTube right here I'm not going to add all of these accounts, just a few of them right here Add YouTube, you can also add Flickr, LinkedIn, Delicious and your Google Plus URL

Once you have that set up the way that you like go ahead and click on Save All Changes just to save the changes Then I'm going to scroll down here You can add an ad if you like by clicking on Advertising I'm not going to do that I don't like to have ads on my site but if you'd like to do that this would be the section where you can add an ad I'm going to go directly to the contact page here by clicking on Contact Page

This is where let's see, enable contact information panel You can enable the contact information panel so I'm going to click on this Then this is where you can add your location, name, your address, your telephone, your fax number and so on I'll just add a fictitious phone number here for the moment- 1,2,3,4,5,6,7 I'll do the same thing with the fax 800-567-8900

Then you want to add a contact form e-mail so I'll add my e-mail in here Then you can add your Twitter name so I'll put my Twitter name right here Okay and then if you want to enable the subscribe and connect functionality of the contact page template you can do so as well by checking this box I am going to check that box and when you're all done you just want to scroll to the top and click on Save all Changes Then let's see, you can also add maps on your contact page if you like to by clicking on this link here to add a map

Here you can add the coordinates for your Google maps You can find out more about that by clicking on this link here that goes to Google maps I'm not going to add a map to my contact page, I'm just going to leave it as that and then I'm going to the site and click on Visit Site to visit the site Okay so we see that the top row is still not being displayed and when I scroll down let's see what else is going on down here We do see however that now in the footer, all of the information is being displayed down here

Let's take care of getting the top row situated here and also note that our menu items are not how I want them to be These are the default menu configurations, let's go ahead and change the menu here and also add the menu right up here at the top To change the menu I'm going to go to the left hand side here, hover over the website name and then I'm going to scroll down here where it says Menus Here on the menu screen tab you can just create a new menu by giving it a name, I'll just call it menu Then you want to click on this blue button here that says create menu

Then you'll notice that this theme supports two menus so we need to select which menu appears in which location I'm going to have my regular menu right here and then I'm going to click on this plus sign to add a new menu here, so I'll add another menu, I'll call it top menu Then I'll click on Create Menu so now I have two different menus, one is called menu and the other one is called top menu Then the second step is I need to actually set them right here in the theme location section The primary menu I'm going to call menu and the top menu I'm going to call top menu

so I have them configured like that and then I'm going to click on Save to save the menus Now I have the menus Now I have two menus however there's nothing in the menus so we need to just start adding some pages to the menu I would like to add in the top menu section let's see we have not created any pages yet so I'm going to go directly to the actual menu I'm going to click on Menu and we can at least add a few items to the main menu right here

I want to add a link that says Home, so this will actually be to my website home page I'll just put the domain name there, I'll call it home and I'll click on Add to Menu and then you'll see it pops up right there The other items that I want to add are my product categories We notice that here are the blog categories but we don't see the product categories right here If you don't see product categories, you have to come up to the top, click on screen options right here, and then you have all these other different things that you can display on your screen

The one that I want is called product categories so I'm going to check this box and then I'm going to click on screen options once again to collapse this particular section Now when I scroll down I see I also have product categories I want to add all these different categories to my menu, that will make it really easy for anyone who comes to my site to easily find different products within my product catalogue I'm going to check on each of them and click on Add to Menu and then I'm going to come up here and I'm just going to configure it the way I would like Instead of calling it Womens I actually want to call it Shop Womens

I'm just going to add the word shop there and then I'm going to scroll down and I'm going to call this Shop Kids The actual category name is called kids but I'm just adding the label here that says Shop Kids Then finally it will say Shop Mens and then last one I want to say 2013 on Sale, I'll call it Shop our Sales Actually I'll just call it On Sale, okay like that Now what you want to do is you just want to click on Save Menu to save the menu

If you do want to rearrange any of these you can easily do so by just dragging these up like that, drag them up If you want to actually make a submenu you can actually indent it a little bit like that I'm not going to indent it though I'm just going to leave it like that Shop women's, shop kid's, shop men's and then sale- then you just want to click on Save Menu to save the menu We've set up the main menu right here but we see that there's nothing in the top menu

Let's go ahead and take a look at the website so far and then we'll come back and add some pages that we can then add to our top menu When I go to the top I click on Visit Site Now we see we do have our top row showing up here but there are no extra pages, so we need to add a few pages right here Then you do see that now the menu is looking pretty nice too I have my different menu items right here

I'm going to go back to home so let's go ahead and create some pages To do that I'm going to go up to the top and click on dashboard and this time I'm going to go to pages and I'm going to click on Add New The first page I'm going to create is an about page about the company I'm just going to call it About and then in the description box I'm going to add some content Like we did before I want to add an image right before the actual text

I'm going to place the cursor right before the L in the first word and them I'm going to click on Add Media to add some media Then I'm going to click on Upload Files to upload a file and click on Select Files Then I need to select the file so I'm going to click my file here and click on Open Now here we have the image that I want to have displayed on the About Page I'll just call this the name of my website, my website domain and I'll add my alternate text as well

Then note this is an important part to add right here it says Attachment Display Settings and you can set the alignment I'm going to keep it left aligned so I'm going to click on Left right here I'm going to link it to nothing so I'm going to click on None Then you'll notice when I click on the size I can have a thumbnail, medium or full size I am going to choose a medium size right here, 300 x 285

Then I'm going to click on Insert into Page Here I have the picture as well as the content, and I'm going to actually add a little bit more content here to just fill that out a little bit Then we'll see here on the right hand side we have our page attributes so I'm going to keep this as a parent page that means, it's a top level page Then when I click next on template here, when I click on this we'll see there's tons of different options here for this particular page I do not want to have a sidebar on the about page so I'm going to choose a full width page by clicking on Full Width right here

Next I'm going to scroll down and I'm not going to create a featured image for this page, I don't really need it I think I'm good to go I will click on this wide layout here just to make sure We did already choose full width so we don't need to do that but just as a double check I'm going to click this too Once you have all of that set you just want to click on Publish to publish this page

Okay so the page was published To view the page I'm going to click on View Page and here we have my about page That looks pretty good The next thing that we need to do is we need to create another page, I also want to add a blog to this website To do that I need to add a new page by clicking on plus New and clicking on page to add a new page

This time the new page is going to be called Blog just like that and then instead I'm going to leave it blank, I'm not going to add anything here It will be empty Then on the right hand side where it says page attributes in the template section I'm going to click on this and I'm going to choose blog You can choose either a regular blog or a blog with a grid I'm going to choose a regular blog right here

Now the template for this page is simply blog I'm going to leave it like that and then I'm just going to click on Publish to publish this page The next page that I'd like to create is a contact page so anyone can easily contact me via the website The last page I want to add is a contact page Once again I'm going to go up to the top, over plus New and click on Page and this page I'm just going to once again call it contact

Then on the right hand side I'm going to click on template and I'm going to choose this link here that says contact form and then I'm going to click on publish to publish the page Now when I click on View Page to view the contact page we see here I have my contact page set up with my telephone number, my fax, my e-mail address, my different social networks here, and there's a form here where anyone call fill out their name and email and a message Then they can click on Submit to submit a message to me directly through my website That looks good so far Now let's take the three pages we've just added- the about page, the blog page and the contact page

Let's add them to the links here in the top menu bar To do that you want to go to the menus by hovering over the website name at the top and clicking on Menus and then here you want to click on the top menu because you can see that the regular menu has already been configured I'm going to click on top menu and then I'm going to add the pages right here on the left hand side I'm going to check the page that I want to have displayed, the contact page, the blog and the about page and then I'm going to click on this button that says Add to Menu Then you just want to organize this how you would like it to be displayed

I would like the about page to come first and then the blog page to come second, and then the contact page So I'm just going to drag them around like that Then I'm going to click on this button here that says Save Menu Okay so the top menu has been updated so now when I go to the top and click on Visit Site, now we see that these different pages are now listed in the top right hand corner I have my phone number, fax number, Twitter and Facebook links, I have my menus so let's see what else do we need to add to this site

Here we see that I still have some widgets that I need to have configured so let's take care of the widgets next To take care of the widget you want to go to the top left hand side You can either click on dashboard to go to widgets or you can go directly to widgets by clicking on Widgets right here I'm going to click on Dashboard and then I'm going to hover over appearance and when you hover over appearance you'll see that widgets pops up once again I'm going to click on Widgets right here

Widgets give you a way to add customized content to your sidebar Here on the right hand side you'll see the different sidebars that come with the superstore e-commerce theme by woothemes We have a primary side bar which is the default sidebar Then you have several footer sections here and then you have the home page sidebar With this theme you can configure the home page in two different ways

Either by clicking on superstore and going to the theme options page which is how we have configured the home page or you can use the home page widget right here I am not going to use this homepage widget but I am going to configure the default sidebar also known as the primary sidebar These are all the different widgets that come with your installation of WordPress I'm not going to use these; I'm just going to drag them over to deactivate them I'm just going to drag these over and get rid of them so I don't want these

In their place I will keep this search, actually I don't want to keep this search either because this is the search of the entire site What I would like instead of search is a product search There's two different things, there's search of all the content of your site and there's a product search Since this is an e-commerce website I just want to give people a way to search for products so I'm going to move that over to deactivate it as well Then I'm going to scroll down and I'm going to look for the product search widget let's see where that's located

It should be a Woocommerce widget Here it is Woocommerce widget product search, a search box for products only I'm going to take that and I'm going to drag it to the top Once I have it here I'm going to release it right here in my primary sidebar and I could give it a title Search for products and then I'm going to click on Save

The next widget that I'd like to add here is the shopping cart I'm going to scroll down once again All of these different widgets are all options that you can add to your sidebar You just kind of need to use whichever one you want to display We have let's see there's some superstore widgets and most importantly I really love all these WooCommerce ones

You can feature the bestsellers, the cart, the featured products You can feature your on sale products or you can give it a price filter The next one that I want to feature would be the WooCommerce cart Display the user's cart in the sidebar so I'll drag that one up to the top I'll release it right underneath that so we'll just call that cart and then I'll click on Save

Then the last thing that I want to feature are the actual featured products I'm going to grab this one right here WooCommerce featured products I'll just add that one as a demo Go to the very top and then right underneath the cart I'm going to drop that in and then I'll call this featured products Then you can specify how many featured products you want to have displayed I will display four of them and click on save

Now when we go to the website by clicking on visit site and then when I scroll down to the sidebar now we'll notice these different items are now customized within the sidebar This is all custom content that we have reconfigured for the sidebar The next thing that we need to do down here is we notice that there's nothing in the actual footer section To configure the footer section you want to go up to the dashboard so I'm going to click on Dashboard You want to click on superstore to go to theme option screen

Then on the theme options screen you want to scroll down and you want to click on Footer Customization right here Here you can select how many footer widget areas you want to display Here's one footer area, two, three and four I will add three right here so I'm going to click on this link right here Also note that there's some other things that you can add here as well

I'm not going to touch any of these but you can just kind of look them over and read through these and determine if you want to use these I'm not going to use them I'm just going to select how many footer widget areas I want and then I'm going to click on Save All Changes Keeping in mind that I've selected three widget area Now I need to go back to the widgets and add the widgets in the footer I'm going to go to the left hand side where it says appearance and click on Widgets

Here on the widget screen, the first thing I want to do is I want to add a widget to footer number one I'm going to open this up by clicking on this carrot, then I'm going grab some text I'm going to look for the text widget The text widget enables you to create custom text content in the widget area I'm going to grab this one that says text and I'm going to drag them up to the footer one area, footer one widget I'm going to drop it in there

I'm going to call this about our store Then I'm going to grab just drop in some content there This is a short description of our online store- what we sell and why we got started doing this and there maybe a call to action to check our products or contact us I will add the button, the call to action button in just a moment Right now I just want to save this by clicking on the save button and I'll close it

Then I want to add some content to footer two and three I'm going to open up footer two and footer two I want to add the Flickr widget I'm just going to scroll down here and look for the Flickr widget Here it says Woo Flickr This Flickr widget populates photos from a Flickr ID so I'm going to grab that and add that right here where it says Flickr widget

What we need to do is we need to get the Flickr ID I'm going to click on this link, the ID getter link Here this is a great little tool that lets you easily find your Flickr ID so you can add your Flickr photos to your superstore e-commerce website Here I'm just going to add my user name right here Then I'm going to click on Find, then I'm going to go back to my website and I'm going to drop in the ID provided by the ID getter

Here in the Flickr ID getter I'm just going to pop in the ID number right here Then you want to specify how many photos you want to have displayed I want to display six photos and then you can choose the type I'll just say this is user, you can sort them from latest to random I'll just leave it at the default of latest You can also specify what kind of size you want

I'll just keep it at square Once you have this set up you want to go ahead and click on Save to save your changes The last one that we want to fill out is footer three I'm going to open that one up and here I want to find my featured products because I'd like to feature the featured products on the third footer section I'm just going to scroll down here and where it says Woocommerce featured products on the third footer section

I'm just going to scroll down here and where it says Woo commerce featured products I'll just drag that one up to the third footer widget area I'm just going to drop that in here and I'll call it featured products and I'm going to add five products right there I'm going to click on save to save this particular setting Now let's go check out the website I'm going to go up to the top and click on Visit Site and now when I scroll down all the way to the bottom now we see here we have the footer section all configured

We have a couple of things to do, I want to add a button here and I'm also going to add a button in the about page Let's go to the about page first by clicking on about and then I'm going to click on Edit to edit this page Then I'm going to scroll down to the bottom and I want to add a call to action button right here on the about page that goes to the contact page To do that I want to add a button here so I'm going to click on this blue icon here that says Insert Woo Theme ShortCode There's two different Woo items here, there's one on the left that says Insert ShortCode and there's on here that says Insert WooTheme ShortCode so I'm going to click on the blue icon here and then I'm going to click on button

Then here in the title I'm just going to call it contact us, contact me and then I'll include a link Now you can include any link to any page you want but I'm going to include a link to my contact page and I happen to know it's the domain name and then a forward slash and then simply contact I'm going to make this a large button and I'm also going to specify the background color and the border I happen to know the code for the blue that I want is the blue color it's the code right here It's a pound sign 2AB6d6 so I'm going to add this code for both the background color and the border

Then I'm going to click on Insert to insert this button WordPress is really great like that you just added your different settings you like and then WordPress will just automatically generate the code needed to make that button happen which is really great You don't need to know any code This is the same code that I want for the widget so I'm going to copy it here I'm going to highlight all of that and copy it

I just copied this section here Meanwhile I'm going to click on Update to update the page with this new button I'm going to click on Update Now I'm going to go to check out the page by clicking on View Page Now we scroll down we see here's our button right here that says contact me and it's the same color as the other blue colors in this particular website

When I click on this it goes directly to the contact page so that's really cool What I want to do now is I want to go back to the widget area here at the bottom and I want to add the same contact button right below this text Remember I just copied it so I'm just going to go back to the widget area by clicking on widget right here And then on footer one I'm going to click on this little carrot and then I'll click on this one for about our store Then remember that I just copied that button code so I'm going to past it right here underneath this text

Then instead of saying contact me could actually say shop now or shop for products If you do that then you just have to add a different shop link right here in between these two quotation marks I'm just going to keep it at Contact Me and then I'm just going to click on Save to save the changes Once all of the different widgets are set up for the footer we're really just down to a few more things before the website is completed Next let's take care of setting up the payment method as well as setting up the shipping for the e-commerce site

To do that I'm going to go up to the top here and then where it says WooCommerce I'm going to click on WooCommerce right here Here we can see the orders page but what I really want is I want the settings I'm going to click on settings right here underneath Woocommerce and here you see the settings page for all the different pages of the Woocommerce sites There's a general tab, catalog, pages, inventory, tax, shipping, payment gateways, e-mails and integration First thing we want to do is we want to change pounds to U

S dollars since I'm in the US not in the UK

You notice right here it says United Kingdom so you just want to click on that and you just want to choose whatever country you are in I am just going to choose US and I'm in California so I'm going to click on this right here- US

, California Then for the currency I want to choose dollars instead of pounds so I'm just going to scroll down here and look for dollars Click on dollars right there Allowed countries- all countries, okay that's good And yes I do I want to enable the use of coupons and we'll create a coupon in just a moment as well

I usually leave the rest of these default settings set the way they are, those usually work well for me I'll just leave all like that and I'm going to scroll down here and I'm just going to click on Save Changes to save the changes Next I want to set up shipping So here over on the shipping tab I'm going to click on Shipping and here you see all the shipping options that you can choose on the shipping options page So yes I want to enable shipping and I do not want to have a shipping calculator on the cart page but if you'd like that you can keep that checked

I'm going to uncheck that, then I'm going to scroll down here and you can see here on the right hand side that free shipping is currently enabled For e-commerce sites it's always good if you can, to offer free shipping because it's one less thing that customers have to worry about and it's often a good incentive for them to purchase from your e-commerce website I am going to keep it as free shipping and I'm going to set the default to free shipping by clicking on this button right here and then I'm going to click on save changes to save the changes Now note that if you prefer to have flat rate shipping, or international delivery, local delivery, or local pick-up those are some other shipping options that you can choose And if you want to set that up you would just click on flat rate for example and then you would want to click on Enable Shipping Method to enable the flat rate shipping method and then you would scroll down, and you could either put the cost per order directly right here

So if you wanted it to be say $10, you would just put 10 right there and then you can come down here and you can click on Save Changes Also notice that on this page as on some of the other pages there are all these question marks And if you hover on top of them it will give you a little tool tip that tells you exactly what the field does For example when I hover over this question mark it says, enter a cost per order example $5 or leave blank to disable If you ever forget what these different fields do you can just hover over the question mark and it will tell you so that's really a great feature

One more thing about this once you save the method, I'm going to save it right now as an example If I wanted it to be flat rate shipping of $10 I would just click on save and then I want to go back to shipping options but now there are two different statuses that are enabled- flat rate and free shipping If you only want flat rate then you would have to click on flat rate here to make this a default and click on Save Changes And then second you have to go to the free shipping page and you have to disable the free shipping You have to go to free shipping, and then here where it says enable free shipping you'd have to uncheck it and then click Save Changes

Now when I go back to the shipping options page by clicking on Shipping Options now you'll notice that there's only one status right here the flat rate As mentioned I want free shipping however I'm going to reverse everything we did for flat rate I'm going to click on Free Shipping, click on Save Changes, then I want to go to free shipping and I want to enable it I'm going to go to free shipping and click on Enable Free Shipping and click on Save Changes Then I'm going to go to flat rate and I'm going to disable the flat rate shipping

I'm just going to uncheck it and I could also delete this number here Then I'm going to come to the bottom and click on Save Changes Just to make sure we have everything set I'm going to click on Shipping Options again and here we can see that free shipping is enabled and it's currently the default setting for my shipping method We're good to go on shipping The next thing is let's go create a coupon

Here on the left hand side underneath woocommerce there's a link here for coupons so I'm going to click on that right here Here we are on the coupons page so I'm going to click on Add Coupon to add a coupon Here on the add new coupon screen I'm going to create a coupon code so I'll call this SummerFun You can give your coupon a description, this is really optional it's for your own reference You can choose what kind of discount type you want either a cart discount, a cart percentage discount, product discount or product percentage discount

Then you can decide what the value of the coupon will be I'll make this $5 so it will be $5 off Also note that you can create coupons for free shipping, for individual use You can exclude sale items, there's all kinds of different specifications to really kind of narrow down on exactly what the coupon is for It's for a certain product or excluding products, so you just want to read through all the different options here and choose create a coupon that is the kind of coupon that works the best for you

For me right now this is going to be a really simple coupon, it's just $5 off the cart at large The coupon code is going to be SummerFun I'm going to click on Publish to publish this new coupon Okay so the coupon has been updated The last thing we want to do is we want to set up the payment method

To do that I'm going to go to the settings right here under WooCommerce, I'm going to click on Settings Here on the settings page I'm going to click on Payment Gateways We can see that the payment gateways by default, the direct bank transfer is enabled, the check payment is enabled and PayPal is enabled I want to remove direct bank transfer and check payment, so to remove them I need to go first to BACS, that's the bank transfer and I need to click on that Here where it says enable bank transfer I'm going to uncheck it, and then I'm going to come to the bottom and click on Save Changes

Then I'm going to click on Check right next to it and I'm also going to disable the check payment option so I uncheck that post and click on Save Changes Now we see when I go back to my payment gateways right over here we now see that the only payment gateway that's enabled is PayPal So I'm going to click on this button here to make PayPal the default and then I'm going to click on Save Changes at the bottom Also notice that there are other payment methods that you can use For example there's cash on delivery or there's the credit card option right here through Mijirah

I might be pronouncing that wrong so you just want to click the box here and click this radio button, and then click on Save Changes if you want to enable any of those other ones Then you want to set them up on each of these different pages I'm just going to use PayPal for the moment because this is the easiest payment method to set up and I already have a PayPal account The next thing we need to do for PayPal is we need to click on this link here that says PayPal and here on the PayPal settings page you notice PayPal is enabled because there's a checkbox here Then here you want to add your PayPal e-mail so I'm just going to add my PayPal e-mail right here and you can also add your receiver e-mail if you like

I'll just put the same e-mail okay Then I'm just going to come to the bottom here and let's see I'm going to disable the PayPal sandbox that's just used for testing so I'm going to uncheck this box Then I'm going to click on Save Changes to save my PayPal method settings It looks like PayPal is all set up The good news also with PayPal is that a customer does not have to have a PayPal account in order to use PayPal to pay for any of the products on your website

They can sign in as a guest, they don't have to have a PayPal account So let's take a look now at the website is all set up There's also two other options here too let me click on these I'm going to click on e-mails, so here we have the e-mail sender options and as it notes at the top it says, "The following options affect the sender, the e-mail address and name used in Woo Commerce e-mails So you want to set up your from name here as well as your e-mail address if it's not already configured and then come to the bottom and click Save Changes

I'm going to leave the defaults here, those look good to me and I just want to look quickly at integration as well This is an important one to point out If you are using Google Analytics and I recommend that you use Google Analytics so that you can track the site activity and you can get a better sense data wise of what's happening on your website Where people are coming from, what pages people bouncing off from Google Analytics is a really great tool

It's a free service provided by Google that generates free detailed statistics about the visitors you have on your website You can Google, Google Analytics and you can sign up for the free Google Analytics service and then you can come back to this page and then you can paste in your Google Analytics ID right here and then you can click on save changes to set up Google Analytics on your site The other place you can add Google Analytics is by going to SuperStore here on the left hand side, I'm going to click on that In the general settings of superstore theme options so I'm right here on general settings When you scroll down you'll notice there's a tracking code box here where you can also paste your Google Analytics tracking code

There's two places within this superstore e-commerce theme where you can add your Google Analytics code Once you add it here you can click on Save All Changes That's just something with Google Analytics and finally I just want to comment on this message that's here WooSEO and sidebar manager have been removed so for your SEO needs we encourage you to use WordPress SEO plug-in so I'm going to add that now just to show you how to do that I'm going to go to plug-ins, click on Add New this is really great SEO plug-in this is called WordPress SEO by Yoast

You just want to click on Yoast and then you just want to click on search plug-ins and it's a second one here it's called WordPress SEO by Yoast you can see it almost has 5 stars I'm going to click on Install Now you can also click on details to learn more about this particular plug-in but it's awesome So I'll just click on that right now You see when I click on details you see that it has been downloaded 4,000,000 plus times and it has pretty much a five star rating so this really an awesome SEO plug-in I highly recommend you install this

I'm going to click on Install Now and once the WordPress SEO by Yoast is installed, you want to click on Activate to activate the plug-in You're going to get this message that says, "Do you want to allow tracking or do not allow tracking," and as it notes here it says, "You just installed SEO by Yoast please help us improve it by allowing us to gather anonymous usage state so we know which configurations, plug-ins and themes," I'll come back this later I'm not going to allow tracking right now I'm just going to close that Now when you see when I go back to the superstore by clicking on SuperStore now I've already added this plug-in so I can close this message, I don't need this anymore So I'm going to close this message I've taken care of that

Are you sure you'd like to close this banner, yes I would because I've already taken care of that plug-in Now let's go to the website and check out the checkout process We go to the top, click on Visit Site and here we are on the home page of our superstore e-commerce theme by WooThemes Now we completed setting up the website so congratulations if you made it this far Let's go ahead and add a product to the cart so we can see what the purchase experience is like for a customer

We also have to delete this post by the way This is the default post that comes with the WordPress installation I'll do that later but anyway to add a product I'm just going to click on Shop Womens and I'm going to add a product to my page Let's see I'm going to add this sale product right here I can add it directly just by clicking on add or I can go to the product page

I'll click on this and we can see that this is the one size fits all type kind of shirt there's no sizes or colors here When I click on additional information as it notes here it says one size fits all I'm going to add this one to the cart, this was originally $60 on sale for $50 and I'm going to add one more item as well so when I scroll down you'll see here's my other related products I'm going to click on the one that says Just Surf and I'm going to add the Just Surf t-shirt as well to my shopping cart Here you see that this one is $40 and I can choose all these different sizes, small or medium so I'll choose a medium

I can choose these different colors, I like navy so I'll go with navy Then I'm going to click on this button here that says Add to Cart so I've added two items to my shopping cart And we can see that right here it says two, and when I hover over that there's a thumbnail of what the two items are that I've added to my cart I'm just going to click on view the cart by clicking on View Cart and here we are on the view cart page so when I scroll down also keep in mind right now I have a sidebar it's usually not a good idea to have a sidebar on a shopping cart because you don't want to have anyone be distracted from completing the purchase process Let's edit this page I want to get rid of the sidebar on the shopping cart

I'm going to go up to the top, click on Edit Page and then I'm going to scroll down to the bottom here and I'm going to select the general settings, the layout I want it to be this large layout with no sidebar so I'm going to click on this large layout Then I'm going to click on update to update this page Then I want to click on view the page and go back to my shopping cart experience so that looks so much better Now the sidebar is gone and I'm just completely focused on my product which is actually what you want to have on an e-commerce website

Okay great we have the thumbnail, the title, the price, the quantity $90 is the cart subtotal, notice I have free shipping so the order total is $90 and I do want to apply the coupon that we created so I'm going to add that here Summer Fun I'm going to click on Apply Coupon, now we see when I scroll down now the order total is $85, it was originally $90 but I got my $5 off right here so the order total is $85 I'm going to proceed to check out by clicking on Proceed to Check Out and once again we have the sidebar here which I do not want on my checkout page I'm going to go up to the top and click on Edit Page and as we did to the cart page I'm going to just scroll down here to the layout, click on the wide layout with no sidebar and then come up to the top and click on Update to update my checkout page

Then I'm going to click on View Page to continue the process and once again now we see the sidebar has been removed and here's my checkout page Here on the check out page, then the customer would just add in their billing address and if they'd like to ship to the billing address they can click that and if not they could just uncheck it and they would have to specify their shipping address so I'm going to keep that checked Then they could add in any additional notes related to the delivery of the order Then on the right hand side they'll see their order totals right here We see its $85 with a coupon and the free shipping and as it notes PayPal is the payment method that we have set up

As it notes here, pay via PayPal You can pay with your credit card if you don't have a PayPal account which is great So I'm going to click on Place Order to place the order Once you click on place order you'll then be directed to the PayPal page where you'll have your order summary on the left hand side and then on the right hand side a customer can choose how they want to pay They can either pay via PayPal by signing into their PayPal account here or if they don't have a PayPal account they can click on this link right here and they can pay with either a debit or a credit card by then filling this information right here and then coming to the bottom and clicking on review and continue

That gives your customers two different ways to pay for your products on your site when you have your site configured and set up with PayPal There you go how to set up Superstore, the E-commerce premium theme by WooThemes I hope this video was helpful to you in setting up your e-commerce website and if so, feel free to leave a comment below or like the video And of course if you have any friends who need an e-commerce site or who are looking to build an e-commerce website be sure to share this video with your friends Finally I'll be coming out with more videos as well so to keep updated on new videos that come out related to WordPress, online marketing, web marketing and other things related to e-commerce be sure to subscribe to my channel on YouTube for more updates

Thanks for watching I'll see you on the next video

Free Email Updates
We respect your privacy.

Recommended

affiliate marketing 2018

affiliate marketing