1
00:00:00,630 --> 00:00:08,190
In this video we'll look at the newcomers account cart and check out pages and figure out how to customize

2
00:00:08,190 --> 00:00:14,610
them when you use the WU comer's plugin you can use copies of the template files in a similar way to

3
00:00:14,610 --> 00:00:17,820
the way we use them for our child themes.

4
00:00:17,880 --> 00:00:23,370
This way when the WU commerce plug in needs an update you won't overwrite your changes so you can keep

5
00:00:23,370 --> 00:00:29,490
the plugin updated for security and performance by the end of this video you'll know how and where to

6
00:00:29,490 --> 00:00:33,660
make customisations to a newcomer system using best practices.

7
00:00:33,660 --> 00:00:40,180
Let's go well we basically have a working store here made in the last two videos.

8
00:00:40,370 --> 00:00:47,870
And because we're using the commerce storefront theme everything just seems to work now.

9
00:00:47,980 --> 00:00:54,170
Sometimes you might want to customize certain pages especially if you're using a different theme that

10
00:00:54,170 --> 00:00:59,070
may not integrate exactly perfectly with commerce itself.

11
00:00:59,120 --> 00:01:05,030
And let me just show you an example about how I've used these customisation best practices in a site

12
00:01:05,300 --> 00:01:11,810
that I'm building now and then we'll go and make those customisations in our project store here so that

13
00:01:11,840 --> 00:01:16,580
if you're making a new comer store in the future you'll know how to customize it properly.

14
00:01:17,480 --> 00:01:24,050
You may remember from Chapter 10 when we worked on the author pro Plug-In and looking at it's custom

15
00:01:24,070 --> 00:01:30,480
post types that I've been working on a Web site for a client called Fun middle school plays Dot com.

16
00:01:30,540 --> 00:01:38,540
Now because I'm using the author pro theme from Genesis this does have some built in buttons and even

17
00:01:38,540 --> 00:01:45,200
some purchasing buttons that I can use to place any u r l that I want I can have a price here and I

18
00:01:45,200 --> 00:01:51,530
can have a purchasing button right down here if I go back to that home page and click on one of the

19
00:01:51,530 --> 00:01:54,120
plays that isn't free.

20
00:01:54,230 --> 00:02:03,140
You can see that I've got the play page set up so that it's using the author pro thumbnail and the author

21
00:02:03,170 --> 00:02:09,470
pro single page display instead of using the commerce display.

22
00:02:09,470 --> 00:02:16,670
Now one thing I have here is I have this by button and when I have this by button activated I also have

23
00:02:16,670 --> 00:02:20,650
the new comers plugin enabled in the background.

24
00:02:20,660 --> 00:02:26,870
The reason I wanted to use the word comer's plug in is for tracking of orders and communicating with

25
00:02:27,230 --> 00:02:33,090
the server in terms of having a cart and a checkout page and everything like that.

26
00:02:33,170 --> 00:02:41,550
But especially I wanted to be able to have commerce manage the downloads for each of these items.

27
00:02:41,630 --> 00:02:48,320
Now I've created this customized page just within the author pro theme that displays all the place groups

28
00:02:48,500 --> 00:02:54,950
in their groups like I want it the default shop page when I installed wew commerce and enabled all these

29
00:02:54,950 --> 00:02:57,030
products showed it more like this.

30
00:02:57,050 --> 00:03:00,440
And you can see that it puts them all in one big list.

31
00:03:00,470 --> 00:03:03,280
They're not separated into their series as.

32
00:03:03,350 --> 00:03:06,830
And at the same time the layout isn't all that great.

33
00:03:06,860 --> 00:03:11,920
So I wanted to create a custom page and then label that as the shop page.

34
00:03:11,930 --> 00:03:18,950
The problem with that is that if somebody adds a play script for example to their shopping cart and

35
00:03:18,950 --> 00:03:20,450
that's not very hard to do.

36
00:03:20,450 --> 00:03:22,930
Coming from my customized pages here.

37
00:03:22,940 --> 00:03:28,850
One of the things that it had in there is a return to shop button in the shopping cart as well as on

38
00:03:28,850 --> 00:03:30,260
the checkout page.

39
00:03:30,260 --> 00:03:37,220
And that returned to the store button would bring them back to the ugly products page instead of the

40
00:03:37,280 --> 00:03:42,740
really nice looking products page that I have here that I had custom built.

41
00:03:42,740 --> 00:03:48,160
So I just needed to edit a couple of the template files to remove that false link.

42
00:03:48,260 --> 00:03:55,370
So let's go back to our shop and have the Wordpress dashboard page open as well and I'll show you how

43
00:03:55,370 --> 00:04:02,570
to use the templates that come with the wew commerce plug in that we can duplicate just like we're creating

44
00:04:02,570 --> 00:04:05,380
a child theme.

45
00:04:05,400 --> 00:04:11,380
So for this lesson you want to have a few things ready to go and we'll go through the process together.

46
00:04:11,670 --> 00:04:19,350
First the Wordpress dashboard open on your live Web site and let's have the site itself the camera store

47
00:04:19,350 --> 00:04:21,510
that we're building up in another tab.

48
00:04:22,420 --> 00:04:28,690
Secondly Here's a good reference document at the newcomers dot com documentation section.

49
00:04:28,740 --> 00:04:34,510
I just searched for template structure under e-commerce and I found this page here.

50
00:04:34,510 --> 00:04:42,610
It's at docs dot comers dot com slash document slash template structure and it just tells you how to

51
00:04:42,610 --> 00:04:49,180
structure your template files so that when you update newcomer's it won't overwrite those files.

52
00:04:49,780 --> 00:04:57,940
So over on me in my browser I have my C panel open for the place site that I was working on and I had

53
00:04:57,940 --> 00:05:01,930
the file manager open as well.

54
00:05:01,930 --> 00:05:09,820
And so I'll have this see panel open for my working Web site as well and I'll look at the file manager

55
00:05:10,090 --> 00:05:14,430
for this newcomer's site that we're building to make these changes.

56
00:05:14,770 --> 00:05:21,010
And finally since we're going to be duplicating templates that contain AHP code and then saving them

57
00:05:21,010 --> 00:05:22,510
in new locations.

58
00:05:22,720 --> 00:05:30,400
Let's open up our text editor or our code editor that we had worked on before mine that I use is called

59
00:05:30,430 --> 00:05:37,690
Adam and I've got that open and I'm going to be finding the commerce plug in files that I want to duplicate

60
00:05:38,110 --> 00:05:40,590
inside of my computer.

61
00:05:42,260 --> 00:05:50,210
So it is an example of one of the changes that we could make using the newcomers plug in template files.

62
00:05:50,210 --> 00:05:57,830
Let's look at the My Account page within our commerce site and you can see that it's got some dynamically

63
00:05:57,830 --> 00:05:59,750
generated information here.

64
00:05:59,810 --> 00:06:04,330
Since I'm logged in and I'm an administrator It knows my name it says hello.

65
00:06:04,340 --> 00:06:09,650
Greg Davis and then it'll give me a sign out button and then it's got a standard message that just tells

66
00:06:09,650 --> 00:06:13,280
me what I can do from my account dashboard.

67
00:06:13,280 --> 00:06:18,850
Now this message is something that we might want to customize for our particular store.

68
00:06:18,900 --> 00:06:23,990
And so let's figure out what page this is that is under my account.

69
00:06:24,050 --> 00:06:25,720
This is our dashboard.

70
00:06:25,910 --> 00:06:33,660
And then let's look at how we can change the wording on this information right here inside of newcomer's.

71
00:06:33,680 --> 00:06:35,890
And our theme itself.

72
00:06:35,900 --> 00:06:41,470
So one of the first things I wanted to do before I got started was to go to WordPress dot org.

73
00:06:41,600 --> 00:06:47,270
Under plug ins and find the latest copy of the newcomers plug in.

74
00:06:47,270 --> 00:06:50,540
So go ahead and follow along and do this yourself.

75
00:06:53,060 --> 00:06:53,590
There it is.

76
00:06:53,590 --> 00:06:57,760
We'll find the commerce plug in itself at Wordpress dot org.

77
00:06:57,860 --> 00:07:03,170
And now I'm just going to download the latest version using this orange button right here.

78
00:07:03,170 --> 00:07:09,470
Now I saved it on my desktop in my wordpress folder so I would know where it is and I've already done

79
00:07:09,470 --> 00:07:10,800
it so I'll cancel that.

80
00:07:10,940 --> 00:07:19,370
And then once I had that on my computer I went into Windows Explorer and I unzipped the zip file so

81
00:07:19,370 --> 00:07:25,480
that I could access all the files and folders within the commerce plug in now.

82
00:07:25,520 --> 00:07:34,010
Then I opened up my code editor and in Adam you can go in under file and click add project folder then

83
00:07:34,010 --> 00:07:39,170
you can find the newcomers folder where you've saved it and just click add project.

84
00:07:39,380 --> 00:07:46,040
So now I have a commerce folder inside of my code editor and I have all the folders and files that it

85
00:07:46,040 --> 00:07:49,280
includes inside of my code editor.

86
00:07:49,290 --> 00:07:56,030
So now I have all these files including the templates folder and as you can see there are a lot of different

87
00:07:56,030 --> 00:07:59,290
templates that the commerce plug in uses.

88
00:07:59,360 --> 00:08:05,930
And you can duplicate any of these inside of your active theme that way if you edit it at all and then

89
00:08:05,930 --> 00:08:12,260
when comer's issues an update for security reasons or for code improvement reasons you can feel free

90
00:08:12,260 --> 00:08:17,050
to update newcomer's without overwriting your changes on your specific Web site.

91
00:08:17,360 --> 00:08:20,470
It's just the same way that using child themes works.

92
00:08:20,570 --> 00:08:27,280
When we learned about it in a previous chapter now there are so many template files within the structure

93
00:08:27,280 --> 00:08:28,970
of the newcomers plug in.

94
00:08:29,110 --> 00:08:34,360
It might take a little bit of sleuthing to find out what template that you need to edit in order to

95
00:08:34,360 --> 00:08:36,370
change your content here.

96
00:08:36,370 --> 00:08:44,410
Now one thing you can do is in Adam you can right click on the project folder and you can go down and

97
00:08:44,470 --> 00:08:48,580
you can click search in directory.

98
00:08:48,580 --> 00:08:50,710
Now this will open a little bit of a search.

99
00:08:50,710 --> 00:08:58,990
Now if I go back into my site itself here's that dashboard page I might just select some of this text

100
00:08:58,990 --> 00:09:06,070
from your account dashboard Control-C to copy and then I'm going to go back into Adam and I'm just going

101
00:09:06,070 --> 00:09:12,170
to paste that little piece of text in there and click find and see what I can find.

102
00:09:12,430 --> 00:09:14,630
OK it's only found two results.

103
00:09:14,680 --> 00:09:20,900
So it found inside of one file the wound covers OT file.

104
00:09:21,310 --> 00:09:23,450
That is right here.

105
00:09:23,590 --> 00:09:30,300
It found a reference to that and also found the template under my account called dashboard that ph P

106
00:09:30,790 --> 00:09:36,370
and I'm sure that that's going to be the right file that I need to edit and that's how I'd found it

107
00:09:36,370 --> 00:09:42,220
before if I double click that line in the search results it will open up that template but if I look

108
00:09:42,280 --> 00:09:47,180
I want to find out where that template exists inside of the newcomers plugin itself.

109
00:09:47,200 --> 00:09:50,650
So if I go over here I can find it under my account.

110
00:09:50,680 --> 00:09:57,490
If you remember where that project find results show me it's under wude commerce templates my account

111
00:09:57,760 --> 00:10:00,570
and then it's called dashboard ph P.

112
00:10:00,820 --> 00:10:03,160
Let's take a look at that file and how to find it.

113
00:10:03,160 --> 00:10:10,560
So under we comer's and then the templates folder and then the My Account folder and then there it is

114
00:10:10,580 --> 00:10:12,990
dashboard dot ph HP.

115
00:10:13,120 --> 00:10:19,230
So if I open that within my code editor you can see inside of the comments at the top here.

116
00:10:19,300 --> 00:10:21,790
It does tell you right at the top.

117
00:10:21,790 --> 00:10:29,940
This template can be overridden by copying it to your theme slash and then it gives you a file structure.

118
00:10:29,950 --> 00:10:36,850
So what we'll do is make a new comers folder inside of our theme folder and then we can make my account

119
00:10:36,850 --> 00:10:42,480
folder and can use the same exact file name dashboard ph.

120
00:10:42,730 --> 00:10:51,040
So one of the things we'll do right here is from this we'll just look at where our wording is that we

121
00:10:51,040 --> 00:10:52,350
think that we want to add it.

122
00:10:52,520 --> 00:10:57,820
So right here instead of the newcomers plugging it says From your account dashboard you can view your.

123
00:10:57,880 --> 00:11:03,220
And it says a little bit of code your recent orders your shipping and billing addresses and these are

124
00:11:03,220 --> 00:11:09,550
little pieces of code that let newcomers make that into a link so you can find those places inside of

125
00:11:09,550 --> 00:11:16,070
your account on the Web site as a customer and then it shows the account dashboard.

126
00:11:16,250 --> 00:11:17,660
And that's basically it.

127
00:11:17,660 --> 00:11:19,680
So this is the file that I want to edit.

128
00:11:19,700 --> 00:11:25,580
So we're going to make a copy of this file and create a new version of it somewhere on our computer

129
00:11:25,580 --> 00:11:30,410
where we know where it is and then we'll upload it to our Web site itself right where they showed us

130
00:11:30,770 --> 00:11:33,500
inside of the commerce folder.

131
00:11:33,500 --> 00:11:37,680
And then my account and then that file name.

132
00:11:37,710 --> 00:11:43,770
So the first thing I'm going to do is just click anywhere inside of my file and hit control a for select

133
00:11:43,830 --> 00:11:44,610
all.

134
00:11:44,820 --> 00:11:49,650
And if I scroll down you can see that the whole thing is selected and then I'm going to hit Control

135
00:11:49,650 --> 00:11:57,150
C to copy and basically I've copied the entire contents of this dashboard dot P file.

136
00:11:57,150 --> 00:12:04,440
Now if I just go file new file I'll have a blank file here and if I hit Control V or I could right click

137
00:12:04,530 --> 00:12:13,200
and hit paste I mean paste that entire content into my new file here and now it doesn't know what type

138
00:12:13,200 --> 00:12:14,050
of file it is.

139
00:12:14,100 --> 00:12:19,380
Unlike the one right here called dashboard ph P You can see that it has some color coding to make it

140
00:12:19,380 --> 00:12:24,590
easy to understand because Adam understands that this is a dot ph profile.

141
00:12:24,780 --> 00:12:30,080
Now until I save my untitled file here it doesn't really know what kind of file it is.

142
00:12:30,240 --> 00:12:39,790
So what we'll do is do a File Save As So save as is down here inside of Adam and I'm just going to put

143
00:12:39,790 --> 00:12:45,810
this on my desktop where I keep the files that I'm working on for the course.

144
00:12:45,820 --> 00:12:48,890
So right now I'm going to create a new folder.

145
00:12:48,970 --> 00:12:55,010
This one is my new comers say folder you know.

146
00:12:55,150 --> 00:12:56,030
Yeah.

147
00:12:56,380 --> 00:13:03,820
And I can call this dashboard dot THP save.

148
00:13:03,930 --> 00:13:09,900
And now now that it's called the dashboard dopy AHP it knows what kind of file it is and it shows me

149
00:13:09,900 --> 00:13:11,020
the right color coding.

150
00:13:11,040 --> 00:13:19,490
You can see if you go back and forth that the two files are exactly the same great so dashboard that

151
00:13:19,570 --> 00:13:26,700
ph is the file that I can edit so that my store instead of saying from your account dashboard you can

152
00:13:26,700 --> 00:13:29,080
view we can just change that to something different.

153
00:13:29,250 --> 00:13:35,560
So while we're here I might as well change the text right here and call it something different.

154
00:13:35,790 --> 00:13:40,740
And I'm just going to make a simple change so that we know that the change has taken and instead of

155
00:13:40,740 --> 00:13:47,700
writing from your account dashboard I'm going to just label it more specifically and I'm going to say

156
00:13:47,700 --> 00:13:48,600
from your

157
00:13:52,540 --> 00:13:56,410
commerce site account dashboard blah blah blah.

158
00:13:56,550 --> 00:13:59,550
And so that will just be the name of the site.

159
00:13:59,550 --> 00:14:06,000
What if it were called you know fun middle school place I might say from your fun middle school plays

160
00:14:06,220 --> 00:14:12,270
account dashboard and that way we know that's a specific change and we can look at our dashboard page

161
00:14:12,270 --> 00:14:14,410
and see that our changes are working.

162
00:14:14,640 --> 00:14:21,500
So I'm just going to hit Control s where you could go up and say file save and I know that this changed

163
00:14:21,510 --> 00:14:30,080
file is now saved in that desktop folder called commerce and it's called dashboard dot HP.

164
00:14:30,140 --> 00:14:37,190
OK so back in our site that we've been working on the live site I know that that dashboard page is called

165
00:14:37,220 --> 00:14:43,130
My account and I've got the dashboard tab open right here tells me my name etc. but it says from your

166
00:14:43,130 --> 00:14:44,810
account dashboard.

167
00:14:44,810 --> 00:14:52,910
So we're going to replace the dashboard template file called dashboard dot HP inside of our WordPress

168
00:14:52,940 --> 00:14:59,760
file structure so depending on how you're hosting your live site here you're going to have to access

169
00:14:59,760 --> 00:15:07,170
the file structure through either FGP or through a file manager like I have open up here in my site

170
00:15:07,170 --> 00:15:08,820
Ground account.

171
00:15:08,820 --> 00:15:14,630
So I'll just go up into my SEE panel where I'm managing my Greg Davis dot com site.

172
00:15:14,640 --> 00:15:21,450
If you look over here again I'll review I have Greg Davis dot com slash MailChimp is the URL of the

173
00:15:21,450 --> 00:15:24,010
site that I'm working on right here.

174
00:15:24,180 --> 00:15:31,230
So if I go back to that see panel for Greg Davis dot com I know that I can go down and open the file

175
00:15:31,230 --> 00:15:37,230
manager and this is a good way to avoid having to use in FCP program when you're using a subpanel based

176
00:15:37,230 --> 00:15:39,340
hosting like site ground.

177
00:15:39,450 --> 00:15:43,220
So I know that this is under a MailChimp folder.

178
00:15:43,440 --> 00:15:49,380
So I open the mail folder and there is the file structure that we're familiar with for my wordpress

179
00:15:49,380 --> 00:15:50,190
site.

180
00:15:50,250 --> 00:15:56,550
Now I do have the dashboard that HP file edited and ready to go on my computer so I know that I have

181
00:15:56,550 --> 00:16:03,990
to put that inside of a folder inside of my theme's folder and inside of the folder that I'm using this

182
00:16:03,990 --> 00:16:10,950
one is called storefront and that's the theme that I'm using on my web site currently so open the storefront

183
00:16:11,220 --> 00:16:12,180
folder.

184
00:16:12,180 --> 00:16:16,330
And now I need a folder inside of they're called newcomer's.

185
00:16:16,530 --> 00:16:24,450
If you remember we go back to our file or you can actually find out more about it looking at the newcomers

186
00:16:24,510 --> 00:16:27,760
docs and the template structure document.

187
00:16:27,780 --> 00:16:34,350
But if I look under my Adam document here it says on the original dashboard that BHP that I do need

188
00:16:34,350 --> 00:16:40,140
to have a new comers folder and then I'm basically going to match the file structure of the template

189
00:16:40,140 --> 00:16:41,490
is already in.

190
00:16:41,520 --> 00:16:47,600
So I know that I have to have a Wu comers folder and then I don't put the templates folder.

191
00:16:47,610 --> 00:16:55,110
But I just put the folder within templates so it's called my account and then the dashboard dat ph P

192
00:16:55,170 --> 00:16:56,940
file.

193
00:16:57,000 --> 00:17:05,490
And so if I go back to the browser right here if I go back to the right file manager first I need a

194
00:17:05,490 --> 00:17:07,530
folder called newcomer's.

195
00:17:07,590 --> 00:17:12,030
So I'm just going to hit New Folder.

196
00:17:12,030 --> 00:17:15,020
Now this is where your spelling has to be exactly right.

197
00:17:15,030 --> 00:17:20,550
So double check that as you go and follow along with me and make these changes on your own server.

198
00:17:20,730 --> 00:17:23,220
So then I'll open the newcomers folder.

199
00:17:23,430 --> 00:17:24,910
And what was next.

200
00:17:24,930 --> 00:17:35,270
I need to make a my account folder under the commerce folder so I'm going to do another new folder

201
00:17:38,030 --> 00:17:42,620
and it's called my account with no spaces or dashes or anything like that.

202
00:17:43,810 --> 00:17:49,870
And then I can just do the name of the file it's best practice just to name the file exactly what the

203
00:17:49,870 --> 00:17:51,590
previous file is.

204
00:17:51,610 --> 00:17:59,150
So it overwrites the file correctly so I'll go back into my file manager and under my account.

205
00:17:59,150 --> 00:18:02,820
Now I need to upload the file from my desktop.

206
00:18:02,960 --> 00:18:03,920
So here's where you do it.

207
00:18:03,920 --> 00:18:05,340
Inside of the file manager.

208
00:18:05,360 --> 00:18:07,590
Go to the desktop newcomer's site.

209
00:18:07,790 --> 00:18:15,140
And here it is dashboard dot ph P I'll hit open a small file so it's already complete so I can click

210
00:18:15,140 --> 00:18:22,140
back and it'll go back to the other tab in my dashboard and I can see that I have dashboard dot ph P

211
00:18:22,750 --> 00:18:25,310
inside of my file structure.

212
00:18:25,420 --> 00:18:32,650
So all I should have to do is go back to the live Web site here and if I refresh the page it will show

213
00:18:32,680 --> 00:18:33,700
my new changes.

214
00:18:33,790 --> 00:18:34,570
Yes there it is.

215
00:18:34,570 --> 00:18:42,410
So from your commerce site the name of the site almost from my account dashboard.

216
00:18:42,430 --> 00:18:43,110
Oops.

217
00:18:44,530 --> 00:18:51,460
My account for it I can view all this stuff and so it is using a file that's separate from the newcomers

218
00:18:51,490 --> 00:18:54,400
plug files just like child themes works.

219
00:18:54,400 --> 00:18:59,580
So if I update newcomers at some point over here that tells me all comers needs an update.

220
00:18:59,770 --> 00:19:04,890
I can feel free to do that for security reasons and I won't overwrite my changes here.

221
00:19:06,090 --> 00:19:12,000
In this lesson you made a fundamental change to the newcomers plug in by duplicating and editing a specific

222
00:19:12,000 --> 00:19:15,210
template file similar to the way child themes work.

223
00:19:15,210 --> 00:19:20,250
You were able to make a copy of a template file and upload it to the active theme file structure so

224
00:19:20,250 --> 00:19:25,780
that your changes would be preserved through future newcomer's plug in updates in the next video will

225
00:19:25,800 --> 00:19:31,200
look at different payment systems and learn how newcomers can manage payments and products within WordPress

226
00:19:31,200 --> 00:19:32,090
itself.

227
00:19:32,130 --> 00:19:32,600
See there