In this video we'll look at the newcomers account cart and check out pages and figure out how to customize
them when you use the WU comer's plugin you can use copies of the template files in a similar way to
the way we use them for our child themes.
This way when the WU commerce plug in needs an update you won't overwrite your changes so you can keep
the plugin updated for security and performance by the end of this video you'll know how and where to
make customisations to a newcomer system using best practices.
Let's go well we basically have a working store here made in the last two videos.
And because we're using the commerce storefront theme everything just seems to work now.
Sometimes you might want to customize certain pages especially if you're using a different theme that
may not integrate exactly perfectly with commerce itself.
And let me just show you an example about how I've used these customisation best practices in a site
that I'm building now and then we'll go and make those customisations in our project store here so that
if you're making a new comer store in the future you'll know how to customize it properly.
You may remember from Chapter 10 when we worked on the author pro Plug-In and looking at it's custom
post types that I've been working on a Web site for a client called Fun middle school plays Dot com.
Now because I'm using the author pro theme from Genesis this does have some built in buttons and even
some purchasing buttons that I can use to place any u r l that I want I can have a price here and I
can have a purchasing button right down here if I go back to that home page and click on one of the
plays that isn't free.
You can see that I've got the play page set up so that it's using the author pro thumbnail and the author
pro single page display instead of using the commerce display.
Now one thing I have here is I have this by button and when I have this by button activated I also have
the new comers plugin enabled in the background.
The reason I wanted to use the word comer's plug in is for tracking of orders and communicating with
the server in terms of having a cart and a checkout page and everything like that.
But especially I wanted to be able to have commerce manage the downloads for each of these items.
Now I've created this customized page just within the author pro theme that displays all the place groups
in their groups like I want it the default shop page when I installed wew commerce and enabled all these
products showed it more like this.
And you can see that it puts them all in one big list.
They're not separated into their series as.
And at the same time the layout isn't all that great.
So I wanted to create a custom page and then label that as the shop page.
The problem with that is that if somebody adds a play script for example to their shopping cart and
that's not very hard to do.
Coming from my customized pages here.
One of the things that it had in there is a return to shop button in the shopping cart as well as on
the checkout page.
And that returned to the store button would bring them back to the ugly products page instead of the
really nice looking products page that I have here that I had custom built.
So I just needed to edit a couple of the template files to remove that false link.
So let's go back to our shop and have the Wordpress dashboard page open as well and I'll show you how
to use the templates that come with the wew commerce plug in that we can duplicate just like we're creating
a child theme.
So for this lesson you want to have a few things ready to go and we'll go through the process together.
First the Wordpress dashboard open on your live Web site and let's have the site itself the camera store
that we're building up in another tab.
Secondly Here's a good reference document at the newcomers dot com documentation section.
I just searched for template structure under e-commerce and I found this page here.
It's at docs dot comers dot com slash document slash template structure and it just tells you how to
structure your template files so that when you update newcomer's it won't overwrite those files.
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
the file manager open as well.
And so I'll have this see panel open for my working Web site as well and I'll look at the file manager
for this newcomer's site that we're building to make these changes.
And finally since we're going to be duplicating templates that contain AHP code and then saving them
in new locations.
Let's open up our text editor or our code editor that we had worked on before mine that I use is called
Adam and I've got that open and I'm going to be finding the commerce plug in files that I want to duplicate
inside of my computer.
So it is an example of one of the changes that we could make using the newcomers plug in template files.
Let's look at the My Account page within our commerce site and you can see that it's got some dynamically
generated information here.
Since I'm logged in and I'm an administrator It knows my name it says hello.
Greg Davis and then it'll give me a sign out button and then it's got a standard message that just tells
me what I can do from my account dashboard.
Now this message is something that we might want to customize for our particular store.
And so let's figure out what page this is that is under my account.
This is our dashboard.
And then let's look at how we can change the wording on this information right here inside of newcomer's.
And our theme itself.
So one of the first things I wanted to do before I got started was to go to WordPress dot org.
Under plug ins and find the latest copy of the newcomers plug in.
So go ahead and follow along and do this yourself.
There it is.
We'll find the commerce plug in itself at Wordpress dot org.
And now I'm just going to download the latest version using this orange button right here.
Now I saved it on my desktop in my wordpress folder so I would know where it is and I've already done
it so I'll cancel that.
And then once I had that on my computer I went into Windows Explorer and I unzipped the zip file so
that I could access all the files and folders within the commerce plug in now.
Then I opened up my code editor and in Adam you can go in under file and click add project folder then
you can find the newcomers folder where you've saved it and just click add project.
So now I have a commerce folder inside of my code editor and I have all the folders and files that it
includes inside of my code editor.
So now I have all these files including the templates folder and as you can see there are a lot of different
templates that the commerce plug in uses.
And you can duplicate any of these inside of your active theme that way if you edit it at all and then
when comer's issues an update for security reasons or for code improvement reasons you can feel free
to update newcomer's without overwriting your changes on your specific Web site.
It's just the same way that using child themes works.
When we learned about it in a previous chapter now there are so many template files within the structure
of the newcomers plug in.
It might take a little bit of sleuthing to find out what template that you need to edit in order to
change your content here.
Now one thing you can do is in Adam you can right click on the project folder and you can go down and
you can click search in directory.
Now this will open a little bit of a search.
Now if I go back into my site itself here's that dashboard page I might just select some of this text
from your account dashboard Control-C to copy and then I'm going to go back into Adam and I'm just going
to paste that little piece of text in there and click find and see what I can find.
OK it's only found two results.
So it found inside of one file the wound covers OT file.
That is right here.
It found a reference to that and also found the template under my account called dashboard that ph P
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
before if I double click that line in the search results it will open up that template but if I look
I want to find out where that template exists inside of the newcomers plugin itself.
So if I go over here I can find it under my account.
If you remember where that project find results show me it's under wude commerce templates my account
and then it's called dashboard ph P.
Let's take a look at that file and how to find it.
So under we comer's and then the templates folder and then the My Account folder and then there it is
dashboard dot ph HP.
So if I open that within my code editor you can see inside of the comments at the top here.
It does tell you right at the top.
This template can be overridden by copying it to your theme slash and then it gives you a file structure.
So what we'll do is make a new comers folder inside of our theme folder and then we can make my account
folder and can use the same exact file name dashboard ph.
So one of the things we'll do right here is from this we'll just look at where our wording is that we
think that we want to add it.
So right here instead of the newcomers plugging it says From your account dashboard you can view your.
And it says a little bit of code your recent orders your shipping and billing addresses and these are
little pieces of code that let newcomers make that into a link so you can find those places inside of
your account on the Web site as a customer and then it shows the account dashboard.
And that's basically it.
So this is the file that I want to edit.
So we're going to make a copy of this file and create a new version of it somewhere on our computer
where we know where it is and then we'll upload it to our Web site itself right where they showed us
inside of the commerce folder.
And then my account and then that file name.
So the first thing I'm going to do is just click anywhere inside of my file and hit control a for select
all.
And if I scroll down you can see that the whole thing is selected and then I'm going to hit Control
C to copy and basically I've copied the entire contents of this dashboard dot P file.
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
and hit paste I mean paste that entire content into my new file here and now it doesn't know what type
of file it is.
Unlike the one right here called dashboard ph P You can see that it has some color coding to make it
easy to understand because Adam understands that this is a dot ph profile.
Now until I save my untitled file here it doesn't really know what kind of file it is.
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
this on my desktop where I keep the files that I'm working on for the course.
So right now I'm going to create a new folder.
This one is my new comers say folder you know.
Yeah.
And I can call this dashboard dot THP save.
And now now that it's called the dashboard dopy AHP it knows what kind of file it is and it shows me
the right color coding.
You can see if you go back and forth that the two files are exactly the same great so dashboard that
ph is the file that I can edit so that my store instead of saying from your account dashboard you can
view we can just change that to something different.
So while we're here I might as well change the text right here and call it something different.
And I'm just going to make a simple change so that we know that the change has taken and instead of
writing from your account dashboard I'm going to just label it more specifically and I'm going to say
from your
commerce site account dashboard blah blah blah.
And so that will just be the name of the site.
What if it were called you know fun middle school place I might say from your fun middle school plays
account dashboard and that way we know that's a specific change and we can look at our dashboard page
and see that our changes are working.
So I'm just going to hit Control s where you could go up and say file save and I know that this changed
file is now saved in that desktop folder called commerce and it's called dashboard dot HP.
OK so back in our site that we've been working on the live site I know that that dashboard page is called
My account and I've got the dashboard tab open right here tells me my name etc. but it says from your
account dashboard.
So we're going to replace the dashboard template file called dashboard dot HP inside of our WordPress
file structure so depending on how you're hosting your live site here you're going to have to access
the file structure through either FGP or through a file manager like I have open up here in my site
Ground account.
So I'll just go up into my SEE panel where I'm managing my Greg Davis dot com site.
If you look over here again I'll review I have Greg Davis dot com slash MailChimp is the URL of the
site that I'm working on right here.
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
manager and this is a good way to avoid having to use in FCP program when you're using a subpanel based
hosting like site ground.
So I know that this is under a MailChimp folder.
So I open the mail folder and there is the file structure that we're familiar with for my wordpress
site.
Now I do have the dashboard that HP file edited and ready to go on my computer so I know that I have
to put that inside of a folder inside of my theme's folder and inside of the folder that I'm using this
one is called storefront and that's the theme that I'm using on my web site currently so open the storefront
folder.
And now I need a folder inside of they're called newcomer's.
If you remember we go back to our file or you can actually find out more about it looking at the newcomers
docs and the template structure document.
But if I look under my Adam document here it says on the original dashboard that BHP that I do need
to have a new comers folder and then I'm basically going to match the file structure of the template
is already in.
So I know that I have to have a Wu comers folder and then I don't put the templates folder.
But I just put the folder within templates so it's called my account and then the dashboard dat ph P
file.
And so if I go back to the browser right here if I go back to the right file manager first I need a
folder called newcomer's.
So I'm just going to hit New Folder.
Now this is where your spelling has to be exactly right.
So double check that as you go and follow along with me and make these changes on your own server.
So then I'll open the newcomers folder.
And what was next.
I need to make a my account folder under the commerce folder so I'm going to do another new folder
and it's called my account with no spaces or dashes or anything like that.
And then I can just do the name of the file it's best practice just to name the file exactly what the
previous file is.
So it overwrites the file correctly so I'll go back into my file manager and under my account.
Now I need to upload the file from my desktop.
So here's where you do it.
Inside of the file manager.
Go to the desktop newcomer's site.
And here it is dashboard dot ph P I'll hit open a small file so it's already complete so I can click
back and it'll go back to the other tab in my dashboard and I can see that I have dashboard dot ph P
inside of my file structure.
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
my new changes.
Yes there it is.
So from your commerce site the name of the site almost from my account dashboard.
Oops.
My account for it I can view all this stuff and so it is using a file that's separate from the newcomers
plug files just like child themes works.
So if I update newcomers at some point over here that tells me all comers needs an update.
I can feel free to do that for security reasons and I won't overwrite my changes here.
In this lesson you made a fundamental change to the newcomers plug in by duplicating and editing a specific
template file similar to the way child themes work.
You were able to make a copy of a template file and upload it to the active theme file structure so
that your changes would be preserved through future newcomer's plug in updates in the next video will
look at different payment systems and learn how newcomers can manage payments and products within WordPress
itself.
See there