How To Make A WordPress Website With E-Commerce In 2+ Hours
Articles Blog

How To Make A WordPress Website With E-Commerce In 2+ Hours

August 16, 2019


Hi everyone I’m Katrina and in this video
let’s go through how to put together Artificer, the free responsive e-commerce theme by WooThemes.
I received a note from Chrystal asking that I put this video together so thank you Chrystal
for letting me know about this cool theme. This is a great design especially for anyone
who’s looking to sell arts and crafts or something creative and arty on your website. Mainly
because the design elements within this particular theme are really fun, they’re really colorful
and just really creative and arty overall- and we’ll see that in just a moment. I want
to point out though two of the main features that help made this particular theme stand
out. Number one not only is it free and that’s always a great thing so thank you WooThemes
for providing this free e-commerce theme to us. But the other great thing about this particular
theme is that it’s responsive. This theme is going to look great on your mobile devices
like your smart phones and tablets as it will on your laptop or your desktop. Just as a
quick demo note up at the top here we are on the home page of the desktop/laptop view
of the website and we see here in the menu navigation area there’s all these different
words that are actually across the navigation bar here. But when I come to the bottom right
and I change the size of the window I make it smaller by dragging it to the left. Note
how all the different elements on the website, on the homepage have all collapsed and now
are stacked one on top of the other. As we see here we can see each of these different
elements, these different sections of the homepage really clearly and they’re still
large enough to read. The whole entire window of the homepage looks quite different than
what we see in the laptop/desktop version. Also note that the menu navigation now here
at the top instead of having words really small as it would be if it just collapsed-
now when I click on this you have a really great drop down menu so that you can easily
navigate around the different areas of the website. This once again is the Smartphone
sized window of the website and this is what you can expect to see when you look at the
website on a Smartphone. Going back to the laptop and desktop view of the website the
other cool feature to note about this particular theme is that it comes in a variety of different
colors. The color scheme that we’re looking at down here is the default color scheme and
I happen to like this color scheme. It’s like a violet and it has a really complementary
brown tone and this beige color. This is the default color scheme but this particular theme
comes in a number of different colors that with a click of a button- you can change the
entire color scheme from the default colors here to indigo, honey, yellow, orange and
a few other colors to choose from. That’s great because you can really match the colors
to match the branding and the look and feel that you want for your business. Let’s take
a quick tour around the WordPress website that we’ll be building in this video. Once
again here at the top you’ll have your menu navigation area, then on the left hand side
in the header you’ll have either your website name in a tagline or a logo. You’ll have your
shopping cart features here on the right hand side. Some calls to action to check out. Then
on this particular theme you have one or two sentences maybe three sentences worth. You
can add a short description of what your website is about and you can add a button here call
to action, whatever that may be. I’ll show you how to do that in this video. Next we
see on your homepage you have your featured items here for your product catalogue. Different
featured items will show up on the homepage and then underneath that you’ll have one blog
post, your most recent blog post. Followed by on the side your contact information. Your
phone number, your email address, and also note this homepage is customizable. If you
prefer to have this sidebar on the left hand side you can do that as well. I’ll show you
how to change the configuration of these two boxes in this video. Just underneath this
section then finally you’ll have your footer area and in the footer you can add whatever
kind of customizable content you’d like. We see on the demo here I’ve added my Flickr
photos, I have some social network icons so anyone can easily contact me or connect with
me on the social web. Either via Google Plus, or Facebook, or Twitter of Pinterest. Then
I’ll also add an e-mail sign up form so I can start getting in touch with people by
collecting their e-mail address right on my homepage. So I will show you how to set up
the homepage in this video, as well as the internal pages of tis particular Artificer
WooThemes WordPress e-commerce design and website. So let’s take a look at some of the
internal pages starting with the Shop page. When I click on shop, here you’ll see here
we are on the Shop page. And as I mentioned before there’s a lot of really neat, really
fun artistic, creative, crafty looking designs elements throughout the website including
on the Shop page. So now we have these polaroid looking images for each of the different products,
held up by tape as we can see it right there. And then we’ve got these straps with tilted
boxes, and a dashed line all around it. So this is just a really cool. creative, crafty
theme. So this is the Shop page where all the different products in your product catalog
will be featured. So let’s take a look at one of these products in particular. I’m going
to click on this navy yoga t-shirt right here. And here we are on the product page of this
particular product. So on your product page you’ll have a thumbnail on the left hand side.
You’ll have a title of your product and the price, a short description of your product
and then you’ll have your attributes. So I’ll show you in this video how to set up attributes.
So for example, you may have a product, and perhaps you have different sizes or different
colors. So you can feature the different attributes on the same product page. So just underneath
this section you’ll have another product section with a product description as well as additional
information which will include the attributes once again in another box that says additional
info. Then you’ll have a review section and we don’t have any reviews at the moment but
when you do have reviews they’ll show up right here as well. Just under that you’ll have
the related products that are related to the products featured on your product page. So
one other thing to note, when I click on this particular thumbnail image, you’ll note that
there’s a lightbox display, and you’ll have a much larger version of your product so it’s
a lot easier for everyone to see. So this is what the product page will look like, let’s
go ahead and take a look at the portfolio page. I’m gong to click on portfolio right
up here in the menu bar. And here we’ll see on the portfolio page you can feature all
the different images you may have related to your website or related to your products.
So when we click on one of these for example, I’m going to click on this thumbnail. You’ll
notice that it opens up into a really cool lightbox display. So I’ll show you in this
video how to set that up as well. Next in line after the portfolio page is the blog
index page, so I’m going to click on blog right here. And here we are on the blog index
page where all the different excerpts of your blog will show up. So you’ll also notice on
the right hand side you have a sidebar with customized content you can add. Right now
I have a search for products box and a recent products box right here. But you can add whatever
you want here on the side, you can add that as well or instead. Also note that throughout
the website you’ll always have the calls to action to check out. So for the moment I’m
going to click on this actual blog post, new yoga tees have arrived. So I’ll click on that.
And here you’ll see on the blog post page you have the blog post title, some info, the
publish date, the author, and the category, and then the blog post will begin. And also
note that we have another lightbox gallery here. When I click on this one, once again
when I open this, it opens up into a rally nice lightbox again. So I’ll show you how
to add the gallery to the blog post as well as to the portfolio page itself. Scrolling
down note that on the blog post page I’ll show you how to add these different sharing
features so you can share the blog posts via the social web, either via Facebook, Twitter,
LinkedIn, Google Plus, or some other social network. Then under the blog post you’ll have
a little short bio as well as your thumbnail image of the author. And then below that we’ll
have the comments where anyone who wants to comment on the blog post can leave a comment
down here. Okay so now that we’ve taken a look at the blog post itself let’s click on
the about page, most likely you’ll want to have an about page to share information about
yourself, or your store, your online business on the web. So here I’ll show you how to create
a full-width page where you can add an image, some text, and also once again another call
to action button at the bottom. Finally we’ll have a contact page, so I’ll click on the
contact page link here in the menu bar, and here you’ll see on the contact page, anyone
can contact you via your website, directly by filling out this form. So they’ll just
fill out there name and email, and write their message and then at the bottom they can click
on submit. Back on the Shop page let’s take a look at how the checkout process will look
when a customer wants to buy an item on your online store. So once again I’m going to go
down to this yoga t-shirt here and click on that. And then here on the product page I’m
going to select a size. So I’ll keep it at a small and I’ll choose a navy color. I can
also choose white or grey. But I like navy so I’ll leave it as that. I want one unit
so I’ll leave it as one and then I’ll click on this button, add to cart, to add the item
to the cart. Okay so the yoga slim tee was successfully added to your cart. And you can
click on this button here to view the cart. So I’m going to click on view cart right here.
And here on the cart page you can see the thumbnail image of the item that you would
like to order that’s in the cart. You see the product title, the attributes you’ve chosen
as well as the price, the quantity, and the total. Also note that there’s this coupon
area here and in this particular website you can easily set up coupons for your different
products and I’ll show you how to create different coupons in this particular video. I’ve already
created one in advance so I’m just going to add the coupon right here, summerfun. And
actually before I click on apply coupon, notice in the bottom right hand side here in cart
totals, we have the cart subtotal is $40, I’ve also set this up with free shipping so
in this video I’ll show you how to configure the shipping whether it’s free shipping, flat
rate shipping, international shipping or local pickup and delivery. There are a lot of different
shipping items, I should say, shipping options that you can select. So I’ll show you how
you can do that as well in this video. So for the moment note that now the order total
is $40, but when I apply this coupon by clicking on apply coupon, okay first we see the coupon
was applied successfully, and then when I scroll down now we see that now I just received
a coupon of $5 off my order so now my order total is $45. So now the next thing is we
want to proceed to checkout by clicking on proceed to checkout. And here on the checkout
page a customer would fill out their billing address, as well as their shipping address,
leave some order notes if they’d like, and then they can scroll down, they can review
the order, and then they can click on this button to place the order. Now in this video
I’m going to set up the payment method as PayPal since that is the easiest thing to
set up, but of course you can set up other payment methods as well, and I’ll show you
where you can configure them in this video. So once an customer places an order by clicking
on Place Order, then they’ll go to the PayPal page where they can log in to their PayPal
account and pay for the product by logging in to their PayPal account, or if they don’t
have a PayPal account, or if they don’t have a PayPal account they can simply log in as
a guest and pay with their debit card or their credit card. So the good news is that a customer
does not have to have a PayPal account in order to pay via PayPal, they can just log
in as a guest and pay with their debit card or their credit card directly. So this is
where we’re headed toward in this video. Once again we’ll be building out the Artificer
responsive WordPress commerce website by WooThemes and it looks something like this. So let’s
get started. So before we get started how much is this website going to cost? Well we
need several things. Number one, we need a domain name and we also need web hosting.
In this video I’ll be using Hostgator.com for web hosting. And at Hostgator you can
get both the web hosting as well as the domain name. I’ll also be using a coupon to get an
extra discount off of my order at Hostgator, and that coupon is wpcoupon25. So if you decide
to go with Hostgator, be sure to use wpcoupon25 as well to get an extra discount off of your
order also. I just want to mention as well I do receive a small referral from Hostgator
so thank you in advance for your support of helping me to continue to make these free
WordPress training videos. Once we have the domain name and the web hosting, the next
thing we need is the theme and as mentioned in this video we’ll be building out the free
Artificer responsive e-commerce theme by WooThemes. So in this video I’ll show you where to get
this theme and how to set that up. Finally, the last thing we need is some time and I’m
estimating it should probably take roughly around two hours, I’ll try to go fast to speed
things up, but we’ll need some time to allot to build out the theme. So in sum, we’re looking
at less than $25 to get this particular responsive e-commerce website up and running. Once again,
that’s using the coupon code wpcoupon25 at Hostgator. So what are the three steps we
need to take to build out this website? Well the first step is we need to get the domain
and the web hosting. Second we need to install WordPress, and finally we need to build out
the website. So let’s head on over to Hostgator where we can take care of step number one,
which is getting the domain and the web hosting. So here we are on Hostgator.com. To view the
web hosting plans go ahead and click on the button in the middle that says “View Web Hosting
Plans”. And here we see there are three different plans to choose from. We have the Hatchling
Plan, the Baby Plan, and the Business Plan. If you are a small business owner, or if you
are just getting your website up and running for the first time, most likely the Hatchling
Plan or the Baby Plan would be a good fit for you. The difference between these two
is that the Hatchling Plan gives you a way to host one website domain, whereas the Baby
Plan gives you a way to host as many website domain names as you would like. So there’s
definitely more of a value in the Baby Plan since you can host as many websites as you
would like under one account. But if you are just getting started as mentioned, most likely
you only have one domain at the moment, then you can give ahead and click on the Hatchling
Plan to sign up for that. So I’m going to click on the “Baby Plan” because I want to
order that one. And next we’ll see that the next step is we need to choose a domain. If
you already have a domain then you can just enter that in this field and go ahead and
click on “Continue to Step 2”. And, if you need to get a domain name for your website
then you can enter the domain name you would like here and you can click on “Continue to
Step #2”. Now just note that down below here it says, “enter a coupon code”, and by default
you’ll automatically get a coupon from Hostgator. But if you want to add even more of a reduced
rate on top of that, you can use this coupon which will give you an extra amount off of
your order. So I’m going to put “wpcoupon25”, that’s a special coupon that you add to get
more off the total when you go to check out of your order. So I’m going to leave it at
wpcoupon25 to get a little more off of my order, and I’m just going to put in a random
domain name for the moment just to show you for the demo purpose what the next page looks
like. So I’m going to click on continue to step two which brings us to step two, the
billing information page. Now on this page we see the first thing at this page is the
package type. I had signed up for the Baby plan so we see that right here. And then we
see the current billing cycle that I am signing up for. Now I do not want to sign up for 36
months of web hosting all at once. I want to keep my expenses much lower than that.
And I prefer to pay month-by-month. So I’m going to click on this here and I’m just going
to choose a billing cycle of one month at a time that way I’ll be paying one month as
I go for my web hosting. The next thing you want to do is you want to choose a username
and a security pin. Then you can fill in your different billing information right here.
Then when we come down here we’ll note that there are hosting add-ons. By default, Hostgator
has you signed up for the domain privacy as well as the SiteLock. So you can choose whether
you want to include these add-ons or not. I’m going to uncheck the SiteLock because
I have some other ways that I intend on protecting my website when I start building it so I don’t
want to sign up for the SiteLock. And the privacy protection, this is really optional
as well. So it’s optional if you want to use it. I do recommend signing up for privacy
however, and this is why. When you create a web hosting account on any kind of web hosting
company, by default if you do not have privacy your account details including your address,
your email address, and your phone number may show up in the web host database for anyone
on the internet to be able to access. So I prefer keeping my address, my phone number,
and my email address private. So whenever I buy a new website domain name I always sign
up for privacy protection. If you don’t want privacy protection though, you can save some
money by un-checking this. I’m going to leave it on for the moment though. Then you can
just come down here and here you can see here are the details of your order. We note that
with this coupon, wpcoupon25, we’re getting almost $10 off so essentially the first month
of web hosting is free with this coupon. And we can see that here is our domain name, and
our hosting add-on of $9.95. So in total, we’re looking at under $25 to get started.
If you want to save some more money as mentioned, you can uncheck the privacy protection and
you’ll note that now the total is under $15. But once again, I like getting privacy, so
I’m going to leave that on. And the last thing that you want to do, is that you want to make
sure that you click on this little box here that says, “I have read and agreed to the
terms and conditions of use.” So, once you have your hosting order all ready to go and
when this looks good to you, you can go ahead and click on “create account” to create your
new web hosting account. So once you click on create account, you get this page, which
will thank you for your order and will tell you to go check your email for information
related to logging in to your web hosting account. So, I’m going to go check out my
email. And here we see on my email account, here’s the email from Hostgator with my account
info. So I’m going to click this email to open this and I want to point out two things.
Number one, the first link that they’ll share with you in the email is the billing system
link. So if you want to check out any info related to your billing you can go ahead and
click on this link and use the password that they give you. And then right below that,
you’ll see that there’s a link for your control panel with your user name and the temporary
password. So, I’m going to copy this password here, the temporary password. And to log into
your control panel, you’ll use this link. So, this is a really good email to keep in
a safe place for future reference because you’ll be needing this information, as well
as the link to the control panel, to log into your Hostgator web hosting account. So, I’m
going to click on this link here, and then here is my user name. You want to type in
your User Name here that was found in the email and you want to add your password right
here as well. Once you’ve have that set up, you want to click on log in to log into the
control panel of your web hosting account. So, here we are on the Hostgator control panel.
The next step that we want to do is step number two, we want to install WordPress and thankfully
with Hostgator, there’s a really easy way to install WordPress using their simple wizard
script. So, I’m going to scroll down to where that is located. You want to scroll down to
where it says “Software and Services” and you want to find this icon that says “Quick
Install”. So, this is what we’re going to use to install wordpress really easily in
Hostgator. We’re going to use this Quick Install link, so I’m going to click on that. And once
I click on that, you’ll note that there’s all these different kinds of software listed
here on the left hand side bar. So, right at the top, you’ll note that it says, “Blog
Software” and there’s a link here for WordPress. This is what we want to install, so I’m going
to click on that and then you’ll note that there’s a button here that says continue.
Also note that we are installing version 3.5.1 of WordPress, which is the most current version
available at the time of this recording. So, we are installing WordPress 3.5.1 and then
I’m going to click on continue to continue the process. And here you want to choose the
domain name that you want to install WordPress on. I’m going to install it on this domain
name here. The next thing that you want to do is you want to create an Admin email, a
Blog Title, an Admin User Name and you can also if you like add a First Name and a Last
Name. I’m just going to add an Admin email here, so put in my email. Also you want to
give it a title. So I’ll just call it the name of the domain. Now, the Admin User, this
is an important one to keep in mind, the default for WordPress websites is “admin”, the Admin
User default is “admin” and that’s not really the safest User Name to use so you want to
create a User Name that is anything other than admin. So, I’ll just use my name for
the moment and you can add first name, last name if you like. I’m not going to do that
and I’m just going to click on here, and click on Install Now. Ok, “Congratulations. Your
installation is ready.” So, you can access the installation of your new website by clicking
on this link here. And also note that here is the Admin Area log in URL that you will
use in the future to access the log in panel, to access your website in the future. You
want to make a note of this link here. It’s usually your domain name followed by wp-admin.
So that’s an important link to remember as well. So that going forward, you can easily
log into your WordPress website. Also make a note of your Username and Password. This
is what you will also need of course to log into your website when you click on this link.
So, I’m just going to highlight this temporary password here and copy it, and then I’m going
to click on this link here to log in into my new WordPress website. So here we are in
the log on screen of our WordPress website. To log in, you want to enter your username
in the Username field and your password in the Password field and then you want to click
on this button that says, remember me, so that the next time you come to WordPress,
your username and password will be remembered. In the event that you forget your password
in the future or perhaps even now, you want to click on this link here that says, “Lost
your password?” and WordPress will send you a password reset to the email that you used
when you were creating your WordPress website. So, for the moment, here I have my username
and password. I’m going to go ahead and click on the log in button to log into the WordPress
website. So here we are on the WordPress Dashboard, this is the first thing you’ll see when you
log into your WordPress website. And when you first install WordPress, you’ll also see
this message that says, “Welcome to WordPress”. Within this message box, there is a number
of links and each of these links represents some of the first things that most people
do when they install their WordPress website. For the moment though, I’m going to go ahead
and dismiss this message, by clicking on Dismiss in the top righthand corner here, so that
we can just see the Dashboard without that message. So here we are on the Dashboard,
let’s take a look what the website looks like, right out of the box when we first install
WordPress. So, to see the site, I’m going to go up to the top left hand side and click
on visit site right under the name of the website. So right here where it says “visit
site”, I’m going to click on that and here we see this is what the website looks like
now, without doing anything, so it’s pretty bare bones. This is the Twenty Twelve theme
that comes with your WordPress installation and we’ll be making quite a bit of changes
so that it will end up looking like this at the very end. So this is what we’re headed
toward, but for the moment, our website looks like this. So let’s go back to the dashboard
and start building out this theme. To do that you want to go to the top left hand side,
hover over the website name and the first link is Dashboard. We want to click on Dashboard,
and here we are on the dashboard of our WordPress website. So this is the first thing that we’ll
see when you log in to your WordPress website. For the moment, the first step we want to
take is we want to change the theme of the website. So to do that on the left hand side
the first step here is you want to click on Appearance, and here we’re on the Manage Themes
screen. So notice that the current theme is the Twenty Twelve theme. This is the theme
that comes with your WordPress installation. The next step we need to take is we need to
install a new theme. Again we’re installing the Artificer free responsive e-commerce theme
by WooThemes. To install the theme go ahead to the top here
where it says install themes, click on install themes. And then you’ll note that by default
you’ll land on the search page. The page we need here is the upload link so I’m going
to click on upload there. Here is says install a theme in .zip format. First we need to get
this theme from WooThemes and then we can come back here in just a moment and we can
upload the file. I’m going to head over to WooThemes.com, here
I am on the WooThemes home page and you’ll notice at the top you’ll see here a link that
says themes. I’m going to click on themes and here you can do a search for this particular
theme. So this is a free theme so I’ll check this box. It’s also a responsive theme and
it’s a WooCommerce, e-commerce theme so I’ll check these three boxes and then I’m going
to click on search to filter the results. Here you see the two different options that
we have, the Mystile theme and the Artificer theme. We’re going to set up the Artificer
theme so I’m going to click on this thumbnail right here for Artificer. Here we are on the
artificer theme information page. You can read more about it if you’d like right here
but instead I’m just going to click on this button here that says free download, which
brings us to another section here. I’m going to click on download once again. Actually
instead of clicking here I can click this green button here that says free download.
I’m going to click on free download and then you’re going to land in the log-in or register
page. I already have an account so all I need to do is login. But as it notes here if you
don’t have an account you can register for a free WooThemes account to get access to
free themes and plugins. Go ahead and enter your username, email and password twice, and
then click on the register button to register for a WooThemes free account. I already have
an account as mentioned so I’m just going to login into my account by clicking on login
right here. Here I am on my account dashboard. The next step is we need to download this
theme. Most likely you will find the download link either in the downloads tab here, I’m
going to click on that. And okay great, so the download is available on the download
tab and we see it’s the first one listed here. There’s all these other free themes that you
can download here as well. But we’ll be looking at the artificer theme in this video so I’m
just going to click on this link here that says download theme to download the free responsive
Artificer WordPress theme. Once the theme has been downloaded I always like to drag
it to my desktop so it’s easier to find. I’m just going to grab this icon here and drag
it over to my desktop, and release it. Then once you have downloaded the theme file then
you want to go back to your WordPress website on the install themes screen here. Then you
want to click on choose file to choose the .zip file. I’m just going to select the file
right here and click on open. Then within WordPress I’m going to click on Install Now
to install the new theme. Okay the theme has been installed successfully the next step
is we want to click on this middle link here that says activate to activate this theme.
One the theme has been activated you’ll arrive on this screen right here and you’ll note
that there’s a message at the top that says, “Enhance your theme with WooDojo.” We do need
to go get WooDojo to make this all work. I’m going to click on this theme here that says
get WooDojo which brings us back to the WooThemes website where you can download WooDojo for
free. You can also read more about WooDojo if you like but instead I’m just going to
click on this link here that says download WooDojo for free. Once again as we did before,
once the file has been downloaded I’m going to drag it to my desktop so it’s a little
bit easier to find. I’m just going to drag it over here and release it. Then I’m going
to go back to my WordPress website here and I’m going to click on plugins because WooDojo
is a plugin. On the left hand sidebar where it says plugin I’m going to click on Plugins
and here at the top there is another link that says add new. I’m going to click on this
add new button right here and just like we did with themes, with plug ins this time I’m
going to click on this link here that says upload to upload this plugin. We need to install
the plug in a .zip format so I’m going to click on choose file and then I’m going to
select the WooDojo zip file right here and click on open. Then I’m going to click on
install now to install this WooDojo plugin. Okay plug in has been installed successfully.
Activate plugin so you want to click on activate plugin right there and then the plug in has
been activated. We’re not quite done with WooDojo the next thing that we need to do
you’ll notice that you’ll have a new link on your left hand sidebar within WordPress
and it’s called WooDojo. We want to click on this right here so I’m going to click on
WooDojo. Here on the WooDojo page you’ll note that there is a message that says WooDojo
is a powerful toolkit of features to enhance your website. There’s all these different
features that you can add to your site if you like but the one that we need right now
is WooCommerce. I’m going to scroll down to where it says WooCommerce right here. It’s
underneath WordPress plugins and it says WooCommerce is a powerful E-commerce plugin that helps
you sell anything beautifully. I’m going to click on download and activate to download
and activate the WooCommerce plugin. Once you download and activate WooCommerce you’ll
also get a message at the top that says welcome to WooCommerce you’re almost ready to start
selling. You’ll have a button here that says install WooCommerce pages. I am going to click
on this button install WooCommerce pages. Okay welcome to WooCommerce 2.0. There’s a
button here that says settings, I’m going to click on that right here to go to the WooCommerce
settings screen. And on pages right here I’m going to click on pages. I just want to take
a quick look at this page, it looks like all the pages we see have been created and they’re
all showing up here where they need to be showing up under the shop pages section. Also
we see the shop based page right here is shop. All these pages have been set up which is
great so now let’s take a look at what the website looks now. I’m going to go to the
top left hand corner underneath the website name and where it says visit site I’m going
to click on visit site. Here we see the bare bones version of our website. This is the
Artificer responsive e-commerce website and we just have a basic framework right here
but we see there’s quite a bit of work to do. We need to add the menu navigation area
and I’m going to remove this particular menu. I prefer the more minimalist looking, clear
one at the top. You can have two menu navigation areas though within this theme and I’ll show
you how to set that up in this video. I guess the first step is let’s take care of adding
our logo or adjusting our website name and tagline here. Then we’ll move on to configuring
the menu. First I’m going to configure the logo on the website name by going up to dashboard.
Then right here where it says Artificer theme options you want to click on Artificer and
here we are on the WooThemes Artificer theme options screen. The first thing I want to
point out is we’re using Artificer version 1.3.1 as well as WooFramework 5.5.5. Here
we are on the theme options screen, we land by default on the general settings tab and
you can see here that the first thing we see is the theme style sheet. This is where you
can change the colors to match the branding or the look and feel that you want for your
particular online store. I’m going to be using the default theme style but when you click
on this you’ll notice that you get all these different colors to choose from for your website.
You can choose whichever one you want. I’m going to stay with the default in this video
and then the next setting we can change is the custom logo. I will be uploading a logo
on in just a moment but I want to show you as well if you do not want to have a logo
on your website you can use a text title and a tagline description instead. Just to show
you what this looks like you would go ahead and you would click these two once again this
is if you do not want a logo. You would click these two right here to activate the title
and the description and then you’d want to set up the title and tagline in the general
settings tab. Before I do that I’m just going to click on save all changes to save the changes.
Now note we haven’t made any changes but I always like to re-save things just to make
sure that all the settings I’m looking at have been saved.
If you want to add a text title and a description then after you click these two boxes here
you want to click on the general settings link. I’m going to click on general settings
and here you see we arrive on the general settings tab so just keep in note than when
you install WordPress by default the tag line is just another WordPress website. This is
never a good tagline for anyone’s online store it’s way too generic of course.
At minimum the least you want to do is you just want to delete this altogether. If you
want to have a tagline showing up on your homepage then you would just add your tagline
here. I am not going to add any tagline though so I’ll just keep that blank then I’m going
to leave the site title as it is just the website name. Then I’m going to scroll down
and I’m going to click on save changes to save my changes. Let’s go back to theme options
screen because I actually want to add a logo to my website. I’m going to go up to the Artificer
once again I’m going to click on that. Here we are on the general settings screen so I’m
going to click on upload to upload a custom logo. Here we can add files from our computer
or from our media library but we haven’t added any images yet so there should be nothing
in our media library. I’m going to upload an image from the computer by clicking on
this from computer tab here. Then I’m going to click on select files to select the file.
Here we see all my files so I’m going to click on the folder where the logo is so I’ll just
click on that to open it and here we see here is the logo file. I’m going to highlight that
and click on open to open this file. Then you’ll note that here is the image that has
been uploaded and it’s always a good idea to add a title and an alternative text for
your images. I’m just going to add this as the website name right here so I’ll just add
the website name and then I’ll just copy it for the alternative text. You can come back
and you can fill all the other stuff out later if you’d like. The main things that we need
are the title and the alternative text. Then I’m going to come down and I want the full
sized version so I’m going to choose full size and then I’m going to click on use this
image. Okay here is my logo so the next thing is at the top we just want to click on save
all changes to save the changes. The other settings that I want to point out here in
the general settings screen when you scroll down you can also add a favicon if you like.
A favicon is an icon, a small image that shows up next to your domain name, your website
name in a browser. I’m not going to add a favicon but you can read more about it by
clicking on this ico image link if you’d like. The other thing I do want to point out is
tracking codes so it’s always a good idea to use some kind of analytics to track the
activity on your website. Google Analytics is an awesome free service that you can use
to track your website activity. I definitely recommend heading on over to Google and googling
Google Analytics and setting up a free Google Analytics account. Then once you set that
up you can add the tracking code on this box and click on save all changes. The last thing
that we need to do here on the general settings screen is we need to set the logo to be displayed
on the homepage. Right now we see that text title and site description are checked so
right now the title and the description will be showing up on the homepage, but as we see
here I’ve uploaded my logo so instead I would like the logo to be displayed. What we need
to do is uncheck these two boxes and then we need to click on save all changes to save
the changes. Now the website will be set up to display the logo. Let’s go take a look
at that by going to the top left hand side and clicking on visit site and here we see
here our logo is being displayed on the homepage. We see that we have quite a bit of work to
do here. Let’s start by taking a look at the menu right now you see this is the default
menu that comes when you install WooCommerce. Let’s add the top menu right up here at the
top and then we’ll remove this menu altogether. Then we’ll add some pages so we can start
filling out the menu navigation items right at the top.
To set up the menu we need to go back to the left hand side and click on dashboard also
know that we can go directly to the menu screen by clicking on menus here. I’m going to click
on dashboard right here and then on the left hand side I’m going to hover over appearance
and then I’m going to click on menus. Here we are on the menus screen and at the top
we see there’s a note here that says your theme supports two menus, select which menu
appears in each location. What we need to do is we actually need to create the two menus
right here and then we need to select the location. We’re going to have two menus. The
one is the one at the top so I’m going to click on + right here to create this new menu
and I’m going to call it top menu so I know which menu it is so I’m going to call this
one top menu and click on create menu. Then you see as well we have the other menu being
displayed right here. The second step is we need to set the location here. The primary
menu is the one that we just saw with all the default pages so I’m going to call that
one menu, just simply menu. The top menu I’m going to call top menu. Once I’ve set up the
location of the two different menus then I’m going to click on save to save the locations.
Now note that we don’t really have any pages so it’s probably best to go ahead and set
up the pages first and then we’ll come back to the menus right here. The first page that
I want to set up is the about page. Most likely you’ll also want to create an about page either
about yourself or about your online business, or the products and services that you’re offering.
Let’s create an about page by going to the left hand side and then where it says pages
you want to click on pages. Here on the pages screen we can see all of the existing pages
that we have on the website. These are all the WooCommerce pages that we added when we
installed the pages from WooCommerce. To add a new page you want to go to the top here
and click on add new and then the first thing we want to do is give our new page a title
so I’ll just call this about. Then I’m going to add some text here in this section right
here so I’m going to paste in some text I had copied. There we go. Also note that we
are in the visual tab right here. There’s two tabs- the visual tab and the text tab.
The visual tab is the what you see is what you get view where you don’t need to know
any code. You can just simply add your text in here and then when you want to format it
you can use all of these different icons in these two rows. If you are only seeing one
row, if you are only seeing this row for example then what you need to do is click on this
icon here it’s the third one from the right. When you hover over it says show hide kitchen
sink. When I click on this icon then you’ll get a second row of formatting icons. This
is similar to writing an e-mail or creating some kind of document in the word processing
program. You simply highlight whatever it is you want to format and then you can click
on these buttons here depending on what kind of formatting you want. The other good news
is that you don’t have to memorize what all these icons are, you can just hover over each
one of them and when you hover over them you get a small yellow tool tip that tells you
what the particular icon does. We see the first one is a bee and it’s bold and when
I hoer over the eyes italics then you have the strikethrough, you have your unordered
list, you have some links here and so on. You can kind of just check on all of these
different icons and see what they do. I actually am not going to any formatting to this right
now so I’m going to undo this formatting by clicking on this button here which is the
remove formatting eraser. The next thing that I’d like to do is I would like to add an image,
a picture right in front of this text so what I want to do is place the cursor where I want
the image to be displayed and then I want to come up here and I want to click on add
media. Here on the media screen you see that now we’re in the media library page but actually
what I want to do is I want to upload a file from my computer so I’m going to click on
upload files, then select files and then here I want to select the file that I want. I’ll
choose this one- pic two and then I’ll click on open and then on the right hand side you’ll
see all the different details we can add for the image.
Once again it’s always a good idea to include a title and an alternative text so I’ll just
add this to be the name of the website and I’ll add my alternative text right there.
The when we scroll down you’ll note that there’s some alignment settings here so I want this
left aligned so I want to click on this and click on left. You can also centre this, right
align it or choose no alignment at all. I’m going to left align it though so I’ll click
on left and I’m not going to link this image to anything so I’ll leave it as none. Then
for size you can choose the full size if you like but for me right now I’d like to choose
the medium size 300 x 285. I’ll just click on that and then I’m going to click on insert
into page. Here we have the image with the text. On the right hand side are the page
attributes and you can choose whether to make this a parent page or a child page. Parent
pages are the top level page so I want the about page to be the parent so I’ll just leave
it as is right here it says no parent. Then where it says template note that when I click
on default template I’ll get all these different templates of different page layouts I can
choose. You have an archives page, a blog, contact form, image gallery, sitemap, tags
and timeline. I want the about page to be full width without a sidebar I do not want
a left or a right hand sidebar on this page so I’ll just click on full width right there.
Then I’m going to scroll down and this looks good. The other thing to note here is this
is a page and I don’t want to have any discussion or comments on this particular page. I would
prefer to keep my comments on my blog. I am going to disable the discussion by un-checking
these two boxes here. Now note that if you do not see the discussions section showing
up here then what you need to do is scroll to the top and click on the screen options
tab right here. When you click on screen options you’ll get all of these different settings
that you can choose for the different sections. You want to make sure that discussion is checked
right here so that you can see discussion down below at the bottom right here. We have
this set up and ready to go. The next thing I want to do is I just want to click on publish
to publish this page. The page has been published, we can view the page by clicking on view page
and here we see here is the page and it looks just how I wanted it to be. We might add a
call to action down here later but right now this looks good. Let’s add some more pages
to our website starting with a contact page. This time I’m going to go up to the top, hover
over + new and then in this dropdown box I’m going to click on page to create a new page.
This one I’m going to call contact because I want this to be my contact page. Again on
the right hand side where it says page attributes this time for the template I want to choose
the contact form so I’ll just click on that, and as we did with the about page I’m going
to disable discussion by un-checking these two right here. Then I’m going to come up
to the top and click on publish. Now we have the contact page published as well, let’s
take a look at that by clicking on view page. Here we see we have our contact page now note
that if you are getting this error message here that says, “e-mail has not been set up
properly, please add your contact email,” then we need to set this up so that we no
longer have this error message. Let’s do that now. I’m going to go up to the top and click
on dashboard and then I’m going to click on the Artificer theme options. Then on the left
hand side I’m going to click on contact page right here. Here on the contact page I’m going
to scroll down, you can add your telephone number, your fax number and then note that
it says contact form email. Enter your email address to use on the contact form template
so that’s something that we haven’t done so I’m just going to add in my email right there.
Then at the bottom I’m going to click on save all changes so save the changes. Now let’s
go look at our page, our contact page. We want to click on pages here. I’m going to
click on pages, then when I scroll down here is the contact page listed right here. I’m
going to click on view to view the contact page. Now we see the error message has disappeared
and the contact page is ready to go. We have two more pages to add- the blog page
and the portfolio page of images. Let’s take care of the blog page right now by once again
going to the top, hovering over + new and clicking on page. Then here on the add new
page screen I’m going to call this blog. Then I’m going to leave all of this empty here
but on the right hand side where it says page attributes under the template section I’m
going to click on default template here and this time I’m going to choose the blog template.
Then as we did before I’m going to scroll down and un-check the discussion because I
do not want any comments showing up on the blog index page. We will have comments featured
however on the single blog post. Every blog post will have comments but on the blog index
page I do not want to have any comments so I just uncheck those like that then I’m going
to scroll up and click on publish to publish the blog page. The blog page has been created.
We don’t have any blog posts yet so this will most likely be pretty empty. I’m going to
click on view page just to take a look at it and we see here’s the blog index page and
we just have the default post right now that came with the WordPress installation. We’ll
be deleting this post later down the line in this video but we do need to add a few
more new posts and we’ll do that as well in just a few moments. The last page that we
need to create is the portfolio page with a number of images. I’m going to go up to
the top once again and click on page. This time I’m going to call the page portfolio
and over on the right hand side I’m going to click on default template and this time
I want a full width page. Now there is an image gallery page right here so you can check
that out if you like, but I have a different way of adding images with the lightbox display
to my portfolio page that I prefer. I’m going to show you in this video how to do that way
instead. Right now I’m just going to click on full width. Then once again scroll down
and I’m going to uncheck the two boxes here in the discussion to disable comments on this
page. then I’ll just click on save draft to save the draft. Once the draft has been saved
the next step is we need to add a plug in for the lightbox. We’ll come back to this
page in just a moment but let’s go add the plug in. I’m going to click on plug ins right
here and at the top I’m going to click on add new to add a new plug in. The plug in
that I’m looking for is called jetpack. I’m going to do a search here by typing in jetpack
in the search field and then I’ll click on search plug in to search for the plug in.
Here it is at the top Jetpack by WordPress.com. You can check out the details by clicking
on details or you can just install now. I’ll check out the details so I’ll click on details
right here. Here we can see that this particular plug in was last updated 25 days ago which
is really awesome, it’s very fresh version for the plug in and it’s compatible up to
3.5.1 which is the version of WordPress we’re using right now. IT’s been downloaded over
5 million times with a 4 out of 5 star rating so this is a real awesome plug in. I’m going
to click on install now to install this plug in. Successfully installed the jetpack plug
in, now we need to activate the plug in by clicking on activate plug in. Then once the
plug in has been activated you’ll see it here in your plug-ins list and you’ll also see
it on the left hand side where it says jetpack. I’m going to Jetpack here on the right hand
side. Here on the Jetpack screen you’ll see there’s a note that says, “To enable all of
jetpack’s features you’ll need to connect your website to WordPress.com using the button
on the right.” Once we connect to WordPress.com then we can start to use all of the different
features. I’m going to click on connect to WordPress.com right here. Then you’ll arrive
on this page where it will ask you if you authorized jetpack to connect with your website
and with WordPress.com. The good news is that you can set up a free
account on WordPress.com if you don’t already have a WordPress.com account. If you need
an account go ahead and click on this link here that says need an account. Here on the
WordPress.com site all you have to do is add in your email address, username and password,
and then you can add a blog address but since you’re creating a website, most likely you
do not need a blog address. What you can do is come back to the bottom over here, there’s
a really small fine print. A one liner sentence that says, “If you don’t want to blog you
can simply sign up for just a username.” I would recommend just to click on this link
here and then here you can sign up with just your e-mail address, your username and your
password. Once you filled in these three fields, go ahead and click on signup to signup for
a free WordPress.com account. Once you sign up for your free WordPress.com
account come back to this screen where jetpack is asking you to authorize to connect it with
the website and with WordPress.com. Add in your new WordPress.com username and password.
I’m going to add mine in right here as well as my password. Once you’ve created your free
WordPrress.com account come back to this screen where jetpack is asking you to authorize connecting
to your website and WordPress.com. Then in the username and password fields go ahead
and add your new WordPress.com username and password and click on authorize jetpack to
authorize jetpack. You’re fueled up and ready to go, the features below are now active.
We’ve connected to WordPrress.com so the next thing is we need to start activating some
of these features. There’s three main features that I love in jetpack. The first one is let’s
find it here. The first one is jetpack comments. This is a new comments system that has integrated
social media login options. You can learn more by clicking the learn more button but
I’m just going to activate it by clicking on activate. Once the jetpack comments are
activated the next one that I want to add are the super duper sharing tool features.
Here’s there’s a button here for sharing tools where you can share content with Facebook,
Twitter and many more. I’ll show you how to configure this in just a moment. You can click
on learn more to learn more about this. I’m just going to click on configure right here.
Here we are on the sharing settings screen and the next step is we want to configure
the sharing buttons that will show up below the blog post. Whenever you have a blogpost
by adding these buttons to your post anyone will be easily able to share your content
on the social web via Facebook, Google Plus, Pinterest, Twitter, LinkedIn or some other
social network. What we need to do is drag and drop the available
services that you want into this box here. I’m going to grab Facebook I’m just going
to drop it in. I’m going to add Google Plus and drop that there. Maybe I’ll add Twitter
and LinkedIn. I’ll add those four and then for the other ones I’m going to add them in
this more section right here. You can see right below there’s a live preview of what
the buttons will look like on your website. I’m just going to add this one into the more
button and let’s see email. Then I’ll do Reddit, and then I’ll do Tumblr, I’ll add Tumblr also
so I’ll just drag that in here. Here you can see here is a live preview what
this will look like underneath your blog post and when you click on more you’ll have a dropdown
menu of a number of different other social networks.
Over here you can choose the button style, I really like this uniformed look so I’m going
to keep it like that. You can change the sharing label, I’ll keep it as share this. Then here
you can note where you want these buttons to show up. I prefer just to have the buttons
underneath the post so I’m just going to click on post here but if you’d like to have these
buttons show on any of the other pages throughout the website you can go ahead and click those
ones that you want right here. Finally when you’re ready to go, click on save changes
to save your changes. The sharing settings have been saved, let’s
go back to jetpack because there’s’ one other thing that we need to activate within the
jetpack toolkit. I’m going t click on jetpack right here and the next thing that we want
to add is the carousel which will help us to display the lightbox when we have the images
on the portfolio page. Just going to scroll down and look for the
carousel, it looks like it’s over here in the left hand side. It says, “Transform your
standard image galleries into an immersive, full screen experience.” I’m going to click
on activate to activate the jetpack carousel. The carousel has been activated now let’s
go back to our portfolio page and set up the portfolio images on the portfolio page.
I’m going to click on pages over here on the left hand side. Then I’m going to scroll down
and look for my draft portfolio page right here and I’m going to hover on top of this
and I’m going to click on this edit link right here. Now I’m going to start adding the images
to my portfolio page. I’m going to just place the cursor where I
want the images to be displayed. Then I’m going to click on add media to add the images.
Here on the insert media screen the next step is we need to come to the left hand side here
and click on create a gallery to create a new gallery. Here on the create gallery screen
we can either choose images from our media library or we can upload files.
I’m going to upload some files from the computer so I’ll click on upload files, and then select
files. Then you want to find the files to upload and include in your gallery. I’m going
to click on my portfolio folder here. I actually want to include all of these files so you
can select all the files that you want all at one time. Then you can come to the bottom
and click on open to open the images and upload the images to your gallery.
Once all the Images have been uploaded you’ll note at the bottom, it will tell you how many
images have been selected. So I have 12 images here that have been added to my gallery. And
then on the right hand side you have the image details. So once again it’s always a good
idea to include a title and alternative text. So you can do that by just clicking on each
of these images one at a time and you can just add the title and the alternative text.
So just add that there and then I can come to this one and do the same thing. Then once
you have the title and alternative text added for each of your different images, go ahead
at the bottom and click at the button that says create a new gallery.
Okay, so here’s our gallery. And as a note you can drag and drop to re-order the images,
so if you want to move some of the images around or change the order you can do so by
just dragging them however you would like them to be displayed.
Then on the right hand side, note that there are the gallery settings and the important
one to note here is the column settings right here. So I have it currently set at 3 columns
which are perfect because I have 12 images. So I’m going to have 4 rows of 3 columns each.
So that sounds good to me. But depending on how many images you have you may want to change
the number of columns right here. So I’m going to keep it at 3 and then I’ll click on insert
gallery to insert this gallery. Okay so here we are on the visual view of our edit page
viewer, edit page screen and you note that here there is a thumbnail image of a place
holder of our gallery. Now when you click on the text view, the text view shows you
the behind the scenes short code that WordPress is generating to produce the gallery.
The good news is that you most likely never need to come to the text screen here. This
is where all of the HTML code will be displayed or the short code will be displayed and the
good news about WordPress, you really can get by without knowing any code by staying
in the visual tab right here. So here I have my gallery. I’m going to go
ahead and publish this by clicking on the publish button right here on the right hand
side. Okay, so the page had been published. To view the page I’m going to click on the
view page and here we see here all of my images are displaying really nicely on my portfolio
page. When I click on each thumbnail, I’m going to click this one here, you’ll see this
really cool light box pops up and I can just now see wider screen, a larger screen version
of all the images in my gallery. Okay, now one thing to note is that in the
event that your image sizes are not this particular dimension. Perhaps you are showing maybe smaller
images sizes right here. What you need to do is you need to reconfigure the media sizes
of the thumbnail. So let’s take a look at mine right now. I’m
going to click on the dashboard and then I’m going to scroll down to settings and I’m going
to click on media. So here we see that my media settings have the thumbnail size of
300 by 300. If yours says 150 by 150, then in order to get those images displaying really
in a larger dimension on the portfolio page then I would recommend changing your thumbnail
size to 300 width by 300 height and then you want to click on save changes to save the
changes. The next thing that you’ll need to do to make
sure that this works is you’re going to have to regenerate your thumbnails. So I’m going
to go to plugins over here and click on plugins. And here on the plugins page we want to add
a new plugin called regenerate thumbnails. So I’m going to click on add new and then
I’m going to search for this plugin. Regenerate thumbnails and click on search and it’s the
first one that pops up here. You can read more about it by clicking on details or just
click on install now. So I’ll just click on install now. Yes I do want to install this.
Okay and once the plugin regenerate thumbnails has been installed. Go ahead and click on
activate to activate the plugin. Finally the last step to make sure that the
thumbnails are the right dimension that you would like, you need to go up to your media
page right here by clicking on media. And here on the media library you want to select
all the images that you want to regenerate the thumbnails for. So I’m just going to choose
all of these except for this 3 I don’t need to regenerate those , and actually as you
saw my images are looking really good. So I don’t need to actually do this. But just
for the demo purpose to show you how is this done. I’m going to regenerate them anyway.
So once you click all of the images you want to regenerate the thumbnails for then you
can click on bulk actions here when you click on that you’ll see there’s another item here
that says regenerate thumbnails. So go ahead and click on regenerate thumbnails and then
you want to click on the apply button to apply the new size.
Okay, all done. 12 images were successfully resized and there were zero failures. So that’s
good news. So now when we go to the page, the portfolio page by clicking on the pages
and then when I scroll down to portfolio now when you look at your images by clicking on
view to view the portfolio page, you should see your images now looking like this with
this dimension. Okay, so we’ve created all the pages. Let’s
go ahead and start adding them to our menu bar up here. So, I’m going to go to the menu
page by hovering over the website name and then I’m going to go directly to the menus
by clicking on menus right here. And here we are on the menu screen. So note before
I mentioned that I really just want to have that top menu. I’m not going to touch the
middle menu here which is referred to as the primary menu but I preferred just keeping
everything really minimalist. So in this website for this video I’m just going to feature one
top menu. Of course feel free to add other menu items to the primary menu as well if
you like. I’m going to add my items to my top menu by first clicking on the top menu
over here. And here we need to start dragging or adding the items we want to be displayed
in the menu. We need to add them right here. So I’m going to come to my pages right here.
And I’m going to click on all the pages that I want to feature in the menu. So I want the
portfolio, the blog, the contact page, the about page and I also want the shop page and
finally I want the cart page. So all those pages I want to feature in the menu. And then
I’m going to click on the button here that says add to menu. Then what you can do is
you can reorder this by simply dragging them wherever you want them to show up. So I think
I want the shop page to be first. And then I’ll have the portfolio page, I’ll have the
blog. Last over here I’ll add the cart right at the top. So I’m just reordering this. How
I want them to be displayed and then over here I also want to add a home button. So
anyone can easily click on home to go back to the home page. So, I’m just going to add
a custom link here. The label will be home and here’s the URL, my website URL. And then
I’m going to click on add to menu to add this particular link to the menu. And I’ll drag
that one to the top so it shows up first. When your menu is all ready to go the way
you’d like. Come to the bottom or to the top and click on save menu.
Okay, the top menu has been updated. So let’s take a look at it now. I’m going to go to
the top and click on visit site. And now we see here all of the menu items are showing
up where I want them to show up on the top menu. So we also have to add some products
because our website, it’s looking okay but we’ve got a couple more things to do. So let’s
add our featured products right here by adding some products to our website. So I’m going
to go up to the top and click on dashboard and then on the left hand side I’m going to
click on the products page right here by clicking on products and here on the products stream
the next step is we need to add a product. So up at the top there’s this button add product.
So I’m going to click on that and here on our new add product stream we cans start by
adding the name of the product. So I’m going to be adding a yoga mat here. So I’ll just
call this Premium Yoga Mats. And then in the section here you can add some text, the description
perhaps about your products. So just add some content in there. Then on the right hand side
we need to give this product category. So to do that I’m going to click on add new product
category and I’ll just call this Yoga. And then I’m going to click on this link here
that says add new product category. Okay, so we have our product category. You
can also give a product tag if you like. So I’ll just call this Yoga Mat. And also note
that if you have 2 words you want to separate your tags with comma. So I would, for example
if I had another Yoga Mat, I would just say Yoga Mat right here and you see that I’m separating
the tags with commas. If you have words then once again as well you just want to separate
the words with a comma. So, okay I’m just going to call this Yoga Mat. Just one tag
and then I’ll click on add and then I’m going to come down here and I’m going to give it
a featured image. So I’m going to click on set featured image and then I’ll click on
upload files and then select files and then you want to select the files that you want
to be featured as featured image. And then I’m going to click on open.
Once again, when the image has been uploaded you want to give your product image a title
and alternative text. So I’ll just call this Yoga Mat right here and I’ll do the same for
the alternative text and then you want to click on set featured image to set the image.
Okay, so once we have that all set, the next part is we need to come down to the product
data section. And this is where you’ll add any attributes, the prices and then the variations
related to your product. So for example the first product I want to
add will be just a simple product. So I’ll just leave it right here. You can see when
I click on the simple product you have other product types that you can choose. Grouped
products, External/ Affiliate Products and Variable Products.
So for the first product I’ll just keep it as simple product and if you’d like to give
this product a SKU you can do that. Also note that throughout the product data section and
actually throughout e– commerce, when you see this question mark when you hover on top
of it you got a really cool tool tip that would tell you exactly what this particular
field does. So we see here it says SKU refers to a Stock Keeping Unit. A unique identifier
for each distinct product and service that can be purchase. So I’m not going to deal
with SKU’s right now. However I would like to give this a price. So I’ll just put in
a price right here, just 40. Note that it says pounds. We’ll change that in a moment
to dollars and if you’d like you can also give this a sale price. So if I wanted to
do that I would just add the sale price here, say I’m going to make this 30 dollars on sale
and then you want to click on schedule to indicate how long the sale last. I was going
to click on this calendar here and then you can choose when it starts and stop. So I choose
May 25th as the start date and the end date will be the 28th.
Okay, so now we have our sale price dates. The next step is we want to add some attributes.
So I’m going to click on attributes right here. And then you want to click on add to
add a new attribute and I’m going to give this attribute new color. So we’ll have different
colors here. So I’m going to offer it in orange and gray for example as well as in red. Okay
so also note that when you have different values for your attribute you want to separate
them with this pipe symbol. And you can find the pipe symbol just above the return key
on the right hand side of your keyboard and when you click on shift. And then when you
click on the vertical line just above the enter key or the return key on the right hand
side of your keyboard. So once you have the attribute name and the
values here, also we want to go ahead and we need to check the visible on the product
page box. I’m going to check on that. And then you want to click on save attributes
to save the attributes. Okay so the next thing we need to do. I’ll just scroll down here
and we can also add a product short description so I’m going to grab the first sentence here
of my text, just as the demo content here. So I’ll just grab that and I’m going to add
a short product description by just putting the text right in here.
The other thing I want to point out is just below the short product description there’s
a section for the Artificer Custom Settings. And you’ll see there’s a number of a different
layout that you can choose for this particular product. So you see this is the full width
particular layout then you can add right side bar or left side bar. So since this is a product
page on my product pages because I preferred to have simply the product because I don’t
want anything distracting a potential customer from checking out my products. So I usually
don’t like having any sidebars on my product page. So I’m going to click on this one right
here to make sure the layout is full width and then I’m going to scroll to this half
and I’m going to click on publish to published this product.
Once your product task have been published the next step is add more products to your
product catalogue. So we just added this simple product this yoga mat simple product to our
product catalogue. Let’s add a variable product next. So I’m going to click on add product
once again. And this time I’m going to be adding some t-shirts to the product catalogue.
So as we did before the first thing is we need to give our new product a product name
so I’ll call this Yoga Slim Fit T and then you want to give a description here by entering
some text. So I’ll just add some text in there, then on the right hand side you can give this
a new product a product category. So I’ll call this yoga it’s a yoga t-shirts. So I
will add it to the yoga product category and then scrolling down because this is a t-shirt.
I’m going to give it a new product tag of t-shirt and then click add right here. Then
here we see once again here is the featured image. So I’m going to click on set featured
image and then I’m going to click on upload to upload a new file and then I’m going to
click on select files and here we see here is the image that I want to add for this product,
the Yoga Post T. So I’m going to highlight the image and then click on open and once
the image has been uploaded to your WordPress website you want to give the image a title
and then alternative text. So, I’ll just add Yoga Slim Fit T in both sections here and
once you have the title and the alternative text added. Go ahead and click on set featured
image. Okay so there we go here is the image and
the next step is we need to look at the product data information and set the product data.
In the previous example we had added a simple product but when I click on this you’ll notice
that there’s a number of other different product type. We have Grouped products, External/
Affiliate Products or Variable Products. For this example let’s create a variable product.
So I’m going to click on variable products and then you’ll note that here you can start
to add SKU’s as well. Also note that once again here’s that question mark which when
you hover over the question mark you’ve got a cool tool tip that would tell you exactly
what this field does. So here it is it says SKU refers to stock keeping unit, a unique
identifier for each distinct product and service that can be purchase. So if you like to manage
your products with SKU’s you can enter the SKU right here.
Also note there’s a number of other different settings here. There’s inventory, let me click
on that. So here if you want to manage stock or if you want to allow back orders or sell
products individually. You can set the settings right here for those things. I’m not going
to touch this I’m just going to offer a pretty simple variable product. So I’m not going
to configure anything here but I just want to let you know that this is here if you are
interested. Next is shipping and we will go over shipping
a little bit later in this video but I just want to call attention as well that here some
more shipping information that you can set for this product if you’d like.
Next we have link products. Here you can indicate if you want to upsell or cross-sell products
to or with this particular product here for this product page. And again when you hover
over the question mark there’s a tool tip that will tell you what this is so it says
upsells our products which you recommend instead of the currently viewed product for example
products that are more profitable or better quality or more expensive. So we’ll see a
little bit more about these link products in a moment. We need to add quite a few more
products to our catalogue to demonstrate what the related products are and to show the products
that we can use for upsells and cross-sells. Okay the one that I want to point out here
though for the variable product are attributes. So I’m going to click on attributes and here
on the attribute screen I’m going to click on add and once again the first attribute
I’m going to give this t-shirt is a color. So I’ll just put in color here and then I’ll
add the value separated by that pipe symbol. So give this navy and white and maybe gray
and then you want to click on this button here that says visible on the product page
and use for variations. Then you want to click on save attributes to save the attributes.
The next thing is I also like to add some sizes. So I’m going to click on add right
here once again and I’ll give a new attribute name of size and then the values I’ll add
will be small, medium and large. So I’ll just add that here. Again noting that I’m separating
these values with that vertical line, the pipe symbol which once again you can find
by holding on to your shift key and clicking on the key right above your return or enter
key on the right hand side of your keyboard. Okay so once you have the attribute and the
values entered. Go ahead and click on visible on product page and use on variations and
then click on save attributes. Okay the next step we need to complete all
the product data here is we need to click on variations right here. So I’m going to
click on variations and the first thing we want to do is we want to set that default
color and size. It’s really important to make sure you set it on default because if you
don’t set a default then you will not have call to action, add cart button on your product
page. So whenever you come to this variation settings here when you are using a variable
product make sure that you first set the default selection. So I’ll choose navy as the default
color and small as a default size. And then I’m going to start adding my variations by
clicking on add variation. Okay and the first one we want is I’m going
to click on this any color here and I’ll choose navy and then I’ll choose the size small and
then we need to give this a price. So I’ll just say this is going to be 40 dollar. Again
it’s in pounds; we will change the pounds to dollars in just a moment. So I have my
color, my size and my price. Then you wanted to just scroll down and you want to do that
once again here. I’ll add it navy in a medium and I’ll also give it a price. So for every
value and every attribute you need to set the price. So here we have navy and medium
for 40. Then I’ll click on add variation button and here I’ll do navy and a large once again
for 40 and then scroll down and then click on add variations. I’m sure we’re getting
the hang of this. Now I’m going to move on to the white color and I’ll make that a small
again for the same price for 40. Scrolling down clicking on add variation clicking on
white and medium this time. I have a few more times to do this 40. Then add variation once
again last one for the white. White and large for 40 and then finally the last color is
the gray. So I’ll click on any color then I’ll click on gray and a size small and also
the price of 40. I have two more times to go. Add variation any color I’ll make it gray,
any size this time it’s a medium the price is 40. And finally add a variation the last
one I’m going to make this gray, any size is large and the price is 40.
So once you have all of those settings set for the product variations right there. Then
I’m going to scroll up and I’m going to grab the first sentence right here because I want
to give this product a short product description. So I’ll just highlight the first sentence
here and I’m going to use that for my product description. So I’ll just scroll down to product
description and I’ll just paste that first sentence right in this box.
Finally as we did before I’m going to make sure that the layout of this product page
does not have a sidebar. I like to have the focus of attention on the product and I don’t
want any distractions with sidebars. So I’m going to click this full width layout box
right here and then I’m going to scroll to the top and I’m going to click on publish
to published this product. Okay so the product was published.
Let’s view the product by clicking on view product and here we are on the product page.
Now note that my call to action add to cart button is not showing up and actually I’m
glad for the video is not showing up because perhaps this might happen to you as well.
So we need to fix that we need to make sure that there’s always a call to action here
on the product page. So to fix this and make sure there is an ad to cart button let’s edit
this product really quick by going to the top clicking on edit products and then I’m
going to scroll down here. Let see what’s going on. So we have our variable product.
I’m going to click on attributes and I’m going to click on each of this just to make sure
everything is it. So attributes are visible on the product page and they are used for
variations and same as size it is visible on the product page and used for variations.
So let’s click on variations. So looking the product variations I’m just
going to scroll down here and we do have the default selection selected here, navy and
small. However it looks like somehow that setting didn’t catch right about. So let me
click on this cart here to open it up just a little bit and it looks like we have all
the colors and all the sizes. Navy and medium and large. White small, medium and large.
Gray small, medium and large. But we see the default selection here is navy and small and
for some reason when I set that it didn’t really catch. So let’s redo that. Right here
it says any color I’m going to click on that and click on navy and then I’ll click on small
and of course give it a price and now let’s see. Now looks like there it is. I’m going
to collapse this menu. So here we have the navy and the small. So looks like it just
wasn’t set previously but now that it is. Let’s go to the top here and click on update
to update this products. Okay now so that the product has been updated let’s check it
out by clicking view products. Okay now we see there is an add to cart, call to action
on the product page. So you want to make sure that there’s always add to cart, call to action
on your product page and if there isn’t then you want to go and check out the product data
and make sure that your attributes and variations are set up correctly.
Okay, so here we are on the product page, we have our thumbnail image, the title, the
price, a short product description and then we see when I click on navy it comes in all
these different colors and when I click on small it comes in these different sizes and
then down below you have your longer product description and when I click on additional
information you have the different attributes and values for the different attributes and
variations right here. If you want to have a review or if you do have reviews for this
product those will be listed right here in the review section and now we can begin to
see that the related products are beginning to show up below our product page. So as we
add more products to the product catalogue. We’ll start to see more related product showing
up right here. So let’s add another product to the product catalogue. Once again I’m going
to go to the top hover over plus new and click on products and here on the new product page
once again we want to begin by giving this product a product name.
So this time I’m going to be adding an E-Book to my product catalogue. So I’m going to call
this E-Book Yoga for Beginners and then I’m going to add my product description right
here. Then on the product category I’ll call it yoga and I’m also going to give it the
category of E-Book. So I’m going to click on add new product category and add E-Book
right here and then I’ll click on add new product category once again. And then I’m
going to scroll down and right here where it says products tags I will add E-Book as
well as Yoga and then I’ll click on add to add this two product tags.
Next we need to add the featured image. So I’m going to scroll down and set the featured
image by clicking on set featured image and I’m going to upload this file from my computer.
So I’m going to click on upload files and then select files and here is the image that
I wanted to talk, called E-Book. So I’m going to select that and then click on open and
once the image has been added to my media library here. I’m going to give it a title
and an alternative text. Once the title and alternative text are added then I’ll click
on set featured image to set the featured image.
Okay so we have the image. The next step is we need to come over here to product data
and once again we need to select the product type. So this time when I click on this you’ll
note that we’ve already got over simple products and variable products but this is going to
be a downloadable E-Book. So this time right her on the right hand side and also note that
when I hover over this checkbox it says downloadable products give access to a file upon purchase.
So that’s perfect for my E-Book. So I’m going to click on the downloadable right here and
when I do that you’ll note that there’s a number of different settings specifically
for downloadable products. So once again you can give this a SKU if you like. I’m not going
to do that. Regular price, this is going to be a free E-Book. So, I’ll just put zero there
for the price. Of course set for any price that you would like for your E-Book and then
we’ll need to choose to file where this path is located.
So first I need to upload the E-Book to my website. So I’m going to save all my settings
and we’ll come back to this in just a moment. So I’ll come up here to the top and just click
on save draft to save the draft. Once we save the draft of the product then I’m just going
to come down here to product data one more time and here words says file pass one for
line choose a file. I’m going to click on this button choose a file to upload my file.
So here we are we can either choose a file from the media library but I haven’t uploaded
it yet or we can upload a file. So I’m going to click on upload files and then select files.
And this time here in my folder here is the E-Book right here. So it’s a PDF Yoga for
Beginners E-Book right here. So I’m just going to highlight it and then click on open to
open this particular file. Okay, so once it has been uploaded and then again we need to
add the title. So I’ll just keep it as Yoga for Beginners and I’ll g those blank and then
I’m going to click on this get rid of these dashes here. You can also give it a caption
and a description if you like but I’m going to leaves button here that says insert file
URL. Okay, so the URL for this particular downloadable E-Book has been added right here.
If you like to limit the re-downloads you can indicate here what you would like to do.
I’ll just leave it as unlimited. So I’ll just delete that. You can also put an expiration
date on to the download and to the number of days before the download link expires or
leave blank. So I’ll just leave that blank. I don’t have any attributes for this particular
downloadable product. So I’ll just leave it as it is right here and then I’m going to
scroll down and then I’m going to add a short product description. So I just need to add
some text in that short product description area. So I’ll just going to copy this and
I’ll just paste this first sentence here. And then the last step is once again as we
did before I want to create a full width layout so I’m going to clicked on this box here for
the full width layout. Then I’m just going to come up to the top and then click on publish
to publish the new E-Book to my product catalogue. I’m just going to come back to the top and
click on “Publish”, to publish the new e-book to my product catalogue. Okay so once that
e-book has been published let’s take a look at it by clicking on “View Product” So here
we see here is the product thumbnail and when I click on it I’ll get a larger display or
at least a light box display of the image of this product. Then we see here is the product
title, we see that it’s free so it’ll just say free. Of course if you want it to have
a price you would have a price here. Then I have my short product description, my call
to action “Add to Cart” button and then the categories and tags where this particular
product has been grouped into. Then scrolling down we have my larger product
description and if there’s any review those will show up right here, by clicking on “Reviews”
it’ll show up right here. That is how you would add an e-book to your online store and
your product catalogue. Let’s take a look at the homepage and see
what we need to configure on the homepage. I’m going to go to the top and click on “Home”
and here we are on the homepage. We have our menu navigation set and our logo however we
know that all of our featured products are not showing up and we also have to add some
content here in this description box. Let’s take care of adding the featured products
right here on the homepage. To do that you want to go to the dashboard by clicking on
“Dashboard” and then you want to click on “Products” right here. I’m going to click
on “Products” and then we need to select which products we want to feature on the homepage.
So for example I want to feature the “Premium Yoga Mat” I’m going to click “Quick Edits”
and then I’m going to scroll down and there’s a box here that says “Featured” I’m going
to click on “Featured” and click on “Update” then I want to feature all the T-shirts as
well. I’m going to click one again on this one the
‘Yoga Slim Fit T” click on “Quick Edits” scroll down I’m going to click on “Featured” and
click on “Update” and two more to go. I need to click on the “Om Yoga Tee” by clicking
on “Quick Edits” once again click on “Featured” click on “Update” we’re getting the hang of
this. And the last one is the “Yoga Hands Tee” I’m going to click on “Quick Edits” and
then click on “Featured” and click on “Update” I’ve just designated or selected these four
products to be featured on the homepage. Let’s take a look at that now. I’m going to go to
the top click on “Visit Site” and here we go. Now my products are showing up on the
homepage. The next step is let’s add some content right
here in this description box right here. I’m going to go back to the dashboard by clicking
on “Dashboard” and here on the “Artificer” theme options screen we have on the left hand
side there’s a link that says “Homepage Options” I’m going to click on “Homepage options” and
then I’ll have this dropdown menu of a number of additional items that popup and the first
one is “Stand First” this is the homepage heading that we need to change and right here
you can see its “Hello and welcome to our awesome store.” That’s the default heading
description but I’m going to change that here and I’m going to add my own description “Welcome!
We provide high quality yoga and surf wear for yogis and surfers worldwide. Thanks for
visiting.” You can add whatever description you want about your site in this box.
And I’m also going to add a call to action. I’m going to create some html here just to
create a paragraph break. This is the little code you may need if you also want to create
a call to action button. We see that I just have a carrot here and a P and then a closing
carrot right there and them I’m going to add a “Buy Now” or “Shop Now” button on this description.
To do that I’m just going to add a href=and then “shop” to go to my shop page and then
I’m going to give this a class of button and then I’m going to close it out then I’m going
to put “Shop Now” with a closing bracket. I’ll add this code clearly on the video so
you can just copy it and add it to yours as well if you like to add a call to action on
your homepage. But once again I just have this opening paragraph
tag right here then I have my button code right here and then I’m going to close the
paragraph by adding a closing paragraph right there. So itsShop Now and then I close this link tag with my link tag right
here this a href I close it right there. So once again I’ll add this code to the video
so no worries if you can’t read it very well right here I’ll make it larger on the video.
So okay there we go. I’m going to click on “Save All Changes” to save the changes. And
now let’s take a look at the homepage. I’m going to go up to the top and click on “Visit
Site” and here on the homepage now we can see here’s the description showing up right
here. Now there’s a few things that I want to change;
number one this title here is kind of repetitive so I want to remove this title all together,
number two the font size of my description is really small so I want to increase the
font size, and finally number three it looks like this call to action “Shop Now” button
is a little bit too close to the text so I want to create some space between the text
and the call to action. The first thing that’s quickest and easiest
to do is moving the “Shop Now” call to action button down a little bit so let’s take care
of that first. I’m going to go up to the Dashboard click on “Dashboard” then on the left hand
side I’m going to click on the “Artificer Woo Theme Theme Options” screen link and here
once again I’m going to click on “Homepage Options” to go to the description that we
just added in the previous step. Here we see that here’s the paragraph break
but I need to add another paragraph break to create some space. I’m going to place the
cursor right underneath the text and add another paragraph opening tag and closing tag. I just
added this one line after the other, there’s a bracket a P and a bracket and then a bracket,
a forward slash, a P and a bracket. And no worries if you can’t see this I will add this
to the video so you can see this more clearly. Once you’ve added the extra paragraph break
html in here go ahead and click on “Save All Changes” to save your changes.
Okay options have been updated, let’s take a look now. Go to the top click on the “Visit
Site” and now we see that the call to action is a little bit lower and there’s some space
between the text and the button which is exactly what I want.
The next thing I want to do is I want to remove this website title right here. To do that
we’re going to actually need to remove some html. I’m going up to the dashboard and click
on “Dashboard” and this time I’m going to hover over “Appearance” and I’m going to click
on “Editor” down below. This is a screen where you can see all of the behind the scenes html
that is being used to create the WordPress website. So whenever you come to this screen
you want to be really careful and just make sure you really know what you’re doing because
if you accidentally remove some html it could potentially break your site or change the
page around so you have to be really careful when you’re going into these files here.
The one that I want for the home page is called the “Main Index Template” its index.php so
I’m going to click on this link here right here. And now we see in the larger window
here is the “Main Index Template” the index.php. In order to remove that title just above the
description on the homepage and also keep in mind if you want to keep the title there
then you can just ignore what I’m doing right now. But if like me you do want to remove
that then this is how you would do it. There’s a div class right here that’s says
div class=”home-intro” and just below it there’s another html code that starts with “h1 class=stand-first”
and then it says “php bloginfo name” and then there’s a closing h1 tag. I’m going to highlight
this entire code right here, so I’m highlighting the h1, the opening bracket, everything in
between it and then the closing h1 bracket, this whole thing and then I’m going to delete
it. Once again if you do not want to remove the title then just skip what I’m doing right
now. So I just highlighted this code, I’m going to delete it. And then I’m going to
come to the bottom here and click on “Update File” to update the file. Now when we go to
the top by clicking on “Visit Site” now we see that the title is no longer there. So
that’s great. The next thing that I want to do is I want
to increase the size of the font to make this a little bit larger. And one way that I do
that is we need to change the CSS. So how do you find the CSS? Well I am in a Google
Chrome browser, I’m using Google Chrome, and within Google Chrome there’s a developer tool
called Inspect Elements. And when I go up to the right hand side within Google Chrome
there are these three lines right here and when I hover over them it says “Customize
and Control Google Chrome” so I’m actually going to reduce the size of this window so
you can see this a little bit better. These are the three lines I’m referring to
when I click on these three lines then I get a dropdown box and when I scroll down to “Tools”
and I hover over “Tools” I get another dropdown box and then here you see there’s something
that says Developer Tools. I’m going to click on “Developer Tools” right here and this is
all the html that is powering this particular homepage of the website, right here on the
left hand side. And on the right hand side these are all the CSS styles that are used
to create all the styles of the website. So things like colors and background colors,
font sizes, dashes, boarders, all of that is here on the right hand side. And then the
actual structure of how the website is setup is the html on the left hand side.
What we need to do now is we need to find the code that CSS code that is creating this
smaller font size right here. To find that code you can see here on the left hand side
you can click on these little markers here and when I click on this one for “wrapper”
you’ll see that I get another dropdown list. And now when I hover over each one of these
you’ll see on the left hand side its being selected. So here’s the top and we can see
that is being highlighted on the left hand side and then here’s the “header” and then
here’s the actual content. We can see that the section that I want right
here, this paragraph, this description paragraph is selected when I hover over the content
code right here in “Inspect Elements”. There’s also another marker that when I click on this
marker you’ll see that I get another dropdown box of other types of code. This is the one
that when I hover over div class=”home-intro” you see that the description on the left hand
side is highlighted and then there’s another marker here so I’m going to click on that
and then the first code here is “stand-first”. There’s a lot of ways to find this code but
right now we see that when I hover over that “stand-first” my description on the left hand
side is being selected. I’m going to click on this marker one more time and there you
go, here is the actual description where it says “Welcome! We provide high quality yoga
and surf wear” and so on. What we need to do is highlight this div class=”stand-first”
and on the right hand side where the styles are we see here is the code for the CSS styles.
Namely it is this one right here that says “.home-intro.stand-first” so when I click
on “Computed Style” at the top. Here we see when I scroll down here are all the CSS styles
and the font size right now is currently 14 pixels; we could see that right here, its
14 pixels. So I need to increase the font size to something larger than 14 pixels.
To do that I’m going first copy this CSS code and no worries if you can’t read this I’ll
add this to the video so you can see it more clearly. But I’m going to grab this, the “.home-intro.stand-first”
code, I’m going to grab that, copy it and then back on my website I’m going to go to
dashboard by clicking on “Dashboard” and I can also just close the developer tool and
I’m going to widen my screen once again so it’s easier to read. Then I’m going to click
on “Artificer Theme Options” and here just under general settings there’s another link
that says Display Options. I’m going to click on “Display Options” and here the first box
at the top says “Custom CSS” and on the right hand side it says “Quickly add some CSS to
your theme by adding it to this block.” I’m going to paste the CSS code I just copied
in the previous set so I’ll just paste it right there and then I’m going to add my font
size which is font-size with a colon and this time I’m going to make it 20 pixels instead
of 14 pixels. I just add 20px with a semicolon and then on the next line I’m going to close
this all, close this code by adding a closing tilde bracket. So once again I’ll add this
to the video in case you cannot see this very well. No worries if you can’t see this I’ll
add this in the video. Okay so once you have the new size here go
ahead and click “Save All Changes” to save the changes. Once the custom CSS has been
saved the next step is let’s take a look at the website to see what the font size looks
like now. So I’m going to go up to the top left, click on “Visit Site” and here we see
that the description is a lot larger and it’s a lot easier to read.
Note however that now we have this giant, well not really giant but it’s a rather large
space here that pushes everything down. The last thing I want to do is I want to move
everything in this section right here in the middle up just a little bit. So we’re going
to do the same thing that we did before. I’ll reduce the size of this window so you can
see my “Inspect Element” I’m going to come up to the top and click on these three lines
to open up the toolbar. Let’s see so I click on these three lines and I’m going to hover
over “Tools” and then I’m going to click on “Developer Tools” right here to open up the
“Inspect Elements” screen. Then what I need to do is I need to find where
this space is located in my code. Here we see here is the “wrapper” when I click on
this marker here then I have the top navigation then here’s the “header” and here we can see
there’s some green space here. The green space in-between the darker space, I’m not sure
if you can see that but there’s some green space here and when I click on “header” this
is the style that I want to change. I’m going to click on this marker here next
to “header” then I’m just going to look at each element within the header section so
there’s the logo and then I have my checkout button, my basket button. Then let’s see when
I click on this here, this is the section that I want to reduce. So I’m going to click
on “nav id=navigation” and here on the right hand side this is what I need to change.
You can actually edit it within this window just to experiment and test it and see what
happens. It will not be saved yet but you can just try things out on the right hand
side and experiment and see what happens when you change the code. For example here is the
#navigation and there’s a space and an opening tilde bracket and then it says “margin-bottom
is 2.618em” I’m going to actually click in here and I’m going to change this to 0, just
to see what that looks like. So we see that when I click on zero there now everything
moves up just a little bit. That looks a lot better when it’s raised like that without
the large space. So I think that’s the CSS code that I’m going to use.
What I need to do is copy this part, this #navigation so I’m going to highlight it and
copy it. And also keeping in mind that what we need to edit is margin-bottom. Okay I copied
#navigation and the opening bracket then I’m just going to close this and now here I’m
going back to my dashboard in WordPress by clicking on the dashboard link. And then I’m
going to click on the “Woo Themes Artificer Theme Options” and then once again I’m going
to click on “Display Options” to go to the custom CSS box.
Here right underneath the first CSS that we added I’m going to paste the navigation CSS
code right there and on the next line I’m going to add margin-bottom and this time with
a colon and them I’m going to put 0em with a semicolon and then on the next line I’m
going to close it out with a closing bracket. I will also add this in the video if you can’t
see this so no worries if you can’t see this I’ll add this so you can see it more clearly
in the video. Okay so once we have all of the navigation
margin bottom added, I’ll just widen my screen here a little bit, then I’m going to click
on “Save All Changes” to save the changes. Once the options have been updated go to visit
the site by clicking on “Visit Site” and here we go. Now this looks so much better, there’s
not as much space anymore. This is just how I want it. Okay now it’s looking really good.
Now the next thing is when we scroll down here you’ll note that we need to add a blog
post and also note that the size of my font is kind of falling off the screen a little
bit. To reduce the font size of these two items
here on the sidebar we once again need to open up “inspect Elements” find the CSS style
code and then we need to reduce the font size size. So once again I’m going to reduce the
window here so it’s a little bit easier for you to see it. then at the top I’m going to
click on these three lines right here then I’m going to hover over “Tools” and then here
where it says “Developer Tools” I’m going to click on “Developer Tools” to open up “Inspect
Elements” Then I need to find where this particular section is located in the html.
So here where it says “wrapper” we can see that now that the content is selected but
I need to drill down a little bit more to specifically find this particular wrapper,
this part of the wrapper right here. So I’m going to click on this marker here on the
“wrapper” then I’m going to go down to “content” and then I’ll click on the marker here. And
then I’m going to scroll down to where it says “aside=sidebar” and once again click
on this marker. and then as I scroll down here it says “ul class=store info” and when
I click on that marker we can see down below there’s something that says “li class=email”
so I’m going to click on that and one last time I’m going to click on this marker.
Then we see here it says “div class=inner” and when I click on that here we see here
is the content, the actual link that I need to reduce. starts with “a href” so when I
scroll up to the “Computed Styles” here’s all the CSS styles on the right hand side,
when I click on that I scroll down you can see that the font size right here it says
font size is 23. That’s a little bit large that’s why it’s falling off the sidebar here
so I need to reduce the font size from 23 to something smaller.
To do that I need to grab the CSS code that is specifically referring to this particular
style and we see here that it’s this part right here so I am going to highlight all
of these. You can also highlight all of the other ones as well, you can see that they’re
not, there’s the “.home #sidebar .email .inner a” that’s the one that is actually selected
right here. But you’ll note that there’s some lighter versions here which also if you’d
like you can also apply the same style to those as well. So because they’re all in the
same group I think I’m just going to experiment now and see what it looks like when I copy
all of these. I’m going to highlight all of those different
elements here and I’m going to copy it and then I’m going to go back to my window here
by clicking on “Dashboard” and then I’m going to click on “Artificer Theme Options” for
Woo Themes. And then I’m going to click on “Display Options” one more time. Here on custom
CSS box I am going to paste the code that’s I copied from the previous step. Then I’m
going to add a new font size, font-size and instead of 23 this time I’ll make it 18pixels
and see how that looks. And then I’ll close it out with a bracket and again no worries
I’ll add this code to the video so that you can see it more clearly. And then at the top
here I’m going to click “Save All Changes” to save the changes.
Once the options have been updated I’m going to go back to the homepage to see what it
looks like by clicking on “Visit Site” and now when I scroll down, now we see that the
phone number is smaller and the email address is smaller too.
Now when we look at the homepage it looks like we’re almost done. Let’s add a new blog
post. To add a blog post you want to go up to the top click on “Dashboard” and here on
the dashboard to add a new blog post you want t o click on “Posts” on the left hand side
and then we can see all the posts that have been added to the website, the WordPress website
to date. Now note that the “Hello world!” is a blog post that comes with your WordPress
installation so we’ll be deleting that later. For now though let’s go ahead and create a
new blog post by clicking “Add New” and then here in the “Add New Post” screen you want
to start by giving your blog post a title. So I’ll just call this “New Yoga Tees Have
Arrived” and then in the text box here you want to add any kind of text content you’d
like or other content. Then on the right hand side in the “Categories” I’m going to add
this to the category called Blog by clicking on “Add New Category” we will add Blog and
then once again I’ll click on the button that says Add New Category.
We can also give this blog post some tags so I think I’ll call it yoga, as well as t-shirts
and also note that I’m separating these two different tags with a comma and then I’m going
to click on “Add” to add these two tags. And then at the bottom here where it says “Featured”
I want to set the featured image so I’m going to click on this link right here and then
we can either grab an image from the Media Library or we can upload a new file. This
time I’m going to grab an image from the Media Library. So I think I’ll use this one, this
t-shirt, so I’ll just click on that and then I’ll click on “Set featured image” to set
the featured image. Also note here that there’s an excerpt section,
so if I want to give this particular post a short excerpt I can do that. So I think
I’ll just grab the first two sentences here of this particular blog post, and then I’ll
scroll down and add that right here. And then let’s see, here we go, that looks good so
far. The other thing I would like to do is I would
like to add some images within this blog post. I’m going to place the cursor where I want
the small gallery to be located then I’m going to click on “Add Media” and this time actually
instead of adding just an image I’m going to create a small gallery. So I’ll click on
“Create Gallery” and then I want to choose the images that I want to have featured in
the gallery, so I’ll choose these three yoga t-shirts then here at the bottom I’m going
to click on “Create a new gallery” Okay so here we can once again, we can re-drag
this, drag this around and drop them to position them how we’d like and when you have them
in the right order you like on the right hand side you can choose how many columns to display
in this gallery. I’m going to display three columns so I’ll leave it as three and then
at the bottom I’ll click on “Insert gallery” Okay so here we go. The next step is I just
need to publish this post by clicking on “Publish” and one last thing before we actually check
out the post I want to add a video to my blog post. So I want to show you how you can add
a video here. To do that you just need to scroll down to wherever in the blog post you
want the video to be displayed so I’ll just put my video at the end. And then you want
to go find the URL of the video, whether its Vimeo or YouTube.
I am going to go to YouTube and here I have my video, of course this has nothing to do
with yoga but it’s another video I recommend you check out after watching this video, The
Top 10 Most Essential WordPress Plugins Every WordPress Website Should Have. I’m gong to
post this in my blog post and to do that all I need to do is highlight and copy the URL
for the video. So I’m just going to copy this URL and then back on my WordPress blog post
screen here I’m just going to paste in the video URL like that. Then I’m going to click
on “Update” to update this post. Okay now the post has been updated let’s check it out
by clicking on “View post” Here we see the blog post that I just created.
At the top we have the blog post title followed by the publish date, the author, the category
and tags. And then when I scroll down we see here is the gallery that I created and when
I click on each one of these, I’m going to click on this yellow t-shirt right here, it
opens up into a really nice lightbox display where I can see each of the images in a much
larger wide screen way. So that is really neat. And then when I scroll down here is
the text of my blog post and finally at the bottom here is my video. So when I click on
it then the YouTube video will start playing. Also note that here on the blog post you have
some sharing features so anyone can easily share your content, your blog post via Facebook,
Twitter, Google+, LinkedIn or any of the other social networks that you’ve setup. And then
underneath that we have a short author bio with an avatar here. And finally at the bottom
you have your blog comments so anyone can leave comment on your blog post below.
The next thing we need to configure on this WordPress website is the sidebar. Here on
the right hand side of the website we see that there’s a sidebar with all the default
widgets that are added when you install WordPress. We need to remove all of these and add the
ones that we actually want to have displayed here on the right hand side. To change the
widgets we want to go to the top left hand side, hover over the website name and you
can either go directly to the widgets page by clicking on “Widgets” here or you can click
on “Dashboard” and then on the dashboard you can hover over “Appearance” and then click
on “Widgets”. Here we see the primary normal full width
sidebar and there’s all these default widgets that have been added here. What we need to
do is remove all of these and we want to add the widgets that we actually want. The sidebar
gives you a way through widgets to add customized content to your sidebar. I’m going to remove
these one by one by just dragging them over to the side and releasing to deactivate them.
So I’m just dragging them over to remove them and then we need to add the content that we
actually want to have displayed here on the sidebar.
One thing that I want to add because this is an e-commerce website I want to make it
really easy for anyone to find products in my product catalog. One of the widgets that
I’m looking for is the WooCommerce Product Search widget which is located right at the
bottom here. Let’s see if we can find it, here we have it “WooCommerce Product Search,
a search box for products only”. So I want to add that just by dragging it up to the
Primary sidebar and releasing it. You can give it a name if you like, I’ll just call
it “Search for Products” and then I’ll click on “Save” and then the other item that I want
to add here in the primary sidebar is a Featured Products widget, so I’ll look for the WooCommerce
Featured Products. Let’s see where that is, right here display a list of featured products
on your site. So I’ll grab that and add that as well. By just dragging it to the primary
sidebar and releasing it, once again I’ll give it a title I’ll just call it “Featured
products”. Then you can indicate how many products you
want to have displayed, I’ll choose three so I’ll just change it to three and click
on save. Then you can add any other types of widgets
that you like. You can add them in the same way by just dragging them over to the primary
sidebar. The other thing that I want to point out here that you also in this them have a
number of different footer sidebar areas as well. We see we have four different options.
I’m only going to use three of them and we’ll configure the footer in just a moment. I do
want to add the widgets that I do want to have displayed here on the footer.
In footer number one I’m going to click on this button here to open it and then I want
to add my Flickr images so I’m going to scroll down to where it says Flickr let’s see if
I can find that here. Here we see here’s the WooFlickr widget where I can populate photos
from a Flickr ID. I’m going to grab this and drag it up to the top over here. Then I’m
going to release it right in the footer area. Next in order for this to display we need
to find our Flickr ID. You can find your Flickr ID by clicking on
this ID getter link so I’m going to click on that. Here you just want to add your Flickr
ID name or username right here where it says username You just want to add your own username
instead. I’m just going to add my Flicker username right there and click on find and
here we see here’s my ID so I’ll just copy it. Then I want to go back to my WordPress
website. Here’s my WooFlickr widget so I want to first
add my Flickr ID right here. Then I can indicate how many images do I want to have displayed
so I will choose to have six images displayed and I’ll leave al the other settings as they
are and I’ll click on save to save my Flickr settings.
In footer number two and footer number tree the next thing that I want to add are some
social icons to Facebook, and YouTube and Twitter. So I’m going to open this up. What
we need to do is first we need to install a new plug in so I’m going to go to the left
hand side here, click on plug ins and then I’m going to click on add new at the top.
I’m going to do a search here for the simple social icons.
I’m just going to search for that and click on search plug ins. Here it is at the top
so you can either click on details to learn more about these simple social icons or you
can click on install now to install this plug in. I’m just going to click on install now
to install this plug in. Are you sure you want to install this plug in? Yes. Once the
plug in has been installed we need to activate it by clicking on actuate plug in. Once the
plug in is activated the next step is we need to go back to our widget screen.
I’m going to go to appearance, hover over appearance and click on widgets. Now where
it says footer two I’m going to open up this widget area right here and I’m going to look
for the simple social icons widget on my left hand side so here it is right here. Displays
select social icons so I’m going to drag it up to footer number two and release it. Then
you can give it a title, I’ll call this connect on the web. I’m going to leave the icon size
as it is and the radius, and the alignment. I’ll leave all of those as they are but one
thing I do want to change is the background color.
To match the colors on this particular Artificer default version of the theme for this WooTheme
I need to use this particular color. I happen to know what it is and I’ll post it in the
video so you can see it more clearly but it’s this violet color. I’m just going to override
the background color and the background hover color with the color code here that matches
my WooThemes theme. Then down below you want to add all the different URLs of all the different
social networks that you want to feature in the footer.
I think I will like to feature for example Twitter so I’ll add Twitter here. I also like
to feature YouTube so I will add YouTube as well. Note that the URLs start with http://
and then the website domain for the social network you want, followed by a / and your
actual ID on that social network. The other one that I want to add let’s see I’ll add
Pinterest as well. I’ll just add three at the moment and then you want to click on save
to save these settings. Once the simple social icon settings have
been saved let’s take a look at the website by going up to the top and clicking on visit
site. Here we see we’re on our homepage and we have everything set up although it looks
like the footer area needs to be configured right here, but we do have all the other sections
and they look pretty good. We need to reset the footer settings down here.
Let’s do that first. I’m going to go up to the top, click on dashboard, then I’m going
to click on the Artificer WooThemes theme options screen and here where it says footer
customization you want to click on footer customization. Here at the top you’ll notice
there are a variety of different widget area layourts you can choose depending on how many
widget areas you want to display. At the moment we have just one widget area
displaying which is why we just saw on the previous step we just saw Flickr showing horizontally
across the bottom footer. Actually I want to include three footer areas so I’m going
to click on this layout here with three different widget areas. Then I’m going to click on save
all changes to save the changes. Now when we check out the site by going up
to the top, left hand side and clicking on visit site. Now we see when I scroll down
on the home page of the website we see here are the Flickr photos, my simple social icons,
and we’re missing one section right over here one widget area. What I want to add is the
sign up form for anyone that wants to easily be able to sign up for my e-mail list to get
updates. What we’re going toward will look something like this.
Right now this is the demo website that I already completed. What I want to add right
now is this sign up form. Right now in the process we are looking at this so to add this
form we want to go back to the widget area. I’m going to click on widgets here, right
underneath the website name I’m going to go directly to the widgets page by clicking on
widgets. Then I’m going to open up footer number three and I already added the magic
action box widget here so if you want to find out how to set up the magic action widget
plug in which is what you will need to add that really cool sign up form then I recommend
that you check out this video that I have over here called How to Add an Email Opt In
Form to Your WordPress Website. It’s a video that I have, it’s about 25 or 30 minute video.
I’m going to click on browse videos. Here I am on my YouTube channel and the video that
you’re looking for is this one right here that says How To Add an Email Form to Your
WordPress Website. This will show you step by step how to add
the magic action box to your WordPress website and how to set up a free MailChimp email service
for growing your email list. I recommend you check out this video to get the magic action
box set up and then when you’re done, you want to go back the widgets screen over here
on our WordPress website, and you will most likely already have your widget set up.
I’ve already gone through the process of adding the magic action box widget, and configuring
it and setting it up. I’m just going to drag it over to my footer three area and I’m going
to say get updates will be my title. Then I’m going to click on save to save the settings
for this particular widget. Now when we go up to my website by clicking
on visit site and when we scroll down, now we see we have our Flickr widget, our social
icons and our sign up form right here. We’re pretty much good to go, the last thing we
need to do for the actual e-commerce functionality of the website is we need to set up the payment
method and the shipping. To set up the payment method and the shipping,
you want to click on dashboard here. Then you want to go to WooCommerce and hover over
WooCommerce and you want to click on settings. Here on the WoCommerce settings screen the
first thing we notice here we’re on the general tab. Now note that currently the currency
is being displayed in pounds so I would like to change that to US dollars so I’m going
to click on United Kingdom and I’m going to scroll down and I’m going to look for my location
which is US, California. I will click that. Then for currency right here I’m going to
click on this particular field and I’m going to scroll down and I’m going to look for US
dollars. All countries look great, yes I want to enable the use of coupons, everything else
looks good. I’m just going to click on this button here that says save changes to save
the changes. Once we have the currency configured, the
next step is I want to set up a payment gateway so I’m going to click on payment gateways
over here. Here we are on the payment gateways page. Note that these little purple checkmarks
indicate that these different payment methods are active. Direct bank transfer, check payment
and PayPal are active. I actually first want to set first a default in this video I’m going
to be using PayPal as my payment method. Of course there’s these other ways that you can
choose if you’d like for a payment method. I’m going to click on PayPal right here as
my default payment method and click on save changes. Once PayPal has been set as the default
now I need to disable the direct transfer and the check payment. To do that first I
need to click on this link here that says BACS. I’m going to click on that link and
here where it says enable bank transfer I’m going to uncheck it and scroll down and click
on save changes. Then I’ll do the same thing for the check link here. I’m going to click
on check and I’m going to uncheck this to disable the check payment and click on save
changes. Finally here on PayPal I’m going to click
on PayPal and we see that PayPal is enabled which is great but I need to add my PayPal
email so I can start using PayPal as a payment method. I’m going to add my email address
here for PayPal and then I’m going to scroll down and if you have enabled PayPal sandbox
checked then it’s a good idea to uncheck this because this is used to test payments and
I don’t want to test payment right now. I’m going to make sure that’s unchecked and then
I’m going to click on save changes to save the changes.
Once the payment gateways are all set up the next step is we need to check out shipping.
I’m going to click on shipping right here at the top and here we see here we have all
our different shipping options. You can set your shipping options to be flat rate, free
shipping, international deliver, local delivery or local pickup. We see right now that frère
shipping is enabled which is actually what I want so I’m going to keep free shipping
on this particular website so I’m just going to click on the default right here, free shipping.
Then I’ll click on save changes to save the changes.
You can click on each one of these links at the top starting with flat rate if you’d like.
Here you see that it is not enabled, it’s unchecked so that’s good I don’t want to have
flat rate checked. Free shipping should be checked though so I just want to double check
it and it is checked, it’s enabled. International deliver, you can check out these features
if you’d like, this is unchecked so for me that’s good at the moment. I don’t want to
have international delivery. Local delivery looks great, I don’t want to have that either
and it’s unchecked and finally local pick up is also disabled- so that looks good.
I do however want to go back to shipping options by clicking on shipping options right here.
Note that it says right here enable the shipping calculator on the cart page because I’m going
to be offering free shipping it’s pretty clear that the shipping is zero so I’m going to
remove the shipping calculator from my cart page by un-checking it. Then I’m going to
click on save changes. Once the shipping options have been changed
the next step is I want to add a coupon to my e-commerce website. I want to be able to
give potential customers a coupon to use for products on my site. To create a coupon I’m
going to click on coupons underneath WooCommerce I’m going to click on coupons. Here at the
top I’m going to click on add coupon to add a coupon. The first thing is we need to give
this coupon a coupon code so I call this summer fun. To open it you just click on this carrot
right here. You can give your coupon a description if you’d like and there’s all these different
types you can choose. When I click on this you see that you can create a cart discount,
a cart percentage discount, a product discount or a product percentage discount. I’ll leave
it at an overall cart discount. You can add the coupon amount I’ll make this
just $5 by putting a 5 in there. You can see if you scroll down there’s all these other
different criteria and settings that you can choose to specify what this coupon for and
all of the different details on the coupon. I’m going to keep this coupon really simple
by just giving it a code and a general order amount and then I’m going to click publish
to publish this coupon. The coupon has been created, let’s go take
a look at our website now. I’m going to go up to the top and click on visit site, here
we are on the website of our responsive e-commerce free Artificer WooThemes WordPress theme.
Here on the homepage I’m just going to scroll down, it looks like everything is pretty much
set up the way we want. I think we’re pretty much done here. Let’s
take a look at the checkout process when a potential customer comes to your website and
wants to order a product. I’m going to click on this particular item right here, this yoga
slim fit tee by clicking on this. Here we see we have the color and sizes so I’m going
to choose and I’ll choose a size medium and I will just scroll down and that looks good.
I’m going to add this to the cart by clicking on add to cart. Then you’ll get a message
yoga slim fit tee was successfully added to your cart. I can view the cart or I can keep
looking for more products. I’m going to scroll down, I also want to add this e-book for beginners.
This yoga for beginners e-book so I’m going to click on add to cart to add that directly
to the cart. Then there’s a link here that says view the cart so I’ll click on view cart
to view my cart. Here we see on my cart page that I have two
products in my cart. I have the yoga slim fit tee for $40 and the eBook Yoga for Beginners
for free. What I need to do now if I like we notice also that here the cart subtotal
is $40, the shipping is free shipping and the order total is there for $40. Remember
I have this coupon so when I add my coupon right here Summer Fun and click on apply coupon,
once the coupon code has been applied successfully, now when I scroll down note that the cart
total which used to be $40 is now $35 because I have a $5 order discount on the order.
If I want to proceed to check out I just want to click on this button here that says proceed
to check out. Here we see, here we are on the check out page. Now note that I have this
sidebar on the right hand side and actually note that that was actually showing up on
the cart page. Whenever I have an e-commerce website I really want to make sure that there’s
no distraction and that a potential customer can just check out really quickly and their
focus I really on the product and the check out experience.
I want to remove this sidebar from both the cart page and the check out page. To do that
I’m going to go up to the top, click on edit page and then I’m going to scroll down to
the bottom here and you’ll note that here it says Artificer custom settings. Here’s
the layout and currently we have the sidebar enabled, but I want to create a full width
layout here. I’m going to click this box right here, this full width box and then I’m going
to come to the top and click on update to update this page.
Now when I view the page by clicking on view page now you’ll note the check out looks so
much nicer, it’s a lot cleaner and the focus is completely on just the checkout page itself.
Let’s go ahead and change t5he cart page as well.
I’m going to click on cart here in my menu navigation area. Once again we see here I
have my cart but I also have the sidebar. Let’s remove the sidebar by clicking on edit
page, then I want to scroll down to the bottom and I want to just click on this full width
box layout right there and click on update right at the top. I’m going to click on update.
Now to view the cart page I’m going to click on view page and now we see the cart page
looks much better as well. It’s so much better to remove the sidebar when you’re on the cart
page of your e-commerce website. Now when I click on proceed to check out and here I’m
on the check out page. Someone would just fill in their billing address, their shipping
address and then they would scroll down. They would review their order, once they have reviewed
the order they would click on this button here that says place order. The only catch
is that I’m getting this error message that says, sorry it seems that there are no available
payment methods for your state please contact us if you require assistance or wish to make
alternate arrangements. Here is the state listed here, there’s something
going on let’s take a look at what’s happening. I’m not sure why this error message is coming
up. Let’s take a look at our payment methods by going up to the top, clicking on dashboard.
Then I want to go to WooCommerce settings, click on settings and then I want to go to
payment gateways and click on payment gateways. Here we see PayPal is enabled, when I click
on PayPal right here. Actually here we go, so PayPal is listed as default here but it’s
not enabled. It needs to be a purple check mark here. Let’s go to PayPal by clicking
on PayPal and then here is the issue. We need to make sure, I guess I had missed it in the
previous step. We need to make sure that enable/disable is checked so make sure that this is checked
if you’re using PayPal and I want to scroll down and click save changes to save the changes.
Now when I go back to the website by clicking on visit site and then I want to click on
check out right here. Here we are on the check out page, I’m going to scroll down and it
looks like now PayPal has been activated and it’s showing up right here. This video I’m
using PayPal just because it’s the most easy payment method to set up right now. However
as you saw previously you can set other payment methods. The good thing with PayPal is that
a potential customer could use their PayPal account to sign in and pay for the product
on your website or they can simply log in as a guest at PayPal and they can use a credit
card or debit card to pay for the product. A potential customer does not need to have
a PayPal account to pay via PayPal. When they click on this link here, place order then
they’ll go to the PayPal page where once again they can log in to their PayPal account and
pay via PayPal or they can sign up as a guest. As it notes here they can pay with their credit
card or debit card if they don’t have a PayPal account or do not want to use PayPal. This
is how you set up the free responsive, e-commerce WordPress theme by WooThemes called Artificer.
I hope you found this video helpful in setting up your responsive e-commerce website. If
so please feel free to leave a comment below and like the video. Also if you know any friends
who may need a responsive e-commerce website using WordPress feel free to send them this
video and share this video with your friends. Finally, I’ll be coming out with more videos
as well. On WordPress and other topics related to internet marketing and building a business
online. Please subscribe to my YouTube channel for updates on my upcoming videos. Thanks
for watching, I’ll see you in the next video.

Only registered users can comment.

  1. I installed woocommerce 2.1.2 and under wooCommerce settings I do not see the Catalog, Pages, Inventory , Integration and Payments Gateways tabs.
    Why is that ? Every documentation video I see contains those tabs.
    Please help me out there. I am in the process to create my online shopping but I do need to wooCommerce settings tabs.

  2. I really need some help 🙁

    Installing Theme from uploaded file: woodojo.zip
    Unpacking the package…
    Installing the theme…
    The package could not be installed. The theme is missing the <code>style.css</code> stylesheet.
    Theme install failed.

     I am not sure how to fix it, but I cant even re download woocommerece. I hadto delete my previous wp due to a unfixable error

  3. Hi I have the menu at the top of the screen but under my logo I have a white bar and a home icon, how do I remove and just have menu at the top of screen?

  4. Is there a limit to the variable products? I have chosen 52 variables but it only shows 48 of them in the drop down on the product page.

  5. Hi is there a way of setting variable shipping costs for example $1.49 for first item then $2.50 for more than one item?

  6. I really REALLY need help!
    I have followed your tutorial, its great!
    HOWEVER, I am stuck on the responsive part. When checking my website on my mobile it will NOT show anything BUT my blog!!
    Most of my customers use their mobiles….so I am crying right now.
    What am I doing wrong?
    Thanks
    www.mamaslilmischiefs.com

  7. Also, do you have a tutorial on how to change the way the pictures have become grainy and all blown up? I think i remember seeing a video for this of listening to your voice talking about it. Can you direct me to it please. many thanks

  8. Hello Katrina,
    I'm back!  Not sure if you are still monitoring this but here goes.  I've totally messed up my Artificer Site, lost the photos on the front page.  I tried to delete the theme  in my C Panel at Hostgator and re-install (hoping to see the photos again) but it looks like whatever changes I made to Artificer are still there.  Is there any way to completely start from scratch?   Thanks for any help you may be able to offer.

  9. @Jude Prashaw hi Jude, thanks for your note. Sounds like you still have your database intact, as well as files in your FTP folders. I would contact Hostgator, explain what you want to do, and ask for their guidance. I'm hesitant to advise on deleting things without fully understanding what you want to do. Hostgator should be able to help you out. Best wishes!

  10. Hi Jude, great videos. really easy to follow… At 1:36:42, the html code for the call to action button doesn't work for me. In the video, you never clicked on the call to action button to double check to make sure it works. so idk if I'm doing something wrong on my part or the code you had on your video is wrong. Any help will be great…. 

  11. hi quick question, how do you change the background color of widgets?
    I identified the section with google developer tools and put the following in the edit css section but no change

    #footer-widgets {
    background-color: #ff9999;
    }

  12. Hi, great video. Please could you tell me how to translate Artificer front pages terms that users see at all pages? I would like to customize it at local language. I don't need to translate any of dashboard settings terms, only front. Thanks

  13. hi i love your tutorial and i think they are wonderful but i have one question when i go to wootheme to downlood the ecommerce theme it goes to go to cart instead of download is this something new?

  14. Hi Katrina, great theme and how to on this. I only have one question…after installing the theme and setting it up when i go to visit site to view the theme start-up.. 34:21 It seems on the homepage there are blank images products displayed (arts ?170, lantern 100.., art 120pounds) under is the cutom sidebar for email and phone and a latest blog post. This products displayed area seems to be missing in the theme start-up template. Is there any way to resolve this and make it look like yours featuring a few products on the top front of main page?

  15. Hello Katrina,
    you r amazing ,great tutorial video you were providing to us ,its really very helpful for me to make wordpress ecommerce website with using wootheme ,great Katrina good move ,keep it up ….
    Thank u….

  16. Thank you very much Katrina. I have a little problem with uploading the logo image. It dosen't appear totally, just a part of the image with form square is uploaded. How can I resolve this proble? Thank you

  17. Hi!  Great video, but my Shop Now button is not working.  I put in the code exactly the way you have it in the video.  Suggestions?

    Thank you 🙂

  18. Hi, thank you for great video!  All done, one thing you havent showed in this video how to change text on main page "call us" and "send us an email" how i can change number and email address in these boxes? thank you

  19. I enabled the lightbox, however, it is showing only the particular photo tat i click on. How do I slide the photos in my product photo gallery ? previously, thr was an arrow for me to move to next photo.But i dunno wat i hv done n it disappeared.

  20. @77webstudio  hi there, i really interested to create my own ecommerce. i even interested until i make a research on youtube until i found u. your explanation are so clear start from hosting domain cpanel to wp dashboard to wootheme until the final product. i even bough the baby plan from hostgator using the coupon that u give and with no doubt it turn to be more cheaper,i am so thank you and i cant wait for the account to be active. because after i install wordpress on c panel i click link HERE it direct me to PAGE NOT FOUNT i talk to the technician they said it take times for my account to be active,i cant wait to start my project. my question about wootheme is i watch some of other tutor said there is an issue with wootheme on wootheme super store theme; ref: @Jason Gerald (WooThemes Super Store) . i really like this theme can u do the same tutorial on this theme beside how to ensure this matter that happen to mr Jason will not be repeat to other user, please. thank you so much 

  21. Great video @77webstudio . Do you also have a video tutorial for WordPress theme "Onetone"? I don't have a background in web designing but would really like to explore and learn. And I think your video tutorial could really help me. Thanks 

  22. I have 3 images with three different sizes. my images are not getting resized even after regenerating; how can i resize these? Also is there a way to adjust the imaze size in shop or product page so as to have uniform dimension across? Pls suggest

  23. This video was so helpful! Thank you!  I have one question.  Is there a way to change the product image sizes if you want 4 images to display across a full-width page instead of 3?  Do you know where this is controlled in the theme? I was able to find where to change the php code to display 4 images instead of 3, but the default images are too big, so then there are only 2 images across, instead of 4…  I understand if you are too busy to answer.  I plan on checking out more of your videos.  Thanks again!

  24. Great video. I got a store up and running. I have 2 thing I can't figure out…help would be greatly appreciated, maybe a video on the PHP editing.

    1. On the homepage, I would like to move the phone and email boxes to the top of the sidebar widget. On your homepage demo, you have 4 images and the phone / email boxes are below your 4th image on the RH side. I only have 1 – 3 images.

    2. How can I remove the google map from the contact page and reclaim the space. It appears to be done through Google Maps section of theme-functions.php. When I have tried to comment out that section of the code…the site won't load at all.

  25. does wordpress provide a template for a listing site where I can get subscribers to list products which they want to sell?

  26. Katrina, hi. Wonderful video. My "basket" and "checkout" show absolutely nothing even though I have put items in the basket and am pretending to check out. Where can I go and what do I do to edit those?

  27. Thank you for this great video.  I love this theme and you have made it easy for me to follow your instructions.to get it up and running.  I just have some tweaking to do and then as you say "good to go|

  28. Thank you so much for the video! I have one question. I have set the featured products and the "stand first" message. However, none of that shows up on the homepage. It shows the menu, homepage message, and sidebar but none of the featured items and such that are supposed to make the homepage so beautiful. Can you please tell me what I've done wrong and how to fix it??

  29. Katrina,  I have made some changes to the colors of the buttons "Add to cart" and everything works until I click add to cart some javascript brings up the color of the old button with display of a waiting image.  How can I change the color of the button when it goes into that mode?  I cannot find the css to override.

  30. Hi Catrina, is there any featured products slider at artificer theme homepage design exactly like in this tutorial? Would be great that there are 4 featured products shown in any time but to slides e.g 8 or 12 of products and to have manually left/right arrows on hover.
    If exists, please, could anyone send me link to website that has it installed or plugin link.
    Thanks in advance!

  31. Hi, I'm just about to take my site live and I'm having problems with Flat Rate shipping.  How do I set things up so that I can set a different flat rate shipping amount for each product that I sell?

  32. Hi, hoping you can help me out. I've setup my shop with the help of your amazing tutorial and have just started testing the site. unfortunately, when I place an order, it shows up as order completed when I click on my orders although I have not done anything. i have searched and googled high and low and everyone seems to want to know how to make the order auto-complete but my site is doing it without me having put any code in to do so and I don't want it to auto complete =S help? site is www.littlefoodcart.co.nz if that's any help.

  33. Thank you for oyu tutorial. I have just one more question. After placing an order site sends client to empty shop page. Is there s possibility to create a site: "Thank You for placing the order. You will receive an email with your order deatails."

  34. First i want to say the videos are great.  For some reason, on the product quantities, i have two quantity changers.  Any idea why or how to remove one of them?  thanks

  35. Hello, could anyone help..
    Is there a way to have slider at home page (featured products slider)?

    Thanks in advance.

  36. Hello!
     I enjoyed the tutorial on the Artificer e-commerce store however, do you have an updated tutorial for this theme.  The reason I ask has to do with the difference in the versions and the way it downloads. 

    1. I followed your instructions with the navigation bar and I can't seem to get rid of the primary bar. Everything appears on that top bar but, the primary is still present in the middle of the page blank with an house icon?

    2.  I made my shop page a parent page, and then created children pages with galleries and filled them with product images. How do I link the galleries to the actual cart?

    3. Can the Woo themes link at the bottom be removed?

  37. Hi Katrina, Thanks for the great videos. I'm currently doing a test site but my products on my homepage I need to display 3 products per row, but I only get 2? I even changed my thumbnails to 80px but no luck.

    The same on my Shop page – some rows display 2 products, some only 1 per row? Please help. I also send you a message from your website with more detail… http://www.bellofiore.co.za/wp

  38. Hello, I'm interested in using this theme for my website, but I don't need shop button and basket. Is there a possibility to remove it? How can I do it? I didn't use WP before.
    Thanks for tutorial it is great – helpfull and easy described. Sorry for grammar mistakes, I'm from Europe :).

  39. I know this video was published over a year ago…but what a great tutorial!  Even after having 25+ years of IT experience, there was so much I learned.  Thank you!!!

  40. good day maam .. im running my wordpress  on a localhost and i got error on activating woocommerce from woodojo do you know what are the possible reasons and solutions ?
    i really enjoyed this tutorial and i hope i can finish making my store ..

  41. this is the error that i had maam ..
    Fatal error: Maximum execution time of 30 seconds exceeded in D:xampphtdocswordpresswp-includesclass-http.php on line 1453

    Fatal error: Maximum execution time of 30 seconds exceeded in D:xampphtdocswordpresswp-includeswp-db.php on line 615

  42. HI FRIEND
    I WANT TO CREATE E-COMMERCE SITE, BUT I DO NOT KNOW TECHNICAL SKILLS CAN YOU TELL ME ABOUT HOW TO CREATE WEBSITE MY SELF

  43. Hey Jude, do you have a video or can you make a video that goes more in-depth in the WooTheme called Artificer for inventory, adding new inventory, back orders, shipping. I'm hoping I can throw away my excel inventory and do everything through my website. Is it possible?! Any help will be great. Thank you……   

  44. Greetings Katrina! Thank you for the awesome tutorial on the child page for the Artificer theme.  I have run into some additional issues on the site:

    1. Both the checkout and my account button is not working, when I click the button it says that the webpage is not available. ( https://mateobluart.com/?page_id=8)
    2. The shop button from the code you provided is not working either. (http://mateobluart.com/shop)
    3. when I make changes do I do it on both the parent and child site or just the child page.

  45. hi there you have not shown the database config.dont you need it?can u tell me plz.by the way it is really very helpful.i just want to know ,i dont need to do anything with database setup,inventory etc

  46. will this automatically deduct product from inventory once any product will be sold.Please i am stuck this problem.and thank you very much for uploading this tutorial 

  47. Does anyone know how I can remove the /wp after my website name? right now it only loads if I use http://chatsecigarettes.co.za/wp 🙁 is there anyway to change that please??

  48. Katrinal, I try this theme, but how can I make my photo get High Quality like you. It presents not so well on my home page.

  49. Hi Katrina! I was looking for some help on this wonderful commerce theme when I found your video. Thank you very much for sharing, it's been really helpful to solve some problems I had!
    But, I still have some problems that I'm not able to solve, and I've been checking woo themes help and documentation and nothing…
    When I click on Cart, or Check Out, or Contact, the page just displays "Error 404 – Page not found!".
    Any help would be really appreciated!!
    My site is www.shop.sweethings.net
    Thanks in advance!!!

  50. Hello, I am wondering if you can make a tutorial about how to create a social network website and/or multi vendors website like amazon, taobao, alibaba. thanks

  51. hello wanting to know how to build a ecommerce sight for clothing like chesnutdistributors.com with many pages and drop downs and such, i have been following you but am very new to doing this and need to learn as i can't afford thousands to let someone do it for me. thank you any help would be appreciated.

  52. I was not able to get past the 24:34 mark. 🙁  I created the account on HostGator.com, followed the steps to QuickInstall, then installed WorldPress, and received my User ID and Password.  I waited several, and and when I click on the admin area to try to access the back end of the site using both Chrome or Safari (Mac or PC -but trying to get this accomplished on a MAC) I keep getting getting a page that cannot be loaded.  Did you stop your video and have to wait for the link to be activated?  For example all I get is, "Safari can't find the server." What is the world am I doing wrong?  Needless, to say, I have never been able to access the site.  I've tried deleting the cached/cookies..nothing.  Can you lend any help with this beginner's dilemma?

  53. http://missjoaquim.com thanks katrinah, i will try to use this themes for my pearls jewelery shop. thanks for the videos.. you ROCKS !

  54. Hi Trixy T, there's sometimes a delay up to 48 hours so I would give it some time. If you still do not see the login page in 48 hours, then I would check on status by contacting Hostgator. A delay is common in my experience. Thanks for your comment.

  55. hello  please when i creat new account in front end like a customer  i dont recieve an email in my gmail account like Confirmation about mu subscribtion…. then a customer wont have this email confirmation… how i can fix it Please

  56. Hi Katrina,  Thanks so much for this video!  I'm following along, but am getting stuck when I get to "Install WooCommerce Pages".  I am on the newer version of WP and once I've installed and clicked on WooCommerce settings, the tabs at the top look pretty different.  They read "General", "Products", "Tax", "Checkout", "Shipping", "Accounts", and "Emails".  I don't have a tab for "Pages", "Catalog",  or "Inventory".  Am I missing something or any suggestions as to where to find these on the newer version of WP?  Thanks so much, Abby

  57. Hi Katrina.. i like all your videos, they all are really cool.. thank for your effort.. I have a request though.. will it be possible for you to release some tutorial on buddypress. I want to use this but dont get much videos on net and document.. i like the way you explain about any theme ans other plugins so hopping you will consider my request and release it sooner or later 🙂 thank you.

  58. Hi Katrina, Thank you for this video, it was very informative.  I'm not sure if I missed it or not but how do you change the phone number and the email address on the front page? 

  59. Dear @77webstudio Thank you for this and so many other useful videos. A problem that seems to occur more often is that the email on the contact page doesn't work. Even after trying several addresses the error message doesn't disappear. What might be the cause of this? Thank you for your response. 

  60. Hey Katrina!
    Thank you so much for this video! I just wanted to ask if there was a way to have multiple pictures for one product? I just need to give my customers a way to see the product in different angles. 

    Thank you! 

  61. hi do you have any updated tutorial on using the wootique theme your last one was from 2013 and its been upgraded since so now i get lost trying to follow your instructions please help me

  62. After I installed WordPress and got the congrating message I tried to open my website that provided by the email but it says the webpage is not available. I did everything as mentioned so what the problem?

    Thanks for the video

  63. I am using Artificer theme for my web design
    Can you please guide me how to solve the problems that I am facing now?

    Problem (1)
    The 'up' and 'down' buttons on the cart page are redundant, as the user will use + and – button to increase and decrease the quantity. Furthermore the 'up' and 'down' buttons are blocking the quantity. Is there any way to remove these 'up' and 'down' buttons?
    The same happen in my product group page

    Problem (2)
    Currently, the quantity can only fill with integer or round number. Some of the product that I am selling are weight based. For example, customer will need the product to be 0.5kg or 1.5kg.
    When i try to key in 0.5 into the quantity box, an error massage will pop up and ask me to insert integer number.

    Problem (3)
    How can I wider the quantity box? As real / floating number require more space for the quantity box.

    Thanks in advance for you help. Thanks.

  64. Hi Katrina! Since two weeks you have been my primary source to learn WordPress web development. But there is a problem i am facing. How do i organize my products into categories like Men, Women and kids etc. on my homepage top menu bar and then show further product categories in drop down menu?? I am making Garments selling shop for all age-groups ! Do rply soon…

  65. Hey 77webstudio.  I like your video, i already know most about wordpress but its been a long time so its a good refresher and it allows me to think of what i'm going to do when i get at it myself, its very helpful to organise my ideas as i watch along.  The only problem is that it just drives me insane how you repeat the whole procedure for every single steps like uploading a picture or installing a plugin.  I don't think you need to do that really because the people that need repetition that much to learn these simple things, probably stopped watching your videos after 5 minutes because they were lost already.  If they cant figure out how to upload a picture and install a plugin, that's super advanced shit for them, they're not even watching.  I know what i'm talking about, i had to teach my mother how to do simple tasks on the computer, if the people don't already know how to upload pics and install a plugin and you expect them to setup their own wordpress, you might as well teach c++ programming at the kindergarden lol.

  66. Hi Katrinah…loved the video.  I only had one problem, when I created the top menu, I still have the other menu which just shows a "home image", I would like to get rid of it and I'm not sure how. Thanks for your help.
    Jeff

  67. interesting points, if anyone else wants to discover wordpress themes try Monteethil Awesome WordPress Themes (do a google search )? I have heard some extraordinary things about it and my m8 had cool results with it. 

  68. I wanted to thank you. I literally built my website while watching your video in 3 days. I'm so grateful for u and YouTube. I didn't like the acificier theme because it looked outdated and animated so I played with woothemes (thanks that was free) and found boutique. You're amazing!!! If you have time check out my site and let me know what you think. at http://herhairlife.com/.

  69. Hello Katrinah i have a problem with the  featured image on the post, i don't know why is showin full width over the post title. Any ideas about this behaviour?

  70. Very nice tutorial Katrinah. It helped me a lot! Is there a way to change the Send us an email and Call us text? My website is in portuguese and i need to translate those.

  71. Hi such a nice tuts ! really i learn more and more subjects from your tuts. Thanks for your tuts, and can you plz make tuts for word press woo commerce custom page design ! such as single page woo commerce website with 4 or 5 products. like that !! Hope you will make tuts for your followers .
    Thank you

  72. Your videos are very in depth and well structured.,which makes designing a website appear to be less daunting task than I originally thought.. Will you ever make a video for a musician oriented wordpress page? Again, great video!!

Leave a Reply

Your email address will not be published. Required fields are marked *