hi everyone. i'm katrina, and in this videolet's go over how to create an e-commerce website. specifically, i'll be building ancommerce website for a hypothetical t-shirt company. and i'll be using wordpress and thefree wordpress theme provided by woothemes called wootique. so let's take a quick touraround the website we'll be building in this video. so here we are on the homepage of thesite. we see here at the top there's either going to be your website name or a logo, andi'll show you how to set that up. then, just underneath the title or the logo, we'll havea menu here so anyone can easily around your website or around your product catalog. justunder the menu we'll have a featured product slider which we see when i click on this buttonhere, a whole set of additional featured products
slide over like that. now, just going backwhen we hover over each of these different thumbnails in the product slider, the featuredproduct slider, you'll note there are two calls to action. we can either click on thetitle of the product, which will send us directly to the product page, or we can simply addthe product directly to the shopping cart. so i'll show you how to set this up in thisvideo. just below the featured product slider we have the recent products and this is prettymuch the rest of your product catalog, all of the rest of your products will be displayedhere. and again, with the title that goes directly to the product page, or a call toaction. so one thing i love about this particulartheme is that there are very few distractions.
your eyes, your attention, is really directlyon the product, and on the call to action, which when you have an commerce site is exactlywhat you want. you want to have everyone pretty much just focused on your product becauseyou want to sell them. so this theme is really really minimalist, and i just love, i lovehow this theme is set up. so thank you woothemes for providing us with this free, this wonderfulfree e-commerce theme. okay, so moving on. right here on the righthand side, this is a sidebar. and with the sidebar you can add whatever custom contentthat you would like. so i'm going to show you how you can configure different customcontent here in the sidebar. we see in this particular example, i have a search for productswidget at the top so anyone can easily search
for products directly from this search boxright here. then i have the top rated products that are featured here in the sidebar, theni have my on sale now t-shirt. and then at the bottom i have a few social network iconsso anyone who comes to the homepage can easily connect with me on the social web, eithervia facebook, twitter, youtube, or some other social network. and i'll show you how to setthat up in this video also. so coming up to the top let's take a lookat one of the product pages. so i'm just going to scroll down here, and click on this one,the faith hope love sweatshirt to go to that product page. and when i click on that we'llsee here we have the product page for this faith hope love sweatshirt.
so at the top we have the title of the product.then we have the price range, a short description, and then as we see here we see the defaultis small. so note that this price right here, this is from $60, which means this is startingat $60, so in this video i'l show you how to create different prices for the same product.there may be for whatever reason you may want to offer different upgrades or different typesor variations of your product with different prices or different attributes, and i'll showyou how to set that up. so here for example we see, the size small sweatshirt is $60,but when i click on for example the extra-large, the price goes up to $65. so that is a pricevariation that we can apply to the same product on the same product page.
now, one other thing i want to point out here,is this product gallery. i'll show you in the video how to set up a nice product galleryso that when you click on the thumbnail for example it opens up into a lightbox displayso you can see a larger version of the product. and then when you click on the arrows hereyou'll slowly be able to see each of the different angles or images associated with the product.so this is just a really great feature of this particular theme is the ability to adda product gallery to your product page. so i'll show you in this video how to configureand how to set this up. okay, scrolling down the page we see the nextsection here in the middle is you'll have your longer description. and then when weclick on additional information you'll see
that there are the different sizes that areavailable for this particular product. so additional information related to the productwill show up here. and finally there's a review tab where anyone can summit a review relatedto the product. just below that we'll have a variety of different related products thatyou can add. and in addition to related products i"ll show you how you can set up cross sellsor upsets for this particular product. so now just scrolling up to the top let'stake a look at some of the internal product pages of the site because once you have themain e-commerce features set up most likely you'll also want to have some additional internalpages. so let's take a look at the about page. i'm going to click on about right here. andhere we see there's an about page that you
can create an about page about your business,your company, your store, and i'll show you how to add some text, an image, and here wea see there's a call to action button so i'll show you how to set that up also. so i'm going to click on contact me to goto the contact page. and here we see there's a really simple form for anyone to contactyou directly through your website. so i'll also show you how to create a contact formfor your e-commerce website. so let's take a look at the checkout pagefor when someone actually places an order. so i'm going to go back to the homepage. andthen i'm going to scroll down here to the bottom. and actually no, i'm going to justclick on this product here the peace t-shirt
for men, just click on that. and here we seeit's $40, so i'm just going to click on add to cart to add this product to the shoppingcart. okay so the peace t-shirt was successful added to your shopping cart. i can eitherclick on this button here to view the cart, or i can go directly to the checkout. so iwant to first check out the view cart options so i'm going to click on view cart. also notein the sidebar here you have one item in the shopping cart for $40. so here is the cart and you see there's goingto be a thumbnail, a title, the price, the number of quantity that someone is ordering,and the subtotal right here. so we can also add a coupon to this. so i'll show you inthis video how to create a coupon for your
products as well. so for example we see thesub-total is $40 for the shirt. it's $5 for the flat rate, and it looks like i already,i already did apply the discount. so let me just remove that temporarily, got ahead ofmyself there. so now there's no coupon associated with this particular product. so we just see the shirt. we see it's $40,we see the sub-total is $40. the flat rate shipping is $5. and i'll show you in thisvideo how to set up different rates of shipping. so i will be using flat rate shipping buti"ll show you how to set up free shipping or where you can set up other kinds of shipping.international shipping, local pickup or delivery shipping. it's really up to you, and i'lllet you know, i'll show you in this video
where you can change your shipping method,your shipping options. so we see that the order total now with the shirt and the shippingis $45 and as i mentioned i'll show you how to add a coupon to the products if you'd like,in this video. so i had already created a coupon here so i'm just going to add thatin. the coupon code is summerfun. and i'm just going to click on this button here toapply the coupon. and now we see the coupon was successfully applied, and now when i scrolldown we see the order that was originally $45 and now with this order discount of $5,it's now $40. so that is a really great feature of thisparticular design from woothemes. you can easily add coupons to your products. so let'stake a look at proceeding to checkout, i'm
going to click on proceed to checkout righthere to go to the checkout page. and here you'll see you'll have your billing address,your shipping address, and any notes that someone wants to add about the delivery. and then when we scroll down you'll have yourorder right here. and in this video i'll show you how to set this up with paypal. now there'sother payment methods that you can use and i will point out where you can configure thosewithin this particular theme. but for the sake of this particular video, since it'sa lot easier, i will just be using paypal. so for example with paypal you can eitherhave, a customer can either use their paypal account, or they can simply use their creditcard and they do not have to have a paypal
account. so let's take a look at what thatlooks like. so for example when i go to place order byclicking on this button here, place order, here we see we're on the paypal order summaryis located here on the left hand side, the item total is $40. and as it notes here youcan either log in to your paypal account if you have a paypal account or if you don'thave a paypal account you can pay as a guest with simply your credit card or some otherform of payment and you can sign up for paypal later, or you don't have to sign up for paypalat all. so that gives your customers two different ways, with via paypal or not via paypal, topurchase your products. so going back, one last thing on the websitethat i do need to point out is the blog. having
a blog is a great way to add fresh contentto your website, and search engines love fresh content. so keeping your blog updated is alwaysa good idea. so i'll show you in this video how to set up your blog. here we see hereis the blog index page. all of your blog posts will show up with a short excerpt, and thenyou can click on continue reading to go directly to the blog post. and you'll have a titleand the thumbnail right here. so i"m going to click on the title, new peacet-shirts have arrived to go to this blog post. and here we'll see here is the blog post title.there's going to be some blog information including the blog publish date, the authorand perhaps a blog category that perhaps the post was grouped in.
then i'll show you how to create an imagegallery. this is different from the product gallery. so this is just an image gallery.you can include any kind of images here within the image gallery. and when i click on oneof these just as an example, we see it also opens up into a lightbox display, which isreally cool. i love this lightbox display. and you can see larger images, larger versionsof the images in your blog post. now this particular lightbox display is reallyneat too because anyone who sees it can also add a comment here, right here, and there'ssome meta data related to the image. so i'll show you in the video how to create imagegalleries within your blog post. finally scrolling down we see there are somesharing features here, so i'll show you how
to add social sharing features so anyone whosees your blog post and likes your blog post can easily share it across the social web,either by facebook, google+, twitter, linkedin, or some other social network. so this is wherewe're headed. when you're done with this video, your website, your e-commerce website, willlook something like this. now the good news about this particular theme and about wordpressin general, is that you don't' need to have any kind of programming experience or coding,i'm literally going to walk you step-by-step, from scratch, to show you how to build thise-commerce website. so, let's get started. so before we get started, how much is thiswebsite going to cost? well we need several things. number one, weneed a domain name, and we also need web hosting.
in this video i'll be using hostgator.comfor web hosting, and at hostgator you can get both the webs hosting as well as the domainname. 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 sue wpcoupon25as well to get an extra discount off of your order also. i do want to mention as well ido receive a small referral from hostgator so thank you in advance for your support ofhelping me to make these free wordpress training videos. after you have the domain name and the webhosting, the next thing we'll need is a theme, so i'll be using a free theme by woothemesin this video called wootique, and i'll show
you where to get that and how to set thatup. and finally, we some time to build the website. so, i'm guessing it will probablytake just under two hours to go through the video so you may want to allot that amountof time so you can complete the video so that you can get your website up and running. so what are the steps to build the website?well the first step is to get the domain and the web hosting. step number two is we wantto install wordpress, and finally we want to build out the website. so let's head onover to hostgator to take care of step number one which getting the domain and the webshosting. so here we are on hostgator.com. to view thehosting plans go ahead and click on the button
in the middle that says "view web hostingplans". and here we see there are three different plans to choose from . we have the hatchlingplan, the baby plan, and the business plan. if you are a small business owner, or if youare just getting your website up and running for the very first time, most likely the hatchlingplan or the baby plan would be a good fit for you. the difference between these two is that thehatchling plan gives you a way to host one website domain, whereas the baby plan givesyou a way to host as many website domain names as you would like. so there's definitely more of a value in thebaby plan since you can host as many websites
as you would like under one account. but ifyou are just getting started as mentioned, and you do only have one domain at the moment,then you can give ahead and click on the hatchling plan if you'd like to sign up for that. so i'm going to click on the "baby plan" becausei want to order that one. and the next step we see is that we need to choose a domain.if you already have a domain then you can enter that in this field and go ahead andclick on "continue to step 2". and, if you need to get a domain name for your websitethen you can enter the domain name you would like here and you can click on "continue tostep #2". now just note down below here it says, "entera coupon code", and by default you'll automatically
get a coupon from hostgator. but if you wantto add even more of a reduced rate on top of that, you can use this coupon which willgive you an extra amount off of your order. so i'm going to put "wpcoupon25", that's aspecial coupon 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'mjust going to put in a random domain name for the moment just to show you for the demopurpose what the next page looks like. so i'm going to click on continue to steptwo which brings us to step two, the billing information page. now on this page we seethe first thing on this page is the package type. i had signed up for the baby plan sowe see that right here. and then we see the
current billing cycle that i am signing upfor. now i do not want to sign up for 36 months of web hosting all at once. i want to keepmy expenses much lower than that. and i prefer to pay month-by-month. so i'm going to clickon this here and i'm just going to choose a billing cycle of one month at a time thatway i'll be paying one month as i go for my web hosting. the next thing you want to do is you wantto choose a username and a security pin. then you can fill in your different billing informationright 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 canchoose whether you want to include these add-ons
or not. i'm going to uncheck the sitelock becausei have some other ways that i intend on protecting my website when i start building it so i don'twant to sign up for the sitelock. and the privacy protection, this is really optionalas 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, youremail address, and your phone number may show up in the web host database for anyone onthe internet to be able to access. so i prefer
keeping my address, my phone number, and myemail address private. so whenever i buy a new domain name i always sign up for privacyprotection. if you don't want privacy protection though, you can save some money by un-checkingthis. i'm going to leave it on the moment though. then you can just come down here and hereyou can see 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 posting is free withthis coupon. and we can see that here is our domain name, and our hosting at $9.95. soin total, we're looking at under $25 to get started. if you want to save some more moneyas mentioned, you can uncheck the privacy
protection and you'll note that now the totalis under $15. but once again, i like getting privacy, soi'm going to leave that on. and the last thing that you want to do, is that you want to makesure that you click on this little box here that says, "i have read and agreed to theterms and conditions of use." so, once you have your hosting order all ready to go andwhen this looks good to you, you can go ahead and click on "create account" to create yournew web hosting account. so once you click on create account, you getthis page, which will thank you for your order and tell you to go check your email for informationrelated to logging in to your web hosting account. so, i'm going to go check out myemail. and here we see on my email account,
here's the email from hostgator with my accountinfo. 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 systemlink. so if you want to check out any info related to your billing you can go ahead andclick 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 temporarypassword. 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, thisis a really good email to keep in a safe place for future reference because you'll be needingthis information, as well as the link to control
panel, to log into your hostgator web hostingaccount. 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 foundin the email and you want to add your password right here as well. once you've had that setup, 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 thankfullywith hostgator, there's a really easy way to install wordpress using their simple wizardscript. so, i'm going to scroll down to where that is located. you want to scroll down towhere it says "software and services" and
you want to find this icon that says "quickinstall". so, this is what we're going to use to install word press really easily inhostgator. we're going to use this quick install link, so i'm going to click on that. and oncei click on that, you'll note that there's all these different kinds of software listedhere on the left hand side bar. so, right at the top, you'll note that it says, "blogsoftware" and there's a link here for wordpress. this is what we want to install, so i'm goingto click on that and you'll note that there's a button here that says continue. also notethat we are installing version 3.5.1 of wordpress, which is the most current version availableat the time of this recording. so, we are installing wordpress 3.5.1 and then i'm goingto click on continue to continue the process.
and here you want to choose the domain namethat 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'mjust going to add an admin email here, so put in my email. also you want to give ita title. so i'll just call it the name of the domain. now, the admin user, this is animportant one to keep in mind, the default for wordpress websites is "admin", the adminuser default is the "admin" and that's not really the safest user name to use so youwant to create a user name that is anything other than admin. so, i'll just use my namefor the moment and you can add first name,
last name if you like. i'm not going to dothat 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 yournew website by clicking on this link here. and also note that here is the admin arealog in url that you will use in the future to access the log in panel, to access yourwebsite in the future. you want to make a note of this link here. it's usually yourdomain name followed by wp-admin. so that's an important link to remember as well. sothat going forward, you can easily log into your wordpress website. also make a note ofyour username and password. this is also what you will need to log into your website whenyou click on this link. so, i'm just going
to highlight this temporary password hereand copy it, and then i'm going to click on this link here to log on into my new wordpresswebsite. so here we are in the log on screen of ourwordpress website. to log in, you want to enter your username in the username fieldand your password in the password field and then you want to click on this button thatsays, remember me, so that the next time you come to wordpress, your username and passwordwill be remembered. in the event that you forget your password in the future or perhapseven now, you want to click on this link here that says, "lost your password?" and wordpresswill send you a password reset to the email that you use when you were creating your wordpresswebsite. so, for the moment, here i have my
username and password. i'm going to go aheadand 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 whenyou 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 representssome 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 dismissin the top hand 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, rightout of the box when we first install wordpress. so, to see the site, i'm going to go to thetop left hand side and click on this 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 seethis 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'llbe making quite a bit of changes so that it will end up looking like this at the veryend. so this is what we're headed toward, but for the moment, our website looks likethis. so let's go back to the dashboard and startbuilding out this theme. to do that you want
to go to the top left hand side, hover overthe website name and the first link is dashboard. we want to click on dashboard, and here weare on the dashboard of our wordpress website. so this is the first thing we'll see whenyou log in to your wordpress website. for the moment, the first step we want to takeis we want to change the theme of the website. so to do that on the left hand side the firststep is here 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 comeswith your wordpress installation. and what we want to do now is we want to install anew theme by woothemes called wootique. this is the e-commerce theme that we need to installto get started. so to install the new theme
we want to go to woothemes.com, so i"m goingto head on over to woothemes.com and then in the top navigation here you want to clickon themes. once you click on themes you'll see there are tons of amazing themes provideby woothemes here, most of the themes are premium themes but the theme we'll be usingis a free theme, a free e-commerce theme called wootique. so wootique is a woocommerce theme so i'mgoing to click on woocommerce and then i'm going to click on search to search for allof the woocommerce themes. and here we go. here is the page with all of the woocommercethemes, and once again most of these are premium themes but when we go to page two by clickingon next, we'll see that wootique is free and
this is the first one here on the second page.so i'm going to click on wootique to go to the wootique page, and here we see there'sa button here that says free download so i'm going to click on this button here. whichbrings us to the second button so i'm going to click on download now once again. and here,three times the charm, we're going to click on free download, this green button to downloadwootique. now in order to download this theme you needto have an account with woothemes so if you don't have an account yet go ahead and registerfor a free account by filling in your info here and clicking on register. i already have an account on woothemes soi'm just going to add my username and password
right there. and then i'm going to log into login to woothemes. once you're on your account page you want to click on this secondtab here called downloads, so i'm going to click on downloads right here. and here you'llsee there's a list of all the available free downloads that you can choose from withinthe woothemes theme library. so these are all free downloads and we see here, the lastone here is wootique, so i'm going to click on wootique here to download wootique. so once wootique has been downloaded the nextstep is i'm just going to drag the file to my desktop so it's easier to find. so i'mjust going to drag it, let's see, i'm going to drag it right there, and i'm just goingto drag it right to my desktop. okay, so now
we need to install this theme in wordpress. so i'm going to go back to the manage themesscreen here on the wordpress dashboard, and right next to manage themes there's a tabthat says install themes. so i;m going to click on install themes. and here we see thefirst link here is search. so we're on the search field here, however what we need todo is we need to upload this themes to our website. so right here there's a link that says uploadso i'm going to click on the upload link. and then you see it says install a theme in.zip format, so i'm going to click on choose file to choose my file, and here we see thefiles on my desktop. so the one that i want
to upload is this zip file that says wootique,and then i'm going to click on open to open this file. once the file has been chosen ineed to click on install now to install the theme. so i'm going to click on install now. okay the theme was installed successfullythe next step is we can either live preview it, activate it, or return to the themes page.i'm going to activate this theme by clicking on activate. so once we activate the wootique theme you'llarrive on the wootique theme options screen where you'll see at the top you have severaldifferent messages. the first one will say enhance your theme with woodojo. woodojo isa powerful woothemes features suite for enhancing
your website and you can learn more by clickingon the get woodojo button right here. so we are actually going to get this so i'll dothat in just a moment. the next message says enable press trends. press trends is a simpleusage tracker that allows woothemes to see how its customers are using woothemes. ifyou'd like to enable that you can do so by clicking on this. i'm not going to do that,i'm not going to enable that, i'm just going to close that for the moment, just to savesome time here. so i'm just going to say okay to close that. next we see that wordseo and sidebar managerhave been removed from version 5.5 of the wooframework. so for seo needs we encourageyou to use the wordpress seo plugin by yoast.
so we will use this in just a few momentsdown the line. in this video i'll show you how to set this plugin up. so we'll do thata little bit later. and then you'll see you have all the differentoptions available for this theme. so first let's go ahead and get woodojo. so i'm goingto click on this button at the top that says get woodojo. and here we are back on the woothemes pagewhere we can get woodojo. so you can watch the video or get more information about woodojohere. i'm just going to download woodojo for free by clicking on this download link. once woodojo is downloaded then like we didwith the theme i'm just going to drag woodojo
to my desktop so that it's easy to find. soi"m just going to drag it and drop it there on my desktop. and then i'm going to go backto my wordpress theme here and what we need to do is we need to install this plugin. thiswoodojo is a plugin so i'm going to click on plugins right here. and here we see ourplugins screen so we can add a plugin in two ways, we can either click on add new hereat the top or we can click on add new underneath where it says plugins in the left sidebar.so i'm just going to click on add new at the top here. and then i'm not going to do a searchfor the plugin since i know where it's located. instead like we did with the theme i'm goingto upload the zip file of the plugin by clicking on upload. so i'm clicking on the upload linkright here. and then i'm going to choose the
.zip file by clicking on choose file. andhere's the woodojo plugin with the zip file right here so i'm just going to select itand click on open to open that file. and once the file has been chosen i'll just go aheadand click on install now to install this plugin. okay the plugin was installed successfully.the next step is to activate the plugin so i'm going to click on activate right here.and now we see the plugin has been activated. so we're good to go on the woodojo plugin.now i'm going to go back to the wootique theme options by clicking on wootique, and thenwe see here we are on the woothemes screen. so i had noted before that i was going toadd this wordpress seo plugin so just to remove this message here i'll take care of that rightnow. so i'm going to click on this to get
the wordpress seo plugin. and here we seethis is the wordpress seo by yoast. so we can download this but an easier wayto do that is because we see we're on the wordpress.org plugin directory here, we'reon wordpress.org. an easy way to add plugins from wordpress is to go back to the dashboard,and then on the left hand side we're going to click on plugins once again. and here onthe plugins screen i'm going to click on add new to add a new plugin. and this time insteadof clicking on the upload link i'm just going to do a search for wordpress seo by yoast.and then i'll click on this button here that says search plugins. so here we see it's the second one listed,wordpress seo by yoast, it has over four stars,
that's really good, based on over two thousandratings. you can see the details by clicking on details right here. and here we see onthe right hand side we have let's see, this plugin was last updated nine days ago, itrequires version 3.3 of wordpress or higher, it's compatible up to 3.5.1, which is theversion of wordpress we're currently using and it has been downloaded over four milliontimes with a four and a half star rating. so this is a really awesome plugin and youcan read more about it by checking out the description here. i'm going to install thisplugin by clicking on this orange red button here that says install now to install theplugin. okay so once this plugin has been installed,it says successfully installed, then i'm going
to click on activate plugin to activate thisplugin. okay you've just installed wordpress seo byyoast. you can allow tracking or not allow tracking. i'm not going to allow trackingso i'll just turn that off for the moment. so here we see we do have the woodojo pluginright here and we have the wordpress seo plugin as well. so let's go back to the wootiquetheme options screen right here by clicking on the left hand side, i'm going to clickon wootique. now we have this message at the top but we have added the wordpress seo pluginso i'm just going to dismiss this message now by clicking on this box right here, thisx. and then i'll click on okay. yes i do want to close this banner.
and now we see just the woothemes themes optionspage. so let me just scroll down here a little bit. we're getting another little note herefrom wordpress seo by yoast, and i just want to click on close to close that, i'm not goingto so a tour of the plying right now. so i'll just close it. and then i'm just going to scroll back upto the top of the theme options screen. now let's just take a quick look at the websiteand see what we have so far. so to check out the website i'm going to go to the top lefthand side, hover over the domain name and click on visit site. so here we can see the bare bones versionof our website. of course, we're headed toward
this version. this is another domain herewhere i have the finished site already built. so we're headed toward that but for the momentour website looks like this. so if perhaps you are not seeing a toolbar, like for examplei am not seeing a toolbar right here right now, it's a good idea to make suer that isthere because it makes it easier to navigate around your website when you're logged into tour dashboard. so i'm going to make sure that this little toolbar here pops back upby going back, so i'm going to click the back button. and then i'm going to go to woodojo,all of the features included in woodojo. so i'm going to click on woodojo right here onthe left hand sidebar. and here we see there's a little descriptionhere that says woodojo is a powerful toolkit
of features to enhance your website. selectonly the functionality that you need without any unnecessary code and enhance your websitewith woodojo today. so these are tons of features that you can add to your website that areincluded in the woodojo toolkit. so the one that we want is called woocommerce,so i'm going to scroll down here. it's a plugin ,a wordpress plugin developed by woothemes.and this is the one we want right here, woocommerce. so i"m going to download and activate woocommerceright here by clicking on this button. okay, welcome to woocommerce, you're almostready to start selling. and you can click on install woocommerce pages or you can skipthe setup. so i'm going to click on install woocommerce pages right here by clicking onthis button. okay, thanks all done. so now
we have the pages installed and now we havewoocommerce installed as well. and now we see there's another item here on the sidebarcalled woocommerce. so now let's go ahead and take a look at the website. so i'm goingto go to the top left hand side, hover over the domain name and i'm going to click onvisit site to visit the site. and here we see now we're looking a lot better.we have all of our different sample pages and items here in the menu, we have this filledout a little bit more, and now we can see this toolbar up here at the top which willmake it easy when we are logged in to the website and we want to navigate around thewebsite. so this is looking a lot better than it was just a moment ago.
so let's continue building out this website.so the first thing we want to do is we want to go back to the dashboard so i'm going togo to the top left hand side and i'm going to click on dashboard. and then we want togo to the wootique theme options screen. so on the left hand side there's an item herethat says wootique, so i'm going to click on this. and here we are on the theme optionsscreen of our wootique wordpress theme. so here on the left hand side there are lotsof different options here that we can configure to set up the theme. the first one is thegeneral settings tab and we see we can add a custom logo to the header of the site orwe can use a text title right here. so let's take a look at what that looks like.looking at the domain where i"ve already built
the site, we see the logo and the title willshow up right here in the top left hand side right here. so let's set that up. to do thathere we are once again on the theme options screen. if you'd like to add a logo just goahead and click on the upload button here to upload your logo. i'm not going to use a log, i'm just goingto instead going to use a text title. so i'm going to keep this check box checked. andyou can see here you can set up the title and the tagline in the general settings page.so when i click on general settings for example, and here we are on the general settings screen.so now you can see here at the top here is the site title and this is the title thati want to be displayed in the header right
here, just my domain name. and also notice right below that there's alsoa tagline. so by default wordpress comes installed with a tagline that says just another wordpresswebsite. so i don't really want that so i'm just going to delete that right now. you canadd a tagline or not. i'm going to leave it blank for the moment, and then i'm just goingto scroll down here and click on save changes to save the changes. also, just a side note when you do come tothis screen sometimes if you don't want to change anything it's still a good idea evenif you've made no changes to come to the bottom and click on save changes just so that thetheme will override the wootique in the header.
so we just noted that it said wootique inthe top header area. so it's a good idea to save your changes here, again even if you'vemade no changes just to make sure that this new site title shows up in the header. so once you have all the settings saved youwant to go back to the wootique theme by clicking on wootique here on the left hand sidebar.and here we are on the wootique theme options general settings screen. now we haven't madeany changes yet to this but again just to make sure this configuration has been seti'm going to come up here to click on save all changes. again the reason i'm doing thatis because sometimes when you don't click on these save changes button, even if yo haven'tmade any changes, sometimes the wootique will
continue to show in the header section. soi want my domain name, the text title to show up so that's why i clicked on save changesright here. now let's take a look at the header on thehomepage. to do that i'm going to go up to the top left hand side and click on visitsite to visit the site. okay and now we see i have my new text title showing up here inthe header. that's exactly what i'd like. so the next step is let's add some featuredproducts here to fill out this slider. to do that i"m going to go back up to the lefthand side and click on dashboard. and here on the dashboard once again you want to clickon wootique on the left hand sidebar. so i'm going to click on wootique right here. andhere we are on the theme options screen again
for wootique. so before we add featured productsi want to go over the additional settings that you can in the general settings screenright here. so we've already gone over the logo and the text title, the next one thatyou can configure if yo'd like is the custom favicon. this is a small graphic that showsup next to tour domain name in the browser window. so if you'd liekto add a favicon,a small little graphic, you can do so by uploading a 16 pixel by 16 pixel ice image, and youcan click on this link to learn more about that, to represent your website's favicon.i'm not going to do that right now, i'm just going to leave it as-is. next we have some tracking code so if you'reusing google analytics, and i do recommend
you use google analytics, you can add theembed code from google analytics right here. i have another video where i go over googleanalytics and how to add google analytics to your site, so be sure to check out thatvideo to learn how to add google analytics and the tracking code to your site. but here is a great little section where youcan just drop the code in if you have already set up your google analytics. next if youwant to add a rss url you can do so right here. feedburnder is a really popular rssfeed. i'm not going to add that one either. here is the email subscription url, you havea contact form email section. you can add any custom css and you can add some additionaloptions down below here. so i'm not going
to change any of these. usually the defaultsare set exactly the way i would like them to be set, so i'm going to leave everythinglike that. the one thing i think i will actually add though is the contact form email. as it notes here, enter the email to be usedon the contact form page template. add the contact form by adding a new page and selectingcontact form as the page template. so i'll show you in this video how to setup your contact form but for the moment i will add my contact form email since we'realready on that page. so i'll just add that there and then you want to scroll to the topand click save all changes to save the changes. once the changes have been saved let's headon over to the next tab here in the theme
options screen to where it says homepage settings. so here we are on the homepage settings pageof your wootique theme. so as it notes at the top by default woo themes will have thehomepage content checked off here, this is a default that says display your latest poston the homepage above the slider. so let's take a quick look at what that looks likeright now. to do that i'm going to go up to the top left hand side bar here and clickon visit site to visit the site. and here we see just under the menu, here is the homepagecontent that that is referring to. so we see we have our blog post showing up right herebecause the default home settings of this theme have it checked to display this blogpost. so this is an e-commerce theme and i
would prefer to have the focus be directlyon the products. i don't really want anyone to come to the site and see a blog post rightat the top. so i'm going to turn this particular sectionoff so that we only see the featured products and the recent products. so let's go aheadand turn off this blog post by going back to the woothemes options for the homepage.so i'm going to click on dashboard here. and then once again i'll click on wootique. we'regetting the hang of this. and then i'll click on homepage settings. and here where it sayshomepage content i'm actually going to uncheck this box so that i'm not displaying my latestpost. so once we have that all set i'll click on save all changes to save all changes. andthe options have been updated. okay now just
under that there's a couple more homepagesettings the first one is the homepage featured products section. so we can feature eithera static grid which is all the different thumbnails displayed on the homepage at once, or a slider.so i would prefer to have a slider so i'm just going to keep the default of slider andjust below that here you can indicate in the featured entries section how many images youwant to have displayed in the slider. so 8 is a good number that will display four itemson each screen. and i'll show you what that looks like in just a moment. so i'm going to leave that as-is we've turnedoff the blog post showing up on the homepage and we've kept the slider for the featuredproducts, so i'll just click on save changes.
we don't really need to since we haven't madeany changes but i like continuing to click on save changes whenever i come to a screenjust so that i know the settings are set the way i want them, just like a double check. okay so let's add some featured products sowe can see them showing up on the homepage. so to add a new product to your e-commercewebsite you want to go to the left hand side bar and you want to click on this link herethat says products. here we are on the products screen and we see that i don't have any productsadded yet so we need to add some new products. to do that there's actually three ways. youcan number one, you can click on add product here at the top, or you can click on add producton the left hand side bar underneath where
it says products. or in the top toolbar herewhere ti says +new if you hover over +new you'll notice that it will say product, andyou can also click on this link as well. so wordpress gives you several different waysto navigate around the website to do the same thing. so to add the product now i'm justgoing to click on this link at the top that says add product to add a new product. andhere we are on the add new product page. so the first thing is we need to give our newproduct a name. so i'm going to be adding a brazil t-shirt here so i'm just going tocall this brazil. and then we have a description field so you can add information about theproduce there. so i've copied some content already so i'll just paste that right in here.this is just going to be a women's scoop neck
t-shirt because again i'm building an e-commercewebsite for a t-shirt hypothetical company. so once you have your product name in thetitle field here, and you also have your description in the box here and also notice that thereare two different views, the text or the visual view. so the visual view is the what you seeis what you get view. this has all the different formatting icons here, this is very similarto writing up an email or using microsoft word or using some other kind of word processingsystem. you can just highlight whatever you want, without knowing any code, you can justhighlight what you want and then you can use these icons here to format it like that. so the other thing is that this text tab here,this is the behind-the-scenes code that wordpress
is generating without you having to know anycode. but if you want to learn some code it's always a helpful way to toggle between thesetwo different views. for the visual view to see the actual what you see is what you getview of the content and then you can click on text to see how wordpress is producingthe code associated with the formatting. so we see here by clicking on the text view nowwordpress has added this strong code here for the bold. it's a bold html code. the openingtag and then here we have the closing tag as well. so the good news is that you don'tneed to know any code with wordpress, you can simply stay in the visual mode here, thevisual view, and wordpress will generate all of the code for you.
another thing to note about the visual viewis that you notice right now we only have one row of formatting icons. if you clickon this link here, i'm going to click on this button, and notice when you hover on top ofit you get a yellow tooltip which will tell you exactly what the icon does. and that'strue for all of the icons here in this row. so you notice when i hover over this particularone it gives me a tooltip for an unordered list. this one is a tooltip for an italickind of formatting, so the good news is that you don't have to memorize any of these differentkinds of icons, if you just hover on top of them you'll get a tooltip provided by wordpressthat tells you exactly what it does. so the one i want to point out here is thisone, show or hide kitchen sink. and when i
click on it you'll notice i get a whole secondrow of icons which is pretty cool. so you have all of these extra formatting optionsthat you can use to format your text. so here we have the text here we're goingto continue adding the new product and filling out the product page. so the next step isi want to scroll down here and i want to find the section that says product data. so right where it says product data we'regoing to be adding a simple product this time. so i'll just keep it at simple product. wheni click on this though you'll notice that i have several different options that youcan choose from. you can group the products or create external affiliate products or variableproducts. i'll go over the variable products
later in this video but for the moment let'screate a simple product. so the first tab here is the general tab andif you want to use a sky you can do so right here. and also notice that when you hoverover these question marked the wootique theme also gives you tips about what this particularfield is about. so for example when i hover this question mark in the sku field it sayssku refers to the stock keeping unit, a unique identifier for each distinct product and servicethat can be purchased. so that's pretty cool here that you have a little tip that willtell you what each of these things will do. so right now i just want to add a regularprice for this so i'm going to add a price of say forty dollars. you can also createsales on a product so if you want to create
a sale so i'm going to create a sale for thirtydollars, the regular price is forty the sale price is thirty. and then you can scheduleit by clicking on this link here that says schedule. then you can see the sale pricedates if you want to specify a limited time for the sale of he product and then you wouldjust set the dates right here. so to set the dates i'm going to click on the calendar righthere. it's the 25th of april. so let's say i want this sale to go into effect from today,,so i'll click on today through the end of the weekend. so then i click on the to fieldhere, the little calendar. and then i'll add it through sunday. so i'll click on the 28thright here. so now you'll see the regular price of this product is $40 but there's asale on this particular product between the
dates of today, april 25th and the end ofthe weekend, april 28th. so once you have all your prices lined uphere the next step is you can go down this row here. the next one is inventory so letme click on that. here you have some more stock keeping features you can add so forexample when i hover over the question mark you'll notice a tip comes up. this is veryhelpful. the stock status controls whether or not the product is in stock or out of stockon the front end. so if you want anyone to see if it's in stock or not you can add whateverstock status you want right here. so i'm going to say this is in stock. so you'll noticewhen i click on it the out of stock option pops up as well. so i'll leave this in stock.
allow backorders? i'm not going to allow anybackorders. i'll just leave it at the default which is do not allow. but once again hereis the little tip for you if you hover over the question mark it says "if managing stock,this controls whether or not backorders are allowed for this product and variations. ifenabled the stock quantity can go below zero." so once again i'm going to leave it as thedefault. the defaults work pretty well for me so i'm just going to leave it. but thegood news is that you do have several different options if you want to be more detailed aboutyour stock management. okay the next one here is shipping so i"mgoing to click on shipping. and here you can specify shipping weight, dimensions, and shippingclass. now i'm not going to touch this now
i'm going to talk more about shipping classa little later in this video. and we will be coming back to shipping. so i'm going tohold off for the moment and just leave it as-is. and click on linked products to checkout linked products. so this is the first product we're adding,however when we have several products on the site then you can choose whether you wantto cross-sell products or up-sell products. and once again here's a great tip that tellsyou what upsells are and what cross-sells are, and when you click in here you can selectwhichever item you want. so i'm not going to do that right now because we're just gettingstarted and i don't have any other products to up-sell to or cores-sell to, but this isan area that you can come back to later once
you have products added to your website. now the one i do want to add though is attributes.so i'm going to click on attributes. and here we see on the attributes panel that here wecan add an new attribute. so i'm going to click on add to add a new attribute. and ofthis one i'll make it an attribute of color, i'll make it an attribute of color. and thet-shirt i'm adding is a teal t-shirt, it only comes in one color. so i'm going to put thecolor here as teal. and i'm going to click on this button here to make it visible onthe product page. now note that this is a simple product sowith simple products you cannot add variations. i'll do that in the next example with thenext product. but for the moment i'm just
going to add one color, this comes in teal.i'm also going to add one more attribute here by clicking on add. and i'll make it a size.and this particular one will only come in the size of small. so it'll be really simpleit's just a simple product with one color an done size. and then i'll click on saveattributes to save the attributes. once the attributes have been saved i'm justgoing to scroll up and now we can see that we're almost there. we see we have our productcategory, we have our tags. the other thing we need to do is we need to add a featuredimage of a thumbnail to be displayed for this product. so i'm going to click on set featuredimage. next i'm going to click on upload files because i'm going to upload a file from mycomputer and i'm going to click on select
files to select the file. so this is the t-shirt right here, the brazilt-shirt in teal so i'm just going to select it and click on open to open the file. andhere we have the thumbnail showing up on the right hand side. so i'm going to give thisa title for the image. i'll just call it the brazil women's scoop neck t-shirt. and it'salways a good idea to add an alternate text as well so i'll just paste that in there also.and then at the bottom i'll just click on set featured image to set the featured image. okay so now it looks like w're ready to go.so i"m just going to click on publish to update and publish this. okay the product has beenupdated. now i'm just going to view the product
by clicking on view product, this link. and now we can see the product. so we seethat it is on sale. there's a little note here that says it's on sale. there's a titleand a description and a price. it was originally $40 and it's on sale for $30. and actuallythis is pounds so the next thing we'll do is we'll change the pounds to dollars. buthere we see we can just order it and add it to the cart. and then when we click on additional information,again we see that it's a simple product. it comes in one color and one size. so the nextthing is let's change the currency here from pounds to dollars.
so to do that i'm going to go to the top toolbarhere and hover over the site title and click on dashboard. and then i'm going to actuallythis time click on woocommerce to go to the woocommerce settings. and then i'm going toclick on settings right here. so right underneath where it says woocommerce there's a link thatsays settings so i'm going to click on settings and here we see there are a number of differenttabs and all of these have tons of different options that you can configure. so we seeon the general tab here that the base location is the uk, so i'm in the u.s. so i'm goingto clicl o nits and change that from united kingdom to the u.s.. and i'm in californiaso i will click on california. and then for the currency i"m going to makethis in u.s. dollars. so i'm going to click
on u.s. dollars right there. allowed countries.all countries that sounds good. and then i'm just going to come to the bottom here andclick on save changes to save the changes. okay the settings have been saved. so nowlet's take a look at the site to look at that particular product. so i'm going to go upto the site title and i'm going to click on visit site to visit the site and see whatthe product looks like. okay so we see it's showing up in the recent products section.it's not yet in the featured products section, we'll do that in one of the next steps. and now when i click on this you can see itsi on sale from $40 to $30 so the pounds have been changed to dollars. so once again justclicking on it to go to the product page,
we see again here now it is in dollars whichis exactly what we want. okay so lets add some more products. and thenext product will be not a simple product but a variable product because i want to adda t-shirt that has more than one color and many sizes. so let's add a product with variations inthe next step. so to do that i'm going to add a new productby going up to the top toolbar, hovering over +new and clicking on product. then as we didbefore i'm going to give this new product a product name. this is going to be a t-shirtthat says just surf. so i'll call it just surf and it's going to be a women's slim fitt-shirt so i'll just add that in.
okay so we have the title here, women's slimfit t-shirt here, just surf. and then as we did before i'm just going to add some textright here so i'll just paste in some info that i just copied. and as we did before iwant to bold the title and the type of shirt it is so i'll highlight it and click on theb here to bold this info. so now we have the title and the description.the next step is we want to scroll down and let's see, we want to give this a productcategory on the right hand side. so here we already have women's noted, so i'll just clickon this box so select it, to put it in the women's category. and for tags, i'll just call it surf sinceit's a surf shirt and i'll click on add. so
once we have out product title, description,and category selected and some of our tags added, and then in the product data sectiononce again, this time instead of having a simple product i actually want to create avariable product. so i just click in this box here and you see there are a number ofproduct types you can choose, and this time i'm going to choose the variable product byclick on variable product. so here we are in the general tab, and wejust have this sky here. and now we can click on inventory. and once again we can selectany of this. i'm going to leave it all as the default version so i'm not going to touchinventory but these are some options that you can select if you'd like to do so.
for shipping i"m going to click on shipping.and once again we can also specify shipping right here. i'm not going to do that rightnow. i'm just going to leave it as no shipping class. we'll come back to shipping in justa few moments when we have it together when we put together some products. so i'm going to leave shipping as it is. nextwe have linked products. so i'm going to click on linked products. once again you can cross-sellor up-sell across different products. i'm going to leave these as they are. the mainone that i want to call attention to though are the attributes though. as noted we just created a variable productby selecting that here as the product type.
so step two of creating a variable productis to create some attributes. so i'm going to click on this field here to start addingsome attributes. so we want to add different sizes and different colors for this particulart-shirt. so i clicked on this button here that saysattributes. and now i'm going to click on this button here that says add to add somenew attributes. so once i click on add now we see that there's a name so as we did beforei'm going to give this different colors by putting in color. and then notice here inthe values field it says enter some text or some attributes by pipe separating values.so i want to add some different colors here so the first one is going to be navy. andthe pipe they're referring to in that description
in terms of what to do here, is a line thatlooks like an l and an i, and it's located right above your return button on your keyboard.so it's not a very commonly used symbol, but it looks like an l or an i and if you holddown your shift key and then you click on the button above your return or enter keyon the right side of your keyboard you'll find it. it's a line that looks like an lor an i. so that is called a pipe symbol and i"m justgoing to add that there to separate the different attribute values that i want to include. so i have navy. this is also going to be offeredin black, as well as in white. and let's see we'll add one more color we'll put this inyellow as well. okay, so we have four different
colors here. actually, just to keep it simplei'll jet add it with three colors. okay so we have three different values here.now we see that here is a button here to make this particular product attribute visibleon the product page. so i do want to do that so i'm going to check this box. and also notice,now that we have this selected as a variable product we have a new box here that we cancheck called used for variations. so this is an important box to check whenyou are setting up variations on a product. so i'm going to click on this box to add thedifferent variations. and now we have this part of the attributes set up. so in addition to colors i also want to addsome different sizes. so to do that i'm going
to click on add to add some more attributesto this particular product. then just as we did with colors i'm going to give this particularattribute a name. i'm going to call it the size. then once again we need to enter separatetext and we need to separate the different values by this pipe symbol. so i'm going tocreate different sizes, so i'll create small and then i'll add the pipe symbol and i'llmake it medium as another value, large and extra-large. okay then we need to click onthese two checkboxes. one to make it visible on the product page, and two we want to makethis available for our variations. so we want to click on used for variations. and thenat the bottom here you want to want to click on save attributes to save the attributes.once the attributes have been saved, the next
step and final step for setting up the variableproduct is you need to click on this link here that says variations. so i'm going toclick on variations. and now you'll see there's a button here that says add variation. soi'm going to click on add variation right here. and now we'll have this drop down listof different variations we can add. so we need to do this for each of the differentcolors and each of the different sizes. so for example i'm going to click on any colorand i'm going to select navy. and i'm going to specify what sizes navy is available in.so i'm going to make it available in small. i'm going to give it a price of $40. i'm notgoing to give it a sale this time. i'm just going to make it one regular price. and theni'm just going to scroll down and i'm just
going to keep adding the different variationsonce again. so i'll add navy here, add it in medium andgive it a price again of $40. then i'll click on this button again to add a variation. andthen i'm going to scroll down and i'm going to select navy once again and click on largethis time. and also give it a price, a regular price of $40.then i will also once again click on add variation. and you can see what we're doing here step-bystep. i'm just adding all the different variations that this one color comes in. so it will alsocome in extra large and once again i will give it a price of forty dollars, add my variationand so forth. so i'm just going down the list here and adding all the different sizes andcolors that this particular product comes
in. so make that forty. so for this one tosave time i'm not going to add every single size for black. but i will just give it onesize. so black for this instance will come in small and i'll also add a variation. i'llalso make it available in medium. so let's see. i'm going to click on black, give ita size of medium. and i'm not going to add the other sizes just to save some time. butyou can see that if i wanted to i would just add large and extra large as well. so we haveone more color so i'm going to click on add variations. and this time i'll add the whitecolor do i'll make it white. any size, i'll also make this small. add the variation. thenonce again, white. any size, i'll make it in a medium. and then again just in the essenceof time i'm not going to add these other two
but if i wanted to add white i would go throughthe same process of clicking on add variation. and i would add them in white and then i wouldadd them in large and extra large. so i'm pretty much good on all my variationsso the variations are pretty much set and ready to go, so now just scrolling up thelast step we need to do as we did before is we need to set the featured image. so i'mgoing to click on this button to set the featured image, but actually before i do that to saveeverything i've created on my product variations i'm going to click on save draft to save mychanges so far. okay so the draft version of this particular product has been saved.now i'm just going to continue by setting the featured image by clicking on set featuredimage link. and then i'm going to upload the
files by clicking on upload files, and theni'll click on select files to select my file. and the one i'm looking on here is calledjust surf so i'll highlight it and click on open. and here is the image. so as we didbefore it's always a good idea to give your particular product a title and an alternatetext. so i"m going to add that in here, women's slim fit t-shirt. and i'll just copy thatand add it as an alternate text, and then you want to click on this button here to setthe featured image. once the featured image has been set we justneed to go up to the top to publish this product. okay so once the product has been publishedyou can view it by clicking on the view product link. and here we see at the top we have theproduct image, the thumbnail of this particular
product, we have the title, just surf, women'sslim fit t-shirt. we might want to remove this pipe here i'll probably do that. we seethat here it's forty dollars. there's no product description, we did not add that. but we seewe can choose the different colors that this comes in, whether by navy or black. we cansee medium right here. so it looks like we are missing the white color, so i'm not surewhat happened with that, let's take a look at that. for some reason the white color isnot being displayed, so let's go back and it looks like we have the product descriptionwhich is great but we also need to add in the short description right here as well.so i"m going to click on edit to edit this product. and then i'm just going to grab thedescription here by highlighting and copying
it. and i'm going to scroll down here andthen where it says product short description this is where i'm going to paste in the informationright here in the short description. then i'm going to come back up to the product variationsand attributes and i'm going to check this to see what's going on with the white color.so i clicked on attributes and then i'm going to click on color. and it looks like we dohave color listed here as an attribute, so let's take a look at the variations. i'm goingto click on variations. and then i'm going to scroll down and it says, it looks likei can remove this one. and it looks like we do have white in small and medium, but forsome reason these are not being displayed. so let me click to toggle this and let's see.oh. they're not being displayed because we
did not set a price, so we need to set a priceof course. so let me add the forty dollars here for the white in small, and then i needto do the same thing for the white in medium. so i had forgotten to add the price whichis why it wasn't being displayed. but i'm kind of glad for the sake of the video thatit did not display because now you can see how you can troubleshoot these different issues.so now we have the price there and now we have the product excerpt so now i can go aheadand update this product, and now let's take a look at it by click on view product. andnow we see we have the title, the price of the product, a description, a short descriptionat least is here right now, we have the product thumbnail image which when i click on it itopens up into a really nice lightbox image
display, so we can see a larger image of theproduct with the title. so that's pretty cool. and then when we scroll down now when we clickon color options now we can see that white is visible and now white can be selected.so we have our different colors and we have our different sizes.so any customer that comes can choose any color or size that they want.so we see once again this is only in small. and it looks like the medium is not beingdisplayed because we need to set the price on that as well. but we saw in the previousexample how you can troubleshoot that and how you can fix that. so we see when you clickon navy we see it is available in all the different sizes except for small which onceagain, the reason it is not showing up is
because the price was not set.so we go up to product and we set the price then the small will be displaying as well.i just went over this example so i'm not going to do that again. you can review the previousstep to see how to set the price, and when you set the price then all of the differentversion will pop up. okay so when we scroll down we have the product description, andwhen we click on additional information here is the additional info right here. and thenwhen you want to see reviews we can click on this. so we don't have any reviews yetbut anyone who comes to this particular product page can submit a review by clicking on thislink. and also we can also see that a new section is popping up which is related productsright here. so let's continue doing a few
more of these and then we'll move on to thenext part which is shipping. so i'm going to start adding some more productsso we can start filling out the homepage. so going up to the top, actually let's checkout what the homage looks like, so i'm going to click on home to go to the home page. andhere we see we have our two different images popping up. so i'm going to continue addingsome more products to continue filling out this section. and then once those productsare filled out then we'll add them to the featured slider right here. so i'm going todo just a few more of these by going up to +new and clicking on product. and then aswe did before i'm going to add the product name right here. now i'm going to add a sweatshirtand i'm also going to show yo uhow to add
a product gallery for a specific product.so here just looking at our finished site over here right now we see here is what weare going to create right now. i'm going to create an image as well as a number of imagesassociated with it as well. so let's continue on our add new product page. so i'm goingto add this sweatshirt. and i'm going to pop in the text right here, the description. thisis a women's wide neck sweatshirt so i'll just highlight that and bold it. i'll clickon womens to put it in the womens category, and then i'll call it, i;ll just add a tagright there, love, add the tag. then i'm just going to scroll down. this is once again avariable product because we'll have multiple sizes. we'll have one color but multiple sizes.so i'll click on variable product. then i
want to click on attributes and i'll clickon add. the name for this particular attribute is size. and i want to add my values in here,small with a pipe. and then medium, large and extra large. i want to click on visibleon the attribute page to make this visible on the product page. and i also want to useit for variations. so i want to check these two boxes here. and then i'm going to clickon save attributes to save the attributes. once the attributes have been saved i wantto click on variations down below, and then i want to click on add variation. and hereai want to click on the size and i want to add the price along with the size so thateach of these variations are displayed. so i have a small here, i'm gong to make thissixty dollars. then i'll add another variation
for the medium size. so i'll just scroll downand click on medium. and add another price here for the medium, same price sixty dollars.add a variation. this time i'll add a large, again noting whatthe price is. and then finally the extra large, i'll notethat down below here. so if you want to create different prices for the same product youcan do so in this section. so for the extra large for example, just as a demo i'll makethis $65, instead of $60 just to show you how you can create different prices for thesame product. so once i have my different variations therei'm going to scroll up. let's see we have our description here but i want to add a shortdescription. so i just copied this and then
i want to scroll down to where it says productshort description. and i'll just add that right in here, the shorter description. theni want to scroll up and i want to add the featured image. so i'm going to click on setthe featured image. this is the thumbnail for the product. and then i want to clickon upload to upload my file. then i'll click on select file to select the file. and hereis the image that i want so i'm going to select it. and then i'm going to click on open toopen this. and then once again we want to add a title so i'll call this the faith lovehope sweatshirt. and it's always a good idea to create an alternate text so i'l add that.same thing right there in the title and in the alternate text and then you want to clickon set featured image to set the featured
image.so once the featured image is et the next step is we want to add some images in theproduct gallery. that will give us this display so for example when i click on this, thisis the finished site right here. we see here is an image and now when i clickthere are other different angles of the same image. so that is a really great feature ofthis theme that you can have different images for the same product. so let's go ahead andcontinue creating the product gallery so we can create this kind of image gallery forthis particular product. so to do that right here where it say product gallery you wantot click on add product gallery images to add the images. and then once again i'm goingto click on upload files. and select files.
and i'm going to click on this item, and actuallyall three of these items i'm going to click. so i'm just going to highlight all three ofthem. and i'm going to click on open. and then they'll all be added one by one. thenwhen you click on each one of them here let's see here we go i'll click on that one. andi can once again put in a title and the alternate text. then i'm going to give this one a differenttitle since this one is the back. so i'll call this the same thing but then i'll putback. and i'll give it an alternate text. and finally for the side angle i'll do thesame. so i'll give this one a title as well. and i'm going to specify that this is theside. with the alternate text and then i'm going to click on add to gallery to add thosethree to the gallery. so let's see it doesn't
look like they're all displaying here. solet me click on this one more time. add product gallery images. so let's see wehave this one, this one and this one. and then add to gallery. so it looks like we needto add these one by one so i'm going to click on this one more time. they will display righthere in the product gallery. so you see we have two of the three so far. then i'm goingto click on this one more time and now we have to grab the back image right here, thisone. so i just selected it, you can see it's checked. then i want to click on add to galleryto add that to the gallery. and you can see i want to drag these into the order in whichi want them to be displayed. so i think i want this one to be the second one. and theside one will be last. okay so now that we
have all of that set we want to come up hereand click on publish to publish this product. now the product has been published. we canview it by clicking on view product. and okay it looks great. now there are a couple thingsto point out here. number one, we have our title right here of the product. now alsowhen we click on this, it opens into a really nice light display box. and here we see thereare the different angles that we can see. so we have this one, the front, the frontagain, looks like the back, and the side. so we have the different angles that we cansee of this product. okay the other thing to point out is that you notice that we hadjust created the variations so that the starting price is at $60 so we see now it says from$60. and here we can choose different size
options. so when i choose a small, we seehere it is $60. and same with the medium is $60. but when i choose the extra large thistime it goes up to $65. so that is just an example of how you can create different pricesfor the same product. and how you can add a lightbox display with a product, with agallery of images for your product. okay now when we scroll down you see there are fewmore related products being populated here showing up. we have out description, and thenwhen i click on additional information you can see the additional sizes that this productis offered in. and we have our reviews right here. so that is pretty great. i'm going togo through this process a few more times so that we can add some more items and then we'llmove on to the shipping, the shipping settings.
so to add a new product once again i'm goingto go to the top hover over +new and click on product. and i"m going to go a little bitfaster since we've done this a few times already. so i'm going to add this peace ii tee-shirt,i'm going to add in this will be a peace t for men. so i'm going to highlight the titlehere and click on bold. next i want to add a new product category here, so i'm goingto click on add new product category. this time i'll create a category for guys t-shirtsso i'll just add men there and click on add new product category. then i just want o scrolldown and under product tags, this is a peace shirt so once again i'll add peace and clickon add. so we have our title, our description, our category and our tag selected. next weneed to let's see here just scroll down. here
where it says product data i'm going to clickon variable product once again. so click on variable product. then i need to create someattributes for this product. so i'm going to click on attributes and then i'm goingto click on add to add those attributes. so i want to add some different sizes here soi click on size for the attribute name. the values will be the different sizes all separatedby this pipe symbol. so small, medium, large. yeah small medium large that sounds good.then i want to add these two, these two checkboxes we want to check because i want these attributesto be visible on the product page. and i also want them to be used for variations. so i'mgoing to click on both of those right here and then i'm going to click on save attributesto save attributes.
and once the attributes are saved the thirdstep here for setting up the variation is to click on variations, and then we want toclick on this button here to add the variation. then we want to select the size that we wantto create a variation for. so i'll click on any size here and select small and then weneed to give this a price. so i'll make this $40. and then i'll scroll down and do thesame thing for the medium size and give it a price. and then i'll do the same thing forthe large size here by once again clicking on large and giving a price and i'll makeit $40. so we have all of our different variations set up. so then i'm just going to grab thedescription as we did before. this is the large description here or the longer description.i want to add an excerpt or a shorter description
down below here where it says product shortdescriptions. so i'll just paste that in and make it a little bit shorter. then i'm justgoing to scroll up here and it looks like the last thing we need to do here is add afeatured image. so i'm just going to click on set the featured image. and here on theset featured image screen i need to click on upload files to upload my files. so i'mgoing to click on upload files and then i'm going to click on select files. and then ineed to find the image which is this one right here. so i'll just highlight it and clickon open. and now i just need to add the title and the alternate text. so i"m going to keepit as peace t-shirt right here and then for the alternate text i'll just paste that in.then i want to click on set featured image
to set the featured image. and once the featuredimage is se the last step is to come up to the top and click on publish to publish thisproduct. okay so the product was published to viewit we just click on view product to view the product. and here we have our product so weare good to go. so from here just keep doing the same steps over and over to add your productsto your product catalog on your website and i'l see you on the other side so we can takecare of the shipping. woothemes wootique. so here we are back on the home page and aswe can see we've added all the different products we have for our product catalog. we've addedall the different products to the e-commerce website. so we're good to go on that. howeverbefore we jump to shipping we need to take
care of a few more things. so first of alli want to point out when we go to the product page i want to point out the difference betweenthese two items and call attention to one important thing that needs to be visible onthe product page. so to show you that i'm going to click on this product right here,this peace t-shirt. and we see here that the product page is set up, we have the title,the price, the thumbnail which when i click on it it opens up to a nice lightbox displayright there. then we have the description, we have the size and we have the additionalinformation we see here by clicking on that and then down below we have the related products.so it looks good, the only catch that i want to pint out is that here we notice this isa variable product so it has several different
sizes on it, it has a medium size, and a largesize attached to this product, however, we notice there's no call to actio listed righthere. so it's really important when you have an e-commerce site to make sure that you haveyour add to cart button visible right away. right now the only way to get to the add tocart button is someone would actually have to click on shoos an option, then they wouldhave to choose the option, and once they chose it then the add to cart button would pop up.but it's much better with e-commerce sites to make sure that this is always visible becauseit's importna tot have a call to action to let people know that they can in one clickadd the product to the cart. so comparing this example let's look at theother one i have set up here. so i'm going
to go back to the home page just to show youthe comparison. and here we see we have a second item here, this keep calm and volunteert-shirt. so i'm going to click on this one. and here we see right away we have an addto cart button and the default size is set to small. so we can change the size by clickingon medium or clicking on large. but at the same time the add to cart button is alwaysvisible. so we need to make sure on every product pagethat the add to cart button is always visible right from the get go when we arrive on theproduct page. so i'm going to go back to this time right there, to this brown mens' t-shirt,i'm gong to click on that. and i want to show you how to make sure the add to cart buttonis always being displayed. so let's go ahead
and edit the produce t by going up to thetop and clicking on edit product. and then you want to go down to the product data onceagain, here we are on the product data screen. and to makes sure that the add to cart buttonis visible we need to click on variations. so i'm going to click on variations righthere. and here you'll note there's a setting here that says default selection. now noteright now it says that there's no default size. for that reason that's why we do notsee the add to cart button. so whenever you're setting up your product info you want to makesure that you set up a default size or a default variation for whatever your product is andwhatever your variations are. so i'm just going to click on small to make that the defaultvariation size. and then i'm going to come
up to the top here to click on update to updatethe settings of the product page. so now let's take a look at what the product page lookslike. i'm going to click on view product, and here we see the small size is the defaultversion selected right here. this is the default size that automatically pops up on the productpage. and as a result we now have an add to cart button here on the product page.so just be sure whenever you're setting up a new product page that you always set a defaultvariation if you have a product with many different variations and attributes. whenyou do have a default variation set up you will see an add to cart button when you arriveon the product page. so now that we have an add to cart buttonon the product page let's go to the homepage
and take care of the featured product slider.so when i go to the home page you see that it looks good so far on the recent productssection however we're missing all of the featured products in the featured products slider here.so let's go ahead and set up each of the products so that the products we want to be displayedin the featured products slider will be displayed right here. so to do that i'm going to goup to the dashboard, up to the site title. and underneath that i'm going to click ondashboard. then once we're on the dashboard then i'm going to click on products to goto the products page. here we see all the different products we've added to our e-commercewebsite. so to add these to the featured slider we need to do a quick edit here so i'm goingto click on quick edit. and then there's a
check box here that says featured. so i wantto feature this brown men's peace t-shirt in the featured products slider so i'm goingto click on this righ there and then i'm going to click update. and then i'm going toy addthis keep calm and volunteer one as well, so i'll do a quick edit. and once again i'mgoing to click on featured. and then right on the right hand side i'm going to clickon update. and we want to have eight total items featured in the featured product sliderso i'm just going to add them one by one. so here i'm just going to click on that, clickon featured, click on update. that's three. we need about five more. so i'll do this one,click on quick edit, click on featured, then click update. let's see. we'll add this surfsweatshirt. so quick update, click on featured
and once again click on update. i think that'sfive so far. i'll click on this one as well i'm going to click on quick edit, click onthis link here that says quick edit, i'm going to check the box that says featured, and thenclick on update. and then the faith hope love sweatshirt i'll add that to my featured slideras well. so i'll click on quick edit, i think we're getting the hang of this. click on featured,click on update. and just surf we'll do that one too, quick edit, click on featured, clickon update. and i think i have one more to go so i think i'll add the brazil shirt. quickedit, click on featured and then i'll click on update t update that setting as well.now when we go back up to the site by going up to the site title and clicking on visitsite, now we see that all of these are listed
in the featured product slider. now note thatthey're a little bit blurry. so this is not good. we don't want these items to be blurrylike this. so i don't know if you can see it but right now i'm looking at these itemshere in the slider are sort of blurry, and these are really sharp. so let's take careo faking sure that these items are not blurry. so to solve the problem of blurry images showingup in the featured product slider of woothemes wootique, we need to take three steps. thefirst step is we need to go to the dashboard here. i'm going to click on dashboard. andwe need to add a plugin called regenerate thumbnails. so i'm going to come down to theleft hand sidebar click on plugins right here, and then i'm going to add a new plugin byclicking on add new at the top and then i'm
going to look for a plugin called regeneratethumbnails. then i'm going to click on search to search for this plugin and here we seeit's the first one that pops up. so uyou can click on details to find out more about thisplugin. and we see here it was last updated 132 days ago, it requires wordpress version2.8 or higher and it's compatible up to wordpress version 3.5.1 which is the version of wordpressthat we're using right now. and it's been downloaded over 600,000 times. we also seethat it has pretty much a five star rating out of five stars. so this is a really greatplugin. i'm gong to install it by clicking on install now. okay so the plugin was successfullyinstalled. so we want to activate the plugin by clicking on activate plugin. okay so we'vetaken care of step one which is to activate
the regenerate thumbnails plugin. step twois we need to go to woocommerce on the left hand side here so i'm going to hover overwoocommerce, then i'm going to click on settings. here are the woocommerce settings screen wesee there are all kinds of different tabs with different configurations available. theone we want now to solve the problem of blurry images on the homepage featured products slideris the catalog tab. so we need to click on catalog right here. and here on the catalogoptions screen we need to scroll down to the bottom and here where it says product thumbnailswe want to change this from 90 to 550. so you can try different sizes here if you wantto try different width sizes and height sizes. i've already tested this and 550 seems towork pretty good. so i"m going to add 550
to the width and the height and then i'm goingto click on save changes to save the new image option sizes.okay so our settings have been saved the next step is we want to go to our media page righthere so i'm going to click on media. we need to go to our media library. and we need toregenerate all the images of the featured images on the homepage. so i'm going to keepit simple by regenerating the thumbnails for everything by clicking on this box here. thenat the top where it says bulk options i'm going to click on bulk actions and then i'mgoing to select this option here to regenerate thumbnails. and then i'm going to click onapply to apply the new thumbnail image sizes. okay so all the thumbnails of these imageshave been regenerated. so now let's take a
look at the homepage and see what they looklike in the featured image slider. okay much better. so now we see all these images nowlook really crystal clear just like they do down below.so that is how you want to adjust the featured images on the product slider in the eventthey turn out blurry when you add them to the slider. so now you know how to changethem and fix them so they're no longer blurry. so that's awesome. so the next thing is wesee here at the top we have quite a few different items here in the menu. one of the next thingswe want to tdo is we probably want to add an about page about the business as well asa contact page so anyone can contact you directly through your website.so let's add two pages to the website right
now - both an about page about the companyand a contact page. so i'm going to go to the top here, in thetop left hand side, i'm going to hover over the site title, and once again i'll clickon dashboard. and this time i want to create a new page so this time i'm going to clickon pages here in the sidebar to create a new page. and then i'm going to click on eitheradd new right here to add a new page or you can click on add new right here at the top.so i'm going to click on add new at the top to add a new page. and then on the add newpage screen i want to give the new page a title. so this is going to be the about pageso i'll just add about right here. and then i want to add some content here about theabout page. so i'll just paste in some content
i just copied from another location. so herewe have the title and the description. i also want to add an image right next to the text.so to add an image on the about page i'm going to pale the cursor right where i want it andthen i'm going to click on add media to add an image. now i'm gong to upload a file byclicking on upload file. i'm going to select the file. and then i'm going to find the imagethat i want. so i''m going to choose this image here and then i'm going to click onopen to open this image. and here we see this is the image that will be displayed rightnext to the text on the about page. so you can give it a title if you'd like.i'll just call it the name of my website. and then we'll just scroll down here and thisis where you have a choice about what kind
of alignment you want this to be. so i wantthis to be left aligned. so i'm going to click on left to align this to the left of the text.i want to link it to nothing so i'll just click on none right here where it says linkto i just clicked on none. and then you have a choice of thumbnail sizes, a thumbnail,a medium size, or a large full size version. so i'll use the medium size here. so i'llclick on medium. and the last step is you want to click on insert into page to insertthe image into the page. okay great. so now that looks good so farlet's just scroll down a little bit. okay so it looks pretty good so far. so this willbe a parent page so i'll just leave the page attributes set as they are. and let's see.we have different template choices here so
when i click on this default template optionright here, i'm going to click on that. you'll see you get a drop down box of all the differenttemplates that are included with the wootique theme and this theme comes with a lot of differenttemplates which is awesome. so the default theme includes a sidebar. and this is theabout page so i do not want a sidebar showing up on this page. so i'm going to click onfull-width to make this a full-width page. so i'm going to click on full-width rightthere. and then i'm going to click on publish to publish this page. okay to view the pagei'm going to click on view page to view the page right here at the top. and here we seethat i have my page right here. so i'm missing a call to action so i think what i want todo here is i want to add a call to action
here that says contact me.so first i'm going to create a contact page and then i'll come back and i'll create thatcall to action. so let's create one more page here. i'm going to go to the dashboard, clickon dashboard right here in the top left hand corner. and then i'm going to add a new page.you can just directly add a new page by hovering over pages and clicking on add new. and nowi'm going to call this contact. this is going to be the contact page so anyone can contactme directly via the website. so i'm going to leave this blank right here. actually i'llsay, i'll create a short sentence here. okay for more info please contact us via the formbelow. and here on the page attributes section once again i'm going to click on template.and you see that there's already a contact
form set up which is great.so i'm just going to click on contact form. and then i'm going to click on publish topublish this page. now when we view the page by clicking on view page, we'll see we havea really nice contact page form set up. and someone can just add their name, create anemail, and add a message. and then they can click on submit to send you a message directlyvia your website. so i'm just going to come up to the top here. now notice there's a lotof menu items going on at the top here. we're going to take care of this and clean thisup in just a moment. i want to go back to the about page here. i'm going to click onabout. and i want to add a call to action down here that says contact me or contactus. so to do that i'm going to click on edit
page to edit the about page. and then at thebottom here i just want to place the cursor here where i want to add the call to action.now there's a really cool shortcode for the button provided by this theme. so i'm justgoing to place the cursor where i want to the button to be. and i'm going to come uphere where it says woo, and i'm going to insert a shortcode. and i'm going to click on that.and you'll notice there are all these short codes listed right here. so these are notthe short codes that i want. let's see i'm looking for a button which is not listed here.so instead i'm going to create my own button. so there's another woo icon here to insertwoothemes shortcode. so it looks like we have the wootique, the theme-specific, and thenwe have the woo at large shortcode. so the
one we want is insert woothemes shortcode.so i'm going to click on this blue icon. and then you see there should be here a buttonlink. so right here at the top it says button. so i'm going to click on button to createa shortcode for that. and then you'll notice you have all these customizations and optionsyou can fill out to create your button. so the title of the button is going to be contactme. and then i'm going to create a link. now the link is my contact page. so it's http://then the name of the website is my domain name, and then the link is just forward slash,contact. so if you created a different page title, and if your page title was not simplycontact, then you may have a different link here and you want to add whatever the linkis to your contact page, and you want to add
that right here. so okay this looks good sofar. you can add some different colors if you'd like. i think i'll just choose a bluecolor here. so i'm going to drag this bar down.let's see. it's not working very well. let's see if i go like this. hmm. okay there wego. okay perfect. so i'm going to grab this blue color and then i'll just copy it to makeit easier. and then i'll add the border here and i'll add the same thing and i'll justpop this code down there and paste it right there so it matches. and it looks like, okayi'm good to go on that. so i"m just going to scroll up to the top. and then there'sa button up here that says insert so i'm just going to click on insert to insert this buttonby clicking on insert. okay so now we see
that wordpress, the woothemes has createdthis shortcode, this code here, which adds a really cool button to your homepage. soi"m just going to save everything by clicking on update. and then let's look and see whatthis now looks like. okay so the page has been updated. to view the page i'm going toclick on view page. and now we see down below we have this button here that says contactme, and when i click on it it goes directly to the contact page right here. okay so noticethat the door was a little bit off on this. so if you want you can match the color tothe sidebar over here. so i'm going to do that now. i'm going to change the color ofthis button by going up to the edit page and clicking on edit page here in the toolbar.and then i'm going to scroll down to where
the code is. now the code is located in twolocations. right here it says bg_color for background color, and then we also have aborder. so i happen to know what the code is, so i'm going to just paste that in, icopied it from another location. so i''m just going to paste it in here. and when you pasteit in you want to make sure that you keep the two quotation marks before and after thecode intact. so it should say quotation mark and then you have your code right here. andi'll give you this code as well. if you're using the blue wootique theme which we areseeing so far, then this is the color you would need to add in between the two quotations.so i'll make a note of this so that you can use this code also. but the main point isyou want to make sure that you use this code
in between the two quotation marks right here.so it's "#4c677e". and you want to add it for the border as well. so i'm going to goingto paste the code in between the two quotation marks right here. and then i'm going to clickon update to update this page. now when i click on view page, now we see that the buttonis the same color as the menu bar right here which is great. so now it looks a lot better,it definitely looks more consistent and it flows a lot better. so that's how you adda contact button to your about page. so the next step is you most likely will want tohave a blog on your website. having a blog is a great way to add fresh content to yourwebsite, it's a great way to keep in touch with anyone who's coming to your site becausethey can read new updates that you may be
posting on your website. and another goodreason to have a blog is because search engines love fresh content. so having a blog is definitelyhelpful in terms of helping to rank in search engines like google and other search engines.so let's add a blog to the site. to do that i'm going to go up here to +new in the toolbarand i'm going to click on page to add a new page. and to add a blog is really simple allwe need to do is create a title with blog right here. so you want to add blog righthere. and then right here on the right hand side in the page attributes section undertemplate you want to click on this and find the template that says blog. so this themecomes with a blog template which makes it really easy to add a blog, you just have toclick on blog. and then all you have to do,
the last step is you just want to click onpublish to publish this page. and now when we go to view the page, now we see here hereis our blog post. so we haven't' added any blog posts yet to the site. so this is justthe default post that comes with your wordpress installation but as you start adding blogposts to your website they'll start showing up down below on this page. so we see we'reon the blog page right here. and then when you click on the post, i'm going to clickon it right now. then you go to the actual single post page. so here you'll see you havethe title, then you'll have some data here like when the blog was published, who publishedit and what category it's in, and then you'll have the actual post. and then you'll havean author box description here. and then you
can have your comments right below. so thisis what the blog post page will look like for single posts. so when you have posts theywill show up on your blog. so now we se we have all these different menuitems showing up here. let's take care of this next. we want to clean this up so thatit's a lot more simplified up here. so let's change the menu. so to do that we're goingto go back to the site title, hover over the site title and then you'll notice there'san item here that says menus. so i'm going to click on menus. and here we are on themenus screen. so to create a menu, first we need to come up to the top here and we needto enter a menu name. so i'm just going to call this menu. and then you want to clickon this blue button here that says create
menu to create the menu. once you've createdthe menu then you'll notice on the led thane side it says theme locations. and then you'llsee that it says your theme support s two menus, so select which menu appears in eachlocation. so we have a primary menu and a top menu.so i'm just going to use the primary menu right here so i'm just going to click in thisbox. i'm going to select the menu i just created, menu. and then i'm going to click on saveto save this theme location for the menu. so once we have the menu and the menu locationselected and saved, then we want to figure out which items we want to have displayedin the menu. so i would like to have, looking at the pages down below, i'm going to clickon view all to view all of my pages. and let's
see, i'd like to have the home page on themenu, the about page and the blog, and then i'd like to have the shop page as well. soi'm going to select all of those and then i'm going to click on add to menu to add theseto the menu. then you can go ahead and you can rearrange how you would like this to bedisplayed. so for example, i would like the shop page to show up at the beginning of themenu, so i'll just drag it right up there. and then i want to come over to the righthand side and i want to click on save menu to save the menu. now we need to add somedifferent items beneath shop. i'd like to add some different categories to help peoplemore easily find the products they may be looking for. so if you recall i have somewomens t-shirts, some kids t-shirts and some
mens t-shirts. so i want that to show up underneaththe shop page. so we don't see those now, the product categories, we just see the overallwebsite categories right here. so what we want to do if you don't see product categorieson the left hand side, then what you need to do is go up to the top, click on this screenoptions button right here, and then you'll see this will display all the different thingsyou can add to your menu, and one of those things includes product categories. so i'mgoing to click on product categories right here. and then i'm going to click on screenoptions again to collapse this section. then when we scroll down you'll see that here arethe product categories that we created in one of the previous steps. so i want to includewomens, mens, and kids product categories
to my menu. so i'm just going to click onthem to select them, then i'm going to click on add to menu. now when i scroll up we cansee now these are all added to my menu. so just to display them in a little more organizedway i'm going to drag women's right underneath shop. and i'm going to do the same thing forthe kids product category and the mens product category. okay i think that's good. so i thinkwhat i'm going to do is i'm going to put the kids first. and then to display this reallynicely i'm just going to drag this over to the right hand side. just like this. i'm goingto move it over just a little bit. i'm going to drag it to the right hand side. so nowthese three categories will fall underneath the shop category, the shop page. so we'llhave the home page as a menu item, the shop
page as a parent menu item, and underneaththe shop menu item there will be these three different sub-menu items. so it's lookinggood so far the one page i'm missing is the contact page it looks like. so let's see,i'm going to find that and click on contact right here, and click on add to menu, andnow i have my contact page added right there as well. so the menu looks good, this is justhow i'd like it to be. now i'm going to click on save menu to save my menu. okay the menuhas been updated. so now let's go and check out the site. so i'm going to the top lefthand toolbar, hover over the site name, and click on visit site. and now we see that themenu looks a lot better. so we have the home page in the menu bar, the shop page, and wheni hover over shop we can see here the different
product categories. so now it's a lot easierfor anyone coming to your site to more easily view your products in your product catalog.so for example i'll click on kids right now. and now we'll see here are the three resultsfor the kids page. i'll do the same thing for womens. we have a lot more womens itemshere, so here are all the womens t-shirts. and finally, when i click on men, here wehave the two mens t-shirts right here. next we have the about page which we saw earlierwith the contact me button. and then we have our blog and then we have the contact page.so we're looking good so far. next let's take a look at the sidebar over here and figureout what content shows up in the sidebar. so to configure the content in the sidebarwe need to go back to the left hand side to
the dashboard so i'm going to click on dashboardright here. and then we want to go down to where it says appearance and we want to clickon appearance. once we click on appearance you'll see there's another item that popsup called widgets. and we want to click on widgets. so here we are on the widgets screenand this is all the content that shows up in the sidebar. we can see here on the rightwe have our normal full width sidebar, the primary sidebar, and then there's four differentfooter areas where we can add content, custom content in the footer as well. so the mainthing we want to do right now is we want to change the content showing up here in theprimary sidebar. so by default when you install wordpress it will come installed with recentposts, recent comments, archives, categories,
and meta content. so what i want to do firstis i want to delete all of this to remove it. so i'm just going to click on this carrothere and click on delete. you can also just take this bar here and drag it over to deactivateit, and then release. so maybe that's a faster way. so i'll just drag it over and releasethese to remove them. okay so now we have an empty sidebar righthere. now we need to figure out what we want to add. so when you scroll down you'll seethere are a lot of woo widgets that are specific to this theme that you can add. you can checkeach one of the out if you'd like. there's a woo twitter stream, there's a subscribe/connectwidget here. you can add your flickr photos, or perhaps a search bar right here, or tabsor bestsellers. there's all kinds of custom
widgets and custom content that you can addto your sidebar. so feel free to check these out. also note here are all the woocommercewidgets. so these are specific to your woocommerce theme. so the one that i want to find is iwant to find the woocommerce product search so here we see here's the woocommerce productsearch. so i want this one this will make it easy for anyone coming to tour site toeasily find your products which is always a good thing. so i'm just going to take thisand i"m going to drag it to the primary widget area. i'm just going to drag it up here andrelease it. and here you can see you can add a title here. and i'll just put search andthen you want to click save. okay and the next step is i'm going to close it by clickingon this carrot. now i want to add more widgets
in this area as well so i'm going to scrolldown once again. i want to find the top products widget. so let's see where that is. let'ssee we have recent products, top rated products, so this one i want to drag up as well. soit's the woocommerce top rated products. so i'm going to drag it up to the top here. andonce again i'm just going to release it and you can add a title if you'd like. so i'mgoing to just call it top products, top rated products. and actually i'll just display three,so i'll change the number over there and click on save, and close that once again. and thenthe one item that's on sale i want to call attention to that so let's find the itemson sale widget. let's see. where is that located. okay so here it is. the woocommerce on-salewidget, display a list of your on sale products
on your site. so i'll just grab this widgetand drag it up to the top once again. and i'll release it underneath the top rated productsand i'll say on sale now. okay and once again i'll just display three items here and i'llclick save. and the last item i would like to displayare my social network icons so anyone coming to the site can easily connect with me onthe social web. so we have not yet added that plugin so i'm going to add it by going tothe left hand side. i'm going to click on plugins here and then at the top i'm goingto click on add new to add a new plugin. so the plugin i really love is the simple socialicons plugin and the main reason i love this plugin is because you can customize the waythe icons look on your site to match the colors
of your site with the colors of the icons.so we'll see what that looks like in just a moment. so i'm just going to add this simplesocial icons here in the search field and i'm going to click on search to search forthis plugin. here it is at the top you can click on moredetails to learn more about this plugin. we can see it was last updated fifteen days agoand it's compatible up to wordpress 3.5.1 which is the version of wordpress we're usingright now. it's been downloaded over 60,000 times and it has pretty much a five star ratingwhich is awesome. so i"m going to install this by clicking on install now. okay so theplugin was successfully installed. so now i'm going to click on activate plugin to activatethe plugin. okay so now that the plugin has
been activated we want to go back to our widgetssection so i'm going to hover over appearance and click on widgets. and now when i scrolldown we see there's a simple social icons widget that we can add to our primary sidebar.so i'm going to drag this widget over to the bottom of the sidebar over here. and herei"m just going to give it a title, connect on the web. and then you can notice that youcan change the icon size if you'd like. you can also change the radius and the alignment.i'm going to leave this all, the defaults are always working well for me so i'll justleave them as they are. but the one thing i do want to call attention to are the backgroundcolor and the background hover color. so as you may recall when we added the contactbutton on the contact page we added that code,
that color code of the blue that matched thecolor on the website. so i want to use the same color here for the color of my socialicons. so i'm just going to paste that. i've already copied it so i'm going to paste thatright here. and then i'm going to do the same thing for the background hover color. i'mjust going to paste that code right in here that color code. and then what you want todo, you want to just come down to any of the different social icons you want to displayon your site and you want to add the url for your social network in these fields righthere. so the ones i want to add right now let's see. i'll add pinterest, i'll add twitter,and i'll just copy the pinterest one and add the twitter url, and then i'll also add ayoutube one. okay. so you may want to add
some additional social network ones as well.feel free to to do that and when you're ready go ahead and click on save to save the settingsof this particular widget. and then i'm going to click on close and then when we go backto visit the site and check out the sidebar let's see what that looks like. so i'm goingto click on visit site and then i'm going to click on blog to check out he blog indexpage and now we see on the right hand side we have our search bar and our top rated productsand it looks like i spelled that wrong so i have to fix that. then we have our on salenow time and then we have our connect on the web social icons so anyone can connect withyou on the social web either via facebook, twitter, youtube or some other social network.okay so that looks like we're good to go except
for having to respell this particular itemwhich i'll do in a little bit. so here we are on the homepage and we see the websiteis looking good so far we see we have pretty much all of the homepage filled out. we stillhave a few things to do behind the scenes though to complete the commerce website.so the first thing we need to do is we need to take a look at shipping. so to do thatlet's go back to the dashboard by hovering over the site title here and clicking on dashboard.and two things we need to add to the shipping are shipping classes. so let's take care ofshipping classes by going to products here. so you're going to click on products or hoverover products here and then you see there's a drop down menu here and one of the secondto last items is shipping classes. so i"m
going to click on chipping classes right hereand then we can create our new shipping class. so as it notes at the top shipping classescan be used to group products of a similar type and these shipping classes can then beused by certain shipping methods to provide different rates to different products. soi want to create two different shipping classes. i want to create a free shipping class anda standard shipping class. so i'm just going to add free here for the name for the freeshipping class. and then at the bottom here i'm going to click on this button here that'ssays add new shipping class to add the shipping class. and now we see right here we have afree shipping class. the other one i want to add is a standard shipping class so onceagain i'm just going to add that to the name
field right here and then click on this buttonto add new shipping class. okay so once the two shipping classes are created we need togo over to woocommerce. im going to hover over woocommerce and i'm going to click onsettings to go to the woocommerce settings screen. here on the woocommerce settings screenyou see there are a number of different tabs at the top and one of them is shipping. soi'm going to click on shipping to go to the shipping options. and here on the shippingoptions page we can see here are all of the different settings that we configure to setthe page how we would like to to be set. so we notice that by default shipping is enabledhere in woothemes. and also we have a shipping calculator that is by default enabled.we'll come back to that in just a moment.
and then you'll see that currently the shippingmethod is currently listed as flat rate. but we see here there's a purple highlighted checkmark here with status and actually the free shipping is enabled so you have many differentshipping methods here that you can choose from either a flat rate or free shipping orinternational delivery local delivery or local pickup.so in general free shipping is of course the best. that's one less ting that a customerhas to worry about so it really helps to incentivize them to buy any kind of product you may haveif you offer free shipping. so wherever possible it's always a good idea to offer free shipping.in this video i'll show you how to create shipping with the flat rate and one of theoptions will be free shipping.
so let me show you how i'm going to do that.so number one i'm just going to come down here and click on save changes. but actuallybefore i click on save changes i want to point out this shipping calculator. because i'mgoing to be offering a flat rate shipping charge we don't really need a shipping calculator.so i'm going to turn this off since the shipping calculator is used to calculate how much shippingis so if i offer a flat rate then everyone will now in advance what the shipping is soi don't need the shipping calculator. so i'm just going to keep the shipping like thatthe default rate is flat rate as we can see here. and then i'm just going to click onsave changes to save the shipping changes. okay so now that the shipping options settingshave been saved the next step is we need to
check out the flat rate settings right here.since we will be using a default shipping method of flat rate. so i'm going to clickon flat rate right here this link and here we are on the flat rate shipping options screen.so the first thing we need to do is enable this by clicking on this here that says enablethis shipping method. and once again you see there are these question marks which whenyou hover on top of them you get a really nice tooltip that tells you what this tooltip does. so we see here the method title which is what the user sees during checkout.so the title flat rate works for me, everyone understands what that is so it's really clearso i'll leave it like that and scroll down. i'm going to leave all the default settingshere i'm not going to change those since those
work for me. but i do want to come down hereto where it says shipping class. so we can see actually let me go back up one second.i did miss one thing. okay so cost per order. when we hover over that it says leave a costper order, leave blank to disable. now because i want to use shipping classes i'm actuallygoing to leave this blank this time. so i'm going to leave the cost per order, i'm goingto leave that blank. so what i want to do i want to come down here and you can see thatwe can add a chipping flat rate to the per order - charge shipping for the entire orderas a whole. or if i click on this there are two other options. you can charge shippingper item or per class. so i'm just going to leave it like that. so i am going to add someshipping classes however. so i'm going to
click on add cost to add a class. and thenyou see that here i have the free shipping class that i created in the previous step.so for this one i'm going to give this a class of zero. so i'm going to type in zero righthere. and then i'm going to add another cost here and this one will be the standard shippingclass. so when i click on free now i have the standard option right here. so for thestandard option i'm going to give this a cost of five dollars by just putting a 5 in thereand now i'm going to click on save changes. okay so the settings have been changed. we'reusing a flat rate for the default shipping payment shipping charge. but you do noticethat i have two chipping classes within the flat rate. one is a free shipping class andthe other is a standard shipping class. so
let's see how this plays out. so the nextstep is i want to go to one of my products. i'm going to click on products here. and nowi'm going to click on this one. i'm going to click on quick edit to edit this particularone. and then on the right you see there's a section here called shipping class and ican select whether i wan this t-shirt to have free shipping or standard shipping. i'm goingto click on standard and then i'm going to click on update to update the shipping onthis t-shirt. the next thing i'm going to do is we can editall of these t-shirts in bulk which is a lot easier to do by clicking on this box herewhich checks all of these different t-shirts. you see that there all selected. and theni'm going to go to the top here where it says
bulk actions and i'm going to click on edit.then i'm going to click on apply to apply this edit to all of them. now when i scrolldown you'll see that here is the shipping class and i can edit all the shipping forall of the products all at once with just one step. so i'm going to create a shippingclass of standard for all of the t-shirts by clicking on standard, that's the $5 shipping.and then i'm going to click on update to update all the products at once. okay so 13 postswere updated. so let's go check out the website and see how this works right now. so i'm goingto click on visit site an then i'm going to click on select options. actually let me findone let's see we'll do this one here. keep calm and volunteer, i'll click on that one.and here we see we have the small selected,
i'm going to add that to the cart. and herewe see i get a message when i click on add to cart which says keep calm and volunteerwas successfully added to your cart. i can click on this button here to view the cartor i can click on this button here to go to the checkout here. so i'm going to view thecart by clicking on view cart. and here we seen the price of $40 is located here in thecart. and when i scull down you'll see the carttotal is $40 sub-total plus a flat rate shipping charge of $5. so the order total is $45. nowit's always fun when you create a video and you find a little issue that pops up whichi'm discovering right now. so we see in addition to the flat rate of $5 we also have a freeshipping option here which a customer could
potentially click on and that would recalculatethe order to be only $40 so clearly i dod not want to have two different shipping pricesshowing up right here. so let's take care of adjusting that right now. so we want tomake sure that just one flat rate is displayed right here. we do not want free shipping anda flat rate to both be displayed. so let's remove the free shipping feature right hereby going back up to the dashboard so i'm going to click on dashboard here. and then i'm goingto go back to woocomerce settings page, so i"m going to hover over woocommerce and clickon settings. and here on the woocommerce settings page i want to once again click on shipping.now here we are on the woocommerce shipping options screen and we can see here that thedefault shipping method is flat rate but we
have two different shipping methods enabled.both the flat rate and the free shipping. so i had forgotten in the previous step todisable the free shipping that's why it's also showing up on the cart page. so let'sturn off free shipping by going back up to free shipping, this link that says free shipping,and here where it says free shipping i'm going to uncheck this box to disable the free shipping.so once i've unchecked this box i'm going to click on this button save changes to savemy changes. okay so now that the shipping options havebeen changed when i click on shipping options one more time we'll see that only one shippingmethod is enabled, it's the flat rate with the two shipping classes. so now let's gocheck out the cart once again. so now i'm
going to go visit the site to visit the site,and now i'm going to click on my item here to check out my shopping cart. and now wesee when i scroll down that it looks a lot better. so we have the cart total with the$40 for the t-shirt and the shipping charge is a flat rate of $5 so the order total is$45. so that's exactly how we want it. so the next thing we need to do is we need toconfigure the checkout page so that we have some kind of way to get paid. so let's dothat now by going back to the dashboard again. and then i'm going to go back to woocommerce.i'm going to hover over woocommerce and click on settings one more time. and over here there'sa tab called payment gateways. so i'm going to click on payment gateways and here we seethere are a number of payment gateways that
you can choose as a way to get paid. so i'mgoing to have paypal right now. you can see there are a number of other options, you havedirect bank transfer, check payment, cash on delivery, credit card or paypal. so i'mjust going to use paypal. also notice once again that everything in purple is actuallyenabled. so we need to disable the ones we are not going to use and just make sure theones we are using are enabled. so i"m just going to click on paypal and then click onsave changes. and then i need to go to the direct bank transfer and check payment pagesand disable these since they're currently enabled. so i'm just going to click on thisone here, b-a-c-s, and i'm going to click on this box here to disable it. i just uncheckedthe back transfer button. so i just unchecked
that. i'm going to scroll down and click onsave changes. and i'm going to do the same thing for check i'm going to click on check.and i'm going to disable this by unchecking it and then i'm going to click on save changes.and it looks like cash on delivery is already disabled. and then you have this other formof payment here that is not enabled. if you'd like to learn more about that go ahead andclick on join for free or learn more about woocommerce and i may pronounce this wrong,mijareh. anyway you can learn more about this checkout by clicking on this link. i'm usingpaypal however so i'm going to click on this link here and i need to set up paypal. herewe see it is enabled which is awesome and here we see you just need to add whateveryour paypal email is. now i already have a
paypal account but if you don't have a paypalaccount you can just go to paypal and you can sign up for an account.so once again paypal is free so you can just come to paypal.com and sign up for eithera personal or a business account. most likely a business account if you are using your e-commercewebsite for business. and you can just check out the different plans they have here. andyou can sign up for paypal. so the good news is that with paypal anyone who wants to buysomething from your site can do so by just signing in to their paypal account, so theycan sign in to paypal. or if the don't have a paypal account that's no problem they canjust pay via credit card if they do not have a paypal account. so we'll go over that injust a moment. let's go ahead and continue
setting up the payment gateway here so i needto add my paypal email. so i"m just going to enter that right in here, and then i'mjust going to scroll down here and it looks like we're good to go. and i'm going to leaveall the default settings here so the one i am going to turn off here though is this onewhich says enable paypal sandbox. so i'm going to disable that we don't need that anymore,that's used for test payments. then i'm going to click on this one that says save changes.okay so payment gateways have been set up. so let's just check some other tabs here reallyquick. i'm going to click on emails. and here we see emails will be sent from the name ofmy site. you can add any name here and then here's the email address so that looks good.so i"m going to leave all of this as it is.
and then i just want to click on integrationreally quick as well. and here we see that here we have google analytics. so i recommendusing google analytics, and you can also add your id in here. now we already talked aboutgoogle analytics. you can add also add google analytics in the wootique theme options settingsbut you can also add it here also. so there are a couple different places where you canadd google analytics. so there you go. so now let's go check out the cart to check outthe shopping cart. so i'm going to go back to the site by clicking on visit site. andhere we see i have the item so i'm going to click on the item once again. and here itsays proceed to checkout so i'm going to click on proceed to checkout. so here at the topthere's a message that says "do you have a
coupon? if so click here to enter your coupon."so let's create a coupon really quick and then we'll come back to the checkout pageto check out. so i want to show you how to add or create a coupon for your site. so toadd a coupon i'm going to go back to the dashboard by clicking on dashboard. and then i'm goingto hover over woocommerce and you cash see when i hover over woocommerce there's a linkhere that says coupons. so i'm going to click on coupons and here we are on the add couponsscreen. so i"m going to add a coupon by clicking on this link that says add a coupon. and thenat the top i'm just going to add what the name of the coupon is. so i'll just call thissummer fun. that will be the name of the coupon. that will be the name of the coupon, summerfun.so maybe you have a coupon you want to give,
some holiday coupon or special occasion orevent. i'm going to call this coupon summerfun. and i'm going to scroll down here and coupondescription you can add a coupon description for your coupon for reference if you'd like.and then there's all these different settings that you can add right here. so the discounttype can be a cart discount, a cart % discount, a product discount or a product % discount.i'll just leave it as a cart discount. and then the coupon amount i'll just say thiswill be a $5 off coupon. you can also enable free shipping if you'd like for your couponor check all these other different limitations or options related to your coupon so you canread about these and select them if you'd like. i'm going to leave these as is. thenyou can also specify if there's a minimum
amount needed to use the coupon. you can alsospecify which products these are for, and there you go. so you can read about all thesedifferent criteria to make the coupon valid. so i'm going to leave it like that and theni'm going to click publish to publish this coupon. okay so the coupon was updated sonow let's go back to the checkout page to apply this coupon. so i'm going to click onvisit site. and now i'm going to go back to the check out page by clicking on checkout.and here it says "do you have a coupon" enter your code" so i'm going to click this to enterthe code and here the code is summerfun so i'm going to add that in there and i'm goingto click on apply coupon. okay the coupon was applied successfully. so now when we scrolldown we see the order, the product was $40,
the cart sub-total is $40, the shipping was$5, but i just got a discount of $5 so now the order total is $40. so that's awesome.so the next thing is we just need to fill in our billing address so i'll just do thatnow. and once all the billing info is filled out then you can just indicate whether youwant the shipping address to be the same as the billing address. so i'll just leave itlike that and then the customer can note whether they have any comments about the delivery.so we're all set to go now as we note here the last step is as it notes here we'll bepaying by paypal or through paypal but it does say you can pay with your credit cardif you don't have a paypal account. so i'm going to click on place order to place theorder. and here we are on the paypal order
page where we can see the order summary onthe left hand side and then on the right hand side it says have a paypal account? log into your account here. or, if you don't have a paypal account you can pay as a guest nowand sign up for paypal later, or you don't have to sign up for paypal at all. so justby filling out this info and clicking on continue you can sign up as a guest and pay with creditcard directly without having a paypal account. okay we're almost done we have two more thingsthat i want to do before completing this video. number one, let's go over how to add a downloadableproduct to your product catalog and then we'll go about creating a blog post with an imagegallery. so first i want to create a product that is a downloadable product. so i'm goingto go up to the top where it says +new and
click on product. and here i want to add ane-book so i'll just call it "e-book: how to create your custom t-shirt" so it will bean e-book about how to create your own custom t-shirt. and then i'm going to add some infohere as text. let's see i'll just reduce it a little bit. then you want to come down onceagain to product data but this time instead of clicking on simple product or variableproduct you actually want to click on this checkbox here that says downloadable. so i'mactually going to click on that. and here we see we can actually put a price for thisparticular unit. so this is a downloadable product so i'm just going to make this free.so i'm just going to say it will be zero, no price there. now we need to choose a filefor this particular download. so i'm going
to click on choose a file. and then i'm goingto click on upload file to upload the file. and select the file. and here i'm just goingto find the file, so here's the ebook. i'm going to select it and click on open. andthen here we see it says ebook right here. that's good. and then i'll just click on insertfile url. so now we have the file url right here so that's good to go. now here i needto click on shipping. so i'm going to click on shipping right here. and now we see here'sa shipping class and it currently has no shipping class but we want to add a shipping class.so i'm going to click on that. so we have two different shipping classes. we have thestandard shipping class which we saw previously was the $5 shipping charge. but this is adownloadable ebook so i just want to give
this ebook away for free. so i'm going touse the shipping class of free for this particular product. so i'm just going to click on freeand then i'm going to add a short description down below here about this product. then i'mgoing to scroll back up right here. here we see are the product categories. i'm goingto give this a new product category, so this will be called ebook. so i'll add the ebookproduct category and then i'll click on add a new product category. and then once againi can give it a tag if i'd like so i'll just call this ebook and click on add the tag andfinally i need to give this a featured image. so i'm going to click on select featured imageand then once again i'm going to click on upload files and select files and then i'mgoing to select my ebook cover right here
and click on open. okay and then for the titleill just call this ebook, and then with the caption and then i'll click on set featuredimage. okay so it's all good to go, now i'm just going to come up to the top and clickon publish to publish this product. okay so the product was published let's go take alook at it by clicking on view product. and here we see here is the ebook. and it's freeas it notes here, it's free. so i can add it to the cart, so when i click on add tocart, and then i click on view cart, here we see we have the t-shirt we originally selectedand here we have the e-book with $0 for the price and $0 for the subtotal, and once againwe only have the flat rate but that is being applied to the t-shirt. so if i eliminatethis t-shirt from the car by clicking on the
x button, then the total will recalculateand now we see we have a flat rate but it's free for this particular ebook.so that is exactly how we wanted it. so the last thing i want to do in this video is iwant to go over how to create a blog post. so i'm going to click on blog right here andwe see we have one default blog post showing up. so i want to add a new blog post so i'mgoing to go up to the top, click on +new and then i'm going to add a post by clicking onpost. so the first thing we want to do is give ournew blog post a name so i'm going to give this a new title so i'll just say new peacet-shirts have arrived. okay so i have my new title right here for this blog post and theni want to give it some text right here. then
on the right you can categorize it if you'dlike so i'll just call it peace t-shirts, that will be the new category. i'll clickon add new category. and then we just want to scroll down and we want to give this afeatured image. so i'm going to click on set featured image. and i'm going to choose thisimage here and click on set featured image to set the featured image. and i also wantto add a small image gallery of the t-shirts that have arrived. so i"m going to put thecursor right before the text here, and make a return. and i'll place the cursor wherei want the images to be because i want a set of images to show up with this blog post.so i set the cursor there and then i click on add media. and here i'm going to clickon create gallery to create a small gallery.
then i'll just select the different shirtsthat i wasn't to have displayed in this gallery. so i have one, two, okay i have three peacet-shirts. and then i want to click on this button here that says create a new gallery.okay so i have the three items in my gallery. you can also just move them around by draggingthem depending on how you want them to be displayed. so i'll jus leave it like thatyou can see that it's linking to either a media file or an attachment page. we're goingto adjust that in just a moment. now though i'm just going to click on insert galleryto insert this gallery. okay so now i'm going to click on publish to publish this galleryand now let's take a look to see what it looks like. so i'm going to click on view post.and here you see we have our images and our
text and our author description right here.so when i click on this image you'll notice it goes to a separate page with just the image.so what i would really prefer is to have a lightbox display so that i stay on the blogpost. so to do that i'm going to go back to the blog post. we need to add a plugin toget the lightbox to display. so the plugin we want is called jetpack. sowe are going to go back to the dashboard to add this plugin so i"m going to click on dashboard.and now i'm going to go to the plugins screen by clicking on plugins. and here we see allof our current plugins. so i need to add a new plugin. so i'm going to click on add newto add a new plugin and this plugin is called jetpack. it's a plugin that is developed bywordpress, and i'm going to click on search
plugins to search for this plugin. here itsi at the top it's produced by automattic as i noted. automattic is the maker of wordpress,we love automattic. and now i'm just going to click on install now to install this plugin.are you sure you want to install it? yes i do, okay. and once the plugin is installedi want to activate the plugin by clicking on activate plugin. okay your jetpack is almostready a connection to wordpress.com is needed to enable the features. so we need to connedtot wordpress.com. so i'm going to click on this button that says connect to wordpres.com.and here it says okay we nee dot connect the website to jetpack to wordpress. so if youhave a wordpress.com account you can just add your username and password here. and ifyou do not have a wordpress.com account you
can click on this link here that says needan account? so the good news is that wordpress.com isfree so you can just sign up by filling in an email address, a username and a passwordand you can create a blog address if you would like, or probably if you already have a websiteyou don't need to create a blog address so you can click on this very very small linkover here which says "if you do not want a blog you can sign up for just a username".so for the purpose of the jetpack plugin you really just need a wordpress.com usernameso you can simply click on this link here that says sign up for just a username. andthen you can just add your email address, username and password and then you can clickon this link here to sign up. so i already
have a wordpress.com account so i'm just goingto add my username and password here and then i'm going to click on this button that saysauthorize jetpack to authorize jetpack. okay so you're fueled up and ready to go thefeatures below are now active. so jetpack provides you with a whole suite of tons ofdifferent features that you can use. so the one we want for the purpose of the image galleryis called the carousel. so it's located right here. you can learn more about it by clickingon learn more and read about it right here. or you can just click on activate. so i'mgoing to click on activate right here. okay the carousel was activated. excellent.so i want to point out two other features, actually one other feature that i really likein jetpack and that's the social sharing features.
so it's located right here. the most superduper sharing tool on the interwebs. that is awesome. share content with facebook, twitterand many more. so when you click on concfigre here. well you can click on learn more aswell to learn more about it. but i just want to configure it, so i"m going to click onconfigure. so here you can add all kinds of social network icons that will make it reallyeasy for anyone who visits your blog post or your pages depending on how you configureit. it will make it easy to share your content to the social web either to facebook or linkedin,twitter or google+ or any other social network. so to make this work you just need to dragthese icons down to the available area here so i want facebook, i want google+, i alsowant twitter. and i'll take linkedin as well.
and then let's see i also want these otherones. so i'm going to add these other ones over here in this section. and this will justcreate a more, a more button. so we can see a live preview of what this is going to looklike on your blog post or under your blog post right here. so i want to add pinterest,we'll also add reddit. and we'll add tumblr. so that is how you can configure it. you canadd the others as well if you'd like. i'm just going o leave it like that. and thenyou can see you can choose different buttons styles. i like this pretty symmetrical lookso i'll leave it like that. the sharing label we'll say share this. it will open in thesame window. and here, this is important, you need to select where you would like thesebutton too be displayed. so i want these displayed
on posts so i"m going to click on posts there.and then i'm going to click on save changes to save the changes. okay so we've configuredthe sharing settings. now let's go back to that post we created and let's check out thecarousel. so i''m going to click on posts right here and here is the new peace t-shirtshave arrived so i'm going to click on edit to edit this post. and here we see here isthe carousel. so let's take a look at what these looks like so far. so i'm going to clickon view post. and here it is as it was before. and now note we now have these different socialnetwork sharing icons so you can now share this post with anyone via facebook, google+,twitter or some other kind of social networks. but i want to click on these links here theseimages to see if the lightbox displays. so
i'm going to click on this one here. and thereyou go, voila! so now we have a really nice image gallery for our images. it looks a lotbetter than sending someone to another page. so that is really cool. so that is how youcreate an image gallery within woothemes on your blog post. so there you go that is howyou add all the different features to the wootique theme and that is how you can configureyour e-commerce theme using wootique and woothemes. so thank you so much for watching. i fyouenjoyed this video please do leave a comment below. also please do like the video if thiswas helpful to you. and i will be coming out with more videos so please do subscribe tomy youtube channel. and also if you found this video helpful please do share it withyour friends, especially any friends that
may need an e-commerce website. thanks forwatching, i'll see you in the next video.
0 Response to Best Free Responsive Templates
Post a Comment