[? Music ?] [Treehouse Workshops]

Hi, welcome to this Treehouse workshop.

My name is Zac, and I'm the WordPress teacher here at Treehouse Island.

In this workshop, we're going to learn how to build an e-commerce site

using WordPress and WooCommerce, the e-commerce plugin from WooThemes.

Let's start off looking at the WooCommerce page on WooThemes.com.

We can see here that it lists itself as an e-commerce toolkit,

and we can see some information about it including admin and reporting,

shipping and tax information, products and inventory,

payment gateways, and themes and templating.

What we'll do to start off with is we're going to make sure that WordPress

is set up properly before we install this plugin.

To do that, we're going to start with a fresh install of WordPress,

which we can see here, and we're going to go ahead and activate

the WordPress 2012 theme.

Depending on when you're watching this video,

this theme may already be installed, or you may have to configure it yourself.

If the 2012 theme is not installed, you'll have to go ahead and do that.

To do that, we'll go under Appearance, Themes,

install themes, and search for 2012.

Once we find that theme, we'll go ahead and install it

and then activate it, and then we're going to go ahead

and create some basic content here.

We're going to make a homepage,

we're going to make an about page, we're going to make a contact page,

and we're going to make a page for our blog.

Let's go into Pages.

We'll go ahead and trash the sample page that we have here,

and we'll add a few new pages for the home,

About, Contact, and then the Blog page,

and you can see we're not adding any content here, which is okay,

because we're not really concerned so much with what's going to go on these pages

as much as we are concerned with getting WooCommerce and the e-commerce

functionality set up, so we want to have these pages here,

and if this was a real site we'd go ahead and add more to it later.

Once we have our pages set up, we're going to do one more thing,

and we're going to bulk edit these,

and we're going to turn off comments to all of our pages.

We'll say do not allow, go ahead and update,

and now we're done with our Pages section.

The next thing we're going to do is we're going to set up a static homepage,

and we're going to make sure that our blog posts are listed on our blog page.

To do that, we'll go under Settings, click on Reading,

and then where it says "Front Page Displays" we'll click on the static page,

set our front page to be the home page, and then our post page to be blog.

Save these changes here.

The next setting that we'll do is we'll go ahead and set our permalinks,

and we want to make sure that we have pages that aren't using an ID,

and we're going to go with the very default permalink setting

and having the post name as our URL structure.

We'll go under Permalinks under Settings, click on "Post Name,"

and save those changes.

Now that we have that done, the last setting that we're going to configure

is making sure that we have a good menu.

When we install WooCommerce, it's going to add a bunch of pages

to our menu, so to override this we're going to go ahead and set up

a custom menu in WordPress, and we can do that by going under Appearance,

clicking on Menus.

We're going to enter the menu name as Main Menu,

click "Create Menu," and we'll come down and we'll take all of the pages

that we created so far, add them to the menu,

and then reorder them here so that we have home,

about, blog, and content.

We'll go ahead and save that menu,

and then the last step is to make sure that we have this primary menu

set to main menu.

We'll save this, and then let's go ahead and take a look at our site here.

We can see that we've got our homepage, we've got the about page,

a blog page, and we've got our contact page,

and if we take a look on our blog page we can see there

it's got that Hello World! default blog post, which is fine.

We don't need to do anything with that for now.

If this was a real site, again, you'd go and you'd edit those blog posts.

Now that we have WordPress set up how we need,

we're going to go ahead and install the WooCommerce plugin,

and you can do that 1 of 2 ways.

You can go to WooThemes.com/WooCommerce, download it,

FTP it and upload the plugin yourself.

Or you could search directly from the admin area for the WooCommerce plugin

and install it from within the admin area, and that's what we're going to do.

Let's go back to our admin area.

We're going to go under Plugins, Add New,

and we're going to search for WooCommerce under our plugins,

and it should show up as the first one here, WooCommerce - excelling e-commerce,

and we're going to go ahead and install that.

Wait for it to install here, and then we'll go ahead and activate the plugin.

Once this plugin is activated, it gives us this option up top here

to install Woo Pages, and what that is going to do

is it's going to go ahead and create a bunch of default pages

like the shop page, the checkout page, the cart page,

and all of these other pages and assign the appropriate WooCommerce templates to them.

You don't have to do this, but if you're just starting out with WooCommerce

it's a really good idea, and it takes away a lot of the steps for configuring

and setting up WooCommerce if you were to go about it on your own.

Let's go ahead and click on this where it says "Install WooCommerce Pages,"

and we can see there "Congratulations!"

It has been installed.

Now, before we get into the settings here, I just want to show you what this did,

and if we go into Pages, we can see that we now have a bunch of new pages

like Cart, Checkout, MyAccount, et cetera,

but if we go and visit our site, because we set up a new menu,

these pages are not going to show up in our menu, and that's good.

Now what we're going to do is we're going to come back into WooCommerce,

and we're going to click on the Settings section and walk through

these tabs here, configuring WooCommerce to work for our demo shop

that we're going to do here.

The first thing I'm going to do is on this General settings page

I'm going to change the country to be the United States,

and I'm going to specifically check that Florida

is the state that we're working from,

and this has a couple effects.

One of them will come in when you're dealing with taxes and shipping.

They want to know the default location where you're shipping from, et cetera.

For some products it won't matter if you're dealing just with digital downloads,

but it does ask you to select a state here, so we'll do that.

Next we're going to come down and we're going to check the currency to be US dollars,

and we're going to limit our countries to just be the United States,

and this could be really helpful because if you don't select specific countries

to start with, what's going to happen is that someone from anywhere in the world

can go ahead and order your products, and if you're not set up

to ship halfway across the world and you don't have your shipping prices

and that stuff configured right that could end up causing you some trouble

because what's going to happen is you're going to have to contact that person

and say, "I'm sorry, we can't process this order,"

and you're going to have to refund it, so we want to limit it from the beginning here

to work with these specific countries.

We're going to gloss over a few of these things here.

We're going to leave checkout the way it is.

Security for secure checkout, that, of course, would be helpful if you have an SSL certificate.

When you start processing credit cards and stuff you'll need that.

We're going to enable coupons here, and we're going to check this box here.

Just in case they forget to enable the coupon at the cart level

they can still do it at checkout.

Under Registration we're going to allow people to register

because then they can log in and look at previous orders and stuff like that.

We're also going to check this box here, "Register using the email address

for the user name," and this is really helpful because

often people will forget what user name they signed up with,

but they will remember their email address.

That makes it a little bit easier for them.

We're going to check here to prevent the users from accessing the WordPress admin area

because by default when you create a new user they have some level of access,

and we want to make sure that they do not have that

because there's really no need in this case.

Leave the rest blank, and we'll come down and you can see here

that there's some styling options that you can change.

We're going to leave it as default, and for store notice we are going to check this thing

to enable the store demo, and the benefit of that is that

it's going to display a title across the top of our page that says,

"Hey, this is a demo store. You can't order anything from it."

This is helpful especially if you're testing online and you don't want anybody

to accidentally order, and in general when you're demoing it

it's a nice thing to have enabled, and you can see here that

you could change what that actually says.

We'll leave all the scripts the same, and since we're not really dealing with digital downloads

we'll go ahead and save these changes as they are,

and we'll move into our next tab for the catalog.

Default product sorting we have alphabetically.

You can see that we can change it to default, most recent, by price, et cetera.

We'll leave this as is.

We're not really going to be dealing with subcategories or redirecting,

so we're going to leave that as it is,

and in product data and product fields we're not going to be dealing

with SKU or the weight for it or even the dimensions,

and we don't really need to show any of this.

The nice thing about removing these is it's going to make our admin area

a little bit more simplified, and it's going to make the front end of the site

a little bit more simplified, so just removing that

is helpful in that regard because it doesn't really relate

to what we're trying to solve here.

Because we're not really doing that we don't really need to configure the weight units,

but because we're in the good USA and not in the metric system we'll go ahead

and change that, and then product ratings, we're going to leave those on

and just leave that setting as it is as well as the pricing options,

but you can see you can configure here how you want your pricing to appear

as well as you can configure how you want your images to be cropped

and what sizes you want those images to appear on the site.

It's a helpful setting to know about, but for now, we're going to go ahead and leave this as is

and move on to the pages.

Now, this is what WooCommerce did when we said install the pages for us.

It went ahead and automatically configured a lot of these shop pages here,

but one thing we are going to do is rather than have a shop page,

we're going to change the base page to be our homepage.

As soon as they land on the site, they're going to see all of our products

on the homepage, and that's just what we want.

We'll come down here, and we can see that

if we wanted to have a different page, let's say for example for the cart

or for the checkout page, we could do that, but it's going to be set up for us,

so we'll go ahead and click "Save Changes"

and then move on to our inventory.

Now, WooCommerce allows you to track inventory on the website,

and this has some pros and cons.

The pros are if you're running a purely online business

and all of your sales are going to be processed through the website

this is really helpful because it will track how many

things you have in inventory.

When it gets low it can send an email reminder.

It can put up a notice saying "Hey, there's only 2 more of these left,"

and that's really helpful.

Where this is a problem is when you're running a brick and mortar store

and you're selling goods online and you're processing orders at checkout in the store

as well as online, and what happens is your inventory

isn't synched in these 2 accounts.

That's something to keep in mind when you're setting up the online store,

and it really depends.

Chances are, though, if they have a physical store and an online store

they're probably not going to want to track their inventory on the website.

And for us, we're going to go ahead and disable this feature because we're not

really worried about it, and we're going to uncheck stock management.

We could uncheck these notifications here, and we'll go ahead and save that

so that it's not something that we have to deal with.

Now, taxes are an interesting situation,

and there are some rules that regulate when you need to

charges taxes and when you don't.

In general, the rule is that if you have a brick and mortar store

in a given state you have to charge taxes if you're shipping to that state,

so if you have your store in Florida and you're shipping to Florida you need to charge.

If you have a store in California and you're shipping from Florida to California

you need to charge taxes.

However, if you don't have a brick and mortar store

or you're shipping to a state where you don't have a brick and mortar store

in general you don't have to charge taxes for your product.

Now, that's in general.

If you're setting this up for a real store, you're going to want to follow through

and do some research for your specific business

to find out if taxes are something you're going to have to deal with.

But for our example site here, we're not going to deal with taxes.

We can update this here.

We're going to uncheck enable taxes, and we're going to uncheck display taxes

and go ahead and save these changes.

Shipping.

We have another couple options here, and you can see that by default

we have a flat rate shipping, international delivery,

free shipping, local delivery, and local pickup,

and whatever is checked on the right here, that means that that is available.

What we want to do here is we're going to set up a flat rate for shipping,

charge a flat rate, and then remove the other features.

If we look at this, the shipping options here, this menu at the top,

we're going to come into free shipping, and we're going to uncheck that,

save the changes, then come back over to our flat rate

and go ahead and enable this.

And we're going to say that it costs $5 to ship all of our products.

That number may or may not work for you, but just in our example store

that's what we're going to use here.

We're also going to tack on a shipping and handling fee,

and we'll set that to $2.50 and add that in,

and we could do that from the menu here, and you may decide that you want to charge that.

You may decide that you don't want to and you just want to incorporate it

into the actual shipping price.

But we're going to come down here, and we're going to say default handling fee.

We're going to set that to $2.50.

You can see that we have other options here if we have a minimum fee

that we want them to hit.

We have some other options here, and then if we come down

we could begin to set different shipping costs for different scenarios,

and there's one plugin in particular that is helpful in this regard,

and it's called the table rate shipping plugin for WooThemes.

If you have a complex shipping structure

this can be really helpful because what it will do is let you begin

setting custom settings, so if something weighs this much,

then charge this much, or if they have 3 products,

you want to charge x, but if they have 5 products, you want to charge this.

Once they hit 10 products, you want to charge this for shipping.

If your shipping requirements are very specific,

I'd definitely recommend checking out this table shipping plugin.

It does cost.

It's going to be $100 to add this to your site,

but if advanced shipping options is something you need,

then that's going to be a cost you're going to have to incur.

Let's come back into our site here.

We will save our changes for shipping as we have it,

and we'll move into our payment gateways.

Now, payment gateways are the options that you have

to have people check out and pay for things on your site,

and you can see by default we have direct bank transfer,

check payment, PayPal, cash on delivery, and credit card.

We're going to go ahead and just use PayPal for this project here,

so we'll come in, and we'll disable the bank transfer one,

save these changes, and we'll disable the check payment,

and we'll come into PayPal, and we're going to configure this here.

Now, when we're testing our site, we're going to want to enable

what's called the PayPal Sandbox, and what the PayPal Sandbox is

is it's a testing or development setup for PayPal,

and what it will let you do is it will let you set up a business email

that we can enter into here as our business email,

and it will give you a test user or customer email,

and so when we're setting up the products and we're testing the checkout process

we can use this sandbox feature in order to test it

so that no real transactions have to go through.

That's what we're going to do here, and you can see the link.

It says, "Sign up here for a developer account."

Let's take a moment here and walk through this process for setting up a PayPal Sandbox.

We'll go ahead and click "Sign up now."

I'm going to use myself here.

Security question, name your first school.

Treehouse Island, because that's where I learn everything.

We don't really need any communications.

We're going to go ahead and agree to setup.

It's sending us login information to our email address,

so we're going to go ahead and open that up and activate our account.

Now that we've successfully activated our account, we can go ahead

and log in with our email address and our password that we set up,

and we're going to have to do 2 things here.

We're going to have to create a test account for the person who is running the store,

the business owner, the seller, and we're going to have to create

a test account for the buyer, the person who is buying the product.

We'll go ahead and set up the seller one first,

and then we'll set up one for the buyer.

We'll come in and click "Create a preconfigured account."

We'll go ahead and make sure that we're checking this to be the seller,

and we're going to say "Test seller," and we're going to have their login email

be seller@teamtreehouse, and then we'll go ahead and enter in a dummy password

that's easy for us to remember.

You don't have to worry about the password too much because this is a developer site.

There's no real money in here, so we're going to set something that's easy for us to remember.

We'll give them a basic balance account of $1,000,

and we'll go ahead and create this account.

Okay, now that this account is created,

this is going to be the account for our seller, and this is what we're going to enter in

to the WooCommerce configuration page, so we'll copy this,

and we'll come back in to our Payment Gateways,

go into PayPal, and we'll go ahead and paste in

this email address into the PayPal email and click "Save Changes."

Now that that's done we're going to go ahead and create the account for the buyer

on the site, so we'll come back to our homepage here.

We'll click on "Create a preconfigured account,"

and we'll make sure that this is a buyer, and we're going to call them test buyer,

and then we'll set their email address to buyer.

Again, put in this easy password that we can remember,

give them some money to spend, and we'll go ahead and click "Create Account" here again.

We now have both of our accounts set up, and we're not going to do anything

with this seller account until we get to the checkout process.

We'll leave this here, and we'll come back to it when we need it.

If we hop back into our WooCommerce settings and we click on our Payment Gateway page,

we can see that the only one that's enabled here is PayPal.

We'll go ahead, set that to our default one,

save changes, and we'll move on to the Emails tab.

This Emails tab is an important one, and it's often missed,

and what happens when you don't enter in the correct emails to this

is that they're all going to go to the main admin of the site,

so if you're building this site for another person, which is typical,

and you don't configure these emails, then you're going to start getting

all these emails about orders and processing and questions and things like that.

We're going to come into this Emails tab, and for this purpose

we're going to leave it all as is.

However, this would be where you'd set store admin or some other email address,

whoever the person is that's going to be managing the order process,

but just for our demo we'll leave it to my email address here.

And we're going to come down to this email template area,

and if we click here to preview your email template you can see

this is what the email will look like that goes out

to the person who received the order, and you can see we have some options here.

We can go ahead and begin changing and configuring how we want

this email to look like.

We can change some of the colors. We can change the background color here.

And see those changes reflected, so you can skin it to work for your site

as well as if you wanted to add a header image,

and then if you want to get more advanced, you can even come in to

the actual template files, and you can begin editing the HTML

structure behind those, but for most people

configuring the colors of the email is enough,

so we'll go ahead and save these changes, and we'll move on to integration.

Integration gives us a few options here.

We can integrate directly with Google Analytics.

We can integrate with ShareThis, and we can integrate with a feature called ShareYourCart,

which lets you share what is in your cart.

The benefit of using Google Analytics here is that we have some options

to add some special tracking code to your thank you page

and to the cart pages, and where that's helpful is if you want to track

the conversion process for your checkout for people buying stuff on your site

it's really helpful to know how many people get to our cart

and then don't complete the process, how many people get to the checkout process

and then don't get to the thank you page.

Having these special things configured on your site could be really helpful

if you are going to take those extra steps and track this process

and try to improve that conversion rate for your site.

We'll leave this blank for now because we're just testing and developing,

but it is good to know about, and that pretty much wraps it up

for everything that we need to get WooCommerce

installed and configured correctly.

At this point we now have WordPress set up how we want.

We now have WooCommerce set up how we want,

and we can begin getting into the point of

adding products, configuring products, and then looking at the checkout process.

Before we jump there, I want to show one additional feature,

which is coupons, and if we come into coupons

and go to Add a Coupon, we're going to add one called 10%.

Whatever title you enter in here, that's what people are going to paste in

to get this discount, so general practice is to have these coupons be all upper case,

and that's what we're going to do here.

In this discount, we're going to set a 10% discount to everything in your cart,

and you can see that we can do a product discount, a cart discount

of an x process, and we can do some very specific stuff

like only give this to specific products or only specific categories of products,

and we can even set it to only work for certain customers, so we could tie it to

an email and say, "Hey, you have to log in to get this special price."

And that's really helpful if you've built up a group of customers around your site

and you want to begin offering them some special features,

and then of course, we can limit the usage so they can only use it once or twice

and set an expiration date for it.

We're going to leave this as is, and anybody that has a 10% coupon

we'll go ahead and let them do that to get 10% off of the total cart cost.

Now that we have our coupon set up, let's go into the products section here

which WooCommerce also adds, and we can see we've got the option to add products,

set categories and tags, shipping classes for certain types of products,

and then attributes.

We're not really going to look at categories, tags, and shipping classes,

but we are going to look at attributes.

What attributes are for products are a set of

extra terms or extra features or extra options that you have

for a product, so for example, if we're selling a shirt,

which we're going to add to our site, some common attributes might be

sizes or colors and something similar to that,

and then within that for sizes you'd have small, medium, extra large,

and for colors you'd have white, black, green, whatever your different options are.

That's what attributes are, and it's important to know that process of how to set them up,

so we're going to look at adding a sizes attribute

that we'll use for posting a t-shirt to our site.

Let's go ahead and enter in here sizes,

and we're going to set the type to be select, and that will give us a dropdown

where they can select from small, medium, large, extra large,

as opposed to text, which would mean that they have to type in

exactly what that feature is.

For example, if you had a badge, and that special badge had their name on it,

you could have them type their name in to that.

We'll go ahead and add attribute.

Now that we have our sizes attribute set up,

we're going to come in and configure the terms within that.

We'll click on "Configure terms,"

and then here is where we're going to go ahead and add in

our small, medium, large, and extra large.

Now we can see that we have these features

as options within our main sizes attribute.

If we come back out to attributes we can see that under sizes

we have these terms small, medium, large, and extra large,

and again, that's what people are going to be able to pick from later on.

Now that we have that set up we can go in and we can add our first product.

We're going to come in, and we're going to add our first product,

and we're going to call it pink shirt,

and let's look here for a moment at what options we have on this page

because WooCommerce adds a few extra custom fields here.

We can see we have our main description area,

and what this is going to do is it's going to give us

an option to put in a long description for our product,

and when we look at the product page later we'll see where that fits in.

If we come down we can see that we have this product data here

with a bunch of different tabs, and this is going to be where we set a lot of the

custom settings for the specific product.

We have some custom fields here that WooCommerce will automatically populate,

and then we have our product short description,

and this is what appears closer up to the add to cart button,

and typically people will get these confused, and they'll put in their short description

up in the main content area and then leave this blank.

Really we want our longer description up here and then our shorter one down below.

The other one is featured image.

We're going to need this to show up as the featured image for our product.

That's just a quick overview.

Let's look in a bit more detail in adding our shirt in here.

We're going to go pull up some ipsum here

as our description.

We'll grab a good chunk of that,

come back in, paste that in, break it up a little bit,

and this will serve as our long description.

Again, we'll show where that goes, and then we'll come down

and we'll put in our short description, which should only be a sentence or two here,

and again, that will appear up closer to the add to cart button.

Now that we have that set, let's look at this product data area here,

and we can see that we've got a simple product, group product,

external affiliate product, and a variable product.

And if we want to use attributes for our product like sizes,

we're going to have to check "Variable product."

We have that checked.

We're going to come under attributes,

and this is where we'll go ahead and we can add an attribute sizes.

We'll select the attribute that we want, click "Add,"

and we want to make this visible on the product page,

and we want to use this for variations.

We're going to click "Select All" to give us all the small, medium, large options,

and we'll go ahead and let's quickly save this as a draft

so that we save our settings there.

We can see that if we click back into attributes that's good.

We have our sizes.

We show that we have all that configured correctly.

The next step that we have to do is click on variations,

and what this will do is let us set prices

to those specific sizes, so we're going to bulk edit prices.

We're going to click "Add variations" here,

and what we want to do is have these apply to all of our sizes at once.

We can individually say that we have a different price and a different quantity

in a sale for different size products, but we're going to have this

apply to all of them, and we're going to set our price here

as $20, and we'll go ahead and save this draft again

to make sure that our changes are saved.

If we come back into variations we can see that we have those sizes here

and that that's set to $20.

This is a little unintuitive if you're first setting up working with products

that have attributes.

It's not always clear how to go about doing that,

so this is something that's helpful to know

when you're working on adding products with attributes.

Let's go ahead and publish this product,

and let's go to our site now and see how this looks.

If we come over and we visit our site,

we can see that on our homepage we have all of our products,

and pink shirt is listed here.

Now, the styling isn't perfect, but because we're just using

the default 2012 theme there isn't a whole lot of styling

specifically set for these products, and you can go ahead and change that

later using CSS.

We're going to click through to the product, and one thing we'll notice

is that there's no images.

We'll go back and we'll edit that in a moment here.

But we can see that we have our sizes.

We can select medium, and then we have the option to add it to the cart,

and if we click "Add to Cart," we could check out our cart,

and we could see we've got our product there and the size that we've selected.

It is medium.

That's perfect and just the way we want it to work.

Now let's come in and look at how images work.

The first thing we'll do is set a featured image, and we're going to go ahead.

We have the front image here of Alyson rocking this pink t-shirt,

which is great, and we're going to go ahead and click "Set this

as our featured image," save all the changes, and update it.

And then if we go to view this product, we can see, great,

we now have an image there.

What about if we want multiple images to show up on our site?

In order to do that, there's no field here

that says multiple images,

but what WooCommerce will do is it will recognize

if you have multiple images uploaded for this specific page or post.

In our case, it's actually a product.

All we actually have to do is upload those images

and save these changes, and because WordPress can remember

every image that you upload for a given page or post,

it's stored in its memory there, and then WooCommerce is going to

pull those out and display them on the product page.

If we close out of there and we click "Update"

and we come back to our product page and refresh it,

we can now see that these other images appear below.

Again, not super intuitive there, but if you want extra images to show up

all you have to do is upload them, and once they're uploaded they'll show.

What that means is that if you no longer want to have one of these options showing

you'll have to come in and actually delete that image

so that it no longer appears there.

You could update the product, and when we refresh the page we can see

we no longer have that back view.

That is the basic process for setting up a product that has variables,

and we've looked at that.

The process for setting up just a simple product is a little bit simpler,

as you can imagine.

To do that what we're going to do is we're going to click on "Add Product,"

and we're going to call this one "Badge Poster."

We'll leave this description, this long description, blank for this particular product,

and the reason we're going to do that is to show

what these differences look like when you have a long description

and when you don't have one.

That's our reason for doing that.

We're going to come down, and we're going to leave this as a simple product.

We're going to enter in our price, but then let's put in a sale price

just so we can see how that works,

and we could schedule our sales to either start on a certain date,

start in a future or past date and run to a certain date,

and we're going to set this to run through the end of December 2012,

and we'll leave that as is.

You can see we have options for taxable, inventory, shipping, related products,

as well as attributes, which we're not using.

We don't really have to worry about any of that.

We do, however, need a short description,

so I'm going to paste in some lorem ipsum here again,

and we'll go ahead and set our feature image here,

and we've got a nice graphic here to use for that.

We'll go ahead and save this as our featured image,

save all the changes, close this out.

And let's go ahead and publish this product and go back to our store homepage.

If we come into visit site, we can see that we now have 2 products.

We have our badge poster with this cool sale icon,

and we can of course configure that and change that CSS if we wanted to,

and we have our shirt, and you'll notice that underneath here it says,

"Add to cart" for the poster, but for the pink shirt it says, "Select options."

The reason is because you need to select one of the shirt sizes

in order to add it to the cart, whereas the poster, it only comes in one size,

so we can add that directly.

Now, if we look at the actual page for this poster and we scroll down,

we can see that we have reviews options here but nothing else.

However, if we click on the pink shirt and come down

we can see we have this long description that appears.

We have additional information that shows us what sizes are available

as well as the reviews tab.

That's what I meant by the difference between having a long description

show up and not having it show up if you leave that blank.

Either way, this is our short description here.

There we have it. We've added 2 basic products.

We've added one that's a little bit more complex

and has variations and options there, and we've added a simple product that doesn't have any.

It's one product, one picture, ready to go.

Now let's look at this checkout process and see what that looks like

and what options that gives us.

To do that, I'm going to open up a fresh window here

because I don't want to purchase the product as a logged in user.

I'll come here, and I'll click "Add to cart," view the cart,

and we can see we have this apply coupon here,

so let's go ahead and add in our 10% coupon,

and we can see that works.

We've got this discount.

We can see the shipping is set to the flat rate just as we want it to,

and we can proceed to our checkout.

We have options to register, if we have our coupon, and we haven't entered it yet.

We can enter that, but let's go ahead and put in our billing information here.

The address is going to be 1 Main Street.

We'll have that in Northwest.

Put in the zip code here.

Now, for email address, we want to use the email address that we originally set up

as the buyer in our PayPal Sandbox.

To get that email address we'll have to go back into our PayPal Sandbox

and go ahead and find that email address that we had for that buyer user.

We'll jump back.

We had left this PayPal Sandbox window open here,

and we can see there's our seller, and here's our buyer,

so let's copy this email address, and this is what we're going to paste in

to our email address for the buyer, so we'll do that.

We'll give it a little 555 action here.

We can see our order, and we can see that PayPal is our payment option.

Notice again in this demo store for testing purposes is that demo sign

that we had show up.

Go ahead and click "Place order,"

and it will give you a message saying "Hey, you need to log in to your PayPal Sandbox

in order to do this," so we'll click "Log in to our PayPal Sandbox,"

and we're going to log in with the email address that we originally used

to set up the PayPal Sandbox.

Now once we're logged in we can come back

and place that order again.

It looks like all the fields have been saved.

We'll go ahead and click "Place order,"

and because we're logged in to the PayPal Sandbox

we can see that we have the option to

purchase the product here, and we have this email address that we set up

as the test user already in there.

We'll put in our password, click "Log in."

We'll agree because this is a demo account here.

We'll move through that screen,

and then we'll click "Pay now."

We've paid for our product. This is all great.

And then we're going to click "Return to the test seller's test store."

Now, this information here, of course, if you had your own PayPal account

for your store you'd configure that to look and say what you want to

as it relates to your business, but once we click on that link

we're going to come back, and we see this page saying "Order Received."

And this is great, because it gives us all the information we need

about our product, about the customer details, and this will also be

emailed to the user who just purchased this product.

We've seen what the checkout process looks like for a user for a customer.

We can close this then and come back into our site

and go to our main Dashboard.

This is what our Dashboard looks like by default,

but we're going to come in here, and we're going to change some of our screen options.

If we scroll down, WooCommerce has added a few homepage widgets

of its own, and we're going to drag these up

to where we can better see and use them, so we're going to take the recent orders,

and let's put this up at the top right,

and what this will do is show us we have an order that was purchased,

and it's pending today.

We're going to drag this monthly sales widget up.

Store owners love to see this stuff, so you definitely want to

log in and configure their screen option

so that they can see this stuff at the top of their site, and then reviews.

If anybody has logged in and created a review, we could see those there.

This order is pending, and if we click on this order

we'll be taken to the specific details for that order,

and we can see a lot of information here.

I want to show you that we can get to that from our Dashboard,

but under WooCommerce in the admin area there's also a link for orders,

and that will also show us the same information here.

If we click into the order, the most important thing here is going to be the order status.

It's pending at this moment, but we can change it to processing,

or when it's finally completed or if it's cancelled, et cetera,

this will be helpful for us to keep track of what stage we're at.

Let's say that this payment went through,

and we've shipped the product.

We could click that it's been completed and save the order.

And now if we come back to view our orders we can see that that status has been changed,

and if we come back to our Dashboard, we can see that that order has been completed

and that our monthly sales are now reflected at $21,

which is what we got from that shirt.

This is what it looks like from the site owner's perspective

to sell products and what it looks like when a product is sold on their site.

They can come in and check what orders are available.

They can come in on that homepage and they can see how much money they've made today,

et cetera, so you're going to want to familiarize whoever is working with the site

on how to do that and where they can find out that information.

That's basically it, folks.

What we've done is we've shown how to do a simple configuration in WordPress.

We've shown how to install WooCommerce.

We've shown how to configure WooCommerce, add a few products,

and complete the testing process.

Now, when your site is ready to go live

it's important that you go back into WooCommerce and you disable

that Sandbox feature and you put in your real PayPal information

or other information that you're using to sell the products.

Even when that happens and you launch the site live

it's still a good idea to do a test purchase even if you do have to pay for it.

Just make sure t