Transcripts
1. Welcome to the class!: E-commerce and buying online is a huge part of modern day life. Something which millions of us do on a daily basis. But, imagine having the ability to create your own online store, sell products or services, take payments, and also ship your goods all over the world. Well, this is exactly what we're going to cover in this course. Obviously, just creating an online store, putting out there for the world to see is not always the best approach. We also need to manage a online business and also all of our products. Also covered in this course is things such as product coupons, how to settle different shipping rates and taxes, how to categorize our products using categories and tags, how to take online payments, and also how two secure our store with an SSL certificate. All of this is going to be covered in this class and more. So I hope to see you in the class.
2. Share Your Work On Skillshare!: When taking any course, it's really important to
not get in the habit of following along just for the sake of ticking
off another lecture. Take the time to
process each lesson, review the code which you write, and think about how you might approach these
solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something
personal and unique. You don't need to get too
lost and divert away from the class and you can even take a step back after
you've finished the class. Come back and make some
project changes afterwards. This will really give you
a good chance to practice what you've learned a
way from the class. Also remember to share
your project too here on Skillshare and only
will I check it out. But it will also inspire
fellow students too. For more information on the class project head into the project and resources tab, where you can not only
upload your project,. But you can also see
other class projects too. For this mind, I look
forward to seeing what you create and upload
here on Skillshare.
3. Choose your project theme: Throughout this course, we are going to be learning about WordPress e-commerce by building a online store. The theme of the store I'm going to be creating is based on a bakery, but this theme is completely optional and up to you. If you choose to use a different theme for your project, it won't affect your learning journey throughout this course. The only difference is you may need to think of some different product titles and different product descriptions, and also introduce some different images too. Look at the course project which I'm going to be building, which is based on a bakery. You're free to choose any theme for your e-commerce project, or you can follow along with this exact same project. The course images have also been provided as a download, or if you feel a little more creative or ready to build an online store, but if you're on business, now would be a good time to gather together any images which you're going to need for your project. This is a look at the homepage, we have various categories which has filtering down our products by best-selling or by category. We'll have a navigation up at the top with links to our various pages for our site. Alone, I'm going to be focused on login for this project. We do have a blog page. We're going to have a Contact Us section which is obviously important for e-commerce. We'll have a user account area and the user can log in and check out any previous orders and go into these and find all the details. They can have a Downloads section for any digital goods which they may have purchased. We have links for the addresses, different store payment methods, and also options to change the account details too. Obviously, the most important part is going to be the shop link, where we're going to display all of our available products. We also have a sidebar which is going to allow us to filter down our products by things such as the price, by the category, and also different types too. We can click on any of these products to add these to our cart. We can now see the shopping basket has been updated up at the very top. We can click through and then we're taking it through to the checkout process. We're going to take a look at how we can set all of these things up including payment methods. We're going to integrate stripe into our project so the user can use credit cards. Alongside these simple single products, we're also going to allow products which have different variants. For example, these cupcakes, we can select different box quantities, and the price is updated like this. You can also write down all of this information if you want to, such as product titles, product descriptions, and also maybe things such as different categories and tags which you may need for your store. Don't worry too much about this if you just want to jump into learning about WordPress e-commerce because all of these can be created as we go through the course and also changed later too. Once you're ready and once you have your idea in mind, let's now move on to the next video where we're going to begin setting up WordPress.
4. Setting up WordPress: WordPress is wrote in a programmer language called PHP, and you don't need to know any PHP to use WordPress or to take this course, but it's also worth knowing that PHP will only run on a web server, though, what does this mean for us? Well this means that, to create a WordPress website, we need to either purchase some web hosting or we need to simulate a web server on our own computer, here on the slide we have some common options for doing this, I'm going to be using option which is on the left and this is a service called Local by flywheel, Mamp is also a popular option to as is Bitnami, and you can choose any which differ by heading over to the links on here, uninstalling for your particular operating system, I would recommend local, since this is what we're going to be using throughout the rest of the course, I already have local set up and if you're following along with this once you've installed this, you will see a screen which looked just like this, so this is the local dashboard which is where our project is going to be set up and also include links to our home page along with the admin section, we can also create multiple sites by using local and we can create these by clicking on the plus icon in the corner and then give our presite a name, I want to go for the wp-bakery, we don't need any of the advanced options so we can continue to the next screen, the preferred environment is also fine, and then we can add our username, password and e-mail, which we're going to use to log into the WordPress dashboard, so I want to say bakery_admin for the admin username and also a password, and also a e-mail too, add our sites and then it just takes a few moments to setup using local, and then once done we're free to then explore our site using the links provided, if you are using a Mac, you may also need to add the administrator password for this to finish installing, so once this is done we should then seen that our site is running and we have the option to stop this, but we can also click on the admin and also view our site, also as a sighed note which we're not going to be using in this course, we also have a live link which we can enable and this will generate a live link which is a link to our WordPress website and we can share this with the rest of the world, so to begin we can go over to the admin link that's open a Serb inside the browser and then using the details which we provided when setting up our site, we can add our username, was bakery_admin, and then also the password too, let's click Remember Me and then we'll take it to the back-end or the dashboard of our WordPress site, this is a basic overview of the back-end settings for our sides and we can take a look at things such as our posts, we can add new ones, we can edit exitstings ones, have a media library for assets such as our images and videos, we can configure our pages, or blog comments and also the general settings and appearance for our site too, we're not going to go into this in any great detail at the moment because we're going to cover these as we progress through the course, if we go back to our local dashboard, we can also see that we have a view, cyprus and too, this is going to take us to our actual web recite, and this is how our web precise looks at the moment, we can also access site from the dashboard if you hover over this home icon and then go down to visit site, and also the opposite if we are in the front end of the site view, we can also hover over this icon and we taken back to the dashboard, at the moment, this is the default theme which comes with WordPress and it's designed to be play general, but in the next video we're going to move on to customizing our e-commerce door by changing the theme and also adding sum extra functionality with a plugin.
5. eCommerce theme and plugin setup: The next thing we need to do is to transform our generic WordPress installation to be more like an ecommerce store and to do this, we are going to be taken advantage of the WooCommerce platform. It is built by automatic, which is also responsible for lots of our great WordPress tools. By identity, WooCommerce plug-in extends our current WordPress installation, which was set up in the last video to provide products, shipping, delivery, coupons, payments and pretty much everything else we need to setup our ecommerce store. There are also more advanced features to which you can pay for. For the core ecommerce functionality is available totally for free, as is the storefront theme, which is available from the same company and we can take a look at this if we go to the marketplace into our theme section. The only which we need is the storefront theme. Look on the framework and you can found out a little bit more about the theme which we are going to be using. This is a little preview of how it looks outside box, it's fully responsive, so it look great on all screen sizes, is customizable, so we can select our own themes, our own colors, our own layouts, and generally customizes to choose our store. Just to recap, the plugin provides the ecommerce functionality and this theme provides the look and feel for our store. To our project, now we're going to include these Inside the dashboard. Head over to the backend of our size. Let's begin by installing our theme. On the dashboard, we can install a theme by going to appearance and then theme's link is here. At the moment, we see the default themes which had been provided when we started WordPress and this is the active one which we see when we go over to the front end of our sites. We're going to now change this by clicking on add new theme. We're going to search for the storefronts. This is the one we need just here. Click on install. Once installed, we can click on activate, and this will set this as our active theme. We see here we have the storefront as our active themes. We can go now over to our front and refresh the browser and this is now taken effect. At the moment, it doesn't look much like a ecommerce store just yet. We will soon have some ecommerce functionality such as products, when we install our plugin. Let's install our plugin by going back to our dashboard, where we have a dedicated plugin section. We can see the currently installed plugins or go directly to our new. I'm going to add new and then we need to search for WooCommerce. This is what we need and as we mentioned this is by a company called Automatic. We can click install and then activate all plugin. To setup our WordPress store, we have lots of options now in the dashboard, or we can go through a WordPress setup wizard, which is what we see just here. I have the option to skip this, but I'm going to run through some of the basic settings which we're going to include for our store. Now if you don't know the answers to some of these, it doesn't really matter at the moment because all of these settings can also be changed in the dashboard. First of all, we need to select a country. Now someone be United Kingdom and we can also set up our address details. I'm just going to go for a test at the moment. Let's add some test details inside here, and we'll just make sure this is correct and then we can continue to the next option. Next, our store industry mine is going to be bakery. I'm going to select food and drink and then continue. The type of products we have the option to sell different types of products such as physical goods, which will actually package and ship two the customer. We can have virtual products, which the customer can download, subscriptions and memberships. Composite products which are customer product configurations and also a book-in-service too. I want to go for our physical products and also downloads too. We want to know if we are just getting started or have a business in place. How many products do we want to display? We'll say we don't have any products just yet and we're not currently selling elsewhere and I'm also going to uncheck all of these options. We can install these manually when needed. We then give an option to change themes and we also have some paid options too, but let's continue with this active theme. Click on now we'll install these manually if needed then continue to the dashboard. Just like when we setup many different WordPress plugins, WooCommerce also adds a dedicated option inside the dashboard. Will run through many of these options as we progress through this course, and we can also change these settings, which will just configured during our setup. For now though, let's move over to the front end of our site and reload the browser. We're now presented with lots of different sample pages. We have a shopping cart, a checkout. We have an account area for our users, and also a shop right at the very end. As of yet, we don't have any products to display in our store but for now these links are really useful for our ecommerce projects. These pages have bean automatically added photos when we setup the WooCommerce plug-in and next we're going to stick with the subjective pages by adding and also removing new ones along with looking at some different page settings.
6. Setting up our pages: As we discovered before, the WooCommerce installation wizard has automatically setup some of the pages which we may need for our start. Well, of course, we often want to customize these pages too by adding new ones and also removing some of the ones which you don't need too. This is what we're going to take a look at too in this video, alongside discovering how page templates work. From the WordPress "Dashboard," we can add and edit pages with this dedicated "Pages" link. Clicking on "Next," we can then see a list of all of our pages which had not only been installed with the WooCommerce plug-in, but also the sample page too, which was setup when we first installed WordPress. If you notice, next to you, a lot of our pages, we see that each one of these has been assigned a particular role or function. Our "Cart" has been assigned the role of "Cart Page," same for "Checkout," the "Accounts," and also the "Privacy Policy" and the "Shop" too. This was done first when we used the WooCommerce Setup Wizard but if we created our own pages, this would not be the case. For example, if we were to delete this "Checkout Page" and then go and create a new page ourselves called "Checkout," WooCommerce would not automatically assume that this is for our checkout functionality. To assign these roles we need to go back to our WooCommerce settings, so hover over this link and go down to our "Settings." We can see where these roles have been assigned inside of our "Advanced" tab and we can also click on any of these drop-downs and change the particular role for each page. If you did want to use any custom page used to override any of these defaults, this is completely possible too. Back over to our pages I am going to now create two new pages for our sites. "Add New" on the first page, which we're going to add is for our blog. At the very top, we can give this page a title of "Blog." Then if we wanted to, we can construct our page using a series of blocks. By default, we're taking it to a text block where we can begin to add our paragraphs of text. If we click on the plus icon at the top left, we can also add lots of different blocks such as headings, code samples, images, some pre-configured widgets, and also embed some social media links. Over on the right-hand side we have a document section which gives us lots of different settings for our page. We can set the visibility and if we want this page to be published immediately, or if you want to schedule this for a particular date. We have a "Permalink" section where we can see the "URL Slug." This is the section which goes onto the end of our URL. For example, we'll have wpbakery.local. Then for this particular page we would add on to the end a forward slash, and then the URL slug, which is block. This will have a featured image, which is our main image for this page and the featured image can be displayed in a number of locations depending on which particular film you are using. We can enable comments for our users on this page and we'll have a template section which we are going to come back to you very soon. Now to make this page active, we're going to click on "Publish" and then "Confirm." Then we can also create our second page by going back to the dashboard. Click on the "WordPress" icon. We are then taken back to you our pages where we can add a new page and this one is going to be "Contact Us." We'll also come back to the contents of this page so we can just hit "Publish" and then "Confirm." Finally, to clean things up we can go back to our pages and then we can also remove the sample page, which has been set with the WordPress installation. Hover over this page and then we can send this to the trash. This now leaves us with our pre-built pages alongside our custom ones, which are "Blog" and "Contact Us." The contact page will be used later on and we'll add a contact form directly into this page. Just as we looked up before, with WooCommerce when we assigned a particular role or function to "All Pages," we also need to tell WordPress that we want to display all of our blog posts on this blog page. This is pretty straightforward if we go to our settings and then into our reading section. At the moment we see that our latest blog posts have been assigned to the homepage. We can see this if we go to the front-end of our websites and then click on "Home." We have this "Hello world" sample blog post, which is being provided when we installed WordPress. To now move this over to our blog link, we can go back to our settings. We can change this to be a static page and then we can see, we can assign our post to our new blog page, save our changes, and back over to our blog. Now when we reload the browser on this forward slash blog link, we can see our "Hello world" example. Although this course is focused on e-commerce, managing and adding new blog post is just as easy as managing our pages. We can do this from the dashboard, from our "Posts" link, click on "All." The way this works is very similar to "All Pages," we can add a new blog post. We can also see our "Hello world" example which we can edit, we can delete, and we can also see any comments which would be made on this blog post. Now we have our blog posts assigned to this blog link. Well, back to our homepage. If we click on the "Home" link, we still see our blog post on this page. Well, this is because we haven't created a new page to override this. Let's do this now if we go back to our pages and we can use the "Add New" shortcut where we're going to create a new page called "Home." We can immediately publish this and then we can update this in our settings. Back to our "Dashboard," down to our "Settings," and once we go in the "Reading" link, we're going to go to our "Homepage" link and set the homepage to be "Home." Save our changes, back to our "Home" link. We see the homepage which we just created and if we go to our blog, we still see our blog posts. We now have a homepage assigned, but we'll have a few options we can now take to add some content to this page. We can directly edit this with our "Edit Page" link up at the very top and just as we looked up before, we can go ahead and add some various blocks, such as text or images or can also take advantage of some pre-built blocks which have been setup with WooCommerce. Click on the "Plus" icon and if we go below all of the default blocks. Right at the very bottom, we have a WooCommerce section, so we can configure our homepage to be exactly how we want it to look. We can add products by category, we can hand pick our products, we can add reviews, and also a product search too. We could build a custom homepage using any of these blocks. Although at the moment we have no content such as reviews and also products to test out how this will look. You can also come back in the future and edit this by adding any of these blocks Or we can go on to the documents section and we can also take advantage of one of the pre-built templates which had been provided with the storefront theme. The one I'm going to use is going to be the "Homepage" template, so let's select this and a page templating WordPress is coded into the theme by the themes creator. Different themes will have many different options, often a full width template, a two column layout and so on. Well, this homepage template is provided to display things such as categories, new items, favorites, and also our best selling products. Let's update our homepage. We can then view our homepage by going back to the "Dashboard" hover over our home icon and then visit sites. Obviously, we don't have any contents or any products to display just yet, so our page looks a bit empty, but this is something we're going to begin to fix in the next video by setting up our product categories.
7. Setting up product categories: When we are dealing with the e-commerce sites, one of the big things we need to work out is exactly how we're going to categorize all products. If we consider a traditional product page which looks something like this, it can be hard for customers to found exactly what the want without any type of organization. If we have hundreds or even thousands of products on all sites, all the user needs to is scroll all the way through these, it has become really difficult to find the exact product which the customer may need. For example, if there is a certain type of cake the customer wants, this may be below a 100 or 1,000 over different products. To help or to fix this problem, one of the common things which we can do is to add different categories to group together our related products. These categories can also be displayed inside of a sidebar too and we can click on any of these categories to filter down the displayed products, which makes it much easier for the end user to find the product which they want. Increasing the chances of the end-user purchasing from your sites rather than one of your competitors. WooCommerce makes the process of adding categories a relatively straightforward process. The one which we're going to look at in just a moment. That's why we need to add in our images, since our categories are also displayed alongside an image. Remember basic images are provided with this coarse or you can use your own. You don't need any special images just for categories. You can just make use of one of the product images. As we create our categories, we can upload each one of our images one buy one. All can first add them all to the media library, so can easily select them when needed. I'm going to upload all the images which we need by going over to the media library, which is in the sidebar, click on add new, and then we're going to drag and drop all of the images which we need insider here. I've put the images folder, saved on the desktop just here and it's going to be all images which are provided with this course. Remember, mine is themed on a bakery, but if you're using a different theme for your store, you can upload some different images too. We can drag these over one by one, or instead we can drag over the full images folder, drop these in and these will only take a few moments to upload. Now when we create any product or at our categories, we also have access to any of these images to. Let's get to work add in our categories, which is in the sidebar on the products. Then click on the categories link. Our first category which we're going to create to section our products is going to be for cookies, and also remember if you are using a different theme, you can change any of these category names two suit your project. This can be cookies too, remember the slug, just like when we create a new page is the end part of our URL, so it would be our domain name up at the top and then forward slash cookies. If this is a subcategory, we can also choose a parent category and we'll take a look at this in just a moment. We could also add a description if you wanted to, but this is not required for this particular theme. Down at the bottom we have a drop-down menu for our display type. This is to determine exactly what will be displayed when we click on this cookies link, so if we click on the cookies do we want all of the cookies products to display, if we do we click on the products, or we could also show any subcategories if this cookies category was a parent and we will look at this very soon too. Since cookies is going to be a parent category, we're going to display all of the cookie products underneath. We can then upload a new image or select the media library and choose one of our existing images. Let's go for our cookies. Click on the cookies and if we were to deploy the site to a live web server, we would also want to fill in sum more information, such as the old text. Let's click on use image and also add our category. Next up is going to be for cupcakes, also the slug of cupcakes. This is also a parent category 2 so we leave this as nun alongside the description. This will also display the products when we visit, click on the thumbnail and I've got a cupcakes image, which I'm going to use for this category, we can add this. Then at the next category is going to be doughnuts, which will also display products. Select the doughnut image and this is all we need for this category. The next one is going to bee Muffins, and this is also a parent category too. This will also list products underneath this add our muffins image, which is this one just here and then add our category. The next category which I'm going to adding is going to be recipe cards. Now, this particular categories also going to have some child categories to so below this will divide our recipe cards up into things such as cupcake recipes, and these will all be child categories of this recipe cards. If we go to the recipe cards section, instead of displaying products, we're then going to display instead our subcategories, which we haven't created just yet, but if we add the image or a thumbnail, we can then create our child category just next. The child category of a recipe card is going to be a cupcake recipes, add in this slug for the section, and now since this is a child category, we can select the parent, which was our recipe cards, which we'll learn it display any recipe cards we have listed as a product. But I don't have a separate image for this. I'm just going to use the same recipe card image we have inside the media library. Now we can add this one as a child. Up at the top we have our recipe cards, and then we can see the cupcake recipes just below, which has the dash prefix, which means that this is a child category. The final category which you've got to be adding, is going to be for a specialized diets. This is also going to be a main or a parent category, which is going to have a number of child categories nested inside. This won't have any parents, this will be at the top level. When we go into this category, this is going to display all of the nested subcategories at our image and then save our category. Inside of our specialized diets, we're going to add a new category, which is going to be for gluten free, in slug 2. Our parent category is our specialized diets, which is going to display any of our products. I want to use the same image with this category and it's just like we also see the dash before this name, since this is a child of specialized diets, the very final one we want to add is also going to be a child of this category too. This one is going to be called vegan, and it also has the parent category of specialized diets. It'll display our products, upload an image and our category. This is the final category which will go to be add in for this project. If we go back to our sights on reload on the homepage, we don't see anything different. The same if you go into the shop, section 2. If we now go back over to our homepage, we still don't seen any extra content, this is because we have not yet created any products to actually display inside of our store. All we're doing at the moment is setting up the options, so these are available when we create our first products. We're going to continue adding these options in the next video, where we're going to take a look at product attributes.
8. Product attributes: Adding attributes to a product is basically a way of including some additional information about it. For example, imagine we had a store selling t-shirts. A t-shirt's attribute maybe the size, the color, and also the fit. These are like variables or the parts of the product which may change, and then each one of these attributes has their options too. Our size attributes would include things such as our small, medium or large. It would have various color options, and also various options for the style or the fit. Fortunately, WooCommerce also gives us full control over all of these attributes, we can add it to our products. We could go back over to our WordPress dashboard, from here we can add our product attributes. Let's go to the sidebar. Then if we go into the products, click on the attributes option inside of here. Your first attributes for this bakery store is going to be the box quantity and then also these slug of box quantity too. We can then assess if all these needs to be order by the id, the name or we can also set the custom ordering so we can drag and drop these attributes into an order. Let's add our attributes. We now have our first attributes of box quantity and the second one which I'm going to be adding, is going to be for the flavors. The same is your going to have a custom ordering, so you can add this and then the third and final attributes to my site is going to be big and friendly. Add these attributes and we now see all of our free attributes on the table on the right. Notice we have some options on the right, which we use to configure the terms for each one of these attributes. First let's begin with our box quantity, click on configure terms. Then inside hear we're going to add some options for this box quantity. For example, if we're selling a cake we may want to restrict the user to only buy box quantities of six, 12, 18, 24 and so on. I'm going to add these as our options. First of all, the number 6, the slug of number 6 too. We don't need a description, so we'll just click on add. The second one is going to be for 12, 18, 24, also a box quantity of 30. Then if someone wants a lot of cakes, we can also add a option of 60 too add our final one in. See when we add our product, we can also assign these box quantities to create a variable product. For example, we could set a product which is called box of cupcakes, and then we can provide these as different options, auto attributes. We also have two more sections which we need to configure our terms for and the next one is for our flavors. This is going to be for things such as muffins or cakes. We can add different flavors and we can assign these when we create our products. The first flavor I'm going to add is going to be going to be blueberry with a matching slug. The next one is going to be for chocolate. Remember, these are all personal options, so you can change these. My last one is going to be for vanilla. Then we can go back to our product attributes, and then we can configure our terms for vegan friendly. This is going to be a pretty simple one, we're just going to have two options. It's going to be either not vegan friendly add this. Then the second one is going to be vegan friendly. These options will of course also be really useful later on when we create our products. But now all this is going to be all the ones I'm going to be adding for this bakery. Then when we come to add products we can use these in multiple ways. As mentioned before, we can use these to create some variable products, or instead we can simply use these to add sum information to our products. Attributes can really make our products a lot more customizable and very flexible too. That's it for attributes. In the next video, we're going to focus on tax and also shipping.
9. Tax & Shipping rates: When selling products online we always have the issue of dealing with taxes when selling either physical or virtual downloadable products. Also when dealing with physical goods we also have the issue of shipping rates and how we're going to actually physically ship the product to the customer. Both of these are thankfully easily added using the WooCommerce plug-in we have already installed. This video isn't really going to bee a follow-on video, since both the subjective tax rates and also the delivery charges are both going to be dependent on your location, the location of your customers, the type of products you sell, and also how your business is run. Instead of going through and adding some options, I'm going to show ewe where all these options are and how we can set them up. But implementing them is something specific to your business and it's something I want to leave to you. To do this, back over to the dashboard and then go to WooCommerce. We then have a settings option inside of here. We're first going to work with the subjective taxes. If we scroll down, we can see we need to check this option of enabled tax rates and calculations. Onto [inaudible] we can save our changes and then back to the top. We now have a separate tax option on this menu. First things first, our products are going to be listed including or excluding tax. We can set this option just here. Next we're going to set how our tax is calculated and some countries have different tax rates dependent on the location. Here we can set if we want the tax to be applied for the customer shipping address, the customer's billing address, or based on the shop location. After this, we have a tax class. If we click on this, I automatically have standard reduced and zero rates. These have been preconfigured for me since I already set the location of the store to be in the UK. These are standard UK tax rates, and we can also attach any of these tax rates to a product when we create them too. The options which you see here may also be different depending on the location, which you'll set. If we go to the general tab, we can seen the country as MIT UK, and if you change this to be a different country, you may also see these default tax rates change too. But to all taxes, you can also round the tax and below this, we also have the ability to add sum additional tax classes. These additional tax classes are the ones which are added on top of our standard rate, and these have also been setup for my country automatically. We set if we want the display prices in our shop to be including or excluding tax, the same for the carts on the checkout and then we can also add a price displays of suffix too. This suffix is going to be the text which we add after the product price. For example, you could say 1295, and then we could add the tax of including tax or any other customer tax which you like, at the very top, just stuffed to our tax options. We then have the options to fine tune each one of our particular tax rates. For example, if you go into my standard rates, this is where taxing gets complicated and also very specific to your country. We can set up different rates for different countries, different states, different post or zip codes, and also different cities. For the UK, this is not too complicated. Generally, the UK has a single standard tax rate which covers most products and is currently at 20 percent. We also have the reduced rate, which is 5 percent. This covers some safety products such as children's car seats and also some energy saving products too. Then the zero rate, which is for things like just food and also some children's clothing. Also other countries such as the US has a much more complex tax set-up. An entity where you'll need to set things up for all of your different rates. It can set up each one of these individually by inserting a new row or if you do a search online, there is some spreadsheets with all this information available, and you can import these as a CSV. Next we have the shipping rates tab, so let's go into here. It's inside here where we can configure our shipping zones, and we can set up different shipping methods on prices, for different locations. We can also customize this inside of the General tab, under the general options, we can set which countries you want to sell to. Currently by default, we are set to all countries, but we can also set this to be a specific country too. For example, if we just wanted to keep this to our home country, we could select this, save our changes and then we could setup our shipping rates for this country, add a shipping zone as well as the zone name. We can then set the region, and we can also configure this particular shipping zone, but restricted to different zip or postcode too. Meaning we have some really flexible shipping rates, so we have all areas covered. Below this we have our shipping methods where we can add a new one. For this particular zone, we can then add our shipping methods. We can set a flat rate which is a fixed price. We can enable free shipping or also local pickup too. I'm going to select a flat rate at this end. This flat rate is going to apply to any old value. If we go into here, then click on "Edit" and then have the option to select if we want to add tax onto the ship and rates and also add a shipping cost too. Let's go for 495 and then save our changes. Then I'm also going to add a second shipping method, which is for free shipping at this. Now if we go into "Edit", we can say that free shipping requires a certain condition, such as a coupon or a minimum order, or a combination of both. I'm going to set a minimum order amounts, set the minimum order values to be 50. We can also set if we want this minimum order rule to be applied before any coupons discounts too, save our changes. Then still in the shipping section, we have two further options of shipping options and shipping classes. It's here where we calculate the shipping cost, and also if the shipping rate applies to the billing, or the shipping address. Finally we also have a shipping class. A shipping class is used to group together items which have something in common. For example, we could group together big and bulky items or small breakable items and so on. These classes can also be used to change the flat rate cost, if needed to. With this now all in place in the next video, we're now going to move on to adding the actual products to our E-commerce store.
10. Physical products: Hello, it has taken quite some time to create our first product for our store. All of the set of work is now in place. If we did create product at the started this course, we would then need to go back into each one of our products and add things and change things such as the categories, the tax rates, and also the shipping as we create each one of these variables. Now we can jump right in to creating our products. All of these options are right there for us to add to each one of our products. In this video, we're going to cover physical products, which are items we're going to ship to the customer. [inaudible] products follows a similar patterns in most things in WordPress such as adding pages and also blogposts. There is options inside the sidebar for our products and we can even see all of our products which you currently have or go directly to Add New. From hear we're going to add our first product and this is going to be for macaroons and we're going to set up three similar products with three separate box quantities. The title of macaroons, and then will say initially a box of six. We can also add a optional description for our product too, which is visible when we click on the product to go to the full product page. Below this, we can add all of the information for this. This is going to be a simple product and we'll take a look at some of the other options we've ever scene too. I known this is self-explanatory, so let's begin by adding a price of 595. We can also add a sale price and schedule a date and time when we want to say that this product to happen. We have a tax status and we can set if the tax is going to apply to only the product, only the shipping, or if we want to add no tax at all. If we do add a tax rate, we can also set the tax class which we want to apply and these are the options which we setup in the previous videos. WooCommerce also allows us to look after the inventory so we can enable stock management for our products. We can set a product code like stock keeping units and we can also set the number of items we have in stock, for example, using our bakery we may bake 100 macaroons in the morning, we can set the stock quantity to be 100. We can also allow back orders, which is a process of allowing a customer to order item even when it's not currently in stock. This means we can maybe bakes more products or all the small items in and then ship these when we get them in stock. We can also get some alerts when we reach a low stock level but we want to keep this unchecked for our store. After this, we have our shipping options where we can set the weight and also the product dimensions and we can also add a shipping class which we can set up in the shipping section. We can also link this to other products too. We have upsells, which is the process of trying to sell a hire value product to a customer and also cross-sells, which is a weigh of displaying different products to the customer when going through the checkout process to try and get them to add more products to there cart. After this, we have the attributes option where we can add custom attributes or make use of sum of the attributes which we've already setup. We already have the box quantity so we can add this. We can select one of the terms so our value of six and let's just save. We can also keep going and add multiple attributes if we want to. We then have the Advanced section where we can have a purchase note which send note to the customer after they have purchased this product. This could be for some additional instructions, or also how to download a virtual product. We can set the order of this product and also enable reviews too. Down at the bottom we have a short description too. This is a short version which would appear on the product listing and this is a larger or a longer version which would appear when we go into the product detail. Over on the right, we have some various options. We can add our categories which we've already set up. We're going to assign it to any category which we already have, or add a new category. I've already added the macaroons category, which I missed from the early videos. You can go ahead and add to the macaroons section or we could even need this adds on categories too. We can also assign different tags to this product and also set the image for this too. Let's open this up and go into the Media Library where we can select our product image, which is the macaroons, save this and now our product is ready to be published. I'll click on this now and we're going to immediately publish our product or we can also schedule this for a later time and date too. Let's keep going with our macaroons and next we can create a box quantity of 12. I just want to leave the description for this. This will still be a simple product and the price for this one is going to be 995. This is also going to be taxable. We're not going to look after the inventory for any of these products. We can go down to the linked products. Currently we only have one product, which is the box quantity of six. It doesn't really make sense to upsell this over products. So look at any of these and go down to the attributes. Set the box quantity to be a term value of 12 and then save this, assign a category of macaroons. Then our product image. We can publish. The third item we're going to add is a box quantity of 24. Remember, if you also using different products, this is completely fine. Just go through the same process and change the product descriptions, the categories, and also the titles and prices too. The price for the box quantity of 24, I want to go for 1,695. Let's actually set the inventory, for this one we can set a stock value. Let's just say we only want two sell three boxes. Let's change it to three then down to the attributes and we can set our box quantity this time to be 24. Select our category and also our same product image. The publishing product in some different categories. Let's go for a chocolate chip muffin this time and also let's go for a box of 12. A regular price, 995. Let's also link this to some different products too. So let's go for an upsell and we'll go for our large box of macaroons. We can also cross-sell this with our over products. Let's go for a box of 12 too. The attributes, a box quantity. It is the value of 12. This one, we can also take advantage of the flavors attributes and set this to a term of chocolate. Over to the categories we can select the muffins and also our image for this item, publish this item. Now we're going to move on to add in some products which are going to be in some of the subcategories. Early on we set a specialist diet category and then we can add a vegan and a gluten-free section. Let's go for a new product which is going to be for vegan brownies, a box of six. Let's add our price and our information. We can also look after inventory on any of these if we want. Let's go for a value of 10, our product attributes so a box quantity to begin. This was six. Save our attributes and then we can also go for vegan friendly too. Remember vegan friendly have the term of even not vegan friendly or vegan friendly. Of course, this one is. Let's click on vegan friendly, save our attributes and we can in fact also added the flavors to this to. This is chocolate so we can save this. Over to the Categories, this was inside of the specialist diets. Now if we click on this, we can see we have our two sub-categories just below. Click on "Vegan". Let's also add some tags to this product too. What we need to do to add multiple tags is to separate these with a comma, select our brownie image from the Media Library, and then we can hit "Publish". If we had multiple products which were very similar, just like these box quantities, we could also go over to our All Products section, select any of these. So let's go for our vegan brownies and then we could duplicate these products. Now instead of going through all of the same information, we can simply change the box quantity, the price, our attributes will also be the same alongside our categories and also our tags. We're also going to use the same image and it seems our box quantity hasn't saved so let's add this in. This is the value of 12, save this and publish our product. The final product I'm going to add is also going to be in the specialist diet section and this is going to be for gluten-free brownies. This is a box of six. So the price is going to be 495. We can also link this to some other products in our specialist section. Let's also add a cross-sell for this product too inside of linked products. We're going cross-sell this to our vegan brownies or any of the products. But there is a good chance that our customer is looking at the specialist diet items so I'll go for our brownies. The attributes you can add a flavor of chocolate. We can also make sure that the vegan friendly is set to be not vegan friendly. This is also a box quantity. We determined six, save this and we can add our additional information such as our category. Specialist diet under this is the gluten-free section. Our tags and then finally our product image. Now if we go back to All Products, we see all of the products which we've created, we can see an overview of all of the prices, the categories, and also any tags which we've added too. If we wanted to edit any of these products, we could hover over, click on the "Edit" button, or simply go into the Quick Edit section which appears as a popup. Now I have some products, if we now go over to the stuff runs, refresh and now on the homepage we now seen various products such as I will shop buy category. We can see the new products which was added, favorites and also bestsellers and all of this is currently on the homepage because if you remember, when we setup the homepage, let's click on "Edit", both on the options on the write we can see our page attributes which set the template to be homepage. But remember, we could customize this by going for a default template and then clicking on various blocks opening top left. We can also see that we're missing a image for the macaroon section. If we go to the dashboard into the Categories and over to the macaroon section, we can edit this and upload a image, take this. Our homepage is now all setup and we can go to the shop section and we'll see a listing of all of our products which we've created. You can click on any of these to be taken it to a full product description. We will also see things such as the category. We'll also see our additional information such as the box quantity, any reviews which have bean added, and also any related products which were added to. If you wanted to order this, we can add this to cart. We can also checked out our View Cart page. We can apply coupons and we can see our shipping rates, which we set up earlier, has now taken effect. We also set up the shipping rates to be free over the value of 50. Let's test this out if we up the quantity, change this to be six, click on "Update" and we now have the option of free shipping too. One of the things WooCommerce does not currently do by default is to remove the flat rate option when a free shipping option is available. It can be a little annoying for some stores and this is often something which you may want to remove. I've added a link to the WooCommerce documentation and it also includes some code if you want to add, if you are a developer or you know a developer which can do this for you. All the results may plugin listed here too, which can do this for you if you want to include this. Along with this single product which we just created, we also have the option in WooCommerce to create variable products too. This is what we're going to jump into next in the upcoming video.
11. Variable products: In the last video, we created products based on the single product and this equate for a lot of used cases. However, though sometimes this can leaded to a lot of repetition, especially if we have the same product with a slight variance. For example, imagine we had a single t-shirt and there was lots of different options such as the size and color. Rather than creating, say ten or 15 different single products for each one of the sizes and each one of the colors, it would make sense to be able to list one single t-shirt and then have some options to select such as the size and color. Well, this is exactly what we are going to be doing now, where we discover how to use variable products. I will start through by creating a single product. We can then use the attribute we already have, such as a box quantity and make use of this as a variable. Each time the customer changes the box quantity, we'll also update the price too. Back over to our Dashboard and we're going to do this by creating a new product. Going on to the Products section and straight to the Add New shortcut. The product I'm going to add is a box of chocolate chip cookies, and the customer can select the box quantity. We say choc chip cookies, and then select box size, so the customer knows they need to make a selection. We can also create a description button, going to skip down to the product data. In the previous video, we created lots of simple products which are a single product with no options. However, in this video, we're going to create our variable products. This also has access to the same basic information such as the tax and also the shipping rates too. However, though we're going to go down to the attributes section, and we're going to create our variable product based on this box quantity. Let's add this in it just like we did in the previous video, and then we can select our terms. I'm going to select all of the available box quantities. The key thing to remember here is we need to check Used for variations. If we save this, this will now allow us to go into the Variation section just below, and we can make a different product based on each box quantity. We can add all first variation, and then I'm going to click on Go six times. This is going to give us six different product variations. The first one is going to be fully box quantity of six. The second one is 12. We have 18 and add this for each one of our box quantity options. This is our basic information, but we also need to add a individual price to each one of these too. We can also click on this product and expand to give you some more information. We can add lots of detailed information for each one of these products, such as a product code, we can add a regular or a sale price and we can also play around with the different weights and dimensions to. We can also found you the shipping and also the tax classes if these were different for each product. However, though ours is going to be the same, so all we need to do is to add a price for each one of these. The first-price entity, box quantity of 12, 18, go down and add a new price into each one of these. Once you're happy with all of your changes and the prices, we can click on Save. We can also add a product image of on the right hand side. Just as we did in the previous video, I want to select our image, which is the chocolate chip cookies, save this. Also the categories too, this goes in the cookies then let's publish this and check this out over in our site. I'll reload the browser and if we check the homepage, we seen we now have a cookie section. If we go to our shop, we see we have our chocolate chip cookies and we have a price range from the lowest variance, right up to the largest box quantity. Instead of directly adding this to cart like we see with the rest of the products, we can now select the options. We can choose a box quantity and it should update the price for each selection we make. Let's try this out one more time over in the Dashboard. We can go back to products and Add New, and this time we're going to create a box of assorted cupcakes. Just like before, we change this from a simple to a variable products, where we can add our attributes. Again, this is going to be the box quantity or you can also create variable products from any one of these attributes too. We can select all of our values, Use for variations, then we can set our prices inside here too. We're going to add six different box quantities inside of here. I add six items. The first one is six and our final one. Click in to any of these and also change the price, so 18, add any prices inside of here. It doesn't really matter at the moment. We can also change these at a later date too. The price of 30, the final quantity of 60. Once we're happy with each one of these products, we can save our changes. We can go over to the gallery and add an image, so let's go for the cupcakes. You can tag if you want to, but I'm just going to add a category. This one is the cupcakes too and then publish our product. Refresh the browser and we see our cupcakes is now in place, but we don't see the image on the screen. Whoops, we just added this to the gallery rather than the regular image. Let's reset our image. Select the cupcakes and now we can update our product. Back over to the browser, we can now check this is all working correctly. We can go into this. We can see our price range and we can also choose our options too. Just as a side note, if you did want to add multiple images and using gallery for any one of these products, we can just go back to our product gallery section and add multiple images inside of here. Let's select New image, add this to our gallery and update our product. Now if we reload our product page, we can now select multiple images from below our product. These variable products are really useful when we have a product which has some small differences and we're not restricted to inserting one variable either. We can base our variable products on multiple attributes such as size, box quantities, colors, and anything else which you may have set up.
12. Digital products: When creating our products in the previous videos, you may have also noticed the option to setup virtual or downloadable products. Well this is what we're going to be focusing on now in this video. Let's take a look at how we can add these [inaudible]. Once again, we're going to go back to the dashboard and create a new product. So products and "Add new" then from hear we're going to create our cupcake recipe card. Scroll down. Then from our product data, we're going to keep this as a simple product, but instead of adding a physical product which we can ship, we're going to click on the virtual button. This means we're not going to have a physical product to ship to the customer, instead this is going to be a downloadable item, so click on Downloadable tool." This will only allow us to add a price for our download, so I'm going to go for 295. We can also add things such as a sale price, and then we need to add a downloadable file. For the purposes of demonstration, I'm not going to add a file inside here, but this is the place where you would add the product which you only use it to download after a purchase. We can also set a limit on the number of downloads and also set a expiry dates or the download link too. Most of the other options for virtual products are very similar to the regular products too. We can add things such as the tax, we can control the inventory, we can link products, we can add attributes so basically most of the same options minus the shipping. We can also set our product image for this and we have a product image card which I'm going to use. We also have a category of recipe cards and I'm going to click on cupcake recipes. Let's publish this, I'm going to see how this looks over in our products. Head over to the shop. We seen the cupcake recipe cards appearing just like any other product. If we go into this, we can add this to cart just like with any won of the other products. But the only difference is if we go to "View our cart" and if we remove any of these physical products, leaving just the virtual product, we see that we don't have any shipping options now available, since this product will be downloadable after a purchase. Now we have more products and also more categories displayed to the customer, we now need a way to filter down these options so the customer can easily found exactly which product they want to purchase. To help with this we're going to take a look in the next video, how we can add a widgets to our sidebar.
13. Sidebar widgets & filters: You may have scene before when visiting an e-commerce store. When we have a list of lots of different products on the page, we may also have sum filters possibly laid out in a sidebar, which allows us to filter down the displayed products, things such as the price range, the categories, the tags, and also somewhat various attributes to. Well, this is what we're going to introduce to you, our e-commerce store in this video. I'm going to ask them to take a look at how it widgets work. These widgets which are supplied with the store front theme are available from the dashboard under the appearance section, and then into widgets. On the left-hand side, we can see all of the available widgets which you can use inside of our projects, we have things such as audio players, image galleries. We can add a custom HTML, images and so much more. Then over on the right, we have some custom areas which the themes offer has set. Basically we can put any of these widgets on the left into any of our theme locations on the right. We have four different areas, we can divide our footer into four sections along the bottom of our page. We have a section which is just below the header, and in this video I'm going to be using the sidebar section. This is going to be used to add some filters to our product inside of our shop page. I'm going to add a price filter. We're going to allow the customer to click on different categories, different tags, and so on. The filters which we're going to use to achieve this had been provided buy e-commerce and they're available over on the left. We can do things such as filter by product attribute, filter by price, yields by rating. Some of the other filters have bean provided as part of the Wordpress core. Let's start with our first one, which is going to be a price filter. Let's take a look for the filter products by price, to add this, we can drag this over into any won of our locations. I wanted to drop this inside of the sidebar, which as I mentioned before, is going to be displayed in our shop page so the customer can filter these products. This is a pretty straightforward filter. The only option we have is to change the title and the rest is taken care of for us. The next filter I'm going to add is for product categories. Let's drag this just below our filter by price. The order of this is also going to reflect the sidebar inside of our theme two. This is going to display a list of all of our product categories so the customer can click and filter down our products. We can change the title and we can also all of these by the name or the order which the category is set inside of the category section. We can change the list to be a drop-down, and also some other options to use the charts showing how many products is inside each one of these categories. Next, we're also going to allow the customer to you filter down our product by the particular tag. [inaudible] also a widget called Product Tag Cloud. Let's written this underneath our categories. This is all we now need to do. The final one I'm going to add is products by rating. Crop [inaudible] just underneath our tag cloud, we have a title and we can also set how many products we want to display inside of this sidebar. This is all of the widgets and that are to the sidebar. Now if we go over to our shop section, click on the top link. We now have all of our widgets showing up in the sidebar area. We have the filter. I'm going to see the range is currently from 0-20, which is our lowest and our highest price items. Let's drop this down from 20 down to 10. Click on the filter button, and this will now remove all of the products which are priced over 10 pounds. Next, we also have the product categories. Let's reinstate the price. For example, if we wanted two search macaroons we're going to click on this. This will unfilter our products to only display the macaroons. We can also seen from the URL that we now have both [inaudible] macaroons, which was the slug which we set in the categories earlier on. Back to our shop section. Below this product category, we also have the tag cloud. We can see all of the available tags which we created when adding all of these products. For example, let's click on the Brownies and this will filter down our products to this particular tag. The final one at the bottom was our top rated products. We currently don't have any ratings on any of our products. This is just a random selection that display inside the sidebar. These are just the widgets which I wanted to add to the store. You are completely free to rearrange them through and nuance and also to remove any ones which you don't want that to. Also remember that you can place widgets into different locations just below the header, and also in the footer area too.
14. Upselling, cross selling and featured products: Cross-selling, up-selling, and feature products is something which is really important with e-commerce, and it's something which not only benefits the business, but also the customer too. We briefly looked at these options early on when we added our products, and now if we go into the product section and then click on all products. Obvious upsell here will be the box quantity, for example, if we selected the macaroons under the box of six, a good himself of this product would maybe two provide options to up-sell, to weaver boxes 12 or a box of 24 macaroons into the box of six. We can now go to the edit section and then go down to the link products. First of all, the up-sells, which is the process of trying to provide a high-value product to the customer. Click on this and inside here we can search for all macaroons. First of all, we're going to go for the box of 12. We can add multiple products inside of hear such as the macaroons, boxer 24, and ease up-sell items will now be displayed in the shopping cart area. We can also cross cells and products to which is the process of displaying some products to the customer, which there may also be interested into. We can add some related products inside here, such as sum assaulted cupcakes. They can also select the box size for this particular product. Maybe also so much chocolate chip cookies, we'll go for a box of six. Then we can update our products. We can go ahead and add these two all over products too depending on the type of item you are selling. But remember to only do this with items which are related, we don't want to [inaudible] to come across as too salesy and other possible option he would maybe to cross-sell different items from our specialist diet section. But let's go back to our list of products. Down to all vegan brownies, we can click on edit into our link products. We can cross sell some of the other specialist diets products inside a here, for example, we can search for the gluten-free Brownies, update our products. We can now test this over inside of our sites, I'll go to the shop. The first one I did was for the macaroons in the box of six, let's click on this, which takes us to the full description. Down at the bottom, this product, we now seen a new section called you may also like, which includes the two of cells which were added for its macaroons section. If we now add this product to our cart, and then click on the "View cart section". We also see some of the cross-sells down at the bottom, use some alternative products which the customer maybe interested in purchasing too. We also have the options, add this to our cart before we proceed to checkout. Another thing we can do is to promote or highlights a particular product by certain is to be featured, we'll go back to our dashboard area and back into all products. For each product which we have listed, we can see that it is a star, which when click on for each line item, click in on this stile will set each won of these products to be a featured item. Let's start with our boxes of six, which is our gluten-free brownies is also all vegan Brownies, and also our macaroons still. Now if we go back to our site and click on the home icon, down at the bottom we have a we recommend section, which will now display all of the featured items which we reset.
15. Creating coupons: Creating discount coupons is something which is not only good for increasing sales, but it's also good for customer satisfaction too. Just like with most things, WooCommerce also has this code for adding coupons too. We can generate discount coupons in the main WooCommerce settings from the sidebar. Hover over this, and we can go down to our coupons section. From here, I'm going to create a coupon for repeat customers, offering them a 20 percent discount of future purchases. To do this, we can click on create your first coupon, and then we can set it the discount type. We can set a percentage, we can set a fixed price from any particular product, such as a $10 discount, or we can set a fixed amount from the total cart value. I want to go for a percentage discount and offer a 20 percent discount for the full order. We can also check this box if the coupon grants free shipping, which ours is not going to. We can also provide a expiry date if we want to. We also have a restriction section and we can do things such as only allowing this coupon to be valid if there is a minimum spend. We can also restrict these coupons to maximum spend to a single use, we can exclude sale items, and also restrict this to only certain products or categories too. Finally, down at the bottom, we can also restrict this coupon to certain customers by allowing certain e-mails too. We then have a limit section where we can also restrict the usage limits for the coupon, based on a product, on a user, or the amount of times the coupon is used. Now, all that's left to do is to give our coupon a name and since it is a repeat order coupon, let's call this REPEAT20. There is also a feature just below to generate a coupon code for us. With this in place, we can now save this coupon so it's active, and we can test this out over in the browser. I already have sum items inside the basket. Let's add some more. We can go for cupcakes, select our options, let's go for 60, head over to our shopping cart where we now have a section where we can add a coupon code. The coupon code which we just created was REPEAT20. Apply this, down to the total section and we can now seen our REPEAT20 coupon has taken effect.
16. Including a contact form: The next step for our e-commerce store is to add a contact form. This is going to go on our contact page and allow the customer to not only ask questions but also raise any issues to. To do this, we're going to take advantage of a plugin called contact form seven. We already looked up plugins early on when we added the WooCommerce plug-in it to our store. Once again, we need to go to the plugin section of the dashboard. Then we go to add new. The plugin we're going to be using is called Contact Form 7. We can do a search over the top for this or you may also found that it's under the popular section too. For me, it's currently the very first option. I'm going to click on "Install" and then we can activate this once installed. Like many plug-ins, it will give us a dashboard option. I'll click on contact and then we'll see all of the contact forms which you have set up. When we first install this, we have a sample contact form and we can either create a new one or edit this existing on. Don't worry if all this section looks completely new two you. This is just some code which is going to allow us to create our form elements. You don't even need to type and use this code out. Only you need to do is to click on any of these buttons to add a form elements. For example, if we wanted to add a text input whether the user can type sum text into a field or click on the text button and generate a new field with all these options. We can first set if this field is to be required, which means that the user must enter a value inside of this field before the contact form can be submitted. We can give this field a name and we can also provide a default value, which is going to be the initial value which you set in this field. Along with an ID of your class which we can use to style our elements using CSS, then insert the [inaudible]. This is all we need to do to add any new field or form. We can also apply things such as telephone number fields, a general number field, a text area, checkboxes and radio buttons and also a file input generated too. We can go ahead and edit any of these fields. But the moment this is a pretty standard form which is all the fields which we need. We have a text input for the user's name. We have an e-mail section. We have a text field for the message subjects. We then have a text area for the user's message. Then finally a submit button down at the bottom, which is going to send our form. If you have made any changes, be sure to save these. Then we need a weigh to include this into our pages. The easy way to do this is to copy the short code which is generated at the top of this form. We can paste the short code into any blog post or any of all pages. I want to add this over into our Contact Us page which we created early on. I'll go to pages and all and down to Contact Us into the Edit section. Then all we need to do is to click on this text here, paste in our short code. WordPress will automatically recognize this as a shortcode block. We can update our Contact Us page and head over to our site, head into the Contact Us link. Then we can see all of the fields which we reset in our contact form. We now have a Contact Us form, but where does this message actually go to. Well, to see this, let's go back over to the dashboard, into the contact section and then back into the edit section of our contact form. Along with this formed template, we also have some fervor options over the top. We have a male section and inside here we can see the email address where the email will be sent to. We can see the form section. We know that our emails have been sent from a WordPress bakery. We can see the subjects and its subject between these square brackets is going to be added in automatically from our form. When the user enters a text subject inside of this field here, this will then be placed inside of our subjects. The same with any of these sections, which is in the square brackets. These are going to be variable values. These will be inserted by WordPress. We have the user's name, the user's email, the user's subject. Then finally the actual message which has been sent from the user. After this, we have a messages section. This is where we can edit the message or the text which is displayed to the user. For example, when a message has been sent successfully, you will see this message which we can edit. We have a message fails and also lots of other messages too, such as when a field is required and there is missing information. We can now go to the contact form and test this out, all one thing to remember is very common, especially in development for our emails to go through a spam filter. Although this is not a huge problem in human development, if you do see emails sending problems when you have finished your sites and push this to production. To help with this, the creators of Contact Form 7 have created a best practices page to avoid common set of problems which can cause our email to be filtered out. If you do need this link for future reference, this is the one which is now currently displaying on the screen.
17. Creating a menu: If we take a look at our homepage and inside the header, will have links to all of our pages. All of these pages have been automatically added for us. But this is not currently ideal because we have links to our cart and also our checkout pages. However, we want to hide these until the customer is actually added something to the basket and is ready to purchase. To setup these links exactly how I want them to look. But I need to go to the dashboard and add new menu. Go to the dashboard on inside of the appearance section, we have a dedicated menus link. If we click on this to be taken it to our menu location, the first thing we need to do is to add a new menu name. The menu name I'm going to give this is header navigation and then click on Create. We then need to add some menu links is navigation we'll have lots of different options for adding links here. The first thing we can do is to add different pages. This is probably the most common use for a menu. Rather than having access to all of the links which we see inside of here. I'm going to customize this by clicking on view all. Then we can just add only the pages which we want to see. I want to go for the home, the blog, the contact, my account, and also the shop. We can also select all tube. I'm just going to add these five pages to our menu. We can then drag and drop these to reorder these. We can also nest these links to be a child of another link to. For example, if we wanted the blog section, be a subcategory of the home, only to do is to move this over to the right and we can now see this is a sub item. This now means that from our navigation menu, the user would need to hover over the home link, then reveal the blog link below. I want to keep this at the same level as all of the other links. If you wanted to, you can also add direct links to blog posts. We can add custom links where we can create our own Link URL. We can link to you over categories on our site. Also, will come as add some links to, such as the lost password link. However, though I'm just going to keep this as our five pages. If you wanted to, you could automatically enable any new page which we create to be added to this menu tool. I'm going to keep this as unchecked so we can customizes menu rather than have these pages appear automatically. The next thing to do is to set the location where we want this menu to display. We can either set this directly from here or we can also, as you said, this first, we can also go to the Manage Location section. We can assign any of the menus which you create to these three theme locations. These three theme locations have been set by the field crater. On the primary menu is the location where we have our current menu inside the header. This is all of our page links up at the top. If you were to reset our primary venue this new header navigation, save. This would now leave our five links which was created. The secondary menu, which is just below. This is also a menu which we can add inside the header. However, this menu will appear just to the left of our search box tool, the third option, which is for the handheld menu. This will allow us to create a separate menu which will only display on the small screen devices. For example, if we had a menu with a lot of different things, we may want to trim this down for our small screen menu. However though, since we only have five page links, I'm also going to display our header navigation on the handheld location tool, let's give this a save. We can also try this out in the browser so have our home link, a link to our blog, contractors, the accounts, and finally our shop section. These are our five links while five pages are not working. Even though we left out a couple of our links, if we go back to the edit menu section inside web pages, we missed out the link to the checkout and also the direct link to the cart tool. Probably use case this doesn't cause a problem because as soon as we select any of our options to add to cart, we can see at the top in the header, we can hover over this section and still see a preview of all of our items. We can go directly to our cart. [inaudible] fruit checkout, meaning that all of the links which we need are all still accessible from our header.
18. Payments with Stripe: For an e-commerce store, we also need a way to take payments for our products. WooCommerce allows us to integrate with many popular payment providers. In this video, we're going to take a look at how we can integrate stripe into our online store. It's a work which stripe to integrate this into our e-commerce store. The first thing we need to do is to head over to stripe.com and create a new account. Or you can use an existing one if you already have one setup. Pause this video and go ahead and go through the sign-up process. It's pretty simple. Using that an email address, your name, password, and then you're good to go. I already have a stripe account or is at the top. I'm going two click on the link to the dashboard. From the dashboard, we need to get some test API keys to work with. You can either get these directly from the setup just here, or if you go into the developer section, click on the "API keys." This will give us a link to the keys which we need. We can see that we are currently in test mode. We can also toggle this between the test and also the live production mode too. At the moment now since we're just testing things out, we are considering this as the test data. We can easily switches over later on. If the other sighed becomes a live e-commerce store, we will grab this key in just a moment. But the next thing we need to do is to go over to our dashboard and enable stripe inside WooCommerce. The dashboard head over to the WooCommerce section. We're going to enable this from the "Settings' link. Click on the "Payments" tab. Then we have access to all of these different payment providers. I want to go to the stripe section. Toggle this on and save our changes. We can now go over to the money section and head into the stripe settings. First things first, we are going to enable the test mode since our site is not yet in production. Then it's add or publishable and also the secret key too along with our webhook secret to. We already have access to these over in the striped dashboard. We still inside of the test data. Click to copy the Publishable key. We can first understand. Then we need to add our secret key too. Let's reveal and also copy this. Next we need to enable a webhook endpoints. This will enable us to receive notifications directly from stripe. This means that WooCommerce will get notified when events happen, such as a order was made, a payment was made, and we also have full control over which events we want to trigger. To do this, we need to copy this webhook endpoints, which is a direct link to our store. Control or Command "C" over to the stripe dashboard, and then into the web hooks link. Click on Add endpoint where we can paste in our endpoint URL. Then we need to declare exactly which events we want to send back to WooCommerce. If we scroll down, there is lots of different events such as if a user's account was updated, if a charge is being made, if a charge is failed. For this example, i'm going to select all of the charge events. We can see we have all 13 events. If we click on this, it will be if HR is pending on if it's refunded, if it's been successful. It's pretty much everything related to payments. Add our endpoints. Which will now give us access to a secret key. Grab this and we're going to paste this as our test secrets. Click on "Save." Now we're ready to test things out over in our store. To try things out over in test mode. Don't worry about having a credit card till you give this a try. Stripe gives us access to a dummy card, which we can use to test out our payment process. Over to the front end or to our shop, I already have sum items in the card. I'm going to go straight through to the checkout. We now seen in this checkout section we have a billing details section along with a credit card section too. Some of these fields are mandatory, so we do need to add some dummy data into these start fields. Just add any information inside of hear. Which will enable us to go through the checkout into the credit card stripe section. We need to add a credit card number inside here. I want to see from just above in test mode, we can use this dummy card number. Let's copy this over and then add any valid expiration date from today. Let's go for the 10, 28 and also the card code too. Anything is fine. Click on place order. I'm going to need to add a valid postcode for this to go through. Let's try this. A random phone number. Let's try to place the order once more. It's still not happy with the post or the zip code, so let's try won more. This is completely random, so apologies. If it is your exact postcode let's try placing an order once more. That one has worked. We now have the order received. This is now the section which the user will see once you have place an order. We can see the information about the totals, the order dates and also the products which was ordered. If we go back over to the scribe dashboard, click on the "Home link." We can now see the value of the payment which you've just gone through meaning this is all now setup. If you want to, you can also enable overpayment provided to you such as PayPal and is enabled in the exact same weigh inside of the Woo Commerce settings now with our payment provider and now in place, well now we are going to move on to managing stock orders and also reviews.
19. Managing stock, orders and reviews: Not only just WooCommerce give us the ability to sell products online, but it also gives us the tools to manage an online business too. By using the plug-in, we can also manage our stock, our orders and also the reviews too. Let's begin with managing our existing orders. As you would expect, if we go to the dashboard and enter the WooCommerce section, we have a dedicated orders link here. We can see we have one order currently placed, which was the one which you created in the last video. We also have the ability over the top, to add a new order manually and since it's also hooked into the WooCommerce system. This would also update things such as product levels, if we enabled stock management. Back over to the existing orders, we can then click on the new order which we created in the last video. We see all the order details such as the customer information, the shipping and the billing address, along with all the items and the quantities which had been ordered. You see the shipping rates, all the totals and we can also obtain the order status as we fulfill the order too. We could place on hold, we can mark as completed and we can even cancel and refund the order two. An interesting thing is over on the write we have these older notes section. Not only can we add our own notes, money leaf with the order, we can also see sum of the stripe web hooks which were created in the last video. Once the stripe payment charges being created, this unsent a web hook or a notification. But too will commerce and this is now being placed in our notes section. We can also see that once the order status change from pending processing, this note was also added here two above this we have an action section and we have some options such as recent in order notification and also the ability to e-mail an invoice or the audit details to the customer. This is how we can add and also manage any existing orders from WooCommerce. Also as a sighed note, this ordinate section, we would also get notes appeared on here if we were to enable stock management for any of these products. Also from this WooCommerce order section, as we briefly looked at earlier when creating products, we can also manage stock levels from here too. What we do this by clicking on the stock option from the very top. Currently we don't have any low stock alerts. But if we wanted to enable this, we need to set this up for each one of our products. Let's try to see one of the products which have inside of here. Let's go for the chocolate, your muffins. This will take us directly to the edit for detection. Down in the inventory. We can enable stock management. Let's set a stock quantity. We value with 10 and then a low stock threshold be equal to nine. This means that we enable 10 of these products to bee available in our store and then it wants a single order has been placed, reducing our stock level to nine, would then get an alert in the dashboard, updates our products. Currently because our stock is still set to be 10. We still see that our stock is in good shape. Let's go back to the front end and if we make an order for all chocolate chip muffins and the box at 12. Integral shop the boxes 12 muffins we can add this to our cart and then go directly through the checkout. Literally WooCommerce has saved all my details from our last video. All we need to do is to add the stripe credit card number, any expiry date and also a credit card. Go to place some order and now if we go back over to our dashboard and refresh, take the stock levels. We now, see this appears in our stock level section and we can also update the stock directly too. Also WooCommerce from his same menu enables us to manage our reviews too. If we click on this, we don't currently have any reviews to show. If we do want to add reviews, the first thing we need to do is to make sure that these are enabled in the settings. We can enable these from the WooCommerce section down to settings. From here, click on it the products tab and make sure that the enabled review section is checked and then we can save our changes. Back to our store, let's go to any of our products and click on to expand into the full product view. We don't currently have any reviews for this current product. Click on this. We can also leave our own review too, they going to understand writing and also some text and then submit a review which will then appear at the bottom of the product. The same reviews are also visible from the backend too, if you go into the comment section. Just like when a user adds a comment to a blog post, we can now see the comment or the review which we just created and we can also edit or remove this too.
20. SEO with Yoast: SEO or search engine optimization is the process of optimizing other content, so it can be more easily found in search engines. After all, there is no point in having an online store. If we don't have any customers, you can find it. It will help optimize our content so it can be found more easily. There is a popular plugin called Yoast. To access this, we need go over to the dashboard and add this as a plugin. As you already know, we can access our plugin section directly from the menu and then go down to Add New. Yoast is a pretty popular plugin, so you may also find this under the popular section. Mine is currently in position too, but if you don't see this here, you can search from the search bar up at the top, click ''Install'', activate our plugin, and once this has finished installing and activating, the dashboard will now have a custom SEO option. The first thing I'm going to do is to click on this button just here which is going to create an index of all of our content. This will help Yoast to speed up our site. Once this is done, we're then going to run through the configuration wizard and we can access this with the general option from the menu. Click on this wizard, and then just like when we set up the WooCommerce, all we need to do is to run through a series of questions to get this setup. Initially, our site is still under construction so we can click on this. Click on ''Next'', and the next thing we need to do is to select the type of site we have. I was just going to be a online shop. We can then add the personal information relating to our business and also an image too. I'm going to skip this for now. Then the next question is about search engine visibility. You can declare what type of content we want to appear in search engines. We have the option to display posts or pages and also our products too. Let's leave all three of these visible. We don't have multiple offers, so I'm going to select the no option. We then have the option lets you set our website name and also the separator which is going to go in-between each one of the words, so I'm going to change this to be WordPress bakery. The the next step we have so much tracking information, I'm going to leave this option has no, skip the newsletter, and then we're all done with the setup. Just as when using the many plug-ins in WordPress, if you don't know the answers to some of the questions during the initial setup, that's completely fine. All of these options are usually configurable from the plug-in options. Along with all of these general options which we just setup and the options from the SEO menu. We also have a SEO section now provided on all of our pages, hosts, and products. We can see this, we'll go back to any one of our products. Go into the product section, from here, we can then select any one of our products. I want to go for the chocolate chip muffins under the box 12. If we click on the edit section, we now have a new Yoast SEO section where we can improve the search engine performance for any one of these products. The first thing we need to do is to add a focus key phrase which is going to be the one which we want to concentrate on for this particular product. Our key phrase is going to be related to our product, so I want say chocolate chip muffins. After this, the plugin will then generate a preview of how our product will look on the mobile or the desktop result inside of a Google search. At the moment we can see we have an unhappy read phase for our analysis, so this means we need to make some changes to improve the search engine results or this particular product. The main problems which we need to focus on first are these red ones, we then have the orange ones which are recommended improvements, and then we have the good things which we're doing correctly in the green section at the bottom. We can see our key phrase is a good land, if it's also a unique one which we've not used before. We also using the product title in this key phrase and also in the slug too. To improve this, we're going to click on the "Edit snippet, loosen it" just above. This is going to give us some five options such as our slug, our description where we can focus on some of these issues. This Meta Description section will satisfy one of these issues which we see here. We see that no Meta Description has been specified so we're going to improve this by adding some text which is related to our product. I'm going to say delicious chocolate chip flavored muffins baked fresh today, and then these use our famous family recipe used for over 20 years. Immediately once we have done this, we can see one of our red problems has now been removed and we can also insert variables into this description too. We're also going to insert the variable which is the title of our product, so this will now say chocolate cheap muffins, box at 12 at the very start of our Meta Description. One of the other issues is the length of the text which is inside of our product. We don't currently have a description for this product, so I'm going to use some of the same information we added to the Meta, and then I'm going to go open and add this inside of our description section. Then we want to add some additional information of box of 12, packed securely for next day delivery, and also all muffins can be stored for up to five days after ordering. If we scroll down, we can see in the SEO section that the text length only contains 39 words and this is lower than the recommended 300. If you were to push this to production and uses as a real lifestyle, it is recommended to add more content into the description section. Along we'd also add in some more internal links to different products and also some outbound links to other websites too. Notice we also have some recommendations such as adding the old time to our images, we did mentioned this earlier too and it is recommended for our production sites, and it's also recommended to increase the length of our title too. After this section, we're go down to the art related key phrase. This is a extra key phrase which can be used if we purchase the premium version of this plugin. We only have the free version, so I'm going to leave this. We then have the cornerstone content and we can mark any of our products as cornerstone content, which is generally used for the most important product pages or posts on our site. Something which you want to focus on as a core part of our business, so if our business was famous for chocolate cheap muffins, we will consider adding these as our cornerstone content. We have the Advanced section down at the very bottom and inside of this Advanced section, the first option is if we want this product to be enabled or visible in search engine results. By default we have this set to be yes, but we can tailor this for each individual products. Remember, this our product is not currently linked into anything else. Let's see if it's here where we can set the search engine to also follow this link too and inside here we can add settings such as no index or no follow and we won't be covering this in detail for this course but the general idea is this can prevent a lot content from being indexed by search engines such as Google. We would maybe want to consider excluding certain products for legal reasons or content which is low quality or even unrelated to our brand. Finally, we have a canonical URL section which may sound a little strange if you've not heard this term before, but it's simply way of dealing with duplicate content. If we consider these two links on the screen, both of these links will point to the same chocolate cheap muffin, but we may want to include this product in more than one category. Let's say muffins and specials. Now, in a search engine, if a customer searches for chocolate cheap muffin, which one of these two links should we display? Well, option for which one of these links to display is totally up to us and it's inside of this canonical URL section where we would set the main one which wants to display inside of the search results. If we scroll back up alongside of our SEO tab, we also have a readability tab too, where there is also some recommendations about how we phrase or how we word our product descriptions. We have a Schema tab where we can describe exactly what type of content is displayed on this page. We have options such as a generic webpage, a frequently asked questions page, and also this a Item page. Finally, we have a social tub too. This is where we can override the title, description, and images, which is going to be used when it shared on social media, such as Facebook or Twitter. A lot of these SEO practices are simply a case of playing around with different keywords and descriptions to make sure our site is as optimum as possible for search engines. Also remember, you can use these exact same tools. These are also available in the elite section above all pages and also our blog post too.
21. Migrating to a live server: Once your site is finished and you are happy with how it looks, you will then go on to want to push this to the live web server. This video is optional and you don't need to follow along with this. If you were happy just developing locally, and you were not ready to push your star to production. However, though this video is here as a reference if you need it and you're going to need a hosting provider. There is many different WordPress hosting providers you can use, and for this demonstration, I'm going to be using the site ground. If you are using a different hosting provider, it is usually a pretty straightforward process to set a WordPress often evolve in a warning click installation. For a site ground, we do need to register and then go into the My Account section. If you want to use site ground, I have an affiliate link which you can use, which is on the screen, and this will give you a one month of free hosting. This is completely up to you, you don't need to use this link. You can simply go over to siteground.co.uk and you can sign up from there. Once you are on the My Account section, you will need to go over to the websites link. Here will have a link to our live site. We don't have this setup here, so we're going to go ahead and create our new website. From Site Tools which will then give us the option to install WordPress and also different types of websites too. Run the dashboard we're going to go into the WordPress link where we can install. We are using Woo Commerce pro for this installation, which is going to to select eight basic WordPress installation. This is because we are going to migrate over all of the information from our local sites, and this also includes the WooCommerce plugin. Remember though websites do often change and Siteground may look a little different when it comes to doing your version. However, though, most of the options will be pretty similar, and it's just a case of finding the WordPress installation. Once you have selected this, we can then select our languages, you can add the administrator information to login to our site. You will need a password too, and also an e-mail address. If you want to, you can also turn it into a WordPress multi-site. But I'm just going to skip this and sets off the installation. Once this is done, we have a link to our site where we can visit the admin panel and also the live site. Just like when we first set this up locally, this will setup a default WordPress installation using the standard theme. If we go to the backend link, we can skip the WordPress setup procedure since we are going to be using all of the information from our local sites. This now evolves a two-stage process, we need to go to our local site. I'm going to to export all of the data, then we need to go over to our live site and then import this file. To export this data, I'm going to go to plug-ins and then add New. In the plugin I'm going to use for this is called, all in one WP migration. Then we set up the installation and then we can activate this, once it's installed. This will then give us a direct link to this plug-in where we have the option to export our site, there is various places we can export this to but I'm going to export this as a file. Once it is being generated, we can click on the download link, and this will then be downloaded onto our computer. Over to our live sites we're going to need to import this file, and to do this, we're going to use the exact same plug-in, so go to plug-ins and add new and search for all in one, install this plugin. This time we're going to go to the import link where you can either drag and drop all file or you can select this from our picker. From here mine is in the download, so let's select this file, open it up and we're going to begin the import. Once it has uploaded we get a message which is just going to warn us that this is going to override all of the existing data. That's completely fine since this is a fresh WordPress installation, so we don't have any data to suggest. Let's finish this process, and now if we go over to the frontend of our site and refresh, we then see our new site will reflect the one which we had on our local host. Another essential feature we're having a live E-commerce store is to make sure that we have a SSL certificate all setup. We can do this by going over to the side ground dashboard and enter the security section where we have a SSL link. From here we can select a new certificate which I'm going to use via the, let's encrypt service. I would have mindsets job, so all you need to do is click on, let's encrypt, and then click on the get button. This will then issue a new certificate which is going to encrypt the data between your site and the server. This means that when a user enters a credit card detail or any of that personal information, this will be encrypted and more secure. Just to finally finish things off, we're going to go back over to our site ground installation dashboard, and then from here we're going to enable search engines to be able to call our new site. Go back to the install section under the WordPress tab, and then from here we can click on this button, which is going to take us to our admin panel for the backend of our WordPress site. We can enable this by going to settings and redone, and early on we checked the discourage search engines button because we were still in development. Uncheck this and save our changes, and this is going to make our new live site also more discoverable on search engines.
22. Thank You: Thank you for taking this course and I hope it has given you an insight into the world of e-commerce. Hope you now use these newly-founded skills to go off and build something great.
Chris Dixon, Web Developer & Online Teacher
