September 23, 2019
How to Add WooCommerce to your Genesis Child Theme In WordPress

How to Add WooCommerce to your Genesis Child Theme In WordPress


Hello everyone, I’m Katrina, and in this video
I’m going to show you how to add e-commerce to your Genesis theme in WordPress. So I recently
released another video on my channel where I walked you through step by step from scratch
showing you how to create a website using the Outreach Pro Genesis child theme. In that
video we also went over how to add ecommerce to our website using the WooCommerce ecommerce
plugin for WordPress. Since that time I’ve gotten quite a few questions from some of
you asking how to add ecommerce to other Genesis child themes. The short answer is that it’s
exactly the same process but I thought I’d create a separate tutorial specifically jumping
right to the point in that video, in the previous video, that starts to talk about how to add
commerce to your Genesis child theme. So this particular video is an excerpt of the full-length
video tutorial, I’ll be sure to drop a link to the other video down below. So that when
you watch that video you’ll see how to get to this part where we are right here. So we’re
going to continue where we start adding ecommerce to our Genesis child theme. So if that’s what
you’re looking to do you’re in the right place. Let’s get started. So if you made it this
far you should have a completely customized WordPress website using the beautiful Outreach
Pro Genesis child theme by StudioPress. Next up the fun begins because we’re going to
be adding ecommerce features to our WordPress website and our Genesis child theme using
one of the top rated ecommerce plugins for WordPress called WooCommerce. To add WooCommerce
to our website we’re going to go back to the dashboard, click on dashboard, then we’re
going to go down to plugins and click on plugins. From here we’re going to be adding a new
plugin to our WordPress website so I’m going to click on add new, then at the top I’m
going to add the WooCommerce plugin here in the search box and do a search for this by
clicking on search plugins. At the top we’ll see here is the WooCommerce plugins it has
almost five starts. Four stars actually based on 679 ratings we can see here it is built
by WooThemes. I’m going to click on install to install this particular plugins. Are you
sure you want to install this? Yes, okay. Once WooCommerce has been successful installed
I’m going to activate the plugins by clicking on activate plugins. Once the plugins has
been activated you’ll have this message that says welcome to WooCommerce you’re
almost ready to start selling. You can install the WooCommerce pages so the next step is
I’m going to click on this button to install WooCommerce pages. Once the WooCommerce pages
have been installed you’ll have this message that says welcome to WooCommerce 2.1 that
is the most current version of WooCommerce at the time of this recording. Once the WooCommerce
plugins has been installed and activated, the next step is we need to add another plugin
to our WordPress website in order to connect our Genesis child theme with WooCommerce.
To add that plugins I’m going to go down to plugins, hover over plugins and click on
add new. Next here in the search box I’m going to do a search for the Genesis Connect
for WooCommerce plugins. I’m going to add that in the search box and click on search
plugins. Here we’ll see at the top Genesis Connect for WooCommerce you can read more
about it by clicking on details. We can see that this is developed by StudioPress so that
is really great because it ensures that this particular plugin will work well with our
Genesis child theme. Next I’m going to install this by clicking on install now. Are you sure
you want to install this? Yes, okay. And once the plugin has been successfully installed,
the next step is I’m going to click on activate top activate the plugin. Now when you activate
the plugin you’re going to get this message that says sorry, in order to use the Genesis
Connect for WooCommerce plugins you need to do the following. Here is what we need to
do. We need to add the code below to our child theme’s functions.php file. So I’m going
to highlight this line of code, highlight it and copy it. Then we want to click on this
link here to go back to our WordPress website. We need to go to the functions.php file. We
can do that by going down to appearance, hovering over appearance and clicking on editor. Here
on the right hand side we’ll see the functions.php file and this is a file that we need to add
that line of code to. The only catch, I want to point out is sometimes when I am adding
code to the functions.php file within the WordPress dashboard sometimes actually it
breaks. That’s not good because then the website pretty much breaks altogether. And
then you have to replace this functions.php file with the original one that came with
your Genesis theme file. A much safer way to add custom functions which is what we’re
about to do is to create a custom functions file so that you have another file where you
can add your functions to. I created another video on my YouTube, I’ll be sure to drop
that link down below so you can check it out. But in this video I show you how to safely
customize your functions.php file in your Genesis child theme by creating a my_functions.php
file. Back here on my website we see there’s actually two files that say functions. The
functions.php file here is the one that comes with your Genesis child theme files and in
the folder. And then down below you see here’s the custom one that I created following the
guide in this video. In this particular video in order to that line of code for the WooCommerce
Genesis Connect plugin to connect that I’m gong to be using this custom functions.php
file. I’m just going to click on my_functions.php, then underneath the code right here where
it says my custom functions I’m going to paste the code that we just copied in the
previous step. Scroll to the bottom and click on update file to update my file. Once this
line of code has been added to my_functions.php file we’re good to go because the Genesis
connect with WooCommerce plugins has been connected with WooCommerce. Next step let’s
check out the WooCommerce settings by going over to the left hand sidebar, hovering over
WooCommerce and clicking on settings. Here within WooCommerce settings you can check
out all these different tabs. General products, packs, check out, shipping, accounts and emails
to check out the settings for each of these sections. I’ll be going over these later
on in the video. For now let’s take a look at the general options within WooCommerce
starting with the base location. Right here you want to choose what country you have so
here by default it says the UK so I need to change that because I am in the U.S. I’m
just going to click on that, then we get a drop down list. You can see all the different
countries listed here. So go ahead and choose your country, I’m going to choose the U.S.
and I’m in California so I will choose U.S., California. Also note that there are these
question marks which provide you when you hover over them, the really great tool tip
that will tell you what each of these settings does. As we see here when I hover over this
one it says this is the base location for your business, tax rates will, be based on
this country. Okay so once I have my location set, then we can choose which locations we’re
selling to. Once again when I hover over this it says this option let’s you limit which
countries you are willing to sell to. I’m going to sell to all countries but if you
want to keep it within your country or specific countries only then you would click on sell
to specific countries only and then you would choose your countries right here. So I’m
just going to click on sell to all countries, then if you want to enable a site wide store
notice text you can click on this. I do not want to do that, I’m going to leave that
unchecked. Then I’m just going to scroll down here to currency options and says the
following options affect how prices are displayed on your website. So as we see here the currency
is by default in sterling pounds so I want to change that. As it notes again in the tool
tip it says this controls what currency prices are listed at in the catalogue and which currency
gateways will take payments in. I’m going to change this from pounds to U.S. dollars
so I’ll just click on U.S. dollars. And then here you can choose what position you
would like the currency symbol to be displayed at. So I’ll just leave it with a left hand
display .Then you can chose the thousands separator, decimal, or number of decimals.
I’m going to keep all of these as they are. Then I’m just going scroll down and I’m
going to click on this button right here to save the changes. The great thing about WooCommerce
is that most of the default settings right out of the box are exactly how I want them
to be so I’m not going to be making a lot of changes to the default settings. However
of course for your store you want to make sure that you do review each of the different
settings to make sure that your unique store has the proper settings for your website.
That said I’m going to move on to the next tab which are the product settings so I’m
going to click on products here. Here at the top we’ll see we have the product options
listed down below. Again I’m going to leave most of these defaults as they are, we have
the product archive shop page which should say shop. If you followed the previous step
and installed your WooCommerce pages as we did earlier in this video you should also
see shop right here. When we hover over this particular question mark it says this sets
the base page of your shop. This is where your product archive will be. So we click
on this and you can choose some other page if you want but I encourage you just to leave
it as it is once again with the default that says shop. This will be your shop page. Then
we can decide which products to display on the shop page. We can ether show products
or subcategories, or both. Once again I’m going to leave it with the default which is
simply to show the products. I’m going to leave all these defaults actually as they
are, I’m not going to change them. Instead I’m going to scroll down to where it says
product data and here where it says weight unit you want to choose your weight unit.
As it says this controls what unit you will define weights in. I’m going to click on
kilograms and just make it pounds, and then for dimensions instead of centimetres I will
just put inches. Of course for whatever weight unit and dimension unit you would prefer,
make sure you set this according to your unique needs right here. I’m going to scroll down
and leave all of these defaults as they are as well. And then here where it says product
image sizes this is an important one to look at. As it notes these settings effect the
actual dimensions of images in your catalogue. The display on your website will still be
affected by CSS styles. Here we have the catalogue images dimensions, the single product image
dimensions, and the product thumbnails. Here we can see the default dimensions for each
of these different image types and I’m going to be changing these image dimensions to make
them a little bit larger. Keeping in mind that I’ve added a few images to my website
those are images that I’m displaying throughout my website and my blog post, and other parts
of the site. But I do want to actually use those same images as products within my shop.
As a result when I change the dimensions here for the product image sizes I’m going to
need to regenerate the thumbnails of those images that are already in my media library.
First let’s go ahead and change the images here. Then we’ll regenerate the thumbnails.
First for catalogue images instead of 150 x 150 I actually want to make this 500 x 500.
For the single product image instead of 300 x 300 I want to make this 550 x 550. I’m
going to keep it as a square for each of these and then finally for the product thumbnails
instead of 90 x 90 I want to make this 150 x 150. I prefer image sizes that are a little
bit larger. Then I’m just going to scroll to the bottom and click on save changes to
save the changes. Once the new settings have been saved as mentioned we need to regenerate
the thumbnails. I’m going to come down here to plugins, click on add new, then I’m going
to do a search for regenerate thumbnails and click on search plugins. Here it is at the
top Regenerate Thumbnails I’m going to click on install now. Are you sure you want to install
this? Yes, okay. And once the plugins has been successfully installed I’m going to
click on activate plug-in to activate the plugins. Next step I’m going to go to my
media library right here by clicking on media, and then the two images that I do want to
regenerate this chair and these lights because both of these will be included as products
in my store. I’m going to click on both of these, then I’m going to come up to the
top and click on regenerate thumbnails and then I’m going to click on apply. Also note
you can simply hover over the actual product right here and click on regenerate thumbnails
down below. I’m going to do this in bulk. I’m going to do them both at the same time.
I’ve got them both checked, then I have regenerate thumbnails here, then I’m going
to click on apply to start regenerating the thumbnails for those two products. Okay once
both products have been successfully regenerated we’re good to go and we can continue with
our WooCommerce settings. I’m going to go back to WooCommerce , hover over WooCommerce
and click on settings. Then next up are the taxes. Now taxes for everyone are very different
so I am not going to go over this right here. I’m just going to leave all the defaults
set up but as mentioned you can check out each of these different settings by hovering
over the question mark and reading what the tool tip is to help guide you. Also I want
to note that you can also refer to the documentation at WooThemes I’ll be sure to drop the link
in this video so you can read all about setting up taxes in WooCommerce for your unique tore.
Okay going back to the WooCommerce settings page right here. I’m going to click on the
checkout page. Here on check out options you can tell WooCommerce where to send your users
to checkout. Here we see when we scroll down we’ll see the checkout pages. If you’ve
been following along in this video, most likely you already created those WooCommerce pages.
And if you did, then like we see right here you should see cart as the cart page, checkout
as the checkout page. And if you want to add terms and conditions to your website, you
can create a page with terms and conditions and you can set that by selecting that page
right here. I haven’t created any terms and conditions yet in this video and no plan
on doing so. However, if you have a page called terms and conditions, this is where you would
set that right here. Then scrolling down we have all of our various payment gateways.
As it notes, installed gateways are listed below. We can drag and drop gateways to control
their display order on the front end. So for example, in this video I’m going to be setting
up the payment method as being PayPal so I’m going to check that right here. And then,
I’m going to drag this to the top. So just drag it to the top right there. Then, I’m
going to click ‘save changes’ to save the changes. Now, note when I scroll back
down to the bottom of the page where the payment gateways are, there’s a number of other
payment methods that have been enabled. This purple checkbox right here refers to ‘enabled
payment methods’ – direct bank transfer and check payment, I really do not want to
have those two activated. I want to disable those actually. In order to disable them,
we can either click on settings right here for each of these respective ones or I can
come to the top and here we can see them all listed right here. These are all of the installed
payment methods that come with your WooCommerce installation. I’ll come back to disabling
those in just a moment. I do want to note that when you head on over to the documentation
at WooCommerce you can see a page about the checkout process. I’ll be sure to drop the
link to this so you can check it out. When you scroll down, you’ll see here under ‘payment
gateways’ it says ‘learn more about premium gateway options here’. So if any of the
pre-installed payment methods do not work for you, if you have some other kind of payment
method that you would prefer to use, you can check out the premium payment gateway options
here. So, I’m going to click on this then you can read more about the premium payment
gateway extensions. As it notes, WooCommerce has hundreds of payment gateway options to
choose from and you can just read through some of the important options to consider.
Then, if you want to review the full list of available premium payment gateway extension
options, you can click on this link right here. When I click on that link, also note
that there’s a number of additional popular extensions including WooCommerce Bookings,
Product Add-ons which enables your customers to customize your products. If you want advanced
shipping, there’s Table Rate Shipping extension. And if you would like to easily create and
manage recurring payments, you can check out the WooCommerce Subscription extension here.
Underneath this popular extensions then we see the hundreds of other payment options
and gateways that you can use for your WooCommerce WordPress website. I’ll be sure to drop
a link once again to the payment gateways so you can check them out and you can setup
the perfect payment gateway for your unique store. In this particular video, I’m going
to be using the pre-installed payment methods and specifically once again I’m going to
be using PayPal exclusively. I want to get back to disabling the other payment methods
that are currently enabled starting with this one. When I click on this ‘BACS’, we can
see here it is enabled. I’m just going to uncheck it. Scroll to the bottom and click
on ‘save changes’ to save my changes. Next, I’m going to click on the ‘check’
option right here and as we did in the previous example I want to also disable this so I’m
going to uncheck that and click on ‘save changes’. ‘Cash on Delivery’, I’ll
just click on that. This one is not enabled so we’re good to go. I’m just going to
leave it as it is. Then, finally if you want to setup your e-commerce website with this
Mijerah, I might be saying that incorrectly, checkout you could read more about that by
clicking on this link that says ‘learn more’. So I’m just going to leave it as PayPal.
You can see when I go back to the checkout options now by clicking on ‘checkout options’.
Now, when I scroll to the bottom the only payment method that has been enabled is the
PayPal method. Next stop, we need to configure our PayPal standard settings. We can do that
in two different ways on this page either one, we can click on this button here that
says ‘settings’ or at the top there’s a link here that says ‘PayPal’, we can
click on that as well. I’m going to click PayPal here at the top. Next, we’ll arrive
on the PayPal standard page settings for WooCommerce. And as we can at the top it says, “PayPal
standard works by sending your customer to PayPal to enter their payment information.”
The great thing about PayPal standard is that you and your customers both can be rest assured
that all of the different payments are secured because the payments are taking place on PayPal
which is a secured website. You can read more about PayPal standard here on PayPal.com.
I’ll be sure to drop a link down below so you can check it out. This is a page with
all the various frequently asked questions about website payment PayPal standard. For
more info about PayPal payment standard and how to set it up in WooCommerce as well as
some issues that you may encounter when you’re using PayPal standard, I encourage you to
check out the great the great documentation at WooThemes.com. I’ll be sure to drop a
link to this page down below also so you can check it out. Back on our PayPal standard
settings page within WooCommerce, we want to make sure that ‘enable PayPal standard’
is checked. I’m just going to leave that box checked right there. By default you should
have a title and a description. You could customize this if you like but I’m going
to leave them as they are. Then, then next step is we need to add our PayPal email as
well as our receiver email. In most cases these are the same. However, within your PayPal
account if you set up a different receiver email from your account PayPal email, then
you want to add that different receiver email down below. I have the same one so I’m just
going to add the same one for both the PayPal email as well as the receiver email. Also
note here we have these question marks. So when you hover over each one of them, you’ll
get a tool tip that will tell you exactly what each of these different settings will
do. Here it says when I hover over this particular PayPal email one it says, “Please enter
your PayPal email address. This is needed in order to take payment.” For the receiver
email once again when I hover this one it says, “If this differs from the email entered
above,” it may be the same then you can just disregard this but if it differs, “input
your main receiver email for your PayPal account. This is used to validate your IPN request.”
Once again I have the same one so I’m going to leave them both there. I’m just going
to scroll at the bottom and I’m going to click on ‘save changes’ to save my changes.
Next we need to login to our PayPal account and we need to setup two different URLs within
our PayPal account. Going back to the WooCommerce documentation on WooThemes.com we see those
two URLs are number one, we need to set the PayPal notification URL with an example right
here. And we also need to setup an auto-return in our PayPal account and there’s an example
of that URL right here. Let’s take care of the first one which is setting up PayPal
notification URL. To do that, I’m going to login to my PayPal account. Next, within
my account I’m going to go My Account and then I’m going to go to Profile, hover over
Profile and then I’m going to go to my Selling Tools. Next here on My Selling Tools page,
I’m going to scroll down. I’m going to look for the link that says ‘instant payment
notification’. As it notes here, ‘integrate PayPal payment notifications with my website’.
I’m going to click on update right here on the right-hand side. Here on the Instant
Payment Notification screen IPN, you can read more about this by reading this section right
here. We need to choose the IPN settings by coming to the bottom and clicking on this
button that says ‘choose IPN settings’. Next, we need to add our notification URL
in this field right here. To find your notification URL, you can go back to the WooThemes documentation,
scroll down. Then here once again, there’s an example of the PayPal notification URL.
We want to highlight and copy this. I’m just going to copy that then I’m going to
go back to the notification URL field right here and paste that URL that I just copied
in the previous step. And instead of using example.com, I’m going to use my own website
URL. So you want to make sure that you just replace example.com with your own website
domain. Then, I’m going to click on this button here that says ‘receive IPN messages
enabled’. Once that’s enabled and I have my notification URL, I’m going to click
on ‘save’ to save the settings.Next, we’ll go back to my selling tools by going to Profile
hovering over Profile and clicking on My Selling Tools. Next here on the selling tools options,
we want to go down to where it says ‘website preferences’, ‘bring customers back to
my website after they pay with PayPal’. And here in Website Preferences we want to
click on this link once again that says ‘update’. At the top, we want to make sure that auto-return
is on so I’m going to click ‘on’. Then, we need to add our ‘return URL’. Going
back to the PayPal documentation on WooThemes.com, I’m going to scroll down and here where
it says ‘auto return’, there’s an example of the URL we need to use. I’m just going
to highlight and copy this URL, then I’m going to go back to my PayPal account and
I’m going to paste the URL that I just copied in the previous step. Note that it says ‘yoursite.com’
and I want to replace ‘yoursite.com’ with my actual domain. Go ahead and make sure that
you also replace this demo domain right here ‘yoursite.com’ with your actual domain
name. Once ‘auto return’ button is on and auto return URL has been added with your
customized domain, then I’m just going to scroll at the bottom and click on ‘save’
to save the settings. Once the settings have been saved within your PayPal account, you’re
good to go with PayPal integration with WooCommerce on your WordPress website. If you have additional
issues related to PayPal integration, you can check out the frequently asked questions
on WooThemes.com and I’ll be sure to drop a link to this page down below. Also, if you
like to contact PayPal directly, you can check out their Technical Support page on PayPal.com
and I will also leave the link to this technical support page as well down below so you can
check it out. Once you have everything ready to go and we’ve made all of our settings,
then we’re good to go on our payment method within WooCommerce in our WordPress website.
Next, I’m going to move on to Shipping. The Shipping Tab right here will give you
all the different options you can set for your e-commerce WordPress website. Here at
the top I’m going to enable shipping so I’m going to leave that checked. I do not
want to enable a shipping calculator on the cart page. If you would like to add a shipping
calculator on the cart page, you can leave this checked. I’m going to uncheck it though.
Then, I’m just going to scroll down and here we can see that pre-shipping is enabled.
Here’s the purple checkbox. But there’s all these other different shipping methods
that you can choose, ‘flat rate shipping’, ‘international delivery’, ‘local delivery’
and ‘local pickup’. I’m just going to make sure that this default is checked. Then,
I’m going to click on ‘save changes’ to save changes. As a quick side note, I’m
not going to go over in detail all the various shipping within WooCommerce so I will drop
a link down below so you can check out other shipping options in WooCommerce on WooThemes.com.
In this video as mentioned, I’m going to be using free shipping. When it comes to increasing
sales in your e-commerce website study showed that one of the best strategies you can employ
is offering free shipping. I have another video where I share data related to shopping
cart abandonment and strategies you can employ to increase your sales on your e-commerce
website. I’ll drop that link down below as well so you can check it out. Back on our
WordPress website, you can check out the settings for free shipping by clicking on this link
that says ‘settings’ or at the top you can click on this link that says ‘free shipping’.
Once I click on free shipping then we arrive on the free shipping settings page. I’m
going to leave all the default options as they are. I’m not going to change anything.
I just want to make sure once again that free shipping is enabled. Then, we don’t really
need to save anything because everything has been saved. So I’m just going to continue
to the next tab that is called ‘accounts’. Here on the account pages settings as it notes
this page needs to be set so that WooCommerce knows where to send users to access account
related functionality. Earlier on the video we had created our WooCommerce pages. So by
default you should see My Accounts page showing up right here that says ‘my account’.
Then, I’m going to leave all of these default endpoints as they are right here as well.
When we install WooCommerce and we setup those pages, all of these default are automatically
added so I’m just going to leave them all as they are. Scrolling down here are the registration
options. If you’d like to enable registration, you can do so. Once again, I’m going to
leave all the defaults here. I’m not going to change anything. The default enables registration
on the checkout page and it also displays returning customer login reminders on the
checkout page as well. Finally, an automatic generated username from the customer email
is created for the account. Once again, I’m not going to customize any of these. I’m
going to leave all the defaults as they are. Then, I’m going to move on to the Email’s
tab on the top right-hand side. Here within the email option settings you can see all
the various emails that WooCommerce will send to your customer at each different step within
the order process. If you like to customize any of these emails you can do so by clicking
on each of these links at the top above. The main thing you want to setup under email sender
options is the ‘from name’. As it notes here, the following options affect the sender
email address and name used in WooCommerce emails. WooCommerce will automatically generate
these emails for you. You just need to make sure that you do add the ‘from name’ so
that your customers know who the email is from. And you also need to set your ‘from’
email address. I just added my name and address here. Once again if you like to customize
any of these various emails, you can just click on each one of them and see what WooCommerce
will be sending and you can adjust them right here within these fields. For a quick ‘how
to setup customized emails within WooCommerce’ be sure to check out this great tutorial here
on WooThemes.com. Here you can learn how to customize your WooCommerce emails and then
email templates. I’ll be sure to drop this link down below so you can check it out. Once
the settings within WooCommerce had been setup, the fun part begins of adding products to
our WooCommerce WordPress website. To add a new product to our e-commerce website, you
can either go to the top on the toolbar, hover over +new and click on product or on the left-hand
side bar you can go down to products, hover over products and then click on add product.
I’m just going to add product by clicking this link right here. Here on the ‘add new
product’ page the first step is we need to give our product a name. For this particular
product, I’m going to be adding a modern red chair as a product. I’ll just make the
product name ‘modern chair’. Next here on this white box you can provide a description
about your product. Once again, we have the visual tab as well as the text tab. I prefer
working on the visual tab so I’m just going to add some content right here, some demo
content about this particular chair. Next on the right-hand side we have our product
category. To create a new product category, I’m going to click on this link that says
‘add new product category’. Then for the product category you just want to enter the
name and then once again click on this button that says, ‘add new product category’.
Once you’ve click on the button that says ‘add new product category’, you’ll see
it up above and it should be checked. Scrolling down, we have some product tags so you can
add some product tags right here making sure that if you have more than one tag, you want
to separate those tags with commas. I’ll just add my tags right here. Then, once you
have all the tags listed with the comma in between each one, go ahead and click on the
‘add’ button to add the product tags. Scrolling down a little bit further, you can
add a product gallery if you have multiple images for this particular product. Or at
minimum, you should add a product image. I’m going to set the product image by clicking
on ‘set product image’. Here we can see I already have the image here in my media
library. Instead of uploading file for this particular one, I’m just going to check
this particular image, the title and the alternative text have already been added so that’s great.
Then, I’m just going to click on this button here that says ‘set product image’. Once
the image has been set, then we can check out the product data over here. This is going
to be a simple product. It’s just one color, one size, one prize. For that you can see
I’m going to leave it as ‘simple product’. But when I do click on this, you’ll see
the other options that you have. You can either create a Group product, an external affiliate
product or a variable product if for example you have different colors or different sizes.
This once again is one size fits all, it’s one color so I’m going to leave it as ‘simple
product’. Also note that you can add virtual products and downloadable products. I’m
not going to be creating those right now. I’m just going to be adding this actual
physical product, the chair. I’m going to leave it as simple product. Then, we can give
it a regular price or a sale price. I’m not going to mark this one on sale. I’m
just going to give it a regular price right here. Once the regular price has been set
for the product, the next settings we can check out within WooCommerce include ‘inventory
settings’, ‘shipping settings’, ‘linked products’, ‘attributes’ and ‘advanced’.
When I click on ‘inventory’ for example you can see if you’d like to manage stock,
you can click this box right here to enable stock management. I’m not going to manage
stock, I’m going to leave it as open. I’m also going to leave the other defaults as
well including ‘stock status’ and ‘allow back orders’ will be set to ‘do not allow
back orders’. Once again, here are some question marks which when I hover on top of
them, I get a really cool tip that tells me exactly what these settings will do. I’m
going to leave all the defaults then I’m going to move on to ‘shipping’. In this
video, I’m using free shipping so I’m not going to change any of the defaults right
here. if you’d like to upsell or cross sell products within your inventory catalogue,
you can do so by clicking on ‘linked products’. Then, once you add more products for your
site, you can search for them here and you can link them or cross sell them in this tab
right here. Attributes, we don’t need right now because we’re just selling this simple
product with one size and one color. We’ll come back to attributes later when we’re
setting up a product with a number of variations. Finally, here in ‘advanced’ if you have
any special notes that you want to send to a customer for this product, you can set those
notes right here. As I hover over this question mark it says, ‘enter an optional note to
send to the customer after the purchase’. If you’d like to enable or disable reviews,
you can do so by unchecking this box. Again, I’m going to leave the default checked so
that reviews are enabled. Once you have the settings setup as you like them for the simple
product, we can scroll down. Here you can add a product short description. This will
be featured in the short description box right by the price on the product page. We’ll
see that in just a moment. Here I’m just going to add a short description right here
on this box. Then, we’re all set and ready to go. We can come up to the top and click
on ‘publish’ to publish our simple product. Once the product has been published, we can
check it out by clicking on ‘view product here’ or clicking on this button that says,
‘view product’. I’m just going to click on this link at the top that says ‘view
product’. Here we can see the product on our e-commerce website. I do want to note
it looks okay but there’s one thing that’s sort of missing. Here we see on the bottom,
our sidebar is hanging at the right-hand side. We already set up the Google Connect with
WooCommerce plugin and we already completely finished that but one thing that we did not
actually do is we didn’t actually activate it. That plugin is really important. That
would solve this breakage issue on the page where the sidebar shows up below the product
info. Let’s go ahead and turn on the Google Connect to WooCommerce plugin. I’m going
to go back to the dashboard. Click on dashboard. Then, I’m going to go down to plugins. Click
on plugins. Then, here we see down below we see the Genesis Connect for WooCommerce plugin.
We haven’t yet activated it. We went through all the steps for Genesis Connect for WooCommerce
however we didn’t activate it. So this is really important. I’m going to click on
‘activate now’. Now, that the plugin has been activated, we can go back to our product
by going to the product page. Let’s see where that is right here. Here on the left-hand
side bar, I’m going to click on products. Then here we have our modern chair. I’m
going to click on ‘view’ to view the chair. Now we see we have our product on the left-hand
side and our side bar lining up really nicely on the right-hand side. That looks so much
better. If you encounter that issue where the sidebar has fallen below the product information,
it’s most likely because you did not activate the Genesis Connect to WooCommerce plugin.
Now, we’re good to go. We do have a couple of customization changes to make within WooCommerce
because I’m not really a big fan of this purple button. But we’ll come back to the
styling changes in WooCommerce a little bit later. Next stop, let’s add the shop page
to our navigation menu at the top so that anyone who comes to our e-commerce website
can very easily find the shop page. To add the shop page to the top navigation bar, I’m
going to go to the dashboard by clicking on dashboard. You can also go directly to menus
by clicking on ‘menu’. In the essence of time, I’m just going to click on menu
right here. Here on the left-hand side, I’m going to click on shop, cart and checkout
because I want to add all there of these e-commerce pages to the menu navigation so they’re
really easy to find. Once I click on these three pages, then I’m going to click on
this button here that says ‘add to menu’. Then they’ll show up at the bottom. I prefer
having the shop page right at the beginning so that it’s front and center. It’s very
easy to read. It’s the first thing that anyone would read in the line-up. So I’m
just going to move ‘shop’ to the top. Also, I’m going to move the cart page underneath
the shop page and create a submenu item. As you can see I just dragged it under into the
right of the shop page. I’ll leave the checkout page as the last page in the line-up. Then,
I’m just going to click on ‘save menu’ to save my menu. Now, when I go to the homepage
by going up to the top and clicking on ‘visit site’, here we can see that e-commerce pages
front and center here on our menu navigation. We got the shop page, the cart submenu page
and the checkout over here on the right. When I click on ‘shop’ then we’ll see the
beginning of our shop page filling out. Right now we’ve only added one item. So let’s
add a few more items to our shop and our product catalogue. The next product that I want to
add will be a product that has many different variations of the same product. To create
a new product with variations, once again I’m going to go up to the top, hover over
+new and click on ‘product’. Here on the ‘add new product’ screen, I want to give
the new product a name. For this product I’m going to be adding some artistic round lamp.
I will just call this ‘artistic round lamp’ as the title. Then here on this white box,
you can give the product a description. I’ll just add a description in here. Then, down
below I’m going to add a product category by clicking on this link that says ‘add
new product’ category adding the name of the category which in this case will be ‘lighting’.
Once again, I’m going to click on this button one more time that says ‘add new product
category’. Now we can see the category I’ve just created right here and the box is checked
so this particular product will be added to the lighting category. Then I’m going to
scroll down and I’m going to give some product tags related to this product. Keep in mind
that if you have more than one tag, you want to separate each of the tags with a comma.
Once you’ve added your tags separated with commas, go ahead and click on ‘add’ to
add the new product tags. Down below we can add images to our product gallery or we can
simply add a product image. In this case once again, I’m just going to add a product image.
We will create a product gallery in one of the next products we add to the site. For
now, I’m just going to click on ‘select product image’. Then, I’m going to click
on ‘upload file’ to upload the file. ‘Select files’, then I’m going to choose the file
that I need and click on ‘open’. Then, WordPress will upload the image to my WordPress
website. Here on the right-hand side we can see the attachment details and as we’ve
done in the previous examples with images, it’s always a good idea to add a title and
an alternative text. After adding a title and an alternative text, then you click on
this button that says ‘set product image’. Once the image has been set, then you can
continue with the theme SEO settings here on the left-hand side. I’m not going to
cover this right now. I’m just going to move on. I’m going to keep the layout settings
as they are – the default layout settings. Then, down below where it says ‘product
data’ instead of creating a simple product, this time we’re going to be creating a variable
product. I’m going to click on this box right here then I get a dropdown box. We can
see all the various product types. Once again, at the bottom we have variable products. I’m
going to click on that. Then, you’ll see that the dashboard here changes a little bit
and instead of adding a price here on the general tab, now we simply have the option
to create a SKU. SKU stands for stock keeping unit. You can read more about it by hovering
over this question mark right here where it says ‘SKU refers to the stock keeping unit,
a unique identifier for each distinct product and service that can be purchased. If you’d
like to create stock keeping units or SKUs, feel free to do so. I’m going to skip this
part. I’m not going to create a SKU for this particular variable product. Moving on
here we have our inventory once again. So if you’d like to manage stock, you can do
so by clicking on this box. Then, you can set the stock status whether or not you want
to allow back orders and so on. Next we have shipping. Again, in this video I’m going
to be featuring free shipping so I’m not going to add a new thing in here. However
if you do want to create shipping based on pounds, dimensions or class, you can do that
here. Next, if you want to cross sell or upsell your products you can do so. We don’t have
enough products in our online catalogue yet to upsell or cross sell anything to so I’m
going to leave it as it is. But just keep in mind, you can upsell and cross sell once
you have more products in your store uploaded to your WordPress website. Next up are attributes.
This is where we can start defining the type of product that we’re selling on this particular
product page. Attributes refer to things like color and size whereas variations would be
something like the actual color – red, blue or green or sizes of small, medium or large.
First, we need to set the attribute and then we can set the variation. There are several
different ways to set attributes. We can either do so individually here by clicking on ‘add’
and creating a new attribute or if you have an attribute that can be applied throughout
many of your products throughout your product catalogue, then you can also create attributes
here on the left-hand side underneath where it says ‘products’ on the left-hand side
bar. The first thing I’m going to do is I’m going to save my draft over here. It’s
always a good idea to continuous saving your draft to make sure that everything to date
so far has been saved and you don’t lose any of the changes that you’ve made. So,
I’m just going to save the draft. Then, I’m going to come over here on the left-hand
side and I’m going to create a new attribute by clicking on attributes. As it notes at
the top, attributes let you define extra product data such as size or colors. Here for the
name I’m just going to give this a name of size. Then I’m going to scroll down and
click on ‘add attribute’ to add the attribute. Once attribute has been created, we’ll see
it here listed underneath ‘name’. Here we can see the one that I just created that’s
called ‘size’. On the far right-hand side, there’s this little gear icon and when I
hover on top of it, we’d get a tool tip that says ‘configure terms’. I’m going
to click on this button right here which opens up a new box. Here we can start creating the
new values for the attribute of size we just created. Here for example it says ‘add new
size’, I’ll just add small then I’m going to scroll down and click on ‘add new
size’. We can see the first attribute value that we’ve added is ‘small’. Next on
medium then I’ll add large. So medium on ‘add new size’, scroll down, click on
‘add new size’. Then, finally the last one I’ll add is large. Then, I’ll scroll
down and click on ‘add new size’. Once all the values for your attribute has been
created, now we can start using this pre-created attribute and values for all of the products
within out store that would require this same attribute and values. Let’s go back to our
product that we’re working on, the artistic round lamps and I’ll show you how we can
apply this right now. Going back to the left-hand side, I’m going to click on products. Then
here under artistic round lamps, I’m going to click on ‘edit’ to edit this product.
Then scrolling down to the product data section, I’m going to go to attributes by clicking
on ‘attributes’ to edit the product. Here now we see it says ‘custom product attribute’.
When I click on this, here we have the pre-created attribute that we just created in the previous
step. I’m going to click on that and then I’m going to click on add. Then here we
see all the different values that we need to select. It says ‘select terms’. When
I click on this button though ‘select all’, then all of the pre-created values for this
particular attribute will be populated in this box. This is just a really quick way
to save time across all your different products if your many products share the same attribute
and values. Also note that here in the values box if you want to remove one of these for
this particular product, you can do so. So if I want to remove the medium, I’m just
going to click the X right here to remove that. Now, I have two values of small and
large. Next I want to make these visible on the product page. I’m going to click on
this box right here. And I do want to use these four variations. I’m going to click
on that box right there. Then, I’m going to click on ‘save attributes’ to save
the attributes. In addition to adding attribute of size, I also want to add an attribute of
color for this particular product. Down below instead of adding custom product attribute
this time, I’m simply going to click the ‘add’ button to create a unique attribute.
Here for the name I’m going to call this ‘color’. Then here for the values as it
notes ‘enter some text or some attributes and make sure that you separate them with
this pipe symbol’. It looks like an L but it’s actually on the right-hand side of
your keyboard above the ‘enter’ key when you hold down your shift key you will find
that little pipe symbol right there. I’m going to create a value of a white lamp as
well as a red lamp. I’ve got two different values here for the color – white and red
separated by this line here which is like a pipe symbol. Once again on the left-hand
side I’m going to make this visible on the product page and use them for variations.
I’m going to click both of these boxes. Then, I’m going to click on ‘save attributes’
to save the attributes. Once attributes have been saved then we can move on to variations
where we can set the price for the different variations of this product. I’m going to
click on variations. Here we can see at the top, we can choose a field to bulk edits.
I’m not going to use this but I just would like to point out that if you’d like to
bulk edit your variations you can do so by clicking on that box then choosing one of
the options from this dropdown box. Instead, I’m just going to click on this box on the
right-hand side that says ‘add variation’. Once I click on the ‘add variations’ button
then we’ll see this new box that pops up where I can choose the size and the color
and I can create my variations down below. Keeping in mind that I have two different
variations of this lamp – I’ve got a small lamp and a large lamp. Naturally I want the
small lamp to be less expensive than the large lamp. So for any size here, I’m going to
click on this and I’m going to click on small. Then, I’ll create the price variations
for the small lamp. Here where it says ‘regular price’ I’m going to add the price of $400.
Then, I’m going to scroll down and here where it says ‘add variations’, I’m
going to click this one more time because I want to create a variation for the large
lamp as well. We have the small lamp as $400. That looks good. Here I’m going to click
on ‘any size’ one more time. Click on large and then I’ll set the large price
variation to be $800. It’s the twice the amount as the small lamp. Then finally at
the bottom, I’m going to choose the default size and color which will direct my visitor
to the product that I want them to really focus on. Here for the default size, I’ll
click on small and for the default color I’ll click on red. Once all of that has been set,
I’ll scroll up to the top and I’ll click on publish to publish my new product with
the variations. Once the product has been published, you can either click this link
at the top that says ‘view product’ or you can click this button right here. I’m
going to click on ‘view product’ right here to check it out. Here on the product
page we see the product title ‘artistic round lamps’. We can see the price range.
Then, we can see the default here. The size is small and the color is red. And when I
click on this one and I choose large for example, here we see down below we have the $400 because
we’re on the small. But when I click on ‘large’ then we’ll see that it will
change to $800. Down below we can see other information about the product including the
product description, additional information and if there’s any reviews you’ll see
those here as well. One thing I want to point out when we hover over the image and click
on it, then it opens up to a really nice Lightbox display and you could see the product a lot
easier. I want to show you though how to add additional images to the product gallery.
To add additional images to the product gallery, once again I’m going to go up to the type,
click on edit product. Then on the right hand side I’m going to scroll down and here we
can see there’s a product gallery. I’m going to add product gallery images by clicking
on this link. Then, I’m going to click on upload files and select files. Then, the two
images I want to display are the white and the red artistic lamps. I’m going to highlight
both of those images and click on open. Once the image had been uploaded to your WordPress
website then you can add a title and an alternative text as we did in the previous image example.
I’m just going to add a title and an alternative text or both of these new images. Then, I’m
going to hold down the command key on my Mac to select both of these images. Now we can
see they’re both checked right here. Then, I’m going to click on ‘add to gallery’
to add both of these images to the product gallery. Here we see them right here. Then,
I’m just going to scroll to the top and click on update. Once the product has been
updated, then I’m going to view the product by clicking on ‘view product’. Now we
can see we have the main product images with two product images in the gallery down below.
So now when I click on this image once again it opens up into a really cool Lightbox display
and there are these arrows here which when I click on them, I can see the other variations.
That’s how you add additional product images to your product gallery. In this video, I’ve
shown you how to create a simple product as well as a variable product with different
attributes and variations. I’m going to continue behind the scenes following the same
steps we took in the previous two examples to add more simple products and variable products
to my shop page right here. Then, I’ll join you on the other side when I’ve added those
products and we can clean up the formatting and display issues we see here on the shop
page. Here we’re back on my shop page. We can see that I’ve added additional products
to my catalogue following the steps in the previous examples where we went over how to
create a simple product as well as a variable product. I simply replicated those steps and
added these additional products to the catalogue. Note that when we’re looking at these, now
we have four products going across these thumbnail images, these small images are very small.
I much prefer them to be larger. And instead of having four products going across, I prefer
to have only three products. In order to change the number of products that show up on a single
row within WooCommerce, we’re going to be adding another plugin to our WooCommerce WordPress
website so that when we’re done, the end result will look something like this with
three products going across and the images will be much larger. This is a much better
display than the current display we have with four smaller images going across. To add that
plugin I’m going to go up to the top, click on Dashboard. Then, I’m going to go down
to plugins, hover over plugins and click on Add New. Here on installed plugins screen,
I’m going to do a search for the WooCommerce product archive customizer plugin. I’m going
to add that here into the search box. Then, I’m going to click on ‘search plugin’.
Here we see at the top, the WooCommerce product archive customer – I’m going to install
this by clicking on ‘install now’, ‘are you sure you want to install this?’ Yes,
okay. Once the plugin has been successfully installed, I’m going to activate it by clicking
on ‘activate plugin’. Once the plugin has been activated, then we can go configure
those settings by going to WooCommerce settings. Then here on the product tab, I’m going
to click on products. Now, we’ll have additional product settings related to our product archive.
Now, we see we can toggle the display of various components on product archives and we can
change the product layout. Right now the product column default shows four which is the current
display that we have. I want to make this three instead. Here you can increase the number
of products that display per page. I’ll just increase this to 50. I only have nine
products right now. But when I add more products, those will be displayed on the same page.
Then, I’m just going to scroll down and leave everything else as it is. Then, I’m
going to click on ‘save changes’ to save my changes. Now I’m going to go back to
the site by clicking on visit site. Then, I click on the shop page. Now we see we have
three items going across which is a lot better, I think. It spaces out all the buttons so
that they’re not on top of one another and the image is a little bit larger than it was
in the previous view with four items going across. That’s how you can change the number
of items that display on each row within WooCommerce. Now that we have all the products added to
our online store, the next step is I want to change the styles on this particular website.
Note that it’s green right here for the price. I like it to match the rest of the
site which is orange. The other thing is that when we hover on top of this particular item
as well as any item for that matter, it also turns green. I want that to be underlined
instead of green. First step is we need to open up ‘inspect elements’ to find out
this particular color code. I’m just going to hold down the control key on Mac and click
on the mouse. Then, I’m going to open Inspect Elements by clicking on Inspect Element. Here
we see on the right-hand side, we can see that the price color is this green. I’m
just going to click on this. Then, I’m going to change it from green to orange. Then, I’m
going to highlight all of this, highlight it and copy it. I’m going to close ‘inspect
element’ then I’m going to go back to my dashboard by clicking on dashboard. I’m
going to go down to appearance and editor. Then, I’m going to open up ‘custom.css’
and then I’m going to scroll at the bottom and I’m going to paste the code that I just
copied in the previous step making sure that I close it off with a closing bracket. Then,
I’m going to click on update file to update the file. Now, going back to the site, I’m
going to click on ‘visit site’ and go to the shop page. Now we see that the prices
are now orange and matches the rest of the site. Note that when I hover over this particular
title though it still turns green. Once again, I’m going to open up Inspect Element by
holding down the Control key on my Mac and clicking the mouse. Then, I’m going to click
on Inspect Elements. Once again, here we can see the HTML on the left-hand side and the
css styles on the right. The one that we want is the link code which starts with a href.
So I’m going to click on that. Then, here on the right-hand side you can see that the
hover code is set as green. We actually want to change this hover code so that it’s orange.
On the right-hand side, I’m just going to click on this box right here. Then, I’m
going to paste in the orange code. Then, I’m going to highlight and copy all of this code
right here a:hover – I’m going to highlight all that and copy it. Close Inspect Elements,
go back to the Dashboard, scroll down to appearance, hover over appearance and then click on editor.
Then, I’ll click on custom.css, scroll to the bottom and paste the code that I just
copied in the previous step. Then, I’m going to click on ‘update file’ to update the
file. Now I’m going to go to the site by clicking on visit site. Then I’m going to
go to the shop page. Now, we can see that the product title as well as the price are
orange. Clicking on one of these items, I’m going click this one here, the other thing
that we still need to change is that here we see that the button is purple. I prefer
it to be orange to match the other buttons on the page. We still see that we also need
to change the price on the product page. Starting with the button, I’m going to hover over
this item, click on the control key on my Mac and click on the mouse. Then, I’m going
to open up Inspect Elements. Here we can see on the right-hand side, all the purple code
that’s creating this purple button. I’m just going to replace each of these purple
codes with my orange code right here. Then, once I’ve changed the purple to orange within
Inspect Element, I’m going to copy all of these code, highlight it and copy it, close
Inspect Elements, go back to the Dashboard, scroll down to appearance, hover over appearance
and click on Editor. Then, I’ll click on custom.css and once again I’m going to paste
the code that I just copied in the previous step making sure that I close it off with
a closing bracket. Then I’m going to click on update file to update the file. Now, I’m
going to go back to the site by clicking on Visit Site. Then I go to the shop page and
click on the item. Now we see that the button is orange and that matches so much better
with the other elements on the page. Last but not the least, I want to change this color
of this green price to orange. So I’m going to hold down the control key on my Mac, click
the mouse, click on Inspect Element. Here on the right-hand side we can see the style
that is generating that price. I’m just going to override the green and make it orange.
Then once again, I’m going to highlight all of these code right here, highlight it
and copy it. Close Inspect Elements, go back to the dashboard, scroll down to appearance,
click on editor. Then, I’ll click on custom.css and paste the code that I just copied in the
previous step making sure that I close it with a closing bracket. Then, I’ll click
on update file to update the file. Now I’m going to go back to the site by clicking on
Visit Site, then I click on shop. Now when I click on that product, now we see that the
price is in orange and the button is in orange as well. It looks so much better. This is
how you add products to your WordPress e-commerce website and you can customize WooCommerce.
Thank you so much everyone for watching and if you sent in a question asking how to add
commerce to your Genesis child theme, thank you so much for providing the inspiration
for this video. I hope this video was helpful to all of you. If it was, please feel free
to leave a comment below, like the video and share this video with your friends. I will
be coming out with more videos related to WordPress, Genesis, and how to build your
business on the web so please subscribe to my YouTube channel. Last but not the least,
all the conversation continues on my website at 77webstudio.com so feel free to head on
over to my website to continue the conversation. Until next time, I hope you have a great week
and continue learning new skills that help you to build your business on the web.

51 thoughts on “How to Add WooCommerce to your Genesis Child Theme In WordPress

  1. Katrinah, thank you for always simplifying everything #Wordpress  related.  Your attention to the little details is much appreciated by this 77WebStudio fan!

  2. WooCommerce & paypal
    http://docs.woothemes.com/document/paypal-standard/

    Instant payment notificationsIntegrate PayPal payment notifications with my website.

    The PayPal notification URL
    http://sample.com/?wc-api=WC_Gateway_Paypal

    Website preferencesBring customers back to my website after they pay with PayPal.

    Auto-Return
    http://sample.com/checkout/order-received/

  3. Hi katrinah, thank you for your amazing tutorial. I installed the wordpress locally on my computer. But sometimes I found some of the features of Jetpack such as comment, likes cannot be activated. Is that because I run the wordpress on my local server?

  4. Thank you so much Katrina! I know I speak for all of your loyal students when I say how much I missed ya :o) You have no idea how you have helped me changed my life with the knowledge and enthusiasm that you bring to your tutorials. You are my inspiration and I hope to get to connect with you one day soon! God bless and have a awesome day!!!!!!

  5. Katrina, how can you know so much about WordPress and making websites? You're simply amazing! Thank you so much for your work.

  6. You are helpful… Thanks for all the tutorials… Can you please create a tutorial by using sensei from wooplugins. Its an online teaching plugin. Also how to integrate with woocommerce to sell online courses.. Thanks..

  7. I love your videos you have helped me so Much! I want to do a social network type WordPress site. Do you have any experience with the buddypress plugin? Would love a video about help with that 🙂

  8. Another awesome video..I follow your every video tutorial..It's really awesome..! I have learned a lot of things from your tutorial.I never requested anything to you. But now I am requesting you to create a BuddyPress and bbPress tutorial. Please if possible make another tutorial for us. 🙂 I hope you will accept my request…

  9. Hi Katrina I would love to be able to follow you along, (as I have with the other courses that you teach me to an impeccable level.), but I have "Genesis1.9.1" .
    Please say I's really easily to use this version with no problems to follow you exactly with woo commerce…otherwise I'm stumped…boo hoo

  10. Oh Sugar I have also just read up on the Plug-In details to WooCommerce – excelling ecommerce.
    It states that this version is compatible with WooCommerce 2.1+ Am I truly scuppered to put it politely ;(

  11. Hi Katrina, thank you for your great work. Question on woocommerce. Can you create multiple 'shop' pages (where I give it custom label besides shop) instead of one page, 'shop' with all products listed? For example, in header menu category 1, with drop down menu of products, category 2 (horizontal from category 1 header menu), with drop down, etc. Second can you change add to cart to inquire? Thank you again.

  12. I love your videos.  Is there any way you could do a video on s2members or do you like another database and event registration plug in.

    Thank you for your help.

  13. Thank you so much! This is so helpful. Building my first WooCommerce site for a client on Genesis. You answered a lot of preliminary questions I had:-).

  14. You are awesome, thanks for your tutorials!! Quick question, do you ever develop in a local server environment, i.e. with MAMP? 

  15. Katrina, your videos are very well done and really intuitive. Thanks!!!
    My question is, what is that plugin called that allows you to have radio buttons in variations and to also have in as a widget?

    Thanks

  16. I write here from Brazil to say "thank you so much" for sharing your knowledge. From hearing you your voice is in my soul. 🙂

  17. Thank you so much. I really learned a lot from your video tutorial. You answered questions that I have had for over two years. Meanwhile, I have paid and wasted money with no result. God bless you.

  18. hi , i am a newbie, i am quit good in video production, audio production, and graphical design wich means that the adobe suite no longer holds secrets for me but i'm up to my new challenge website building i would like to know where i can find video nr 1 you made so i can start catching up with you guy's ! thanks ! The Soldier

  19. Hi Katrina love and use your videos for all  WordPress info, but is there any chance you could do a video on how to use the portfolio and projects on WordPress. Illlustrar or Espied are recommended but portfolio is on other themes as well like 2013. Much as I try I can't figure out how to use them. Much appreciated, this is doubled up question Katrina as I couldn't remember my user and pass…thanks

  20. Your the best I enjoy all your videos I have shared you a few times with other and I will continue….one silly question how do I know when some one orders on my site….I actually found you after I bought my templet which of course apply… I am using InkZine

  21. hi i am smdgouse. i need some help with you .  how to add search different search( location and products search ) boxes in top menu  my style theme . in my website  search box not working very well . how to reduce that problem. how to add wedges to   search and  location box pls help me .EXP  VIEW THIS  POST

       <div dir="ltr" style="text-align: left;" trbidi="on">
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-QipREpeWepM/VJaH58ZyfKI/AAAAAAAAAEc/sDcQrAiXJbg/s1600/GOUSE%2BSEARCH%2BBOX.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-QipREpeWepM/VJaH58ZyfKI/AAAAAAAAAEc/sDcQrAiXJbg/s1600/GOUSE%2BSEARCH%2BBOX.png" height="84" width="320" /></a></div>
    <br /></div>

    THANKS THIS VIDEO SOME HELP FULL TO ME.  

  22. please i need help to edit my 'ecommerce my account' page, but i mean just the look of it like make a subscriber's picture  , name, info, Orders, buys, edit information you know all with a good looking template or skin, you have some video or page i can look for it? I mean only  in the my account tab in the navigation menu , cuz is not good looking by default…

  23. 1…. great videos , thanks soooo much !    2…..  Question, in your opinion , what is the best way to accept credit cards on a website, I see a lot of 1 star and complaints about the woocommerce plugin , thanks so much , Danny….

  24. Not sure if this has been mentioned or not, but at the point in the video where you are adding the code to your my_functions.php page, there is an annotation that pops up, telling folks to remember to activate the connect plugin. However the annotation says to remember to activate "Google Connect" rather than "Genesis Connect."

  25. Thank you very much for doing this. 
    It's so helpful.
    I hope you will read this some day! 
    Really appreciate your help to newbies. This was very informative!

  26. All this videos are really helpful. Thank you Katrinah.
    Can you show me that which are Genesis themes actually support Woocommerce?

  27. I love your video and I've praised you in previous videos but this video needs an index to different sections. Keep up the good work.

  28. Thanks for the video! It was awesome. I have one question, though: How do I enable breadcrumbs for Woocommerce, but not have it enabled for the rest of my Genesis site?

  29. hi katrinah i was following you when i activate woo-commerce plugin so my site was disappear and i got error i 39 plz help me as soon as possible

  30. thank you for creating thisvideo.. I am having problems with the images in the catalog. The images are inconsistent and the smaller images distorted. When I set the columns to 4 in creates 3 and then drops one image in a row buy itself. I have book images for a bookstore and they should all be consistent in size. Can you help?

  31. Great tutorial, great video quality, great sound quality, great voice, great tempo, great info! Simply amazing! Thank you!! 🙂

  32. +Katrinah – Hello and great video. Question. How well does Woo integrate w Paid Memberships Pro? Would the account, checkout and other pages try to override each other between applications? Thank You – Tre

  33. I see on the Genesis Connect for WooCommerce Plugin Changelog that as of version 0.9.9 released on Jan 12th 2017 Removes the add_theme_support( ‘genesis-connect-woocommerce’ ); requirement as show in the above tutorial ya'll 😉

  34. Great Vid. I noticed the Pics of the products were not the same dimensions. Do you have a vid to help me fix that? Awesome teaching skills!

  35. I truly want to extend my appreciation to you madam for the detailed well explained video. I personally had a challenge especially on the sidebar on the shop page. It's wonderfully resolved. It happens that am using executive pro child theme, but after installing the woocommerce product archive customiser, No archive settings were reflected on the woocommerce settings section. Kindly help so that I can make my website look amazing just as yours.

Leave a Reply

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