In this video you'll finish your customisations of the woo commerce web store by adding a marketing
email list synchronization and you'll customize the look and feel of the transactional emails that newcomers
and wordpress will send to subscribers and customers who buy products and sign up for the free download
by the end of this video you'll have made the changes necessary to make your e-commerce store the best
it can be and you can use any of these customisations for client sites or your own web.
So back in our web store.
Let's make sure we have the Wordpress dashboard open.
And if you use the same web site that we were customizing in the last chapter you'll have the MailChimp
for Wordpress plugin activated and set up for using a Sign-Up form for your MailChimp lists.
If not get that plug in activated and connected via the API to your MailChimp account as we did in the
last chapter.
For me I'm still connected with the same web site and so my MailChimp API settings are still here and
I have my three lists listed here from MailChimp account.
All we have to do is under MailChimp for W.P. go down and click integrations in their menu item on the
left hand side.
And now that we have a Wu comer's web store activated the newcomers check out link is now activated
under the available integration section.
So just click with comer's check out and up at the top under enabled just click yes and then you have
to go down and let's leave implicit as No.
That gives the user the option to check or uncheck the box when they become a newcomer's customer on
your Web site whether they want to be signed up for the list on MailChimp or not and then choose the
list that is appropriate.
If you have more than one.
And then we could just leave the default here.
You can have that checkbox pre-selected which is a great idea.
We don't need to load any CSSA restyling for now.
And yes it's a good idea as we had discussed it in the last chapter to use male chimps double opt in
system and then we can come to the bottom here and click save changes.
Now really that is all there is to it.
Now if you make a test here if you go and say you wanted to go down and let's go where we had been before
that free product let's go down to that free product let's add it to the cart.
Great my system is still working.
Sends me directly to the checkout page.
And then maybe I'll use one of my testing email addresses right here.
Sign me up for the newsletter is our new functionality here the checkbox is automatically checked and
you can choose whether to do that or not but now if I place order it's got order received.
That sounds great.
And here's my download if I need it and I should also receive an e-mail about this order and we'll be
customizing that e-mail here in a little bit.
And this video as well but now I'm going to go up to my MailChimp account and let's just go to MailChimp
dot com and sign in I hitting the log in button at the top right.
And you should be following along and doing the same thing within your MailChimp and your Wordpress
accounts.
So let's see let's put the e-mail address and there is my log in as MailChimp opens opens right into
my dashboard there.
I'm going to look at my particular lists and I'll choose this list and I know that I had erased all
the old testing subscribers before and it looks like I'm not subscribe yet with my testing at Greg Davis
dot com email address.
And can you guess why.
Well it's because I haven't opted in yet.
Nobody will join your list if you're using the double opt in system until they confirm their e-mail
address inside of their email program.
So I've gone into my email program and I received an e-mail at that e-mail address from MailChimp.
Here's my standard confirm subscription email and if I click yes subscribe me to this list that will
send me to the thank you page that I had defined which in this list now is just a regular MailChimp
thank you page and it's got my little free download right there from our old mailing system.
But now if I go back to my MailChimp list and refresh the page I should have two subscribers now.
And there they are this number still says one but if you look down here in the list there is the e-mail
that I just used to subscribe using the commerce storefront.
So that's great.
I've just tested and a customer who buys a product or signs up and downloads a free download who enters
their email address will go straight to the MailChimp list get a double opt in and when they confirm
they'll join the MailChimp list.
Secondly I went into my e-mail and I also got an email from the newcomers store itself and this is the
e-mail that we're going to customize.
This is a customer e-mail and this is the standard layout that will comer's uses in the plugin to send
out a order email or any other emails that they send out to your Wordpress and your web or customers.
What we'll do is change the color to match whatever the brand coloring might be for your client or your
own web store and we'll place some other wording up here and potentially a logo too.
Let's get into it.
Back in the Wordpress dashboard I'm going to go back into newcomer's and then the settings page go ahead
and follow along on your own site and get to the same places I I'm going here.
And we'll check out how to customize those outgoing e-mails that the web store will send to customers
over on the right hand side of all of the settings tabs.
There's one called e-mails go out and open that emails tab and the first thing you see are under e-mail
notifications all the different types of notifications that might get sent to a customer.
And now these are actually THP templates that will go out to customers or even out to owners of the
web store like this new order cancelled order and failed order.
And these e-mail templates are determined through a PH file.
This is housed within newcomer's and you can see right down here the H.T. mail template is AICC a template
that's APHC file within the newcomers plug in.
But just like we did before with our will comer's overriding code as well as when we worked with child
themes.
You can override and replace this e-mail template by making a new file called Whatever It Is dot ph
P and putting it inside of your theme folder.
So here is a copy of it.
I I just clicked view template right here and you can see that the instructions are here.
Copy this to this folder right here your theme and then the newcomers folder and then an emails folder
and admin.
New Order.
Drop DHP.
In this case that's how you change the wording on any of these customer e-mails that will go out and
this one's the new order one.
And if you notice there's actually a button that can automatically copy the file to the appropriate
theme folder location.
So if you just hit copy file to theme it gives you a message says that this template has now been overridden
by your theme and can be found right here.
So you can use FCP or the file manager to go into your server find that BHP file and open it in a text
editor and make the changes to the text that you want for each and every one of those emails that are
these e-mail notifications.
Right here.
Any of these e-mails go out to the customer.
Now if I go back to my e-mail program Here's my e-mail that came to me as a customer when I ordered
my free download your order is complete and download your files here.
If I wanted to edit things that are said right here or add some other marketing copy or anything else
down here I'd have to edit that ph file.
So back in the Wordpress dashboard Let's see I believe this is the completed order e-mail template and
it is your order is complete is the e-mail so your blank order from this date is complete.
Let's see if that's the proper e-mail that we're looking for.
Yeah.
You would come restore order from the date is complete and then if it is if it contains a downloadable
file you'll see it says download your files.
So this template should say hi there your recent order on name of store has been completed.
So let's go back into here and let's view this template here.
As we look you go down here.
Here it is here's the text.
Hi there.
Your recent order on this is the web store has been completed and all that stuff.
Great.
Let's go back up and let's look at the second section under e-mails tab.
It says e-mail sender options.
This is where it's coming from.
And then your e-mail template.
Here's what we're going to edit in this video to make that email look just a little bit better but still
use the same default text within the email.
If you just click click here to preview your email template it will open another tab and it'll just
show you a sample.
Here's a slightly rounded corners.
A certain muted blue color and that's what the copy looks like.
And then there's some footer text down here at the bottom as well.
If we go back into the wordpress site here's where we can edit all that stuff now right here.
This would be a U or L for a logo image that you could put inside of the e-mail header so you could
upload a picture to the media library.
The logo for example.
In fact I'm going to upload I'm just going to media add new and I'm going to look for a small image.
Here's a logo image.
Let's see here.
It's just 240 by 120 a nice small image from my desktop in the brochure site that we had made before.
So I'm going to upload that to the media library.
And now how to get the URL for it.
If I click that little edit button or I go back into the media library and find that image and click
on it you'll see that over on the right side.
Here's the file you are l for that image.
So I'll just select all that text and hit Control C for copy.
And now I'm just going to go back to my woo'd commerce settings page under the email tab right up here.
And then of course back down here to my e-mail template now if I just click there and hit Control V
I'm pasting that logo image directly into that e-mail file.
Then here's the footer text.
You know I could change the color just by putting a new Let's see just make it a little bit brighter
blue.
How about that.
And the body text.
Let's go ahead and let's make it just I don't know.
This is just a great let's make it a little darker.
How about straight black so it's really readable close to black anyway so save changes.
And now the emails that I get from making a transaction with it in the store should have that logo a
new color as well as whatever changes I made right there.
So what if I go back to let's see let's go back home again.
And I'm just going to go to let's see to the second page of the web store.
I'm going to go ahead and order the free product again.
It's time.
Let's see if you know I'll just leave the same e-mail address there.
This time I won't sign up for the newsletter but if I place this order in fact you know what I'll do
is just use a second e-mail address so that it's not already in the web store.
If I hit place order I should get an order received page.
Great.
There it is.
And then up in my e-mail.
All right.
I went back to my e-mail and I checked that I received a new message from the newcomers store which
I did.
I opened it up here in a tab and you can see that here's the logo image that I had uploaded and referenced
by using the u r l in the commerce email settings and you could see the blue colors a little bit brighter
and the color here is a little bit darker.
Great.
I was able to edit that and it's an excellent e-mail.
You know you can see I just used an image here but what if you had some lettering which was your logo
or the lettering for the store the name of the web store.
That would be a great way to brand these e-mails that go out to your customers in this lesson you customize
to e-mail systems that your web store uses.
First you made sure that all customers who purchase a product or create an account to get a free download
get the option to join the MailChimp email list.
Second you customized the transactional email that the newcomers store sends out to customers.
Congratulations you've created an e-commerce store using open source software Wordpress and commerce
in the next chapter.
You'll be making modifications to your live site and learning best practices for web site security speed
and ongoing management.
This is where we start to bring everything together.
Honing your ability to sell create and manage client web sites