In this video you'll learn how newcomers can manage free products and promotional downloads.
When building an e-commerce web store it's a good idea from a marketing perspective to get your potential
customers used to using the store checkout systems and capture their email addresses into a marketing
email list.
Newcomers can take care of the set up for you.
However we can improve the process by eliminating some of the unnecessary fields in the checkout process
for free items like billing and shipping information.
Streamlining the experience for users.
Let's start by just taking a look at what we're trying to do here.
First have your Wordpress dashboard open and have your woo comer's store website open in another tab.
Follow along as we take a look at the web store.
I'm going to go to the second page like we had done before.
I found that product that I had made a free product.
Now the idea here is that if somebody is checking out the free product and they want to download that
product you know we made it into a download in the last video but we want to streamline the process
for those users.
So if that person wants to get the free download first of all the default is if they hit the add to
cart button their item is now in the cart and they can view the card.
Now they could go directly to the checkout page and that's fine but if they go to the checkout page
then they have a couple of extraneous items here.
Why would you need to enter a coupon if your item is free in the first place.
And secondly in your billing details if I just want to collect a name and an email address why do I
have all these required fields here for the billing details like phone number address and you probably
don't need to ask people for additional information call the order notes at all for just giving them
a free product or having them do is give us their email address and their name and then we want to streamline
that process of getting them their free download right away.
Now in this lesson this will be a great example of having a need for a client web site and going out
and finding the answer from what someone else has already done.
So I did some research because this was a project that a client needed done for their commerce store.
They wanted to provide a free product.
So I went and looked around and this great article at web training wheels Dotcom has a couple of compiled
tutorials information that makes a great little system for commerce.
First of all you streamline the checkout process to eliminate these billing details by using a little
piece of code that you place in your theme functions file or on a code snippets area and then you slimmed
down the checkout process by doing that.
You also send the people directly to the checkout page instead of having them go to the cart first and
then thirdly we will integrate that with our e-mail marketing system that is MailChimp that we learned
about in the last chapter.
Now you can go to this Web address and find this tutorial if you like but I do have the code snippets
available in your resources section.
I did want to direct you to read a couple of things if you want to look at this a little bit deeper
in this web training wheels Dockum tutorial.
First of all there there's a couple of interesting reasons that she links to about reasons you might
want to do it this way.
And we're not going to go into that right now but it's interesting reading.
So if you just said a product to zero dollars as we said you've got the checkout process with all that
information and so going down to the code here I noticed that this person had gotten this code from
Skai verge and I opened up the skivers link which was a tutorial about how to simplify a free commerce
checkout.
And that code is something that she's just duplicated right here and it works great in my client's project.
But secondly she got another piece of code right down here a little smaller piece from this person here.
And I've used this successfully as well to send users directly to the checkout page after they add it
to the cart.
Now back in the Wordpress dashboard if we look under appearance and themes.
Let's take a look at how we're treating these themes.
I hope that the thought had occurred to you when looking back here in these pieces of code I mentioned
that they go in the functions does ph profile.
If you're just putting them right into your theme or your child theme but I hope that you had thought
well we're not really using a child theme here.
We could make a child theme of the storefront theme and then that's where we would want to put our code
in the duplicate functions that ph file inside of our child theme Instead let's use the code snippets
plug in a few chapters back.
I recommended that you check out the code snippets plug in and let's install it right now on our site.
So go to plug ins add new and this way we won't have to add that snippet of code to the functions dot
ph file of our active theme.
We can use a place inside of a plugin to do the same thing.
So make a search inside of the ADD plug and screen for code snippets.
It's this one right here.
And you can see it's got 20000 active installs it was updated very recently.
This is a great plug in so I'm clicking install now and then when it installs the plug in and gives
me an opportunity I'll click activate plug in.
Go ahead and follow along and do the same on your site.
Now you should have a snippet plug in settings panel over on the left hand side with the little pair
of scissors.
And if we go over to the right and click add new it will open us a editing page where we can create
a new snippet.
So this could be for a free product.
So I'm just going to type free product as the title of this snippet.
And now we'd have our little piece of code right here.
Then at the bottom under settings we can run the snippet everywhere.
We can only run it in the administration area or only run it on the site front end and that's fine to
run on the front end where the user is going to be running this snippet to sign up for their free product.
So for now I'm just going to save this code snippet so that I make sure I have that saved and I can
go away from this page and find the piece of code that I want to use.
So now in this tutorial here at web training wheels dot com.
She says that you can copy and paste the following code into your child themes functions ph file which
would be the best way to do it if you were using a child theme.
She also recommends a plug in which I was thinking that you read the reviews this plugin doesn't have
that many downloads and there was also one negative review there about some extraneous code.
So instead of being dependent on a third party developer and another plug in my system if this code
works well that will be the fastest and the most secure and best way to do this process.
So go up here inside this code block.
And I'm going to go over to the copy icon it's selected for me and it tells me your press control see.
And so I've got the whole entire block of code on my clipboard here.
I can go back into my wordpress dashboard under my free product snippet and I'm going to put the cursor
there at the top and hit Control V and copy my snippet right in there.
Now just to make sure that everything looks good I'm going to save this without activating this snippet
at this time.
Now you might remember that if you leave out a semi-colon in some of this code you might get the white
screen of death inside of your Wordpress Web site.
So before I activate this code snippet I want to make sure that in case something's wrong with it and
it breaks my web site that I'll be able to deactivate it and get back in if I'm locked out of the admin
area.
That would be just like deactivating a theme or a plug by renaming it in FCP or in the file manager
of a C panel.
But in this case code snippets plug in gives you a way to deactivate all your snippets so you can manage
them just in case something's wrong.
So the way I found out about that is I went to the plug in page itself I go into WordPress darg clicking
plug ins and then searching for code snippets.
Here's the code snippets plug in and click the title to open it up and in the FAA que section there
is a question here.
Hey I just activated a snippet and my whole site broke.
So there's two ways that you can turn on what they call safe mode.
So all the snippets will be deactivated.
You can get back into your site and then edit those snippets using the plugin settings page first is
to open up your W.P. dash config file and put this line in there and then upload that file back into
your Wordpress core files.
There is a second way and this might be a little bit easier.
You can just place this piece of code after the you are l so it's questionmark snippets.
Safe Mode equals true.
If you append that to the R L that should turn off all snippets and allow you to access that page.
So you can always find that at Wordpress dot org.
Under the code snippets plug in area.
So we'll go back into edit snippet.
And I'm just going to go down to the bottom here and click save changes and activate do this on your
own site and it looks like everything is ok so far.
However I did check the box to only run this on the front end so cross your fingers if we go back in
here and I go to the home which is the shop page it looks like the site is working.
So that's great.
I already have one item inside of my shopping cart where I was testing before so I just hit the red
x up here to remove that from the car and let's check the system for the free product.
See what that code did to change the way the customer interacts with the store here.
If I go down to the free product here suppose I look at that page and I'm like this looks good.
I think I'm going to add this to the cart free product great.
So right there it added it to the car.
But like I mentioned before I do now have to go to the shopping cart to be able to check out and go
get this product.
But I've got my shopping cart here now which is that extra step we want to remove later.
And if I hit proceed to check out this is what I want to see.
I just have my first name last name and e-mail address.
There's no coupon code right here and no comment field down here.
And it just says place the order and then I'll be able to get my free download right away with no hassle.
Let's add the second part of the code though.
If we go down a little bit lower in the tutorial you can see that here's this other block of code.
And this one directs the person right to the checkout page instead of having them look at the shopping
cart.
Another step eliminated in their process so click the click the button right here and hit Control C
to copy and then I'll go back to that same snippet.
Since this is all doing the same thing I'm just going to put a couple of carriage returns after the
last line and hit Control V and there's my next section of code all the way down to here.
Make sure that ends in a semi-colon.
I've got everything now if you read that tutorial carefully you'd see that just above this redirect
code there is something we need to do to it.
We need to put the proper product ID right here in the code.
And so if we go up to our shop we know that we need to find that the right product right here and it's
right down here.
It's.
Single too.
And so we need to go back into our commerce products list and find the ID associated with that.
So you know I find it easy to go under products and when I'm looking for something but I know I'm going
to have to come back to this page here.
I'll just right click and open a new tab with that information.
So now go to that tab which is my products page in one single two shows as soon as you roll over it.
You'll see the I.D. And it's also in the RL.
When you click on it just like post or page IDs in wordpress.
So this is product number 99.
So over here in the tutorial you can see that we want to only send them directly to the checkout page
if they're trying to buy that product I.D. 99 because it's the free download product.
So if you go down you can see in it wants you to put it in line 13 right down here.
So I'll go back to that snippets page and instead of 35 I'll put 99.
Now go to the bottom and save my changes.
Now this is an active code snippet.
So I want to make sure that nothing went wrong right there with this code snippet active.
So if I go back to the Web site and see what happens if I hit the home button to go back to the shop
looks good everything I think is working.
So if I go back down to this item it's on the second page of the store.
I do have zero items in my shopping cart right now.
So if I find a free item a single number to add to the cart.
And here is where there's another suggestion in that tutorial.
This was an AJAX call that allowed this to open up within the window and show me that view cart button.
Now I don't want that to happen with this free product.
When I add it to the card I want to go directly to the checkout page.
So let's first test that if I remove that from the shopping cart.
Now if I go down and I click the image so that I'm right here on the page itself if I click Add to Cart
that should send me directly to the checkout.
Excellent.
And here's the check out page.
And you know I can place my order with just first last name and an e-mail but that last change we need
to make going down here and looking at the tutorial text right here.
We need to disable a certain option in the commerce settings and that is to enable Ajax add the cart
buttons on the archives.
If we do this that will just streamline the process for free products all that much more.
So if people click Add to Cart when they're in a list of products like here on the homepage then they'll
still go direct to the checkout page if they do product number 99 in our example here.
So if I go back to one of my wordpress dashboard pages I can go under wew commerce and settings.
I'm looking for a settings under products and display is the sub item that we're looking for is this
cart behavior for the add to cart buttons.
If we disable that Ajax add to cart buttons on the archives and then hit save changes that will let
us add that free product and go directly to the checkout page.
Even if we're in an archive page like this one that shows all of our items at once.
First I'll remove this from my shopping cart and let's just go back to the home page here to refresh
the page and load the new code that we're working with.
New settings.
I'll go to that free product on the second page.
And now even though it's a list of products I should be able to click Add to Cart and it should take
me directly to the checkout page.
Great.
That really has slimmed down and streamlined the process for people who want to get a free item without
having to fill in all their shipping and or billing information inside of the web store.
In this lesson you customized your woo commers store using a couple code snippets from an online tutorial
by cutting down on the number of steps in the checkout process.
You make the sign up painless for the user while at the same time getting them comfortable with the
web store processes in the next video you'll finish this awesome newcomer's customisation for free products
by using the MailChimp for W.P. plug in from the last chapter to enable all comers customers to join
the email list.
And while we're at it will improve the look of the account and purchasing emails that go to customers
too.
That's a smart e-commerce setup.