1
00:00:01,120 --> 00:00:06,200
In this video you'll learn how newcomers can manage free products and promotional downloads.

2
00:00:06,450 --> 00:00:11,580
When building an e-commerce web store it's a good idea from a marketing perspective to get your potential

3
00:00:11,580 --> 00:00:17,490
customers used to using the store checkout systems and capture their email addresses into a marketing

4
00:00:17,490 --> 00:00:18,770
email list.

5
00:00:18,780 --> 00:00:21,210
Newcomers can take care of the set up for you.

6
00:00:21,210 --> 00:00:27,030
However we can improve the process by eliminating some of the unnecessary fields in the checkout process

7
00:00:27,030 --> 00:00:30,390
for free items like billing and shipping information.

8
00:00:30,390 --> 00:00:32,860
Streamlining the experience for users.

9
00:00:33,300 --> 00:00:37,200
Let's start by just taking a look at what we're trying to do here.

10
00:00:37,260 --> 00:00:44,450
First have your Wordpress dashboard open and have your woo comer's store website open in another tab.

11
00:00:44,460 --> 00:00:47,510
Follow along as we take a look at the web store.

12
00:00:47,550 --> 00:00:51,090
I'm going to go to the second page like we had done before.

13
00:00:51,090 --> 00:00:55,160
I found that product that I had made a free product.

14
00:00:55,410 --> 00:01:01,980
Now the idea here is that if somebody is checking out the free product and they want to download that

15
00:01:01,980 --> 00:01:07,770
product you know we made it into a download in the last video but we want to streamline the process

16
00:01:07,770 --> 00:01:09,020
for those users.

17
00:01:09,210 --> 00:01:14,490
So if that person wants to get the free download first of all the default is if they hit the add to

18
00:01:14,490 --> 00:01:19,920
cart button their item is now in the cart and they can view the card.

19
00:01:20,160 --> 00:01:26,280
Now they could go directly to the checkout page and that's fine but if they go to the checkout page

20
00:01:27,180 --> 00:01:30,040
then they have a couple of extraneous items here.

21
00:01:30,090 --> 00:01:34,240
Why would you need to enter a coupon if your item is free in the first place.

22
00:01:34,320 --> 00:01:39,600
And secondly in your billing details if I just want to collect a name and an email address why do I

23
00:01:39,600 --> 00:01:46,230
have all these required fields here for the billing details like phone number address and you probably

24
00:01:46,230 --> 00:01:51,660
don't need to ask people for additional information call the order notes at all for just giving them

25
00:01:51,720 --> 00:01:58,080
a free product or having them do is give us their email address and their name and then we want to streamline

26
00:01:58,080 --> 00:02:01,140
that process of getting them their free download right away.

27
00:02:02,750 --> 00:02:08,780
Now in this lesson this will be a great example of having a need for a client web site and going out

28
00:02:08,840 --> 00:02:13,470
and finding the answer from what someone else has already done.

29
00:02:13,490 --> 00:02:20,030
So I did some research because this was a project that a client needed done for their commerce store.

30
00:02:20,030 --> 00:02:22,270
They wanted to provide a free product.

31
00:02:22,340 --> 00:02:30,620
So I went and looked around and this great article at web training wheels Dotcom has a couple of compiled

32
00:02:30,650 --> 00:02:35,980
tutorials information that makes a great little system for commerce.

33
00:02:36,020 --> 00:02:42,050
First of all you streamline the checkout process to eliminate these billing details by using a little

34
00:02:42,050 --> 00:02:49,570
piece of code that you place in your theme functions file or on a code snippets area and then you slimmed

35
00:02:49,570 --> 00:02:51,630
down the checkout process by doing that.

36
00:02:51,740 --> 00:02:58,040
You also send the people directly to the checkout page instead of having them go to the cart first and

37
00:02:58,040 --> 00:03:03,140
then thirdly we will integrate that with our e-mail marketing system that is MailChimp that we learned

38
00:03:03,140 --> 00:03:05,200
about in the last chapter.

39
00:03:05,210 --> 00:03:11,300
Now you can go to this Web address and find this tutorial if you like but I do have the code snippets

40
00:03:11,570 --> 00:03:14,320
available in your resources section.

41
00:03:14,360 --> 00:03:18,620
I did want to direct you to read a couple of things if you want to look at this a little bit deeper

42
00:03:18,980 --> 00:03:22,320
in this web training wheels Dockum tutorial.

43
00:03:22,340 --> 00:03:28,280
First of all there there's a couple of interesting reasons that she links to about reasons you might

44
00:03:28,280 --> 00:03:30,080
want to do it this way.

45
00:03:30,080 --> 00:03:33,840
And we're not going to go into that right now but it's interesting reading.

46
00:03:34,370 --> 00:03:41,870
So if you just said a product to zero dollars as we said you've got the checkout process with all that

47
00:03:41,870 --> 00:03:49,250
information and so going down to the code here I noticed that this person had gotten this code from

48
00:03:49,520 --> 00:03:56,870
Skai verge and I opened up the skivers link which was a tutorial about how to simplify a free commerce

49
00:03:56,970 --> 00:03:57,700
checkout.

50
00:03:57,950 --> 00:04:04,490
And that code is something that she's just duplicated right here and it works great in my client's project.

51
00:04:04,730 --> 00:04:11,510
But secondly she got another piece of code right down here a little smaller piece from this person here.

52
00:04:11,720 --> 00:04:17,600
And I've used this successfully as well to send users directly to the checkout page after they add it

53
00:04:17,600 --> 00:04:18,400
to the cart.

54
00:04:19,780 --> 00:04:24,860
Now back in the Wordpress dashboard if we look under appearance and themes.

55
00:04:24,880 --> 00:04:27,570
Let's take a look at how we're treating these themes.

56
00:04:27,610 --> 00:04:33,340
I hope that the thought had occurred to you when looking back here in these pieces of code I mentioned

57
00:04:33,370 --> 00:04:36,030
that they go in the functions does ph profile.

58
00:04:36,100 --> 00:04:41,050
If you're just putting them right into your theme or your child theme but I hope that you had thought

59
00:04:41,080 --> 00:04:44,580
well we're not really using a child theme here.

60
00:04:44,620 --> 00:04:49,660
We could make a child theme of the storefront theme and then that's where we would want to put our code

61
00:04:49,900 --> 00:04:57,580
in the duplicate functions that ph file inside of our child theme Instead let's use the code snippets

62
00:04:57,670 --> 00:04:59,810
plug in a few chapters back.

63
00:04:59,860 --> 00:05:05,890
I recommended that you check out the code snippets plug in and let's install it right now on our site.

64
00:05:06,100 --> 00:05:13,120
So go to plug ins add new and this way we won't have to add that snippet of code to the functions dot

65
00:05:13,120 --> 00:05:15,640
ph file of our active theme.

66
00:05:15,640 --> 00:05:20,490
We can use a place inside of a plugin to do the same thing.

67
00:05:20,740 --> 00:05:25,370
So make a search inside of the ADD plug and screen for code snippets.

68
00:05:25,380 --> 00:05:26,980
It's this one right here.

69
00:05:26,980 --> 00:05:31,500
And you can see it's got 20000 active installs it was updated very recently.

70
00:05:31,540 --> 00:05:37,960
This is a great plug in so I'm clicking install now and then when it installs the plug in and gives

71
00:05:37,960 --> 00:05:42,500
me an opportunity I'll click activate plug in.

72
00:05:42,680 --> 00:05:45,030
Go ahead and follow along and do the same on your site.

73
00:05:46,200 --> 00:05:51,630
Now you should have a snippet plug in settings panel over on the left hand side with the little pair

74
00:05:51,630 --> 00:05:52,480
of scissors.

75
00:05:52,560 --> 00:05:59,940
And if we go over to the right and click add new it will open us a editing page where we can create

76
00:05:59,970 --> 00:06:01,770
a new snippet.

77
00:06:01,770 --> 00:06:07,300
So this could be for a free product.

78
00:06:07,410 --> 00:06:12,330
So I'm just going to type free product as the title of this snippet.

79
00:06:12,330 --> 00:06:15,330
And now we'd have our little piece of code right here.

80
00:06:15,390 --> 00:06:18,830
Then at the bottom under settings we can run the snippet everywhere.

81
00:06:18,840 --> 00:06:25,230
We can only run it in the administration area or only run it on the site front end and that's fine to

82
00:06:25,230 --> 00:06:32,410
run on the front end where the user is going to be running this snippet to sign up for their free product.

83
00:06:32,440 --> 00:06:38,020
So for now I'm just going to save this code snippet so that I make sure I have that saved and I can

84
00:06:38,020 --> 00:06:43,120
go away from this page and find the piece of code that I want to use.

85
00:06:43,120 --> 00:06:46,690
So now in this tutorial here at web training wheels dot com.

86
00:06:46,870 --> 00:06:54,070
She says that you can copy and paste the following code into your child themes functions ph file which

87
00:06:54,220 --> 00:06:57,930
would be the best way to do it if you were using a child theme.

88
00:06:57,940 --> 00:07:03,580
She also recommends a plug in which I was thinking that you read the reviews this plugin doesn't have

89
00:07:03,580 --> 00:07:08,810
that many downloads and there was also one negative review there about some extraneous code.

90
00:07:09,010 --> 00:07:15,220
So instead of being dependent on a third party developer and another plug in my system if this code

91
00:07:15,220 --> 00:07:21,280
works well that will be the fastest and the most secure and best way to do this process.

92
00:07:21,280 --> 00:07:23,630
So go up here inside this code block.

93
00:07:23,920 --> 00:07:30,780
And I'm going to go over to the copy icon it's selected for me and it tells me your press control see.

94
00:07:31,150 --> 00:07:35,500
And so I've got the whole entire block of code on my clipboard here.

95
00:07:35,500 --> 00:07:41,830
I can go back into my wordpress dashboard under my free product snippet and I'm going to put the cursor

96
00:07:41,830 --> 00:07:47,590
there at the top and hit Control V and copy my snippet right in there.

97
00:07:47,650 --> 00:07:55,940
Now just to make sure that everything looks good I'm going to save this without activating this snippet

98
00:07:55,960 --> 00:07:56,810
at this time.

99
00:07:58,440 --> 00:08:05,160
Now you might remember that if you leave out a semi-colon in some of this code you might get the white

100
00:08:05,160 --> 00:08:08,410
screen of death inside of your Wordpress Web site.

101
00:08:08,520 --> 00:08:14,280
So before I activate this code snippet I want to make sure that in case something's wrong with it and

102
00:08:14,280 --> 00:08:20,220
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

103
00:08:20,220 --> 00:08:21,210
area.

104
00:08:21,210 --> 00:08:28,590
That would be just like deactivating a theme or a plug by renaming it in FCP or in the file manager

105
00:08:28,590 --> 00:08:29,780
of a C panel.

106
00:08:29,970 --> 00:08:36,000
But in this case code snippets plug in gives you a way to deactivate all your snippets so you can manage

107
00:08:36,000 --> 00:08:38,570
them just in case something's wrong.

108
00:08:38,580 --> 00:08:45,000
So the way I found out about that is I went to the plug in page itself I go into WordPress darg clicking

109
00:08:45,000 --> 00:08:48,640
plug ins and then searching for code snippets.

110
00:08:48,990 --> 00:08:55,900
Here's the code snippets plug in and click the title to open it up and in the FAA que section there

111
00:08:55,930 --> 00:08:56,860
is a question here.

112
00:08:56,880 --> 00:09:00,840
Hey I just activated a snippet and my whole site broke.

113
00:09:00,870 --> 00:09:04,910
So there's two ways that you can turn on what they call safe mode.

114
00:09:04,950 --> 00:09:07,020
So all the snippets will be deactivated.

115
00:09:07,020 --> 00:09:13,530
You can get back into your site and then edit those snippets using the plugin settings page first is

116
00:09:13,530 --> 00:09:21,360
to open up your W.P. dash config file and put this line in there and then upload that file back into

117
00:09:21,360 --> 00:09:23,970
your Wordpress core files.

118
00:09:24,000 --> 00:09:26,830
There is a second way and this might be a little bit easier.

119
00:09:26,850 --> 00:09:33,750
You can just place this piece of code after the you are l so it's questionmark snippets.

120
00:09:33,750 --> 00:09:35,800
Safe Mode equals true.

121
00:09:35,820 --> 00:09:42,190
If you append that to the R L that should turn off all snippets and allow you to access that page.

122
00:09:42,480 --> 00:09:45,090
So you can always find that at Wordpress dot org.

123
00:09:45,210 --> 00:09:47,970
Under the code snippets plug in area.

124
00:09:48,270 --> 00:09:51,540
So we'll go back into edit snippet.

125
00:09:51,690 --> 00:09:57,760
And I'm just going to go down to the bottom here and click save changes and activate do this on your

126
00:09:57,760 --> 00:10:01,340
own site and it looks like everything is ok so far.

127
00:10:01,450 --> 00:10:08,050
However I did check the box to only run this on the front end so cross your fingers if we go back in

128
00:10:08,050 --> 00:10:14,190
here and I go to the home which is the shop page it looks like the site is working.

129
00:10:14,530 --> 00:10:15,710
So that's great.

130
00:10:15,760 --> 00:10:21,070
I already have one item inside of my shopping cart where I was testing before so I just hit the red

131
00:10:21,070 --> 00:10:27,520
x up here to remove that from the car and let's check the system for the free product.

132
00:10:27,520 --> 00:10:32,320
See what that code did to change the way the customer interacts with the store here.

133
00:10:32,320 --> 00:10:38,530
If I go down to the free product here suppose I look at that page and I'm like this looks good.

134
00:10:38,530 --> 00:10:42,150
I think I'm going to add this to the cart free product great.

135
00:10:42,310 --> 00:10:44,560
So right there it added it to the car.

136
00:10:44,620 --> 00:10:51,760
But like I mentioned before I do now have to go to the shopping cart to be able to check out and go

137
00:10:51,940 --> 00:10:53,220
get this product.

138
00:10:53,620 --> 00:10:58,420
But I've got my shopping cart here now which is that extra step we want to remove later.

139
00:10:58,510 --> 00:11:02,210
And if I hit proceed to check out this is what I want to see.

140
00:11:02,290 --> 00:11:05,400
I just have my first name last name and e-mail address.

141
00:11:05,410 --> 00:11:10,300
There's no coupon code right here and no comment field down here.

142
00:11:10,480 --> 00:11:16,520
And it just says place the order and then I'll be able to get my free download right away with no hassle.

143
00:11:16,600 --> 00:11:19,110
Let's add the second part of the code though.

144
00:11:19,360 --> 00:11:24,830
If we go down a little bit lower in the tutorial you can see that here's this other block of code.

145
00:11:24,970 --> 00:11:31,060
And this one directs the person right to the checkout page instead of having them look at the shopping

146
00:11:31,060 --> 00:11:31,620
cart.

147
00:11:31,630 --> 00:11:39,310
Another step eliminated in their process so click the click the button right here and hit Control C

148
00:11:39,310 --> 00:11:43,630
to copy and then I'll go back to that same snippet.

149
00:11:43,660 --> 00:11:50,950
Since this is all doing the same thing I'm just going to put a couple of carriage returns after the

150
00:11:50,950 --> 00:11:58,370
last line and hit Control V and there's my next section of code all the way down to here.

151
00:11:58,390 --> 00:12:00,230
Make sure that ends in a semi-colon.

152
00:12:00,370 --> 00:12:07,890
I've got everything now if you read that tutorial carefully you'd see that just above this redirect

153
00:12:07,890 --> 00:12:10,530
code there is something we need to do to it.

154
00:12:10,530 --> 00:12:15,200
We need to put the proper product ID right here in the code.

155
00:12:15,480 --> 00:12:24,090
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

156
00:12:24,090 --> 00:12:25,170
right down here.

157
00:12:25,300 --> 00:12:25,900
It's.

158
00:12:25,900 --> 00:12:27,040
Single too.

159
00:12:27,180 --> 00:12:33,080
And so we need to go back into our commerce products list and find the ID associated with that.

160
00:12:33,390 --> 00:12:37,440
So you know I find it easy to go under products and when I'm looking for something but I know I'm going

161
00:12:37,440 --> 00:12:40,190
to have to come back to this page here.

162
00:12:40,380 --> 00:12:45,460
I'll just right click and open a new tab with that information.

163
00:12:45,470 --> 00:12:51,340
So now go to that tab which is my products page in one single two shows as soon as you roll over it.

164
00:12:51,390 --> 00:12:54,710
You'll see the I.D. And it's also in the RL.

165
00:12:54,750 --> 00:12:59,370
When you click on it just like post or page IDs in wordpress.

166
00:12:59,370 --> 00:13:02,440
So this is product number 99.

167
00:13:02,460 --> 00:13:09,060
So over here in the tutorial you can see that we want to only send them directly to the checkout page

168
00:13:09,330 --> 00:13:16,140
if they're trying to buy that product I.D. 99 because it's the free download product.

169
00:13:16,140 --> 00:13:22,530
So if you go down you can see in it wants you to put it in line 13 right down here.

170
00:13:22,530 --> 00:13:31,050
So I'll go back to that snippets page and instead of 35 I'll put 99.

171
00:13:31,750 --> 00:13:34,590
Now go to the bottom and save my changes.

172
00:13:34,600 --> 00:13:36,880
Now this is an active code snippet.

173
00:13:36,940 --> 00:13:41,750
So I want to make sure that nothing went wrong right there with this code snippet active.

174
00:13:41,770 --> 00:13:46,600
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

175
00:13:47,080 --> 00:13:50,980
looks good everything I think is working.

176
00:13:50,980 --> 00:13:56,760
So if I go back down to this item it's on the second page of the store.

177
00:13:56,760 --> 00:13:59,260
I do have zero items in my shopping cart right now.

178
00:13:59,550 --> 00:14:06,380
So if I find a free item a single number to add to the cart.

179
00:14:06,390 --> 00:14:09,830
And here is where there's another suggestion in that tutorial.

180
00:14:09,870 --> 00:14:16,220
This was an AJAX call that allowed this to open up within the window and show me that view cart button.

181
00:14:16,230 --> 00:14:18,810
Now I don't want that to happen with this free product.

182
00:14:18,810 --> 00:14:22,990
When I add it to the card I want to go directly to the checkout page.

183
00:14:23,130 --> 00:14:27,710
So let's first test that if I remove that from the shopping cart.

184
00:14:27,710 --> 00:14:34,360
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

185
00:14:35,400 --> 00:14:37,550
that should send me directly to the checkout.

186
00:14:37,560 --> 00:14:38,610
Excellent.

187
00:14:38,610 --> 00:14:39,870
And here's the check out page.

188
00:14:39,870 --> 00:14:46,560
And you know I can place my order with just first last name and an e-mail but that last change we need

189
00:14:46,560 --> 00:14:52,260
to make going down here and looking at the tutorial text right here.

190
00:14:52,410 --> 00:14:59,020
We need to disable a certain option in the commerce settings and that is to enable Ajax add the cart

191
00:14:59,070 --> 00:15:01,080
buttons on the archives.

192
00:15:01,290 --> 00:15:05,630
If we do this that will just streamline the process for free products all that much more.

193
00:15:05,760 --> 00:15:12,840
So if people click Add to Cart when they're in a list of products like here on the homepage then they'll

194
00:15:12,840 --> 00:15:19,330
still go direct to the checkout page if they do product number 99 in our example here.

195
00:15:20,260 --> 00:15:28,210
So if I go back to one of my wordpress dashboard pages I can go under wew commerce and settings.

196
00:15:28,330 --> 00:15:35,740
I'm looking for a settings under products and display is the sub item that we're looking for is this

197
00:15:35,740 --> 00:15:38,290
cart behavior for the add to cart buttons.

198
00:15:38,320 --> 00:15:44,890
If we disable that Ajax add to cart buttons on the archives and then hit save changes that will let

199
00:15:44,890 --> 00:15:49,390
us add that free product and go directly to the checkout page.

200
00:15:49,390 --> 00:15:54,640
Even if we're in an archive page like this one that shows all of our items at once.

201
00:15:54,690 --> 00:16:01,660
First I'll remove this from my shopping cart and let's just go back to the home page here to refresh

202
00:16:01,660 --> 00:16:05,110
the page and load the new code that we're working with.

203
00:16:05,110 --> 00:16:06,440
New settings.

204
00:16:06,460 --> 00:16:09,230
I'll go to that free product on the second page.

205
00:16:09,370 --> 00:16:14,050
And now even though it's a list of products I should be able to click Add to Cart and it should take

206
00:16:14,050 --> 00:16:16,720
me directly to the checkout page.

207
00:16:16,720 --> 00:16:17,110
Great.

208
00:16:17,110 --> 00:16:23,740
That really has slimmed down and streamlined the process for people who want to get a free item without

209
00:16:23,740 --> 00:16:30,350
having to fill in all their shipping and or billing information inside of the web store.

210
00:16:30,480 --> 00:16:36,630
In this lesson you customized your woo commers store using a couple code snippets from an online tutorial

211
00:16:37,230 --> 00:16:40,490
by cutting down on the number of steps in the checkout process.

212
00:16:40,560 --> 00:16:45,390
You make the sign up painless for the user while at the same time getting them comfortable with the

213
00:16:45,390 --> 00:16:51,840
web store processes in the next video you'll finish this awesome newcomer's customisation for free products

214
00:16:52,050 --> 00:16:57,990
by using the MailChimp for W.P. plug in from the last chapter to enable all comers customers to join

215
00:16:57,990 --> 00:16:59,070
the email list.

216
00:16:59,310 --> 00:17:04,050
And while we're at it will improve the look of the account and purchasing emails that go to customers

217
00:17:04,050 --> 00:17:04,780
too.

218
00:17:04,830 --> 00:17:06,430
That's a smart e-commerce setup.