Hello,

Sign up to join our community!

Welcome Back,

Please sign in to your account!

Forgot Password,

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Sorry, you do not have permission to ask a question, You must login to ask a question.

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Home Latest Topics

  • 282
  • 282
Kevin Stratvert

WooCommerce WordPress Tutorial: Build Online Store with Elementor Hosting

video
play-rounded-fill

Hi everyone, Kevin here. Today we’ll learn how to build your very own e-commerce website that converts visitors into customers using Elementor together with WooCommerce. Elementor makes it so simple and intuitive to pull together your very own online store. And best of all, you don’t need to know anything about coding. It’s all drag and drop. If you’ve never heard of Elementor, they’re one of the most popular website builders powering over 16 million websites, and they now also host websites. WooCommerce is one of the most popular e-commerce solutions used by over 4 million stores. You’ll be in great company with Elementor together with WooCommerce. In this video, in partnership with Elementor, we’ll build our very own online store, including a homepage, we’ll list products for sale, set up payments, and so much more. If you follow along, by the end of this video, you’ll have your very own online store. All right, let’s dive in. To get Elementor, head to the following website. You can click on the card in the top right-hand corner, or I’ve also included a link down below in the description. On this landing page, you’ll see a variety of different e-commerce hosting plans. If you’re just getting started, the Sell Pro and Sell Pro+ plans are likely your best bet. I’ll be using the Sell Pro plan in this video. All plans give you an incredibly fast store, that way customers don’t leave while waiting on your website to load. You get something called Shoptimizer, which is a WooCommerce theme, and it’s designed to convert visitors into customers, and it’s also optimized for search engines, that way you get lots of organic traffic. You also get enterprise-grade security, so your customer information stays safe. One thing that I really like about all of these different plans is that they include 24/7 real human support. If you need to talk to someone on the phone, you have that option. You also get a 30-day money-back guarantee, so that way you can test it out to see if it’s the right fit for you. If not, no worries. Once you finish signing up, you’ll land here in the main Elementor dashboard, and here you can see all of your different websites that Elementor is hosting for you. If you don’t yet see your website here, in the top right-hand corner, you can click on this button to create a hosted website. You can then choose whether you want to create a brand-new website or migrate an existing site. In this video, we’ll set up a brand-new website, so we’re starting from scratch. Once you finish adding your website, under Websites on the left-hand side, you should see your site. Let’s start by hovering over the website, and then click on this button that says Manage This Website. This now drops us on a screen that lets us manage all aspects of our website, like our domain, emails, and backups. Let’s start by setting a name for this store. Right up on top, currently it’s called New Website, but it’s not a very good name. We need something a little bit more descriptive. Let’s click on this Edit Name icon, and right down here, we can change the name of this website. I’m going to call it the Kevin Cookie Company, and I’m going to use this website to sell cookies online. Here, I’ll click on Save. Right up on top, underneath the name of this website, you’ll see our current address. It’s spibnkvl.elementor.cloud, and I don’t think we’re going to attract many customers with a domain name like that, so ideally, we would get a .com, .net, or .org. Now right down below, it says this site is not connected to a custom domain yet. Right over here, we can connect a domain. You can point an existing domain name to Elementor. So maybe you bought it with an external provider, you can then point it here, but maybe you don’t have a domain name yet at all, in which case you can buy a new domain, and Elementor partners with Hover for you to purchase your domain, and then that’ll point to your web hosting. Now, in this video, I’m going to use the default domain that they give, but do know that you can connect a professional domain to your hosting. In the top right-hand corner, I’ll click on this X icon. The last item that you likely want to configure before we start building our website is an email address at your domain name. Over on the left-hand side, let’s click into emails, and right up on top, you have the option to get a business email address. So, once you’ve connected your domain name, you can then send email from that domain name. And, you have a few different options. Elementor partners with Zoho, Google Workspace, and Microsoft 365. You can choose which provider you want to have manage your email. This will make your communications with customers a lot more professional by using your domain name. Now, in this video too, I’m not going to set this up, but do know you can configure that here. In the top right-hand corner, let’s click on the X icon. Now that we have some of the foundational items out of the way, let’s set up our store. Over on the left-hand side, let’s click on websites and then hover over the website that you just added. Right in the middle, you’ll see an option for OpenWP Dashboard or Open WordPress Dashboard. Let’s start by clicking on that. This now opens up the WordPress Dashboard, and we’re here to build an online store, and we want to use WooCommerce. Over on the left-hand side navigation menu, right in the center, you’ll see an option for WooCommerce. Let’s click on that. And Look at that! Welcome to Woo. Since this is our first time setting up a store, down below, let’s click on this button that says, "Set up my store." You’ll now get a first run flow that asks you a few questions about the type of store that you’re setting up. Right up on top, I’m just starting my business. Down below, let’s click on continue. This next screen will now ask you a few different questions about your store. I’ll stick with all these defaults, and then down at the bottom, I’ll click on continue. On this next screen, you’ll see a variety of different features that you can either turn on or off with WooCommerce, and I think a number of these are very helpful, so I’d recommend leaving them on. For example, if you would like to accept payment, say, via credit card, you can use something called WooPayments. Or, let’s say, for example, that you’re planning on shipping physical goods to customers, you can use something called WooCommerce shipping to print out shipping labels. Down in the bottom left-hand corner, if you need to calculate tax rates, depending on the locale where you’re sending a product, WooCommerce tax can help you. Now, over here, I’ll turn off a few of these features because I don’t think I need all of them, but keep in mind, you can always turn them on or off later on. Now that I’ve configured this, down at the bottom, I’ll click on continue. Look at that. We’re making some great progress. To build our online store, first off, we need to add some products. And over on the left-hand side navigation, let’s hover over the option that says products, and then let’s click on add new. This now drops us on a page where we can start building out the details of our first product. Right up on top, I’ll type in the product name, the Double Chocolate Chip Cookies, one of the best sellers we have here. Right down below, I can type in a product description. Right in here, I’ll type in my description. Now, right up on top, you have all these different formatting controls that you can use to get the text to look the way you would like it to look, but I think that looks good. Let’s now scroll down to the general details. Currently, I have this set to a simple product. When I click on this dropdown, I have many other options, like selling variables of this product. For example, if we want to sell a Double Chocolate Chip Cookie with, let’s say, white chocolate chips, I can do that. We’re not going to dig through every single option here. Instead, we’ll look at the core functionality. The thing to keep in mind is that WooCommerce powers millions of stores. If you need some type of functionality for your store, chances are WooCommerce already has that setting. Right down below, let’s set a price for this box of cookies. Right here, for the regular price, I’ll set it to $25. You can also set a sale price, and in fact, you can even schedule when that sale goes on, so you get to automate all of that. Over on the left-hand side, you also have some additional settings. For example, you can set the inventory. You could enter in a SKU. You could indicate whether it’s in stock or out of stock. You can even manage your stock directly through WooCommerce. On the left-hand side, you can configure shipping, so how heavy is this item? You could even link it to other products. Again, many different options and well worth exploring what some of that functionality is. Let’s now scroll down a little bit. Here, we have the option to enter in a short description. Over here, I’ll type in a short description of the product. If you’re struggling to come up with descriptions and also images for your products, Elementor offers an AI solution that’ll help you generate some of them. I’ve included a link in the description that’ll provide more information. For now, let’s scroll back up this page and then look over on the right-hand side. Right here, let’s set a product image. This opens up a dialog and you can now pull an image from your computer. Here I’ll upload a photo of our delicious looking double chocolate chip cookies. Right here, we see it and I’ll select this one. Over on the right-hand side, I’ll enter in some alt text that describes this image. They’re double chocolate chip cookies. This is especially important for screen readers and also search engine optimization. For now, I’ll leave all these other settings as is and in the bottom right-hand corner, let’s set this as the product image. Now look at that, that’s beautiful. I’ll scroll down a little bit more and let’s click on add product gallery images. This allows you to add additional images of the product and I do have one more image. Over here, I’ll drag and drop it from my computer and then upload it. That looks great. Over on the right-hand side, let’s also set some alt text here, double chocolate chip cookies and at the bottom, let’s add this to the gallery. Next up, we can set a category for this product. So over here, I currently don’t have any. It’s currently uncategorized. Let’s click on add new category and here, I’ll create a category called cookies and there’s no parent category, so I’ll leave that as is and then click on add new category. Next up, we can also add product tags separated by commas. So, for this one, I’ll type in chocolate, let’s go with new and then this is also a baked product, so I’ll type in baked and then click on add. Now you might be wondering what is the difference between a category and a tag? Think of a category as a broad grouping that will help you organize content on the site while tags on the other hand are more specific and describe the content in greater detail and wouldn’t be used for organization. This now all looks good and I think I’ve finished entering in all the details related to this product, so in the top right-hand corner, there’s the option to publish. Let’s click on this. Look at that! We’ve now added our very first product. Over on the top left-hand side, here, we can now view the product in our store. Let’s click on this to see what it looks like. And look at these beautiful cookies, double chocolate chip cookie. Here we have the price, we have the description, we also see the category and the tags and here we see that photo and when we hover over, we can see all of that delicious detail. Here we can see the other photos from the product gallery, so there we have that second photo and as we go down, here we have that description and you could even show reviews. Now of course, we still have a lot of work that we need to do to build out this website. Right now, the top just says Kevin Cookie Company, just another Elementor hosted website. So, why don’t we go back to WordPress and we’ll continue working on this website. Back within WordPress, over on the left-hand side navigation, let’s scroll down and you’ll see a category for appearance and within this menu, you’ll see an option for themes. Let’s click on this. This now drops us in themes and right up above, you can see the theme that we currently have active called Hello Elementor. To the right of that, we also have a premium theme that you get with the Elementor hosting e-commerce plans called Shoptimizer. Now this is a premium theme that’s designed for WooCommerce and it prioritizes speed and conversions. And as a cookie business owner, I like the sound of that. I want to convert as many visitors to my website into customers, so this theme seems like a perfect fit. Right down here, let’s click on activate. Look at that, the theme is now active. Of course, we want to customize it, so right down below, here I see the Shoptimizer theme. Let’s click on this button that says customize. This now drops us in a screen where we can customize what this theme looks like. Now one thing to note is all of the different pages and all the different posts throughout our website will rely on this theme, so the changes you make here will show up throughout your website. Let’s start by setting a logo, so right up on top, let’s click on this edit icon and here we can modify the site identity. Right over here, let’s select a logo. This now opens up a dialogue where you can drag and drop in a logo file from your computer. So over here, I’ll select my logo and then drag and drop it in. That looks fantastic. I’ll select this and over on the right-hand side, I’ll type in alt text. Down in the bottom right-hand corner, I’ll click on select. Over here, I don’t want to crop the image, so I’ll click on skip cropping. Look at that. Right up in the top left-hand corner, we can now see the logo as part of the theme. Over on the left-hand side, let’s also set a tagline for the website. I’ll type in the official Kevin Cookie Company store and underneath that, you can also set a site icon. This is the icon that appears as part of the browser tab. It’s also known as a fav icon. I’ll click on this. Here too, I’ll drag and drop a file from my computer. Here I have a nice image for the Kevin Cookie Company. Over on the right-hand side, I’ll click on select. Over on the left-hand side, you can see how that site icon will appear on a browser tab. That looks great. Right up on top, let’s now click on back and then let’s click on back again, and this brings us back to all the different settings that we can modify. There are many different settings that you can configure related to the theme of your website. You’ll be able to get your website to look exactly how you want it to look. We’re not going to walk through all the different settings. We’ll look at just a few of them so you get a sense for how you can configure your website. Let’s start by clicking into colors. Here we can modify the colors of any aspect of the website, so the top bar, the header, below the header, the navigation. Now looking at the navigation here, it currently has this black or dark gray background, and I would prefer for it to match the blue of the logo. So, right here, let’s click into navigation. Here I can see all the different colors used as part of the navigation. Here I see the navigation background. I’ll click on this and here’s that nice blue color for the Kevin Cookie Company. I’ll select that and we see the update flow through directly to the navigation. That looks great. Right up on top, let’s go back and let’s go back again. I’m satisfied with all of the colors used throughout this theme. I also want to make some changes to the different links provided as part of the navigation. So, right down here, I’ll click on menus, and currently it’s just using the default menu, but I can also create my own menu. I’ll click on create new menu, and right up on top, I can give it a name. I’ll call it main and I want it to appear everywhere. I’ll check all the different boxes and then click on next. And right up on top, you’ll notice that the navigation disappeared, but don’t worry, we can add items to the navigation. On the left-hand side, let’s click on add items, and you can add just about anything to your navigation. You can add custom links. You can refer to specific pages on your website. So, maybe I want a link to the homepage, my account, the checkout, the cart, the shop. I can add all of those. As I select them, you’ll see it appear as part of the navigation. You could also add posts, buttons, products, categories, or tags, product categories. So again, many different options to get this menu to look exactly how you want it to look. Now, I actually don’t really need to change the defaults. I thought they were pretty good. So over here on the left-hand side, I’ll click on delete menu and that’ll bring me back to what the default was. But keep in mind, you can modify this navigation to match exactly what you need. Up on top, let’s click on back, and here I am back into the main settings. I’m now all done making changes to the theme. So up on top, I’ll click on publish, and it looks like it’s now published. So, in the top left-hand corner, let’s close out of this. Now that we’ve configured the theme for the store, I now want to edit what some of the pages look like, specifically the homepage. So over on the left-hand side navigation, let’s click into pages. Here I can view all the different pages that make up my website. So, I have the cart, the checkout, my account page, and here I see all the different pages. Now let’s say I’d like to add a new page. For example, maybe I want to add a privacy policy. Right up on top, I can add a new page. But I want to modify the homepage. So right down below, here I see something called the sample homepage, and it’s currently set as the front page of my site. However, I don’t want to refer to it as the sample homepage. I simply want it to be the homepage. So right over here, let’s click on more options, and there’s the option to rename the page. I’ll click on that. Let’s remove sample and then click on done. So now I’ve renamed this to be homepage. There it is. To edit the page, let’s click on this text that says edit with Elementor. Elementor will make it so easy to get a beautiful looking website. Let’s click on this. This now opens up the Elementor editor, and we can use this to pull together our website. Over on the right-hand side, we see the canvas, and this shows us what the homepage currently looks like. Now there’s not much here, and we have a bit of work to do. The first thing I noticed is right here at the top of the page, it says homepage. But I think when people navigate to the homepage, it’ll be pretty obvious what page they’re on, so I don’t think we need to show this text. Right up on top, let’s click on the page settings gear, and this opens up a pane over on the left-hand side. Right down towards the bottom, there’s the option to hide the title. Let’s toggle that on, and there we see that the title goes away. Perfect. Now looking down at the page, I want there to be some type of hero image at the top of the page with maybe a heading and then some text, and then a button that brings visitors to the shop. Now I could try building that on my own, but Elementor has recently incorporated AI to help us with this. Over on the right-hand side, you see this icon that allows us to build with AI. Let’s click on that. This now opens up a text field at the bottom of the page that we can use to prompt the AI. Now it has some really neat capabilities. Over on the left-hand side, if we click on this plus icon, you can reference a website to use that as inspiration, or you could even create variations based on their template library. It’s pretty cool. Now right over here, if we click into the text field, if I enter a forward slash, this shows example prompts that you could enter in. Just to give you some inspiration. Now, let me type in some text. I want a hero image in the background, and I’d like a header and some text underneath, and I’d also like to include a button that brings visitors to the shop. I mean, of course I want to sell, so let’s make it as easy as possible to get to that shop. Over on the right-hand side, let’s now click on Generate. Now right up on top, we have three different options. So, it looks like it read my text, and here it has three variations. Not bad. Now I can also regenerate to see some additional options, but I think this one in the middle will work well. So, I’ll select that and then click on Use Layout. And there, it’s now incorporated this layout into my website. Now I would like to set a hero image. So right up on top, I’ll click on this icon, and this opens up all the different controls that I can use to edit this container. I want to set an image. So up on top, I’ll click on Style. And right down here, I can set an image. I’ll click on this. Right over here, I see an image that I already uploaded of our factory, so I’ll click on this image, and in the bottom right-hand corner, I’ll click on Select. I really love the hero image, but it’s a little bit hard to read this text against this image. So over on the left-hand side, let’s scroll down a little bit, and here I have the option to add a background overlay. Let’s click on that, and over here, I think just a classic color will work well. I’ll click on this, and here I have the option to add a color. So, let’s go with maybe a white. And over here, I could adjust the opacity. So here, I want it just so it’s slightly visible, but the text is still very easy to read. I think that looks really good now. Next, I want to modify some of the text on the page. I mean, it’s just a generic welcome to our store. I mean, we could be more creative than that. I’ll click on this element, and over on the left-hand side, I can edit it. I can either type the text directly here, or I could type the text in over here. I’ll type in deliciousness in every bite. That’s our tagline here at the Kevin Cookie Company. I also want to change this text right here, so I’ll click on this, and over on the left-hand side again, I could change this text. But I’m not quite sure what to say, so let me click on edit with AI. Right over here, I see the current text. Let’s click on new prompts down below, and here I can describe the text and tone that I want to use. So, I’ll type in some text that says write one and two sentences about why the Kevin Cookie Company is a great place to buy cookies. And I’ll include some more details. Then let’s click on generate text. And there, I have some text. I think that looks fine. So down below, I’ll click on use text. The beautiful thing is you can use AI to help you come up with the text and descriptions throughout your website. After the text, I have a button that should bring customers to the shop. But when I click on it, over on the left-hand side, I get all the different properties for this button. And right here, I see the link, and it doesn’t currently go anywhere. So, I need to modify this. Up on top, I see a link for the shop. I’ll right click on this, and let’s copy the link. Then over here in the link field, I’ll paste that in, and this will now direct visitors to the shop when they click on that button. That’s perfect. Along with modifying the link, I could also modify the text. I could also modify the style. And you also have advanced settings to get this button to look exactly how you want it to look. Along with using AI to build out your website, you can also simply drag and drop different elements onto the page. And this is what Elementor is well known for. So here, if I scroll down just a little bit, here, I have this field, and it says drag widget here. So, let’s add, first off, a new container. I’ll click on this, and let’s go with the flex box. I’ll click on that, and I have different structures that I can choose from. I simply want it to go from top to bottom, so I’ll go with this first option. But again, you have all these different variations that you could choose from. Here, I’ll click on this option. And this is now inserted a new flex box. Now, right over here, we could click on this plus icon. And here, I have all these different widgets or elements that I can now insert into this flex box. Now, I think it’d be helpful to maybe show a product gallery of all of our different cookies. So first off, I want some type of heading that maybe says new arrivals. So over here, I see all my different types of elements that I could insert. And at the very top, I have one called heading. So, I’ll simply press and hold on that, and I can now drag that over and drop it into this flex box. And here, I can now add my heading. I’ll click into this, and let’s edit the text to say new arrivals. I now want to add a gallery with photos of our different products. So, if I go right up to the top, here I have the option to add elements. And when I click on that, that changes the pane again to all these different elements, and now I could scroll through and look for one that would show a gallery. Along with simply going through this list and looking for one, up on top, I could also search all the different widgets. And here, I could type in gallery. Here I see a basic gallery. I can press and hold on that, and here I can now drag it in and I can position it exactly where I want it within this flex box. I want it to be under the text new arrivals, so I’ll simply hover over here and then release, and this is now inserted a gallery. Of course, there are no images yet for this gallery, so with the gallery selected, when I select this item, I get all the properties over on the left hand side. And over here, I see where I can add images. I’ll click on this. This now opens up a dialogue where I can upload images for this gallery. And just like we’ve seen throughout this video, here I could simply drag and drop images from my computer and then upload them. And here we see all the images loading. Now that it’s finished uploading all of these different images, here I’ll make sure all of them are selected, and then in the bottom right, I’ll click on create a new gallery. Now over here, I could reorder or I could add captions, but I’m happy with the order, so let’s click on insert. And right there, it’s now inserted my product gallery. Now, if I click on the gallery, that opens up all of the properties over on the left-hand side. So, let’s say for example, maybe I don’t want small thumbnails. I want them to be a little bit larger. I could click on this dropdown and let’s go with medium. And if we look over on the right, the images are now a little bit larger and you can see more of that delicious looking detail. Now let’s say I actually want to show the new arrivals above this hero image. I could very easily do that. And it’s just dragging and dropping the content. Up on the very top, we can click on this icon to show the structure of the page. And here I see all of the different containers and all the different elements that make up this website. So, let’s say let’s hide the hero. I could click on this eyeball icon and that hides the hero, and now I see this container at the very top. And here I could show it again. If I want to shift the order, I could simply press and hold on this, drag it to the top and that places the new arrivals at the top of the page. Of course, I want my hero image to be at the top, so I want to move this container back down. So, I could simply press and hold, drag it to the bottom and that places it down at the bottom of the page again. Not only can you drag and drop the top-level container, but you could also drag and drop the different elements within a container. So here I could take the heading and I’ll move it under the gallery there we see it underneath or here I could shift the order again. So, it’s really easy to get content where you want it on the page. Along with using AI and building out your own containers, you can also rely on templates. If I scroll down just a little bit, here we have another container that we can add. Right here, there’s the option to add a template. When I click on this, this opens up the template library. Here we see all sorts of different blocks that you could add. You can even add entire pages, and here we see all sorts of different page layouts and you can even favorite your own templates. I’ll click back into blocks and over on the left-hand side, we have this dropdown list that’ll help you filter down to specific categories. Let’s scroll down a little bit, and I think one thing that would be really nice to have on this page is some type of customer testimonial. Right here, I see the option for testimonials. I’ll click on that, and here I see different design options. And I think this one might work well. So over here, I could click on insert or we could even generate variations using AI, but I’ll click on insert and this will now bring it onto the page. And right here, we now see the customer testimonials at the bottom of the page. So, this is yet another way you can add content to your page and start building out your website. And look at that. I now have customer testimonials on my site, but one thing that’s really glaring, you’ll notice that the heading doesn’t match the previous heading for this section. Now I like how this is centered. So, I’ll click on new arrivals and let me actually center this text as well. So that looks good, but this is still using a completely different theme color and the size doesn’t at all match. So, I’ll click on this heading right here and that opens up all of the properties over on the left-hand side. Let’s click into style. And right here, I can see the text color and also the typography that it’s currently using. And you’ll notice that this is a custom color and also a custom font and size. I want it to use the global theme that we set previously. So over here, I’ll click on the globe icon. And when I click on that, here I could set it to use the primary color. Nice. The color is matching now. Let’s click on this globe icon again, and I also set it to the primary font. And when I click on that, they now match up. That looks a lot better. Now, of course, we could continue building out this page. We could tweak the different content, but hopefully this gives you a really good feel for how you can start to build out your pages. You can use AI, you can drag and drop different elements into containers, or you could simply rely on templates and then customize those templates. You have lots of different options. I’m now all done modifying this homepage, so in the top right-hand corner, let’s click on publish. Now that we’ve published the website, over on the right-hand side, we can click on this dropdown and let’s view what this page looks like. Look at this. It’s coming together nicely. Here we have our logo. We have our navigation up on top. Here we have our hero image. That looks really nice. New arrivals and our customer or client testimonials. Now right up on here, if I click on shop now, this brings us to the store. And there we can see our first product, the double chocolate chip cookie. This is coming together really nicely. Let’s now close out of this preview. Back within Elementor, in the top left-hand corner, let’s click on the Elementor logo. And if we go down, let’s click on exit to WordPress. We’re making great progress. Now that we have the product and the homepage set up, let’s look at some of the additional settings that we need to configure. Now that we’ve added a product to our store, we’ve modified the theme, and we’ve also set up a homepage, we need to configure a few additional settings. Over on the left-hand side navigation, let’s click into WooCommerce, and then let’s go into settings. This drops us into settings, and there are lots of different settings that you can configure. I’ll highlight some of the main ones that you should be aware of, but it’s also worth going through to see if you need to configure any of these for your business. Right up on top, you can define your store address. And this is important because this will affect the tax rates and also the shipping rates charged. If we look down a little bit more, here you could turn it on so it automatically calculates the tax rates as a customer is ready to check out. And if we scroll down a little bit more, you could also define the currency that you want to use. Now, if we go up to the top, let’s jump into this next tab titled shipping. Within shipping, you can set up a variety of different zones so you can charge different prices depending on where you’re sending the product. Now currently I have a zone for United States and then the rest of the world. And for the US, we currently offer free shipping, but here I could click on edit and I can modify that. So, let’s say for example, I want to send product to Alaska or Hawaii. That’ll probably cost me more, so I probably want to pass some of that cost onto the customer. And also depending on where I send a product in the world, there are probably different shipping costs, so I’d probably want to set up additional zones, but you can configure all of that here. There’s lots of flexibility to get your shipping costs exactly how you need them to be. Up on top, let’s now click into payments. Once you set up your store, of course you probably want to be paid and WooCommerce makes that really easy. Right down below you have an option called WooPayments and with this you could accept all major credit cards and the rates are also very competitive, so this is a very good option. Right down below you also have different options like direct bank transfer, check payments, even cash on delivery. So again, you have lots of flexibility to accept payments exactly how you want to collect them. Now there are a lot more settings that we’re not going to touch on, but I highly recommend looking through here to see if there are any other settings that you need to modify. Once you’re satisfied with all the different settings, the products and your website, it’s time to launch your site. Right up on top, there’s an option for site visibility. Let’s click on that. Right down below, if other people visit your website today, they’ll get a coming soon message. However, once you’re ready to go live, down at the very bottom you have the option to go live and then you can click on save changes and that now publishes the website out to the world, so you can now start collecting payments for your products. To view what the website looks like, let’s go up to the top and here you can now visit your site. Let’s check it out. Look at that. Here’s the homepage that we pulled together and here we see some of the products and we see the client testimonials. Now let’s click on shop now just to test out the shopping capabilities. Right here I see the double chocolate chip cookie. Let me add one of these to the cart. Right over here, I now see my cart and right over here I can now check out. When I click on checkout, this brings me to the checkout page and here I can now enter in all of the order information. Now of course I did not connect to any payment methods so I get this error message, so you’ll want to make sure that you go through all those steps before you go live. Once you have all your payment options set up, down below customers can now place an order. Once you start receiving orders from customers, also within WordPress, over here on the left-hand side within WooCommerce, here you can click into orders and this will give you a summary of all of the orders that have come in through your website. You could also view customers who are placing those orders with you and also down below you could also view different reports. So here when I click on reports, you could view all of your different sales reports. Here you see a few examples, gross sales. You could also see the number of orders placed, how many refunds you’ve processed. So here you get an overview of how your business is performing. We’ve now covered all of the primary functionality to get your store live but I did want to call out some additional value that you also get that’ll help bring your store to the next level. Within WordPress, over on the left-hand side at the very bottom, you have access to something called Commerce Kit, and when you click on that, you get all sorts of additional functionality and there’s some really neat ones that can help drive more sales. For example, you can have a countdown timer just to drive more urgency behind a purchase. You could also have an order bump, so let’s say someone’s checking out, you can then prompt them to consider another product as well. Here you have things like product gallery, size guides, and the list goes on and on. So well worth looking at this to see if any of these might help with your shop. Congratulations, you just built your very own e-commerce website using Elementor and WooCommerce. If you found this video helpful, please give it a thumbs up. And if your websites start making millions, remember who helped you out? I’ll accept a thank you note, cookies, or even just a shout out in your CNBC interview. If you have any questions or if you run into any trouble, feel free to drop them in the comments down below. I’ll see you in the next video, and in the meantime, hopefully your sales are high.

Related Topics

You must login to add an answer.

Hide picture