WordPress Ecommerce Website Tutorial 2026 - Step by Step

Hey, I'm Caleb and in this video I'm going to walk you step by step through building a professional e-commerce website using WordPress. If you've been wanting to create an online store, but feel overwhelmed by all the different steps involved, this video is designed to make the process simple and easy to follow. We'll start with your site looking like this. And by the end, it'll look like this. And as we go, you'll be able to swap out the text, images, and products to match your own store using a simple drag and drop builder with no coding needed. Just follow along step by step and you'll have a fully working online store that's ready to take orders and ship to customers, even if you've never built a website before. Here's what you can expect in this video. We'll start by getting hosting and a free domain. Then install WordPress, set up a clean, professional website that looks great on both desktop and mobile. Add your products, configure payments, shipping, and other important settings. And finally, publish your site so it's live and ready to go. With that said, let's go ahead and get started. The first thing we need is hosting. Everything we used to build your store in this video is completely free to use, but there's one thing you can't really avoid, and that's hosting. Your website needs a server to live on, so it can stay online 24/7 for people to visit and shop. The good news is hosting can still be really affordable, which is why I'm using Hostinger for this tutorial. I've used them for a long time because they're beginnerfriendly, fast, and budget friendly. I've actually partnered with Hostinger to set up a special link for this tutorial that gives you an extra 10% discount on top of their regular promo pricing. You'll see that link on screen right now, and it's also the first link in the video description. When you use it, it automatically applies the coupon and takes you straight to the correct discount page for the setup, so you're getting the lowest price available. Go ahead and open that in a new tab, and you should land on this page here. And we'll start by setting up your web hosting. To do that, go down and click on start now. That's going to scroll you down to the plan options. Here you'll see three different options. You have premium, business, and cloud startup. And below each plan, you'll see what each one offers. Each of these will include a free domain for one year. And each of these plans are great for building just about any kind of website. For this video, I'm going to be going with the business plan. To select it, I'm going to go down and click on choose plan. And you can start at the top by choosing your billing period. By default, it's going to be set at 48 months. However, if you don't want to commit to such a long-term plan, you can click on it and change it to 24 months, 12 months, or one month. I recommend at the very least going with the 12-month plan. This is going to get you plenty of savings still, and it's also going to get you that free domain for the first year. Scrolling down, you can choose your domain name here, but we're going to do this a little bit later on in the video. You'll see some optional add-ons below as well. But once you're happy with the options you've chosen, go back up and make sure the discount code is applied by using the first link in the description. you're going to have this discount automatically applied for you. So once you see that here, go down and click on continue to move on. And here you have to create a hostinger account if you don't have one already. So fill out your email address and then create a password. Once you're done, click on register. Now on this screen here, you'll need to fill out your billing address and your payment information. I'm going to go ahead and fill this out and fast forward to whenever it's complete. I've gone ahead and filled out my billing information and my payment information. With that done, I'm going to click on submit payment to move on. From here, just click on get started. After that, you'll be brought into Hostinger's onboarding setup. Start by choosing whether you're creating the website for yourself or your business or for someone else. I'll go with myself or my business. Then I'll go to the bottom right and click on next to move on. I'll choose create a website and next again. Then I'll select WordPress and next once again. Now, here you'll create the login details for your WordPress admin account. By default, it's just going to be the information you used for your hosting or account when you signed up. I'm okay with the default information here. So, I'll go to the bottom right and click on next. Here, you'll choose create blank site. Now, on this screen here, we're able to claim our free domain. As you can see, we have one free domain available. So, I'll type in my domain here. I'll go with WordPressutorial.com. And as you can see, it's free for one year. So, I'll click on this to claim the domain. Once you're happy with your domain, go to the bottom right and click on next. Next, we'll need to register our domain. Start by filling in your personal information such as your country and whether you're registering the domain for personal use or for a company or organization. Click next step and then enter your contact details. My information here is already correct. So, I'm going to go down and click on finish registration. Now, Hostinger is going to verify your personal information and register your domain. Next, you'll need to choose your data center. By default, Hostinger will choose the data center closest to you. If you'd like to, you can change that here. For now, I'm going to leave this as default. I'll go to the bottom right and click on next. Now, WordPress is going to be installed. This process can take a few minutes, so I'm going to fast forward to whenever it's complete. And after that, you'll be brought into your WordPress admin dashboard. The first thing you may notice here is that your domain is pending email verification. Let's go ahead and fix this. Start by switching over to the email inbox that you use to register your domain. You should have an email like this from Hostinger that says confirm email for your domain. All you have to do is open this email and click on verify email. I'll click on confirm. And now our email is verified and we're able to use our domain. Switching back to my WordPress dashboard, you can see the domain now says active. So everything is ready and good to go. Okay. Now let's quickly get accustomed to our WordPress dashboard. When you set up with Hostinger, you actually get two different WordPress dashboards and you can see them here on the lefth hand side. By default, you'll be in the Hostinger dashboard. If you ever need to configure things like your domain settings or your hosting plan, you can do that here. But to access your primary WordPress dashboard, go to the left and click on dashboard. And here is your primary WordPress dashboard. By default, you'll see a lot of different stuff on the screen here. To customize your screen elements, go to the top and click on screen options. And then you can enable or disable any of the screen elements. In my case, I'm just going to disable all of these to clean everything up. And then I'll close the screen options by clicking on screen options. Now we have a nice clean WordPress dashboard. Now with that done, we've gotten our web hosting, our domain, and we've installed WordPress. Next, let's learn how to install your theme and get your e-commerce website template. To install your theme, go to the lefth hand side and hover over appearance. Then, click into themes. By default, you'll have the 2025 theme active. To add a new theme, go down and click on add theme. And we're going to be looking for the Astra theme. Go to the top and click on search themes. Then, type in Astra. Then, you'll see the Astra theme appear here. First, click on install, then click activate. I'll go ahead and close out of this banner here. And now we can see that the Astro theme is our active theme. Now that we have the Astro theme active, the next thing we need to get is the plugin that allows us to get our e-commerce website template. To start that process, let's begin by going to the left and clicking on plugins. By default, with Hostinger, you're going to have a lot of different pre-installed plugins here. To start from a nice clean slate, I recommend deactivating these plugins. To easily do that, click on the check box here at the top, then click into bulk actions and select deactivate. Click apply. It's going to deactivate all of those default plugins. Now, to clean everything up, let's go ahead and delete them all. Click on the check box again, click into bulk actions, and select delete. Click on apply again. It's going to delete all of those pre-installed plugins. Now, to add in a new plugin, go to the left and click add plugin. In the top right, you'll type in starter templates and you'll be looking for this plugin right here. Click install now and then click activate. And that's going to bring you into the starter templates onboarding here. We'll want to make sure that we have the Elementor page builder available. Go to the top right and click in right here and make sure you have Elementor available. In some cases, you may not see this option appear. And if that's the case for you, I'm going to quickly show you how to fix it. Start by going to the bottom and clicking on exit to dashboard. Go to the left and find settings. Click into it here. Then scroll all the way to the bottom. You'll see this option right here that says disable Elementor page builder templates and starter templates. Now, if this option is selected, you're going to want to make sure that it's deselected. So, make sure this option is deselected here and click on save changes. Now, with that done, you should have the Elementor page builder available. To get back into the starter templates onboarding, go to plugins back here on the left and under starter templates, click on get started. Now go back to the top right and select Elementor. After that, you'll see a bunch of different templates appear here. You can scroll through and find any template that you want to work with. The great thing about these templates is that they're completely customizable, so you can think of them as a foundation that you build on, not a final website. Since we're building an e-commerce website, if you scroll up to the top, there's actually an e-commerce tab here at the top. I'll go ahead and select this. And now we'll see all of the different e-commerce templates that are available. If you see any that are marked with a premium tag, you'll have to pay to use these. However, if they don't have a premium tag, they're completely free to use. So, for this video, I'm going to scroll down and I'm going to be using the Planet Earth Store template. I'll click on this template to select it. And here on the right side, I'm able to scroll through the website and see how everything looks. I can also interact with any of the elements by clicking on them. Like for example, here I can click into a product. And then by using my main menu here at the top, I can click into any of the pages. I'm happy with how everything looks. So let's check out the lefth hand side. If you have your logo available, you can upload it here, but I'll do this a little bit later on in the video. You can also change out your font styles here. I'll go with this option here. Lastly, you can change out your color palette. I think I'll go with the default black and green color palette. Once you're done making your changes, go down and click on and continue. On this page, you can select the features that you want on your website. At a minimum, all you'll need to create your website is the page builder, contact form, and e-commerce features. The rest of these will be optional. I'm going to go ahead and deselect the SEO feature. And then at the bottom, you can see the different plugins that will be installed and activated on your website. The most important ones here are Elementor, Woo Commerce, and Woo Payments. Everything looks good here, so I'm going to click on continue. Then click submit and build my website. And now your website is going to be built for you based on the template you chose. This can take a few minutes to complete, so I'm going to fast forward to whenever it's done. And just like that, your website is ready to go. Start by clicking on view your website. And once you're brought to your homepage here, feel free to scroll through and check out how everything looks. We have now installed your theme and activated your e-commerce website template. And with that done, it's time to start customizing your website. Now, to start customizing your website, let's go back to the top and we're going to want to find the edit with Elementor button here. Go ahead and click on this. Awesome. Now, here we are in the Elementor page builder. Before we start editing the content on our website, let's quickly understand a few things. Let's start here on the left with the elements tab. From here, you can drag in layout elements like containers, and grids. You can also drag in different widgets. You can drag in things like text, images, videos, or buttons. Scrolling through, there's a bunch of different options that you can choose from here. Now, let's take a look at the center. This is your page view. Right here is the content that you're editing within your website. And then on the right side, you have your structure panel. Expanding containers will show you the different widgets that are inside of them. Like for example here within this container, I have two text headings and a button. And then looking back at the center here, I'll notice two text headings and a button. So this is kind of like the map of your website. I'll go ahead and close this up here. And now with that, we understand how to get around the Elementor page builder. Next, let's understand sections, containers, and widgets. I'll scroll through my website here and find a section that will help us understand the best. So your website is comprised of sections and your section is highlighted with this pink box here. And then within your section you'll have different containers. Your container is indicated by this gray dotted box. And then within your container you'll have different widgets. If I hover over something here and it has the pink pencil icon, that means I'm hovering over a widget. So all you have to remember is that you have sections and within your sections you have containers and within those containers you have widgets. And that's the whole structure of your website. Now, I'm going to scroll back up to the top here. Let's begin editing the main hero section of our website. And we're going to start by deleting this pre-made section here and building a new section from scratch. To delete the section, go up to the top and click on the X icon. And that's going to delete that section. Now, to add in a new section, just click on the plus icon. And then you'll be presented with a few options. To create a new section from scratch, just click on the plus icon. If you want to browse through Elementor's pre-made sections, you can do that here by clicking on the folder icon. To generate a section using AI, you can click on this button here. And Starter Templates also has pre-made sections and pages for you to choose from. So, if you're looking to build something quickly, you can use these other options here. But for this video and so we can learn how to build an actual section from scratch all by ourselves, we're going to click on the plus icon here. For the layout, we're going to choose flexbox. And then I'm going to close out of the structure panel here on the right. And then we can see all of the different section structures we can choose from. For this website, I'm going to go with the two panel structure right here. So I'll click into it here. We'll see our new section here at the top. But right now, the section is way too small and it's really hard to see. So let's go ahead and fix that. On the left, go ahead and find the height slider. Change this from pixels to VH and then set this to 100. Now the section is going to take up the entire height of the page. Next, I want to add in a banner image here instead of it being this bright white background. To do that, go to style on the lefth hand side. And then we can choose our background type. If I click on classic, I can choose a color or an image. In this case, I'm going to go with image. So to upload my banner image, I'm going to click on the plus icon here. And then I'm going to drag and drop in my image from my desktop. I'll upload this here. Then I'll go to the bottom right and click on select. Now, right now I can't actually see my image and that's because it's too large. We can fix this by going to our settings on the lefth hand side. Now depending on your image and your image resolution and what you're going with. You may have to adjust the image resolution here, but in most cases you'll have to go down and find the display size setting. Change this from default to contain. And now you should see your entire image appear. When you change the display size to contain, it's going to take your image and make sure that it only appears within your section. And now with our background image added in, we can start adding in widgets. Let's start by adding in some text. Go to the top left and find this plus button here. And we'll start by dragging in a text heading. We'll drag this into the left side here. You'll see this pink line up here. That shows that this widget is going to be dropped in right here within this container. So I'm going to drop it here. And now we can start editing our text. And to edit your text, you have two different ways to do it. You can double click on the text to highlight it, or you can edit it here on the lefth hand side. Now, go ahead and replace this text with your website's headline. I'll type mine in here. For your e-commerce website, this should be a simple, eye-catching headline that describes what you're selling and what your e-commerce website is all about. With that typed out, let's go ahead and click into our container settings. That's going to be this gray box right here. Now, here you'll see some of your format settings for your container. This is going to change how certain things within your container appear. Widgets like text, images, and videos. Let's go down and find justify content. And I'm going to want to set this to center. And now everything within the container is going to be nice and centered on the page. Now, let's click back into the heading itself. Then on the left, go into style. Click this pencil icon next to typography. And here we can find some of our text settings. I want to start by changing out the font. So I'll click into it here. If you have a specific font you're looking for, you can type it here and find it. One of the most popular fonts out there right now is called Poppins. It looks great and works for just about any kind of website. I'll click on it here and that's going to change out my font. Right now my font weight is also looking a little bit too thin for this being a headline. So on the lefth hand side I'll go into weight. I'm going to change this from default to extra bold. I think that stands out a lot more and looks a lot better. Now, we need to add in a sub headline. To easily do that, we can duplicate this text. Right click on it and click duplicate. I'll change out this text by double clicking on it. Then, I'll paste in my subheading. Now, for this text, I'm going to go back into the style settings, click into typography, and then under weight, I'm going to set this to 400. Now, I want to make this text a little bit smaller as well. So, I'm going to go to the size slider here, and I'm going to scale this text up to where it looks just about right. I think 24 pixels looks just about right here. Next up, I want to add in our call to action button. So, I'll go back up to the plus icon, and I'm going to look for the button widget here. I'm going to drag that underneath our text and drop it in right here. And we'll see our CTA button here. I'm going to change the text from click here to say shop now. And for my website, that's my call to action. With this button, I'm telling my website visitor what I want them to do. For most e-commerce websites, that's going to be shop now or buy now. But in your case, it may be a little bit different. So, type in a call to action that makes sense for your website. Here, with that done, let's click into the style tab. And here, you're able to change a few things about your button style. You can change the position here. You can also click into the typography settings. And I'm able to change the font to match the rest of the fonts on our page. I'll change this to Poppins. And we're also able to change the text and button color. For the colors on this website, I used this website called Figma to generate a color palette. I recommend using a color palette generator like this. And I'm going to leave a link in the description to this exact color palette generator. And this is where I'm going to be pulling in some of the colors for my e-commerce website. So, I'm going to start by changing out the button color. I'm going to click on this icon here. And then I'm going to paste in my hex code. So, now I have this nice brown button here. I think this color looks pretty good because it blends in with our background image and makes the page feel a bit more cohesive. So, right now, if I take my mouse and I hover over my button, nothing interesting really happens. And that's why we have the hover settings here. So, let's click into hover. And now we have the exact same settings for whenever our mouse is hovering over the button. So, for example, here I could go into color. I can paste in that same hex code. And then I can take the color slider and make it just slightly brighter. So now if I hover over the button, the button color gets a little bit brighter. On the left, we also have the hover animation. I like to change this from none to the first option at the top, which is grow. So now, if I hover my mouse here, the button comes off the page a little bit and gets a little bit brighter. Next, we can configure how our button shape looks. And you'll do that by adjusting the border radius and padding. So right now, if I go to border radius and bring the value up, you'll see it kind of shrinks the corners of the button. It makes it less square and a bit more rounded. So I'm going to set this to 15. Next, we'll adjust the padding. So I'll adjust the padding here. And as you can see, as I increase the value, it's going to make the button larger. So once again, I'm going to bring this down. And I think I think 18 looks just about right. And right now, these values are linked. So for example, if you click on this icon here, it's going to unlink the values. And I can adjust the values for the padding independently. So let's say I want the left and right sides to be a little bit smaller than the top and bottom. I can go to the left value here. And I can set this from 18 to let's say 14. And I'll do the same thing for the right. And now the button is going to be larger on the top and bottom. You can do the same thing for the border radius as well. Okay. Now that our button is looking good visually, the last thing we need to do is make sure it's linking to the correct page. So scroll up to the top and click on content. And then for link, we want to make sure that this is set to the shop page. So type in shop. Click on the shop page here. And now when somebody clicks on shop now, it's going to bring them to your products page. Awesome. Now, I think our hero section at the top of our website is looking really good. I'm happy with the widgets that I've added in so far. But if you want to, you can go back up to the top here and click on the plus icon. And you're able to continue dragging in all sorts of different widgets. I would scroll through these, add them in, experiment, and see what works best for your website. So from here, the next thing I'd recommend that you do is scroll through your homepage and start customizing the content within it to match your store. So right now, the one section we can't really change just yet is our product display here. And we're going to get into that here in just a little bit. But scrolling through, we'll see a customer review section. Then we also have a postcard section, which is specific to this template. Most likely won't be relevant for you, so you can change this out to read whatever you want it to. And we also have three points about our store with icons and text that we're able to customize. Let's say, for example, that you don't want a specific section or you want to reorder it. To reorder a section, grab the dots right here and then you can drag the section wherever you want it to. And then if you decide that you don't want it, you can just click on the X icon to get rid of it. It's going to delete that section from your homepage. So, I'm going to start by editing the icons and text here at the bottom in this section here. to change out the icon and click on the widget and you'll see the icon appear here. Click on icon library and Elementor has a ton of different free icons for you to use. So, for example, my e-commerce website is based around coffee. So, if I type in coffee, there's actually a coffee icon available here. So, I'll click on it and click insert and you'll see the icon update here. Now, to change the text, just click on the text you want to change. Then, I'm going to highlight it and I'll type in my custom text here. And then you can do the exact same thing for the text underneath it. I'll paste in my custom text here. And then you can do the exact same thing for the other two points here. For now, I'm just going to leave these as default. Next, let's scroll up to the customer reviews section. This can be a great section to include on your website because it builds trust within your website visitors. I would take some of the real reviews from other places where you sell your products and then just paste them in here. And to customize your customer reviews, go ahead and click into the widget here. And then on the lefth hand side, you can edit the testimonial. Right here, you can see the text within it. And you can also change out the image below it. And then below that, you can change out the customer's name. So you have full control over exactly how this customer review looks on your homepage. I'll start by copying and pasting in my custom review here. And you're going to see that change reflect here on the right. And then for the name, I'll change this to say something like John. And in my case, I don't think I actually want to include an image below the testimonial. So, I'm just going to remove the image here. To do that, let's go back over to the left and find the trash can icon. I'm going to click on this. That's going to remove that customer photo. Now, I'll go ahead and change out the customer reviews on the left and right as well. Awesome. Now, we have our own personalized customer reviews here on our homepage. So now, if your homepage doesn't come with a section that you're looking for pre-installed, I mentioned this a little bit earlier on in the video, but you can actually import different blocks from starter templates in Elementor. So, if I go up and click on the plus icon here, and then click the starter templates icon and then go to blocks, I can scroll through and find different types of pre-made blocks that I can easily import into my homepage. And if you're looking for a specific kind of block, you can filter by category in the top left. So, for example, if you wanted to include an FAQ section within your homepage, you can click on FAQ, then look through these and find the block that you like the most. I'll go with this one here. I'll click into it. Then, I'll click on import block. Now, if I scroll down here, you'll see this block appears on my homepage, and I can just edit out the content within it just like I did for the other sections a moment ago. So, if you're looking to really quickly start importing different sections into your homepage and different pages later on, this is a great way to do it. But in my case, I'm just going to go ahead and delete this because I'm happy with what I currently have on my homepage. Okay, so another thing I want to quickly touch on are the fonts and colors on our website. You could go through and individually change out all of the different colors and fonts for each of your sections, but there's a quicker and much easier way to do this. Start by going to the top left and clicking on the Elementor logo. Then click into site settings. And here you're going to find a ton of different helpful settings for your website. The ones we'll be focusing on are global colors, global fonts, and then buttons. Let's start by looking at our global colors. So right now, this is showing us the default colors that come pre-installed with our template and theme. And then using something like a color palette generator that I showed you earlier, you can just change out all of the different hex codes here to match your brand colors. To change out the color, click on the color icon here and then copy and paste in your custom hex code. Then you're going to see that color change here. And then simply do that for the rest of the colors here. Next, let's adjust our global fonts. Go to the top right and click into fonts. Then here you'll see your global fonts listed. Start by clicking into primary and then you can change the font family here. Earlier I decided to go with Poppins. So I'm just going to make that consistent across my entire website. So I'll choose the Poppins font. You can also change things like the font weight. But in my case, I like how this looks. I'm going to go ahead and change out the secondary text and accent fonts as well to make sure they all are the same. Awesome. So now all of the fonts within my website are the exact same. With that done, I'm going to click on save changes. And now we've adjusted our global fonts and our global colors for our website. I'm going to go to the top and click on the back button and then click into buttons. For the buttons on my website, I all want them to look pretty similar to the one that's in my main hero section at the top of my website. So on the left under color, I'm going to change this from the default green color to my custom color I used earlier. And then I'm going to click into the hover settings. And once again, I'll change this from green to a similar brighter brown color. Once again, you have other settings that you can configure here if you want all of your buttons to look a certain way. I'm happy with that, so I'm going to click on save changes. And now, depending on your template, you may notice that some of the colors on your website don't change immediately, especially when it comes to product sections like this. If that's the case for your website, then don't worry about it for now. We're going to jump into the settings to make sure that that's working properly later on in the video. With all that done, our homepage and all of our global settings are looking pretty good. Okay, so now our homepage is successfully configured. Let's move on to creating new pages. Depending on your website, you may want to create more pages than just a homepage. So, let me quickly show you how to do that. If I go to the top here, you can see that I'm currently on my homepage. But if I click on this here, I also have an about page, a contact page, and a shop page. And these all come pre-installed with my template. If I want to add a new page, I can click on add new page. If I want to go to one of these default pages, I just have to click on it. So, for example, here I'll click into about. And this is our about page here that came pre-installed with our template. And I can edit all the stuff here just like I did on my homepage. So, I can start by going to the top and finding this who are we section. Right now, it's way too big. So, I'm going to click into the settings for the section by clicking on the dots at the top. Then I'm going to change from pixels to VH again and I'm going to set this to let's say say 50. Then under our mission, I'm okay with the heading here. So I'm going to change out the text to fit my actual business. So on the left I'll highlight all of this and paste in my own text. Then I want to upload my own image here. So, I'm going to click on it, go into choose image, click on upload files, then I'll drag and drop in my own custom image here. I'll go to the bottom right, click on select. Then my custom image in my custom text will appear here. Then let's scroll down to the last section here. This is the purchase a postcard section. Again, I'm going to repurpose this to make it point to our products page. So, I'm going to change this from give the gift of a postcard to say purchase our coffee grounds. Then I'll change the subtext to say locally roasted always fresh. And of course, you'll just fill this out to fit your product. Now, I want to change the button text here as well. So, I'm going to click on it, and I'll first start by changing out the text. I'm going to change this to say shop now. And then for the link, I'm going to change this to the shop page. Let's click on shop. Okay, I think I'm happy with the changes that I've made so far. Another good tip, if you want to see exactly how your website is looking, you can click on this arrow icon here to condense the settings on the lefth hand side. This is going to give you a full view of your page. And I'm really happy with how this about page has turned out. From here, let's switch over to our contact page. Go to the top and switch to contact. Click save and leave. Go to the left to open up your settings. And now we can scroll through and start editing our contact page. So this is generally how most contact pages look on e-commerce websites. You'll have your contact form somewhere on the page. And if you want to, you can also include some miscellaneous contact information. And depending on what template you chose, you most likely won't be able to change any of the settings regarding your contact form while you're in the Elementor page builder. In this case, this template uses a plugin called sure forms. And we'll actually have to go back to our WordPress dashboard to configure the contact form settings. And we'll get into that here in just a few moments. Let's start by adjusting the information on the right hand side. Go ahead and put your personal email address here. In my case, I'll just do Caleb the coffeehouse.com. This is just an example business email. Go ahead and put yours here. Then you can input your phone number and your business address. You can also choose if you want to adjust the social media icons here. If you click into this here, you'll see the settings on the left. So, for example, I can click into Facebook and you can type in or paste your URL here. For now, I'll just leave these as default. Let's now take a look at how to adjust the contact form. So go to the top right and click on publish to save your changes. Then go to the Elementor logo in the top left. Click on exit to WordPress. Click on the WordPress logo again. And from here find sure forms on the lefth hand side. And from there click into forms. Here you'll see something called simple contact form. Click into it. And this is the contact form that's on our contact page that we looked at a moment ago. From here there's a few settings that we'll need to change. go to the top and click into form settings and start by clicking on email notification. And here we can adjust our admin notification email. This basically means when somebody submits your contact form, where is the message actually going? So to adjust this, let's click the pencil icon on the right. It's going to open up our settings here. By default, everything here is usually good to go. The main thing I'm worried about is the send email too. By default, this is your admin email, and this is pulled from your WordPress admin details. So unless you want this to go to a different email address, you can leave it as default. Then everything else here will be good to go automatically. Now you'll most likely see a warning down here that says if the from address doesn't match your website domain that your emails can get marked as spam or not send reliably. So for example, you could change the from name to your business name and then the from email to contact@youdommain.com. Now, if you don't have a domain email set up yet, it's not a big deal. The form can still work, but email deliverability can be a little bit hit or miss until you get that set up. So, make sure that the from name and from email match your personal information. And again, if you don't have it set up just yet, then just come back to this later. Everything below this will be good to go. So, let's scroll up to the top and click on the back button. Next, click into form confirmation. Here you can choose if you want to show a success message or redirect your website visitor to a separate page after they submit your form. I'm just going to leave this as the default success message. Now you have some other settings here on the lefth hand side, but these are the only two that I'm worried about for now. From here, go to the top right to close out of the settings. And now we can start customizing our contact form. By default, we have the options for the visitor to leave their full name, phone number, email, and a message. Now, if you want to add in a different block, just click on add block here at the bottom. Then you have a few different options here. Depending on what type of business you're running and what usual questions your customers have, you can go ahead and get a really detailed contact form set up here. Then, if you want to change the colors of your contact form, for example, the button color, you can go over to the right and click on style. Go down and find the primary color. And I'm going to change this to the brown color that I use for the rest of my buttons. I think I'm happy with that. So, I'm going to go to the top right and click on save. Nice. Now, we've configured and set up our contact form. Let's go ahead and navigate back to the Elementor page builder. Start by going to the top left and clicking on this icon here. Then, click on your website here at the top. Then, click on edit with Elementor. Then, let's navigate back to our contact page. Click on contact. Then, I'll go down. Now, our contact form is configured. everything is working properly and we've changed the button color as well. So, with that done, our contact page is ready to go. Now, what if you want to create a brand new page, a page that doesn't come with your website template at all? Well, that's super easy. Go to the top and go back to your page navigator. Click on add a new and then you can choose if you want to build the sections on your page from scratch like before, but you can also import entire pages from other templates. Click on the starter templates icon here. Then I can click into another template like for example the love nature template. Let's say I wanted to create a services page using this other template. I can import this entire page and then start customizing it. So I'll click on services and then at the top I'll click on import template. And now that entire page is going to be imported into my website. The one thing that happens whenever you create a new page is that the page doesn't actually have a name. Right now, if I click on this, it just says Elementor page. To fix this, go to the top and click into your page settings. Then, let's change this to say our services. And you'll see that change reflect here at the top. And in some cases, your page title might be appearing as text somewhere above your logo. If this is happening to you, make sure you set hide title from no to yes. And that's going to hide the title from appearing on your web page. Now, from here, you can go through and customize all the different containers and widgets and sections just like before. And once you're happy with this, go ahead and set the status on the left from draft to published. Then go to the top right and click publish again. And now you've created a brand new page. Now, let's take a look at our header here at the top of our website. We just created this brand new page, but it doesn't actually appear in our main menu navigation. And also, we need to update our store's logo. So, now that we know how to create new pages, let's take a look at how to set up our header and footer. Start by going to the top left and clicking on the Elementor logo. Click on exit to WordPress. Click the WordPress logo in the top left. Then, click on your website and click customize at the top. Now, this will open up your theme settings. This will allow you to control different settings that are separate from the Elementor page builder settings. things like your store's logo, your menus, then also some other colors on your website as well. Start by clicking into header. Click into site title and logo. Then click on change logo. Go to upload files. Now drag and drop in your logo from your desktop. With your logo uploaded, click on select. Then you'll want to crop your logo here. I'm going to add some space on the bottom and a little bit of space on the top. That looks pretty good there. Click on crop image and you'll see the logo updates here in the top left. Right now it's a little bit too big. So I'm going to take the logo width down from 200 and I'll bring this to we'll say 160. Here you can also adjust your site title. You can change this to be your business name. In my case, this will be the coffee house. You can also adjust your website's tagline here. I would recommend just removing this and leaving this blank. Next, let's scroll down to site icon. Click into that here. Click on select site icon. Upload files. And then you want to drag in your favicon here. This is going to be a small image that appears in your website visitors browser tab. So I have mine uploaded here. It's basically just a smaller version of my logo. So I'll go down and click on select. And right here it gives you a preview of how your fabicon will look. And next we're going to take a look at how to adjust our main menu navigation. But right now, we can't actually see most of the text within our header because the text is too dark. So, I'm going to show you a quick way to fix this and also make your header look really good. So, click on the back button, click into header, go down and find transparent header. Click enable on complete website. Then you'll notice this tab here that says disable on. Open this up. You'll want to make sure that Woo Commerce product pages is deselected. With that, go up to the design tab, and here you'll have a bunch of different options you can configure. I'm primarily worried about the primary header. Click on the circle on the right to adjust the color. Scroll down, and I'm going to input my hex code that I've been using for the rest of my website here. It's going to be that brown color. And you'll see the header adjust up here. Now, I'm going to use the opacity slider here to make this a little bit transparent. I think this looks pretty good right about here. Now, it's still pretty hard to see my text. The green looks okay, but the black text is kind of hard to read. So, we can go ahead and fix that as well in the design settings. For the text, let's change it from black to a white color. And now it's way easier to see the text. I do think the green highlight text is a little dark. So, I'm going to change this to a brighter green color. Next to the white color, you'll see the green circle. And I'm going to change this to a brighter green color. Now, if I hover over my text, it's much easier to see. Awesome. So now let's configure our main menu navigation. Go ahead and hover over it here and click on the pencil icon. Click on configure menu from here. And here you'll find your primary menu. To edit the pages within your primary menu, click on edit menu. And here we have home, about, shop, and contact. Then if I go back to my main menu here, you can see home, about, shop, and contact. If you want to reorder any of the items here, simply drag them and drop them into a new position. And if you want to add in a new item, click on add items. And here we're able to see the our services page that we created earlier, click on the plus icon to add it to your menu. And it's going to be added in right here. In my case, I think I just want to take the shop page and move it to be right next to my homepage. So I'll drop that here. Then I'll click back into my website. And then now we have our homepage, shop page, about page, contact page, and our services. Now, lastly, let's take a look at the layout of our header. So, if I hover over my header here and click on the pencil icon in the top left, you'll see the layout settings appear at the bottom. Currently, we have our site title and logo, our menu, cart, and an account button. If you want to reorder how these elements appear within your header, you can just drag them and then drop them into a new position. I think it makes the most sense for the cart icon to be on the far right side, so I like that change. With that done, let's take a look at our footer settings. To get to your footer, just scroll all the way down to the bottom of your website. Then hover over your footer here and click on the pencil icon in the top left. Once again, you'll see the layout settings appear just like they did for the header. I'm noticing here that the logo is incorrect on our footer. So, I'm going to click on the pencil icon to change this. Then, I'll click on got it. Then, here I'm going to click on replace and open media library. to find the logo that I uploaded earlier and click on select and then your logo will be uploaded into your footer here. Also within your footer, you'll find your footer menu which is the exact same as your menu at the top of your website. You'll also have a copyright notice here as well. If you want to change this, you can click on it here on the right side and then you can just change out the text. We're going to come back to our footer a little bit later on in the video when we start adding in our policy pages. So, for now, I'm just going to leave this alone. To save our changes, let's go to the top and click on publish. Now, if I scroll through back up to the top, everything is looking pretty good. Now, while we're here, another thing we want to check out is our Astro theme global settings. If you remember earlier on, we changed our global settings when it came to the Elementor page builder. But there are some design elements within our website that will be controlled through the Astra theme. And those global settings are different than the ones we changed earlier on. So to get to those settings, go to the back button here and once again then click into global. Let's start by clicking into typography. Right now you can see that the body font and headings font are using different fonts than the poppins font I chose earlier. So I'm going to go through all of these and change these from DM Sands or whatever font they are to Poppins. Go here and type in the font that I'm looking for. And there it is there. Now, I'm going to go through and do this for the rest of the fonts here within my global settings. Now, I've gone through and changed out all the fonts here within my global settings. Now, throughout our entire website, only one font will be used. It's going to make everything look really cohesive. Now, I'm going to go back and click into colors. Now, here you can change up your color palette. Right now, on our homepage, we can't actually see any of the colors that these global settings are controlling. So, for example, here, let's click into a product page. And here on this product page, a lot of the content within it is pulling from the global color palette on our Astra theme settings. So, for example, here all of our body text is using this gray color. If I don't want that to be the case, then I can click on the color here and I can change it to black. So, what I would recommend doing is going through and either changing your global color palette here to match the colors that you want to reflect, or you can go through each of the individual colors here and make sure that they all work for you. So, I'm going to go through here and adjust my color palette. So, I've gone ahead and updated all of the colors here within my global color palette. And I've also gone through the other settings here and made sure I'm happy with everything. Once you're happy with your choices, we can move on to the next step, which is going to be adding in products and adding product categories into your store. To begin adding in products, go ahead and click on publish at the top to save your changes so far. Then, click on the X icon here. Then, click on the WordPress logo. Now go down to products and then from here click into categories. So depending on what types of products you sell on your e-commerce website, it's definitely worth creating product categories. That way you can easily organize all of your different products. And on top of that, it makes it way easier for your customers to find the products they're looking for. Here on the right hand side, you're going to see some autogenerated categories. We're not going to need these, so let's go ahead and delete them. Click on the check box here to highlight all of them. Then click into bulk actions and then delete. Press apply and it's going to delete all of the autogenerated categories. Now for my first category, I'm going to name this coffee grounds. Go ahead and put whatever makes sense for your products here. As for the slug, I'm just going to name this coffee dash grounds. This is what's going to come at the end of the URL. It's not a big deal. Just put something that makes sense here. Now, here under parent category, you don't need to do this unless this is a subcategory of another product. So, for example, if I had an electronics category and I was making a new category for headphones, then that would go into the electronics parent category. But in this case, I'm just going to leave this as none. Then, let's add a quick description. Shop all of our coffee grounds in one place. Depending on your theme, this may or may not show up, but it's worth quickly adding it. Next, you can upload a thumbnail if you want to. I'll go ahead and upload a simple thumbnail here. With that uploaded, I'll click on use image and then click on add new category. Now, if I scroll up to the top, I now have a coffee grounds product category. Now, go ahead and do this exact same process for the rest of the product categories that you want to create for your e-commerce website. For now, I'm just going to create the single coffee grounds category. Next, click into all products. And here you're going to see some more autogenerated products. Depending on the template you chose, these will probably be slightly different, but regardless, we just need to delete these so we can add in our own products. To do this, go ahead and click on the check box, click into bulk actions, then select move to trash. Click on apply. And now we can start fresh and start adding in our own custom products. On the left, click on add new product. Let's begin by giving our product a name. I'll go ahead and copy and paste in my product name here. Just make this super simple, nice and easy to read. The clearer your product title is and the easier it is for your customer to read it, the more likely they are to click on the product. Next, let's add our product description. Once again, I'll copy and paste my product description in right here. I recommend using some simple formatting here. Make it look nice and professional. You don't want to add too much here, just the most important things about your product. Next, let's scroll down and let's enter our product data. go ahead and set your price here. I'll set this to $16.99. And if you want a sale price, you can put that here as well. So, for example, I could say that instead of $16.99, right now it's going to be $14.99. And I can also schedule out a sale using this button as well. Next, we'll click into inventory. Here, we can choose we want to track stock quantity for this product. So, I'll enable this here. And then I can set the quantity of this product that's available. So, for example, I'll set this to 100. You'll also find some other settings here, like shipping, but we'll dive into this a little bit later on in the video. For now, I'm going to scroll back up to the top, and for product category, I'm going to select the coffee grounds product category I created a moment ago. Next, I need to set my product image. So, I'll click on set product image. Then, I'm going to upload my primary product image. I go to the bottom right and click set product image. And it's going to upload right here. Now, if you have additional product photos, go ahead and upload those here. For now, I'm just going to be going with one individual product photo. So, with that done, I'm ready to publish my first product. I'll go to the top and click on publish. Now, with that done, I'm going to go up and click on view product just to make sure everything looks good. Nice. Everything looks pretty good here. We're going to come back into this product page a little bit later on and make sure everything is looking correct. Like right now, you can see that the header is cutting into the product page, but don't worry, we'll be fixing this a little bit later on. But for now, we've gotten our product page to a good starting point. So, I just made a single simple product. But what if I wanted to create a product listing that allowed my customer to select from multiple options? So, if you're selling products that come in different colors, different sizes, or you're selling any product that has options that your customer needs to select, let me go ahead and show you how to do that as well. So, I'm going to go to the top and click on edit product. Then, I'm going to click on add new product. All right. And just like before, we're going to enter a product name. In this case, I'm going to name this one coffee grounds. Choose your flavor. And then, I'll copy and paste in my product description. If you're ever having trouble coming up with a product name or description, chat GBT is super helpful. Now, here's where we can actually add in our variables. So, let's go down to product data, and you just want to switch this from simple product to variable product. Click got it and let's go into attributes. Start by giving your attribute a name. So for example, if you are creating t-shirt products and you're creating a variable t-shirt product and let's say you have a red t-shirt, a white t-shirt, a blue t-shirt, then the name for this would be color. Now, for example, if you wanted an attribute for size, let's say you're selling t-shirts in small, medium, and large sizes. So then you would create another attribute named size. So in this case, I'm creating attributes for coffee ground flavors. So I'll just name this flavors. And under values, this is where you're going to type in the options that your customers have to choose from. For my store, I'm just going to type in the flavor names. Bean voyage. And to separate them, you're going to want to use this pipe symbol on your keyboard. If you hold down shift and then press backslash, that should appear. And after separating it, I'll type in my next option, which is rich and bold. And my last one will be mellow morning. I'll make sure that visible on the product page and used for variations are turned on. With all that done, I'll click save attributes. Now from here, let's click into Click on generate variations. And now the options I created a moment ago are going to appear right here. Now let's begin editing these variations. Go ahead and click on edit on the right side. Scroll down. And now we'll have settings that we can configure for each variation of our product. Let's begin by uploading a product photo. Click on upload an image. I already have this product photo uploaded, so I'm going to select it here and click set variation image. Next, we can choose if this is a downloadable or virtual product. So, if you're somebody who's not selling physical products, this is super helpful. And we can also choose we want to manage stock. So, let's say, for example, I don't have full stock of each set of coffee grounds. Like for example, I have more in stock of Bean Voyage than I do of the Mellow Morning flavor. So I can click manage stock. We'll say for Bean Voyage, I have 100. And for the regular price, I'll set this at $16.99. You can also include a sale price again if you want to. Now scrolling down, we have some other miscellaneous settings, mostly to do with shipping, but we'll get into this a little bit later. For now, what I'm going to do is go into the other two variants here, and I'm going to set the product images and make sure all the information is correct regarding pricing. All right, so I've gone into the other variations here and set their product images, pricing, and stock information. And another quick tip that I want to give you regarding product photos is to make sure that when you're creating them that the resolution is about the same for each product image. Having the same image resolution between all of your product photos makes them look a lot better when they're put up next to each other. So, if you can do that, I would definitely recommend it. Next, I'm going to scroll back up to the top here and once again select the coffee grounds product category. And then I'm going to set a product image. This product image is what's going to appear whenever your website visitor is scrolling through your shop page or your homepage. So, I'm going to click on set product image and I'll set it to this general photo here. Then I'll click set product image. And then with that done, I'm going to click on publish. to see how everything turned out. I'm going to go to the top and click on view product. And there we go. We have a drop down here that says choose an option. I can choose between each of the flavors here. And now if I click on bean voyage, the correct product photo is going to appear here as well. So that's two ways you can create products. You can either create a single simple product or you can create variations through variable products as well. All right. Now the next thing we need to do is customize our product page. I mentioned earlier, but right now our header is kind of cutting into our product page and it looks a bit awkward here. To do this, go to the top and click on customize. And once you're here, click on design. Now, to fix the header issue, we're going to look for spacing and then padding. Let's go ahead and unlink the values here. And then we're going to gradually increase the top value to see what looks right. So, I'll start by setting this to 10. And I can see that needs to be a little bit more. So, I'll try setting this to 50 next. And I think that looks pretty good. Now we have a nice amount of space between the header and then where the product page starts. Now let's switch back to general. Here you do have a few different options you can change, but unfortunately you don't have as much freedom within the WordPress block editor as you do with the Elementor page builder. So for example here, if I switch from default to normal on the right side, you're going to notice not a whole lot changes. And the same thing goes for full width. This is also template dependent. So you could try out a different template to see if you like how it looks. But for the most part, the product pages are pretty set with how they are from your template. Scrolling down, you have some sidebar layouts. I'll just leave this as the default option. And below here, you're going to find the structure of the page. So, for example, here I could take the title and move it above the category. And right now, I'm actually noticing that I have coffee grounds listed here, and then it listed down here as well. So, I think I'm going to click on the eyeball to actually turn off the category. That way, it's not appearing twice. And then you have some other more advanced miscellaneous options down here that you don't really need to worry about. And you'll also notice here there is an upgrade now button. And this is how you get way more control over the product pages. Since we're operating on the free version of starter templates and the Astro theme, we don't have all of the settings, but to be honest, I think this looks really good. I'm pretty happy with what we have here for our single product page. So I'll scroll back up to the top. And to save my changes to my product page, I'm going to go up and click on publish. So, now that we've edited your product page, let's move into editing your shop page. From here, I'm going to go to the top and click into shop. Then, I'm going to scroll up to the top and click on the back button. Then, click into product catalog. From here, I'm going to scroll down to the shop card design. Right now, I have it on design two, but you can try out design one and see if you think it looks better. The main thing that's going to change is the sale button. You change it to like a little circle icon. Looks pretty good. Then you can choose how many columns you want to appear. Right now, mine is set to three. As you add in more products, I would experiment with this and see what you think looks best. And then you can choose how many products appear on each page at once. By default, it's set to 12, and I'll just leave it at default for now. Down here, you'll have some more various options along with the shop card structure. You also have the option to hit the pencil icon on each of the options here on the left. And if I scroll through here, I think everything looks pretty good. Before we move on, let's check out the design settings at the top. So, click into design. And here you can choose whether it's left aligned, center aligned, or right aligned. I think for a shop page like this, it makes the most sense to keep everything left aligned. So, I'll just leave it like this. To save our changes, let's click on publish at the top. And before we move on, let's go back to our homepage and see how our products are appearing there. Click on home. Let's scroll down and find our products. And as you can see here, they're appearing successfully. And I think these products look really good within our homepage here. All of our global colors, fonts, and sections, they all look really professional and cohesive. And with this done, I think our store is just about built. Now, it's time to get into some of our backend settings. Let's take a look at payments, taxes, and shipping. Let's begin by setting up payments. Go to the top left and click on the X icon. Then click on the WordPress logo. And from here, go down to plugins. Click add plugin and start by typing in Stripe and make sure you install payment plugins for Stripe Woo Commerce. Once you find this one right here, click on install now. This is the most popular option for payment methods within Woo Commerce. It allows pretty much anybody to input their credit card or debit card information. Once that's installed, click activate. We'll also want to get PayPal set up here as well. This plugin makes it super easy. Just click install now and then click activate. Again, go ahead and close out of this here. Now, within Woo Commerce on the lefth hand side, you're going to see PayPal by payment plugins and Stripe by payment plugins. These are going to be our two payment options that we need to configure. And we'll start with PayPal. So, go up to the top and click on settings. Then, scroll down and next to connect to PayPal, press click to connect. You'll have a window open up here. From here, you'll simply log into your PayPal account that you want to collect payments from. Once you've logged in, it's going to configure your connection to PayPal, and it should say status connected. Next, go back over to the lefth hand side and click on Stripe by payment plugins. Click into settings here. Then, we'll scroll down and click on click to connect. And here, you're going to have to sign up for a Stripe account. If you don't already have a Stripe account set up, you'll have to enter your email address here and fill out some information. do that. Follow the prompts and I'll meet you at the next step. Now, after you've connected your Stripe account, it's going to ask you a bunch of questions about your business information, your banking information, and a whole bunch of other personal stuff. Now, once you've done that, let's scroll down and make sure everything is connected properly by clicking on the connection test button. As you can see here, it says connection test to Stripe was successful. That means that we're good to go. And now, another thing to mention is to keep the mode in test. Later on, we're going to switch this from test to live, but for now, we're going to keep it in test mode and come back to this a little bit later to make sure everything is good to go. Go down and click on save changes. From here, let's go to the top and click into payments. And we're looking for PayPal by payment plugins and also Stripe by payment plugins. We want to make sure that these are both active. So, right here we have credit cards, Stripe by Payment Plugins. And you can see that's active. So, that's good. Now, let's scroll down to the bottom here. And then we have PayPal Gateway by payment plugins. That's currently inactive. So, we want to click enable next to this. Now, if you'd like to, you can scroll through all of these different payment options and enable and manage each of them here as well. In most cases, Stripe and PayPal will be perfect for just about any store. Now, with that done, we're able to go to our website and add a product into our cart. Head over to the checkout and make sure that everything is appearing properly. So, go up to the top and click into your website. Then let's go down to a product here. Click on this one. We'll choose an option and then click add to cart. Click on proceed to checkout. And now if I scroll to the bottom, we have the payment options available. Our customers can enter their credit or debit card and they can also use PayPal. This is showing us that everything is working properly. Now with payments done, let's move into taxes. Go back up to the top left and click on the WordPress logo. Let's go down and find plugins. Click on add plugin and here type in WooCommerce tax. Then you want to find WooCommerce tax here and click install now. Click [snorts] on activate. Then go back to Woo Commerce. Click into settings. Now scroll down and you're going to look for enable taxes. Go ahead and enable tax rates and calculations. We'll check this on. Then scroll down and click on save changes. Here you'll see this pop-up that says connect to your site to activate Woo Commerce tax. This is going to be the final step to set up automated taxes. So click on connect. And here you'll have to create an account with WordPress.com. Technically WordPress.org and WordPress.com are separate websites. And the Woo Commerce automated tax plugin requires some functionality from WordPress.com in order to work. So enter your email address right here and click continue. It will automatically connect your account. With that, your setup is complete. I'll click on Got it. Thanks. Now, the last thing we need to do before automated taxes are enabled is clicking into the tax tab here at the top. And here, change disable automated taxes to enable automated taxes. Now, let's go down to the bottom and click on save changes. And here's a quick note about automated taxes. Whenever you enable automated taxes with Woo Commerce, it's going to automate taxes specifically for the area that your business is registered in. And in my case, that's going to be Texas. And if you need to collect taxes in other regions, then you're going to have to input those regions manually. If you have questions about where and when you can collect sales tax with your e-commerce store, I would recommend talking with a tax professional. However, if you need to add manual tax rates for different areas, go to the top here and click into standard rates. Then click into insert row. Start by inputting your country code. So for example here I'll do US and select the United States. Then input your state code, zip code, city, the tax rate you want to charge. You can give it a name and you have some other miscellaneous settings here. Once again, I would recommend consulting with a tax professional to make sure that everything is legal and proper when it comes to your e-commerce website. I'll go back up to the top here and switch back to tax options. As a beginner, just turning on automated taxes for your e-commerce website is a great start. With that done, let's switch over and talk about shipping. Go to the top here and click into shipping. Let's start by adding a shipping zone. Click add zone. Let's give our zone a name. For example, here if you're offering worldwide shipping, you can name this worldwide. In my case, I'm going to start by only shipping to the US. So, I'm going to type United States. Then, let's select our zone region. Right now, it's set to everywhere. To add in a new region, let's type here. I'll type in United States. I'm going to go down and check on the US here. Now you'll see it switch from everywhere to US. You can also limit to specific zip codes if you'd like to as well. Next, let's add in a shipping method. From here, you can choose free shipping, flat rate, or local pickup. Nowadays, free shipping is easily the most popular option. So, select free shipping and continue. In here, we'll make sure that free shipping has a requirement. Most often, you'll want to go for a minimum order amount. Select this here. Let's say that our customers need to spend at least $10 on our store to get free shipping. When it comes to running an e-commerce website, I would highly recommend to try and always offer free shipping to your customer. It's been proven that anytime a customer adds a product into their cart, gets to checkout, and sees a massive shipping cost on top of their product cost, generally it will make them turn away from buying your products at all. So, I would always attempt to offer free shipping when you can. With that done, click on create and save. And now we have our first shipping method. Now, within this specific zone, you can go in and add more shipping methods if you want to. Like, for example, here, let's say that we don't want to offer free shipping. I'll click on add shipping method. Click on flat rate and continue. And here, if I know that I'm offering flat rate shipping and it costs me, let's say, $12 to ship out a product, then I can charge $12 on top of the products that I'm selling to my customer. You can also add in different shipping class costs here as well. However, again, I would be careful with adding flat rate shipping. Free shipping is generally the best option, especially for beginners. So, in my case, I'm just going to offer free shipping to the US. Feel free to add in different zones and regions. Mess around with shipping methods. This all varies depending on what you're selling on your e-commerce website. With that done, I'm going to click on the back button here to go back. And there we go. We now have shipping to the United States. If you want to offer shipping to the rest of the world, you can configure that here as well. We've now configured payments, taxes, and shipping. Let's move on to finalizing our checkout settings and placing a test order on our website. Now, before we do that, I want to quickly create a coupon to celebrate the launch of our new website. To create a coupon, go to the left and find coupons here. Then go to the top and click add new coupon. For my coupon code, I'm going to name this welcome 10. In the description, I'm going to put 10% off coupon to celebrate the launch of our website. Now, under discount type, we have a few options here. We have percentage discount, fixed cart discount, and fixed product discount. The most common coupon is the percentage discount. So, I'll be going with that option. For the coupon amount, I'm going to set this to 10%. You can also choose if this coupon will allow free shipping. Right now, on my store, I only offer free shipping, so I don't have to worry about this. For here, you can choose if you want the coupon to expire. This is totally up to you. Then, here we have usage restriction. You can choose if there's a minimum spend or maximum spend in order to trigger the coupon for individual use only. This means that the coupon can't be used with other coupons. And you can also choose to exclude items that are on sale. You also have some more specific options down here regarding products and product categories that you want to exclude. And then under usage limits, you can choose if you want this coupon to only be able to be used a certain amount of times. You can also limit it per user. I'm happy with my general settings here. So, I'm going to go up to the top and click on publish. Next, I'm going to place a test order on my website to make sure that everything is working properly. Let's go up to the top and visit our website. Go back to our cart on the right hand side. Click on proceed to checkout. And from here, I'm going to enter my billing information. I'll fill out some test information here and add a zip code so that way I can make sure that automated taxes are working based on my location. This is going to be a Texas zip code. As you can see, the autotax is working perfectly. Then I'm going to make sure my coupon code is working as well. I'm going to type in welcome 10 and apply. As you can see, it took 10% off my order. So, that's working as well. Next, I'm going to scroll down to the bottom for shipping. You can see that free shipping is selected. It's exactly what we want to do here. So, that's also working fine. And then we have our payment information. So, since we left Stripe in test mode earlier, we're able to enter a test credit card number to make sure that everything works properly without actually charging our own card. Here, you just enter 4242 until it fills up the credit card information. Then, enter an expiration date that's sometime in the future. It doesn't matter. And then for the security code, just enter 1 2 3. Once you have that entered, go down and click on place order. And there we go. The order went through. You can see that we have the order confirmation screen and then the information about their order on the right hand side. Now with that done, let's make sure that the order actually shows up in WordPress. So go to the top left and click on the WordPress logo. Hover over Woo Commerce and go into orders. And here we have our test order. Let's click into the order that was just placed. And here we can see all of the information about it. So, if this were a real order, you can change the status here. So, whenever you're working on the order, it's going to be in processing. And then whenever you're done, you can change it to completed. However, for any reason, if you need to refund an order, you can change the status from processing to refunded. You also have other options like cancelled, on hold, pending payment. You basically have a status for any scenario. So, to issue a refund, click on refunded. Then go down and find the refund button. Go ahead and click on this here. Then click on refund via credit cards Stripe. Click on okay and it's going to refund the order back to the customer using their original payment method. So that's how you manage your order status and refund orders in Woo Commerce as well, which can be very helpful to know whenever you start getting lots and lots of orders coming in. It's very easy to organize everything here. Now, I mentioned a moment ago that our Stripe payments are actually still in test mode. So, let's go ahead and fix that real quick. On the lefth hand side, go to Stripe by payment plugins. Click on settings. Then for mode, let's switch this from test to live. Let's scroll down, click on save changes. Okay, now we have most of our backend settings configured. We're going to go back into our website real quick for a final pass of customization to make sure everything is optimized for mobile and tablet. To do this, go to the top and click into your website. Click on edit with Elementor. And up until now, we've only been editing our website in the desktop view. But we have two other device icons here. In the middle, we have our tablet. Then after that, we have our mobile. And we can adjust each of the sections within our website to make sure they appear properly on mobile devices. Let's start with the mobile view. And right now, our hero section at the top of our homepage doesn't look nearly as good as it does on desktop devices. So, if I switch back over to desktop, there's a lot more going on here. where we can see the coffee beans on the side. The spacing between the section here looks really good with the text on the left and then the image on the right overall looks way more cohesive. Then if I switch back over to mobile, it just doesn't look nearly as good. So, we're going to have to edit the section to make it responsive on mobile devices. And there's a super easy way to do this. Start by opening up your structure panel in the top right. And we're going to take the hero section at the top. We're going to right click on it. And we're going to click duplicate. And that's going to make a second version of our hero section. If I scroll down, you'll see it down here. Now, for this one on the top, I'm going to click into the section settings. And under advanced, I'm going to go down and find responsive. Click into this. And now, I'm going to hide this on desktop. And I'm going to hide it on tablet. I'm going to make sure it's only showing on mobile. Now, for the one underneath it, I'm going to go down and click into the settings. Then I'll switch to advanced. go down and find responsive. And now I'm only going to hide this on mobile. So this section right here that's grayed out is no longer going to show up on mobile devices. And this section here will show up on mobile devices. So we're going to edit this section here at the top. Let's start by fixing the background image. I'm going to click back into the settings, go to style, and the reason I can't see the coffee beans anymore is because of the image position. It's currently set to default. I'm going to set this to center center. And now you'll see the coffee beans kind of slide in from the right side. This is mimicking our desktop view a lot more now. But we're running into another issue because the coffee beans are so close to the text. It's kind of cutting off the text here at the top and bottom and it's blending in and we can't see it anymore. So in this case, I'm going to need to change the text color to white. So, I'll click on the text, go to style, change the text color to white, and I'm also going to add in a slight drop shadow to the text. So, click on the pencil icon next to text shadow. You can mess around with the settings. I think a blur of anywhere between five and 10 looks pretty good. I'll go with eight. Now, let's do the same thing for the subtext. Click into style, change the color to white again, and we're going to add in that text shadow again. I'll set the blur for this one to I think five looks good. Now, another thing is that we have a lot of empty space here on the bottom. And that's because we used a two panel structure. This is really easy to fix though. We'll go to the top here and right click on the container. And we'll just delete it. It's going to center our text and make our homepage and hero section look really good on mobile devices. And now, if I scroll through all of the other sections here on our website look pretty good. Everything is nice and optimized and I don't see anything else that needs to be changed. Let's scroll back up to the top and we'll confirm that everything looks good in tablet view. We'll scroll down and see how our tablet responsive section looks. To get a better look, I'm going to close out of the structure panel. And yeah, this looks just about how it does on desktop devices. Doesn't look like we need to edit anything here. Then one last time, I'll switch over to desktop. And it's worth mentioning that this same approach works for any of your other pages. So, let's go to our contact page, for example. I'll click on save and leave. I'll switch to mobile view. And now, if I looked at this and something didn't seem right, then I'm able to use the exact same method to duplicate the sections and then edit them for mobile and tablet, respectively. So, just go through all of the pages on your website and optimize them for mobile. With the process I showed you, this should only take a few minutes. Now, we've optimized our website for mobile and tablet. Next up, we need to create and insert our policy pages. Start by going to the top right and clicking on publish. When it comes to creating your policy pages, you can do that within the WordPress block editor or you can do it here in Elementor. For this video, I'm just going to keep everything I can within Elementor. So, go to the top, click in, and click add new page. Now, we don't need our privacy policies to look fancy or super professional. We mainly just need a heading and some text. And after that, we're going to insert that into our footer menu and into our checkout page. Let's begin by simply dragging in a container here at the top. Then we want to drag in a heading. We'll change this to read privacy policy. And then for style, I'm going to have this center aligned. Next, let's add in another element. This one is going to be a text editor. And we'll put that directly underneath our privacy policy. And then on the left, you can copy and paste in your privacy policy. If you're not sure what to write here, I would recommend using chat GPT and doing some more research. What you need to put into your privacy policy can vary greatly depending on where you live. But something like this should work pretty well. Right now, the text is way too close together. So to change this, we'll go to style at the top and then under paragraph spacing, we're going to increase this till it looks just about right. 37 pixels looks right. And you can choose if you want this to be center aligned or left aligned. I think that looks a lot better. Now go up to the top here and click on your page settings. Change the title to be privacy policy. Switch it from draft to published. And then we're going to hide the title. Go to the top right. Click publish. And now we'll do this exact same process for the rest of the policy pages on your website. Now here are the policy pages that you'll need to repeat this process for. In total, you'll need four policy pages. You'll need your privacy policy, which is the one that we just created. Then you'll need a terms and conditions page, a refund policy, and a shipping policy. And again, if you have no idea what you're supposed to write inside of these, that's totally normal. Just do some research and figure out what you need to write there based on your business, what you're selling, and where you're located. ChatGBT or any other AI language model is super helpful for this. So, once you've repeated this process for your four policy pages and you have them created, we're ready to move on. Okay, so with the pages created, we now need to assign them to the correct locations. Start by going to the top left here, clicking on the Elementor logo. Click exit to WordPress. Go to the top left again. From here, go all the way down and find settings in the bottom left. Then click into privacy. And here you need to select your privacy policy page. And if you need help putting together your privacy policy, click on this button here to see the privacy policy guide that WordPress has put together. This can be pretty helpful when you're building it out. So, I'll select my privacy policy here. Select it right there and click use this page. Now, let's set our terms and conditions page within Woo Commerce. So, go to Woo Commerce here and click into settings. In the top right, go to advanced. Under terms and conditions, you'll need to search for your page. So, type in terms. You're going to see that popup right here. Go ahead and select it. Then go all the way down and save your changes. Next, let's add our policy links into our footer. Go back up to the top here to go back to your website. Click customize. Go down and find menus and create a new menu. We're going to use this as our footer menu. So click on that here and go down and click next. For the menu name, you can also just set this to footer menu and click next again. Click on add items. And here we'll add in our privacy policy, our shipping policy, refund policy, and our terms and conditions. If you want to add in your homepage button or any of your other pages, you can do so as well. I'm happy with that, so I'll click publish. Now I'm going to go down to the bottom to my footer. And now I can see my policy pages are listed here at the bottom. Okay, we've configured our policy pages. Now we have one final step. It's time to launch your e-commerce website. Let's go to the top left and close out of the customizer here. Now click on the store coming soon button. From here, select live and click save changes. At the top, you'll see your website now says alive. that indicates that everything is working properly and your e-commerce website is ready to go and ready for your website visitors. Make sure you don't forget when you're signing up for your web hosting to check the first link in the video description. Using that link is going to make sure you're getting the best deal available. Thank you for watching this video. I really hope it helps you get your e-commerce website up and running fast. And with that said, I'll see you in the next