How To Make Easy WebShop Elementor Pro Plugin | UpTig

by uptig | Oct 17, 2021 | PLUGINS

How To Make Easy WebShop Elementor Pro Plugin | UpTig

Making a webshop these days is easy. I’ll show you in this tutorial. How we can make easy webshop Elementor Pro Plugin that with WordPress, WooCommerce and Elementor Pro. Let me show you the websites we are going to create and I have it over here. What you see is a nice menu and if I scroll down a new menu appears.

I’ll show you how you can get that on your website. And of course, you can change the colours, change the menu, use different icons and you can use two different logos, one with colour, one in black and white.

Over here, you can change the content like the opening times of your webshop or give us a call whatever you want to do you can create it over here. You can have your own icons over here and what you see over here is a nice background with a Ken burns effect.

The new collection, if I refresh the page, there’s a nice animation over here. Also over here I show the two big categories – Ladies and Gentlemen and over here, I have featured products and I can decide how many I want to show next to each other.

Here, I want to have three, here I want to have five. It’s all up to me. I have a folder over here with some information, privacy policy all that stuff over here. And if I want to edit this page, I have to log in and click on, edit with Elementor and then I’ll show you how easy it is to change things over here.

I can click there and I can change it to Huge Sale and it becomes really big, so I go through style, click over here, make it smaller, just like that. That’s how easy it is; just a slider. I can change the family font. I can make it uppercase or default. There is so much you can do, and it’s so easy to do it and I will show you, step-by-step how we can adjust all those areas.

We’re going to create this from scratch. So we’ll learn a lot about Elementor Pro and the more, you know, the more you are able to create things you have in mind. That’s the goal, to let a page builder create the thing you have in mind, and through reading this tutorial, you’ll become really good in Elementor Pro.

Also over here, if I want to show less, I can change the columns to four, here I show three and if I want to change this colour, I click on it, I go to the style and there I can change all the colours, so I can change this one to orange if I want to, and then it becomes orange. I can make this bold. So I go to the Price, and over here at typography, I can make it bold. I can make it bigger, but the price should not be too big because then people don’t want to buy them. It’s all up to you.

Then if I want to add something, I can create something from scratch, and after reading this tutorial, you can, but you can also make use of pre-made templates. So if I click over here, I can import a complete page or I can go to blogs and using Elementor Pro, there are so many pre-made areas that you can import. So, I can go to a certain category for instance testimonial or you can search over here for a keyword and then you can find something.

And if you see something you like, for instance, this one, I can click on insert. Now you can insert it, but I don’t like the black colour, so I click over here on this section, I go to the style. I choose my primary colour and in that way, you can add more stuff and it’s all optimized for all devices… so for tablets, for phones… see the nice menu. And if I click over here and go to a certain page.

And if I go through the shop, I created my own templates from scratch, where I have a sticky menu over here with the categories. And on the shop page, that’s the only page where I will have this area. So if I would go to a certain category, then this area is gone which you just saw. And that’s what you can do with templates. You can create templates and those templates can be assigned to specific pages or categories and that gives you so much freedom to create whatever you have in mind.

Make Easy WebShop Elementor Pro Plugin

So I could decide that all the pages with women products should have a pink bar over here and all the pages with products for men should have a different colour. We’re going to dive deep into that subject. You will understand it all. So if I would go to sweaters, for instance, and I pick one, this one, the Heather Sweater, I click on it.

What you’ll see over here, is an image. You have more images, you can navigate through them. You can click over here, make it even full screen. You can click again and navigate, but what you also can do, can have multiple variations. So you can create sizes, colours, space or whatever you want to over here, I will show you step by step, how you can add variables.

So I can change the size, I can also say to size L should be more expensive or cheaper. I can change the colour and if I change the colour to grey, it will also appear over here. Then I can add it to the cart and then over here, I can view the cart and then over here I can view the cart or I can take a look at information, description, related products — we can decide what we want to show over here. And that’s additional, reviews and you can show it like this, but you also can show it a totally different way.

So I can edit it, the single product with Elementor Pro. If I want to, I can drag this area over here on top. And when I do that and I take a look at the result, I see it over here, but if I would go to a different product, I will see that every product page.

I can align it to the left, update and now it’s aligned to the left. So the sky’s the limit. You can design the page you have in mind. We’ll talk about my favourite subject, NOT, but it’s good to talk about its taxes. How you can set it up manually with different countries, states, normal and reduced tax rates and I will show you how to apply these settings automatically, which is I’m hoping a much better option.

When you have added something over here, you can view the cards over here you can go to the cart. We will talk about applying coupon codes so you can get discounts in percentage or in dollars or a currency you use. We’re going to talk about shipping based on where we live. So from $50, as I say, over here, it’s free. If it’s below $50, you pay $10 depending on where you want it to be shipped to; we’re going to talk about all those things.

Over here, you can update it. You can go to a different page, add more stuff — a jacket, this one, for instance, size XL, add it to the cart, view to cart, and then it will be added over here.

Then we can proceed to the checkout. We can fill in our details and the client can pay over here with credit cards, with PayPal, you can decide what you want to choose, and I will show you step by step, how you can set up a Stripe account so you can accept payments from people in the world. And when you get it on your Stripe account, within a week it will be sent to your bank account.

Make Easy WebShop Elementor Pro Plugin The great thing is with WooCommerce and WordPress and Elementor Pro, you can also sell digital products. You can create something valuable Ebook or whatever, you can sell it on the internet and people can buy it. You don’t have to have stock. It’s just something that you can sell unlimited times. I’ll show you how to handle incoming orders and keep your buyers up to date with the progress of the order.

What I want to tell you is that my goal with this site is to help people to make a website — a professional, good-looking website. It will get new clients or sell things.

So what I’ve done, everything I create for practising, I save it to my elementor. So if you click on the Elementor Pro, there you will see all my templates, complete product pages. So if you don’t want to create this from scratch, what I will show you in this tutorial, and you just want to import it, you can do that over here. You click on it.

You’ll see how it will look on a different device, and then you can download this template. Also here we have this header and I even have categories. So right now I scroll down and you see it over here again, just download it and import it into your website. It can also go over here to the headers and then you see three different ones, take a look, but you see this logo changes. If you like it, you can download it.

Or you can take a look at another one. This one changes immediately and this area stays on top. You’ll download it and import it, I will show you step by step, how you can do that. Everything to help you to create a professional website. So this is what we’re going to create. After watching this tutorial, you’ll be able to create a beautiful professional webshop for yourself or for your business or organization.

Or maybe it’s for your clients. You can become an agency after watching this video. I get a lot of comments from people that say thanks to you, I can make a living now by making websites. So that’s what we’re going to do and more. And if you like what you’re seeing so far, I would like to ask you to like this tutorial. you can bookmark for more upcoming tutorials and then I would like to say, let’s get started.

Well, I believe your time is valuable. So I have an overview with a few steps. We’re going to take in this tutorial. If you took a few of these steps already, I can show you where you can start in this tutorial. If you’re starting from scratch, I can show you how you can get a domain name and web hosting. And I can give you a 60% discount. After that, we will install WordPress and then we will get Elementor pro, finally, we’re going to create an amazing webshop from scratch.

And if you have a domain name and web hosting already and you have installed WordPress then you can go to step three and I’ll show you the timestamps so you can go immediately get that point in the video. In the description of the video, I’ve timestamps, so if you want to go through a certain part of this video, you can go to the description and click on the time stamp so you can go directly to that part of the tutorial.

And if I go too fast for you, you can click over here and slow down the speed of the tutorial. I’ve been making tutorials now for over five years and people seem to love my videos. I do my best to get better and better so I can reach more people with my tutorials. If you have any questions or feedback, feel free to leave a comment below the tutorial.

So that’s an introduction, now it’s finally time to really get started. So let’s get started. The first things we need are a domain name and web hosting. If you have that already, that is great. Then you can skip this part, if you don’t have it, let’s go to a softitd.com Then you can click over here to go to site ground. Siteground is, in my opinion, the best web hosting provider there is.

I tried a lot of web hosting companies and I found out that SiteGround is the best one. And it’s only my opinion that they are the best. There’s a Facebook group, all about web hosting and every year there’s a poll with who is the best web hosting provider and siteground is number one every year.

The websites here are super fast, you can call them 24/7 or you can open a chat session with them. I had a few times that I had no idea how to figure something out and then I went to the chat session and within a few minutes, they were able to help me. At the chat, they can say you should do this and this and this, but they often say let me do it for you if you want to. So the support is amazing.

Because SiteGround believes in their product and their service, they offer you a 30-day money-back guarantee. So if you somehow do not like it, you can get your money back. So there’s no risk for you. I don’t think you will cancel within 30 days. It’s amazing to get a domain name or web hosting through SiteGround. I host all my websites here and I will walk you through the plans. There are three plans. There’s the StartUp Plan, the GrowBig Plan and the GoGeek plan. The startup package is $3.95 per month. In Euros, it’s the same €3.95.

You can have one website, which means one domain, then there are 10 gigabytes of web space which is more than enough and 10,000 visits per month which are also more than enough when you start. You can install WordPress for free — there’s free SSL. What is SSL? With that, your website becomes secure. With other web hosting companies, you need to pay money for that. There’s even one where you need to pay $120 per year to get SSL. With Siteground, it is free.

Then there’s the GrowBig plan — $5.95/month or €6.45 per month. With this plan, you can have unlimited websites. What does it mean? Here we can have one website, so one domain. Here you can have unlimited domains, so when you get the web hosting package of $5.95 per month, you can buy ten domain names and then create different websites. So that’s the great thing about the GrowBig plan.

You can have more space, you can have more visitors and if you scroll down a bit, you see, you can have on-demand backups. So you push the button and you get a new backup. If you already have a website, you can have a free site transfer to Siteground. You can have staging so you can change things in your website and then push one button and then it goes to the live website. If you want to know more about all these options, you hover over here and you can see them.

So what I love the most about the GrowBig plan is that you can have unlimited websites and then there’s the GoGeek plan — 11.95 dollars or euros and you have more webspace, you can have more visitors and there are all those extra options. I personally use this plan because

I have a lot of websites and a lot of visitors. But when you’re creating your first website, you can choose between the Startup plan and the GrowBig plan. I will go for the GrowBig plan. So I click over here on “Get Plan” and now we can register a new domain name. If you have a domain name already, you can click over here, you can fill in yourdomainname.com and then proceed. I want to register a new domain name and I can choose it over here.

So I can say softitd (WordPress) and then there are extensions. You can say “.com”, “.net” but there are also countering specific extensions like .nl, like .pl, the .co.UK, .es. If you want to go international, I prefer .com, not .net or those other ones, just .com. So be creative, make sure it is available, if it’s not available you click on proceed.

You will see it is not available. The domain costs $15.95 per month, €14.95 per month and I click on proceed. That says “Congratulations! Domain softitd is available for registration with our hosting account.” That is amazing!

So now, I want to fill in some details over here. I want to leave my best email address over here which is softitd@gmail.com; I need to create a password and I need to confirm my password. Then we scroll down a bit and we go to client information. So first you need to select your country, then your first name, and your last name. If you have a company, you can fill in the details of your company. If you’re from the United States, you need to select your state or province, your city, your street address, your zip code and your phone number.

Then I scroll down and I go to payment information. So I will fill in my details over here and the great thing is, depending on the country where you live, their local payment option. So if you’re from the Netherlands, you have Ideal, if you’re from another country, you can pay with your local payment provider which is what I love about Siteground. My billing address is the same as given in the contact information.

I scroll down. We’ve chosen the GrowBig plan; you can choose your data centre — I choose the USA. If you want to focus on people from Europe or the United Kingdom, you can choose something else. I’ll choose the USA. This is important. Here it says period: 12 months. REMEMBER, you get a 70% discount here at Siteground but it’s only for the first payment period. So if you pay for 12 months, you get a 70% discount for 12 months.

If you choose 24 months you get 70% for 24 months. If you choose 36, you get a 70% discount on 36 months. The thing is when you say 36 months you need to pay now. So you pay $214.20 and then you have three years of web hosting with the GrowBig plan where you can have unlimited domain names. If you will go for 12 months, then after 12 months, you will start to pay $19.95. I want to be upfront about that.

So if you’re really sure you want to go for a long time with this domain, then I would suggest you go for the 36 months. If you want to try it out, do a shorter period; then I would say go with 12 months, and after a year, you start paying $19.95 per month depending on the plan you have. It’s not entirely true, because, after your first period, you can decide to go for three years with Siteground web hosting and then you get a 30% off discount.

So then you would pay around $14 per month with GrowBig, and $7 per month with the startup plan. If I take a look at what a website means for a business, I know it is worth every penny.

So it’s up to you if you want to go for 12 months, 24 months or 36 months. I go with 12 months and then we go to the next step. We register a domain name and then I also suggest you get domain privacy. Why is that? If you don’t do this, people will see all this information you have filled in on this page and they will call you, they will email you like hey I can make your website, you can have a business loan if you want to; people start spamming you.

You don’t want that. For $12 per year, you can get rid of that. You don’t need the Siteground scanner, so there’s a total of $99.35 and you have a domain name and website for a year. I think this is an amazing deal. What you can do now? You confirm that you’ve read and agreed to the Siteground Terms of Service and Privacy Policy and you can check this if you want to receive Siteground news and special offers by email.

When you get there through webhosting124.com, you don’t pay more, but I get credit for it. So it’s a win-win situation and it helps me to make those tutorials. So thank you for that. I click on ‘Pay Now’ and now ladies and gentlemen, you have a domain name and web hosting — congratulations.

The next step is to install WordPress. Click on this button with the text ‘Proceed to the Customer Area’. And then we see this: Create or Migrate Your Website and then you see your domain name. We click on this orange button to set up our site and here we can start a new WordPress website. So I click on the button below: Start a New Website.

Then I choose WordPress even when you want to start a WooCommerce website, still, choose WordPress and now we need to set up a login. Here you need to fill in your best email address and create a password. So I will use softitd@gmail.com and my password. Awesome!

Then I click on continue. I don’t need the site scanner; I have that already. I click on: Finish and now our website is being created. It will take less than 2 minutes. It says now that your domain has been created and WordPress is installed.

So what I want to do now, I want to go to the website. Here’s my website and I click on: Site Tools. I want to do one more thing before we go to our WordPress website. I want to make it secure. So here we are at your domain and then there are a lot of options over here. What we can do now, we can click on security and then we click on SSL manager. Our request is being processed.

So here you can select your domain, if you have one it’s probably already selected. Select SSL and what it says, it’s already encrypted. So I need to scroll down, here it is: Manage SSL. My domain already has an encryption certificate. I click on Actions > Enforce HTTPS. I click over here and I need to turn this on and now it’s turned on; that’s it.

So now; what do I want to do? I want to go to WordPress > Install and manage. I scroll down. Here we have our domain name, WordPress is installed and I want to take an action by clicking here: Login to the Admin Panel, and we are already logged in. What we need to do now, we need to skip the WordPress starter. So I scroll down and I click on exit and ladies and gentlemen, we are in the back end of our website. Look at this softitdWP.com. I bought it five minutes ago and I am already living with it.

Everybody in the world that goes to softitdWP.com goes to my website. So I can close this now, I don’t need it and if I click over here, I go to the front end of our website. This is our website and it is really ugly. It is, I don’t know, ugh! I don’t like it, but we’re going to make it beautiful.

So let me tell you the difference between the frontend and the backend. The front end is the website that is what people will see when they enter your website, when they go to your domain, they see the front end. When you want to edit things and configure things, you can go to the backend. You can only go to the backend when you can log in to your website. Since we are logged in, we have this beautiful bar over here that says we are logged in.

If I go to softitd.com, I go to my website. I’m not logged in so I cannot go to the backend. If I would log in then I see this bar and then I can go to the dashboard — to the backend. So I hover over here and I go to the dashboard and here we can configure a lot of things. But before we do that I want to remove a few things. I go to plugins and I click here, so I select all the plugins, then I click on bulk actions, deactivate. I click on apply, so we deactivate all the plugins and when we have deactivated them, we can remove them.

So I click here again, so we select all the plugins > bulk actions > delete. Then I click on apply and okay. Then I go to the dashboard, I want to dismiss this message. I want to close this. There’s one page so we can go over here or we go to pages, I want to remove both pages, I select this area, so I select all the pages, move to the trash apply.

I go to the trash and there I want to empty the trash. I go back to the dashboard. I close this. I close this. I close this and I close this. Now, I want to change my username, because over here, it says howdy, softitd@gmail.com and when I write a blog post on my website, it will say written by softitd@gmail.com. I want to make it personal. So I click over here on Edit my profile I want to add an image of course.

So here you can do a few things — you can change the look and feel of the backend. I like the default one. I want to fill in my first name and my last name over here and then here at display name publicity I want to select sofitd and now over here it says, “Howdy, softitd.” Then I can scroll down, I can create a profile picture and generate a new password.

First, I want to click on update profile and if you want to get your image on the website which is highly recommended, then, you need to scroll down over here to profile picture, you can change your profile picture and Gravatar. So I click on it, if you want to know how you need to do this thing, click over here I go back now to my website and I want to change my email address because this email address is linked with my Gravatar account. So I click on update profile, and now I have my image over here which is much better.

What else? I go to settings > general and if I scroll down, I can change the date format to April 13, 2020. I can customize it, change it to something else and the time format, right now it’s 1:55 p.m. You can change it and you can take a look at the time zone.

I am, at this moment at +2 and if I save the changes, the time is correct now. If I prefer the time format of 24 hours, I can check this one. I save the changes. Now I go to the permalinks, here at settings, permalinks, this is really important. We want to optimize our website so we can be found on Google. Sometimes the common setting is plain and then we have a page or a post, it will look something like this. Well, that looks ugly.

I want to change it to post name, and if that’s the case already, I leave it at that and I click on save the changes. And now we have a blog post, for instance, my awesome journey. It will say yourdomain.com/my-awesome-journey, instead of something like this because this looks really weird.

This is something you don’t want. So post name, save it, perfect! So I go to the dashboard and I change my image and what I want to do, if you go to the screen options, you can get rid of this. So I can uncheck it all. I like to keep things clean. I don’t know, just makes me happy. So right now I’m so happy. So we can change the title of our website. We’ll do that later and you can do that in settings general, but since we’re here, let’s make our website secure. Then we need to log in again and now we are fully secured. Also, the front end, which again is so ugly.

Make Easy Web Shop Elementor Pro Plugin

So we’re going to make this look better. How can we do that? We’re going to make use of Elementor Pro – an amazing page builder and I will show you step-by-step how you can create a beautiful website, a beautiful webshop using Elementor Pro. And in order to get it, you go to a new tab, softitd.com/elementor.

This is an affiliate link. You don’t pay more, but I get a commission when you buy this through my link. So thank you for that. You can go to pricing and there are four plans. The first one is the free version. You can make a beautiful website with the free version but with the pro version, of course, you can do so much more. I was so excited that I scrolled up again. There’s the personal plan — the plus plan and the expert plan.

What’s the difference, the number of licenses you get. So for $49 for the personal plan, you can have it on one website, you pay $49 per year. Then, the second plan is for three websites and the expert plan is for a thousand websites. This will cost you less than $5 per month to use Elementor Pro on one website. This will cost you less than $3 per month to use on three websites. And this will cost you less than 20 cents per website if you would use it on a thousand websites.

So depending on how many websites you want to make, You can choose your package and what you can do, which is amazing. We’re going to dive deep into this tutorial. You’ve seen a little bit already in the introduction. We’re going to make a beautiful website. You can make use of pro widgets, pro templates, you can import those into your website, so designers have made it all ready for you, and you only have to adjust it.

You can import complete websites. There’s a theme builder. You can create custom headers, custom footers, the WooCommerce builder which we’re going to use, the form builder, the pop-up builder. And as long as you keep your subscription, you get support. If you decide to cancel your subscription after one year, you still can use Elementor pro, it will be fully functional. You only cannot add more elements and you cannot have any support and updates anymore.

So I always want to play around with this and go for more of us. So I go for the plus plan, three websites and I want to buy it now. Here I can create an account — my email address is softitd@gmail.com. My first name and my last name. I’m from the Netherlands — Netherlands; it’s so Dutch when I say that. If you have a company, you can fill in the details over here. I will do that F&A Media, my VAT number, I fill it in over here and I can pay with credit card or with PayPal.

I choose a credit card and then I go to the checkout. Your payment is processing… please wait. Yes, I will wait here patiently. You successfully completed your purchase and I want to congratulate you because now you have Elementor Pro and now the fun is going to start and you can generate an invoice, but of course, we want to download Elementor Pro. So we can download it over here and there it goes. I want to do a few things now. I want to go to my website.

I want to go to the back end. I want to go to plugins, add new ones, but first I want to download the free version of Elementor, so over here, I search for Elementor, install now — more than 5 million installations — they’re going like crazy. It’s an amazing company. They make an amazing page builder and I am happy to be a part of this community. I activate it. So now we have Elementor. I don’t need this.

Then we go back to plugins, add new, upload a plugin, but this time, I drag this file over here, or you can choose a file and browse through your computer and then Elementor Pro will be installed if you click over here. I want to activate the plugin and it says welcome to Elementor Pro, You need to connect it. If you don’t see this, you can go to Elementor license, you need to connect and activate. I can connect it with my new email address otherwise you need to login over here with the details you just filled in here.

Make Easy WebShop Elementor Pro Plugin and I want to become a super-contributor by sharing nonsensitive plugin data so they see how I go through the plugin and then they can make it better based on my behaviour. So I’m part of the team that’s making elements or even better. I activate it and it says it is valid till November 2021, and now Elementor Pro is active.

So we have Elementor, we have Elementor Pro. You can see that here at plugins, Elementor and Element Pro and now I want to add a theme. So you have a page builder and you have a theme. A theme decides a header and the footer, but since Elementor Pro is already doing that, Elementor created a theme, which is actually empty.

So I can go to Appearance, Themes and I can download that empty theme. Because if I take a look now at the front end, I go to customize. There are quite some settings, colours, theme options that are based on this theme we have right now. I don’t need all this stuff. It’s only interfering with Elementor Pro because Element Pro can do all this stuff.

So we go back, I don’t publish it. I go to the backend, to appearance, themes. I add
a new theme and I searched for hello. The theme is called hello, Hello Elementor. I install it. So it’s really lightweight theme and it has no settings. It’s just an empty theme and that makes your website faster. So since we have the theme active, I want to remove all the other themes, theme details. Delete. 2017 — delete, and 2020 — delete.

Yes, only the hello theme.

So now, if we go to the website, it looks really empty. The title, the subtitle, and the archives. So what do I want to do now. I want to create a few pages. How can you do that? The best way is to go to customize, you see not many options, only the default options that are with every theme. I go to menus and I want to create a new menu and I call this main menu. You can call this whatever you want to, it’s just for a reference only. Nobody will see this. It’s my primary menu and I click on next. Now I can add a few items — a few pages.

So I click over here and I want to add a new page. Of course, the homepage — the first page we need to create. So then there can be an About Page because maybe you want to say something about yourself in your webshop and of course, people should be able to reach out, so a contact page or contact us, it’s up to you. If I click on @, it goes to my menu and you’ll see it over here. That is amazing. So we’re creating a webshop.

So what we can do in order to get inspiration, we can go to the best webshops of 2020. And then we scroll to a link. I clicked already over there, and I can scroll down a bit, and I can take a look at a webshop. What do webshops have? We don’t want to fill our website with stuff because other people do it, but we can take a look at our webshop’s look. What you see over here, new products, body skincare,

So over here in the middle, you see a lot of categories — skincare as a category. So there are a lot of products people can buy over here. It looks beautiful. This by the way, is exactly what you can make with Elementor. So you don’t see about it, it’s just about selling products. So you can get inspiration from that; different websites, Skullcandy seems to be the number one. There’s a shop. If you hover over it you see a nice menu like this.

Okay. So you see, there’s not too much over here. So we don’t need to fill this with services, who we are, our past, our team. No. The goal, I guess, for you is to sell products. So don’t add too much information over here. And if I take a look at apple.com. I like to learn from the best. Those people invest a lot of money to make the website better so they can sell more. So if you go to watch, you want to go back to the homepage.

There’s no homepage area, there’s no home. You click on the logo. So that’s what I also want to do. So I don’t want to have the homepage over here. I want to remove it. Only about and contact. I’ll take a look at it later. Then I go back, I go back and then I go to the homepage settings. Right now, it says archives because WordPress by default was a block website creator, but now you can create a complete website with it.

So right now we go to the homepage settings, we will change it to a static page so we can select a static page that will show on the homepage. So the homepage will be the homepage and we have no posts page. I have a complete tutorial about creating a blog on your website, you can find it over here, but here we want to focus on creating a webshop. Publish and I close it and this is how our website looks. It’s getting better and better.

What I want to do now, I want to add a logo and I have a tutorial on how to create a logo and go to YouTube, search for creating logo FERDY and I should pop up, probably, create a logo for free within five minutes. Create a logo for free, with a transparent background, something like that. Or in Photoshop, I have free videos about it. I have even more videos about it.

So you can create a logo. And then I want to add it over here. How can I do that? Well, I go to the customizer, to the site identity and I can select my logo. So I want to sell beautiful clothes with a little Spanish tint. So what I will do, I say, popular first name in Spain. Okay. Yeah, I’ve seen one. Popular last name Spain. Spanish last names. Yes, I’ve seen one. Awesome! Then I go to fonts.google.com and I say, Jose Alba, that’s the name of my business — the Spanish designer and beautiful clothes. And I just start scrolling until I think, “Hey, that looks great.”

And if I find one, I like, I click on it. And then I think I like it, I click on download family, There it goes. I unpack it. Double click, double click. Install the font. Then I go to Photoshop, create something new and I start typing. Jose Alba, command+A, make it black and I search for Courgette, making it a bit bigger. Then I hold Command and I click over here on the layer. I go to images, crop, remove the background, file > export> save for web, PNG. Change the width to 500. Save it. Save it. Jose Alba. Black. Double-click make it white, save it again — 500. I click over here and I change this to white. Okay.

Make Easy WebShop Elementor Pro Plugin

Then I go to the website. I select the files, both, I go to desktop CMD + A, open, and I choose this one. Select, skip the cropping, and there it is — Jose Alba. You also going to have an icon over here. So, let me see how I can do that, and make us one bold. It’s not possible. I go to windows > character and then I can do it this way.

Okay. I make it square. Okay. It’s not possible. I make it a bit bigger. Canvas. Let’s say 500. Hold shift. Okay. Crop the image. I want to have a background that is a dark blue colour. Copy of colour code and I paste it there. I save it again. This time favicon. So I go to the website again. I scroll down and I set my site.

I can upload files, favicon, select, skip cropping and there it is JA — Jose Alba. Then I can have a site title. I can say Jose Alba because they should be a celebrity in the designing world. Summer clothes 2021new collections every week so you can buy more and I can make more money. I’m talking as if I was Jose Alba and that’s not my goal, of course, to make money with these tutorials.

It’s just to help people and… actually, it’s a little bit of both. Okay. So far so good. Now we have a logo. We have this area over here. We have our titles. So what do I want to do now? I want to install WooCommerce. So I go to the back end, Plugins, add new, WooCommerce is completely free, and it’ll enable you to sell stuff on your website. So I search for WooCommerce, install it. It has more than 5 million installations. It is fairly popular. It’s updated two days ago.

So it is really up-to-date and it’s compatible with our current version of WordPress. WooCommerce is freaking amazing. It’s installed and I want to activate it and then we go to the wizard. So here it says welcome to WooCommerce, what you can do. You can fill in your address over here and if you don’t want to do that, you can skip the setup. But I would like to do this. You need to have an address when you’re having a shop.

I will use my personal address, in the Netherlands, and if you are setting up a store for a client then check this. Continue. Yes, make WooCommerce better. We want to serve the community. Which industry does the store operate in? It’s not mandatory to fill this in, but I’d like to say fashion, beauty, maybe not fashion. Physical products, downloadable products, so choose one of these but don’t choose these. They cost money and it’s not necessary.

There are plugins that can do this for you. So I do physical products and I click on continue. How many products? Well, I don’t have products yet. I’m not selling anything elsewhere I don’t need all this stuff. Continue. I want to use the hello theme. Continue with my active theme, and this is what we want. We can use it later for automatic shipping and tax stuff. So I say, yes, please. Awesome. close this. I go to the dashboard to see if it’s not too crowded. I don’t want to set up Jetpack yet. Elementor overview. I don’t need it.

And WooCommerce recent reviews — yes That’s what I would like to see. Okay. So you see the more plugins we have, the more you will see here at the left. So if we go to plugins, we have Elementor, Elementor Pro, Jetpack, WooCommerce and WooCommerce Shipping and tax. And that’s what you see over here. This is from jetpack, this is from elementor, this is from WooCommerce.

So the more you have over here in terms of plugins, the more you’ll see here at the left. So what I want to do, I want to create my first product, but this looks so ugly. I want to change it so it feels a bit better to work. So what I want to do first, I want to create a header. It will be a really simple header. So it just looks a little bit better. I go to the back end, I close all this stuff. And then I go to Elementor, below that we have templates and I want to go to the theme builder.

Probably, you’ll see something else than this. If you don’t see that, click on it, try it now. They’re still creating this beautiful new area and we want to create a new header. So I click on the plus {+}. Then we can create a header from a template that is created for us with access to all those or we can create something from scratch. Well, for the sake of this moment, I want to make it quick. I will focus later on creating a custom header.

So right now, I want to insert this one. So we have something. There’s my logo. Here’s our menu and for now this is fine. If you want to change the name, go to this area, settings and call this one temp header. Then I click on publish and I want to show this on the entire website. That’s it.

Later, we’re going to dive deep into this stuff but right now, we just want to have our site up and running and focus on creating products on your website. So right now, we have this and About and Contact. And if I go to the about webpage, you see FerdyKorpWP.com/about and contact. The Colour is green right now, we can change that later.

So what do I want to do now? I want to focus on creating our first product. How can we do that? We can hover over new products or you can go to the backend, to products, all products and click on add new. Either way, you’ll go to the same page so we can create our first product. What I want to do now is a little bit tricky.

I prefer that you use your own images and you create your own products. I’ve been searching on the internet and I could not find free royalty-free images that we can use as a demo for our website. So what did I do? I went to a website — Spanish webshop clothes, and I found this one — Eduardo Riviera — and be careful with this. Please do not download these images and then use them for months on your website because that’s not what should be done. I think that is stealing. So it’s a little bit of a grey area, but I want to show you how you can create a beautiful shop and an important part of a beautiful shop is beautiful images.

So what do I want to do? I want to grab photos over here. It’s not really summer. Maybe there is summer. So we can click over here. Yeah, that’s nice. But I want to download these photos and again, don’t use this and then keep it on months on your website. So I go to Lookbook for men and if I see something I like, a beautiful jacket, I can use it. So let me go to women, and I’m searching for something simple, something — a scarf. Let’s start with a simple product — a scarf. So I click over here. What do I want to do now?

I have a tool, so, if you want to get a tool, you need to use Google Chrome, go to ferdykorp.com/downloadimages, hit enter and you will be redirected to the right extension. I have it already. So you see it over here and look what this does. You can go to any page, how many images are there? One, two, three, four, and then five, six, seven — also these images will be downloaded, but I click here and in percentage, it is going to show you how much it will be. I open them and over here, I see all these images.

Some are duplicates, so you need to figure it out like this. So let’s say I hit space. This one is good. Also, also, that’s the same. I remove that one, remove that one. I don’t need all this other stuff. So here we have, you can rename it if you want to. And the name is really important because if people search for the Amapola scarf on the internet, they can find you based on your title. So see, don’t call all your images, 0001, 0002 — no. Also through images, you can be found.

So what I have, oh, did I.. no. I have here an Amapola scarf — a beautiful scarf. You really need it in order to stand out among your friends and stuff. Product name — so the product name will be the Amapola scarf. Then we have a long description over here. So we can find it. I will use this website as an example.

After this tutorial, I will remove the website again, but I just want to show you, or I change the information, I just want to show you how to create a beautiful webshop. And I don’t want to focus too much on creating a text over here, I just want to show you what is working.

So what we can do now? If I would publish it. I can do that. Publish. Then I can view the product. If I hold the command, I click on it. This is what you will see. It looks ugly. Yes, it’s true. It looks ugly, but we’re going to make this beautiful later in the tutorial with Elementor Pro. But right now you see the title, you don’t see an image and you see no category, and here’s the description. So what we filled in over here will go here below. If we scroll down, we can say a beautiful beautiful scarf that will impress your friends.

If I would update it, the short description will appear over here. We are just scratching the surface, this is a simple product, there is no size, there is a no different colour, only one option. So this is a simple product. What is it, it’s 88 euros. If you want to change the price, I will talk about it in a minute. You can also create a sale.

So now, you know what, it’s now 59 or 69 of course, still want to make $10 extra profit. And if you have a sale price, you can schedule it for a few days. So from today until Sunday, and then you can send an email to your email list like only these couple of days, you can buy this with a discount.

So that’s up to you, and then it has inventory. This is a stock keeping unit, if you don’t know what it is, you can hover over here, it’s a code for your product. If you have your own products, you can say whatever you want. Just a reference code for yourself, that if you see that this is being ordered, you can go to your storage and find it on the stock-keeping units, or if it’s a product that’s been sold to other people also you can find something over here.

And then if people want to buy it over here, but it’s out of stock and they search on this code, they can find you. So that’s what you can do. Do you want to enable stock management? Yes. I buy 20 of those scarfs and I hope to sell them all and we want to allow backorders.

That means if they’re all sold, all 20, it will say “sold out.” Or you can say, you can allow it, but notify the customers, say that, “They are sold out, but we’re ordering again.” So you can order on them, but it can take longer before they will arrive. So if I would say update, all right now, refresh. 20 in stock, can be back-ordered. It will say that. Otherwise, it will say nothing and you can also allow it and if there’s no stock, they just have to wait longer, but then you can get a bad review like, “Hey, it’s taking too long.” When do you want to get an email saying,

“Hey, the stock of this beautiful scarf is too low.” I want to have that with eight scarfs, so if there are only eight in stock left, I will get an email like, “Hey, you need to order again, otherwise you will run out of stock.” You can also say that you want to sell this individually. Right now I can buy one scarf for myself, my brother, for my mother, or you can decide that people can only buy one of them. I think I’m, I’m rushing it a little bit. When I get excited, I start to talk faster. So I try to slow down. Add to the cart. So now you can only add one.

If you click over here, it will be added. You can view the cart and all this is created by WooCommerce. And we are going to style this later because right now it doesn’t look that good. If you continue, proceed to the checkout. Here’s the checkout. So there are a few pages created with a WooCommerce, we’re going to add them to the menu in the second.

But first, let me finish this product. There’s so much more. Let’s talk about, we have general inventory. We have shipped, maybe the scarf is like in kilograms, 0.2, 200 grams. And you guys say later that based on the weight, the total amount of shipping costs should be measured or decided. I don’t use it. I only use that. I only use the amount of money people spend to decide how much the shipping will be.

So you can do the same because if people buy for $500, you can do free shipping of course. It will be not good if people buy things for $500 and they also have to pay for shipping. So I leave it as is. Linked products — we’ll talk about it later. Then we have attributes. We’ll talk about it later. Advanced. When people buy the scarf, you can have the purchase notes and again, enter an optional note to send it to the customer after the purchase like, “Hey, thank you for buying the scarf. It was from my mother and that’s for you. So please be careful with it.”

Menu order, custom order positioning. So if you have five products and you want to have a certain order, here at, let’s go back, at the cart. So if you have five products over here, you can decide the order like this. It will always be on top, but I never use this. So that’s it. There we go through the right area over here. It is feasible. We can also say this product should be published. Okay. But from next week on, so from the 20th, for instance, here, we can create a copy and the new draft.

So if you have more multiple scarfs, you can just copy them and then change the information over here and which will save your time. Then we have categories — really important. If you see how stores are created, you see Look Book, women, men outlet — these are all categories. So if you click on it, all these products have the category men, and there are also subcategories — clothing.

So here at home, men, clothing. So what I want to do, I want to divide it into two parts — women. Is it women or women? Then I can have a subcategory. I’ll uncheck this and I can say scarfs, and it will be a parent or a child of the parent category woman. So now you see a subcategory. Interesting. You can also have more layers like women, summer scarves, et cetera. And if you have a big website, it can help you to have more structure in your website. So Product Tax, you can say whatever you want, to be found better to create more… to organize your website even more scarfs. Scarf, you can say summer. Now when people click on those tags.

They will see all the products that are related that have the tag summer. So scarfs, summer, you can say the brand. So that’s what you can do. Then we have the product image. I set the product image and this is the image you will see when people see your product. So I click over here. They will see this over here. So select, and then I go to my downloads and I can choose which one I want to show. Well, I think this one is amazing.

So I choose that one. I want to optimize it by removing the dash, copying the title and placing it in the alt-text. That way you can be found better. Then there can be more images, product gallery and there I can add all the other images. So I chose this one. I click over here, hold shift, click over here, and upload the other images. Okay. Add it to the gallery and now when we update it, and we take a look at the result, it’s looking a lot better.

So here you see Home, Women, Scarfs and then the Scarf — you see it’s on sale. A beautiful scarf that will impress your friends. The small description, there’s the big description. We can have reviews. And if you decide to add something over here at Shipping. So 0.2 kilograms, you can say 20x10x80. And then you save it and it will also be shown on the website as extra information over here. So the weight and the dimensions. You see, it looks weird because it’s not styled because we don’t have a theme that’s doing. We can do that later with Elementor Pro. Right now, it looks a little bit weird. You see the categories, you see the tags, and we’re going to make this so much better. So that’s a simple product.

Before we continue, I want to do a few things. I want to add a few things to the menu. So I click on customize and then here at the menus, you can go to the main menu, what happens if I click on additional items. A few items are added, a few pages, like my account, checkout, if I scroll down the shop page, so what I can have over here, I’m can have a shop page. Also, we can add the categories I just created. So I can go to the product categories, and I add women and I can create a sub-item and in that way, you can create your menu.

So if I click on publish and I close it. Now you see the shop or products and if I hover over the shop and I go to women, I see all the products that they have to category women, and we can have subcategories — all that stuff. We are going to build it up, step-by-step. First, we need to create a second product, more products. So what do I want to do now? I want to create variable products with more options, like sizes and colours. And in order to get the images for that, I go to men. I scroll down, till I the same product with more colours.

Let me see, here is a sweater, here also and here also. So the same sweater, that’s a grey stitching sweater. I will use those two and then add a different colour. So what I can do, I can click over here then again, I click on the zip. There you go. I go back. I scroll down again and go to the other sweater, this one, and I click again on zipping. I unpack them, and I check them again. I don’t need this. I’m sorry it has to be this way, but I could not find free images that I can let you download on my website. So three images. I like it.

Then the second one, let’s see downloads. This one. Okay. Good… Good… No… Yes.. no… Nope. Also the three images. So what I will do, I go to my website, I hover over new and I create a new product. What’s it called? It’s… if I take a look at the other one, it’s a heather sweater. So, I call this one, Heather sweater. Again, I can have a short description. I go for the long description, I grab it over here, copy, paste it. And then over here, I go for a variable product and the SKU. This one. I don’t want to manage the stock yet because I have variables, so for every different size and colour, I need to have my own stock. So no global stock. Shipping — we don’t talk about it. Linked products — I will show you what it means. I can upsell something.

Make Easy Web Shop Elementor Pro Plugin

So if I say scarf, I can have an upsell. So if I would publish this, you will see an upsell here below. If I would go for a cross sale, so again, the scarf and I would buy something and I go to the checkout, then over there, I will see this product. So that’s the upsell and the cross-sell. Let’s go-to attributes, I want to have two attributes over here. So I click on add, and I say size, and we can separate it using the pipe. I don’t how it’s called, but I think pipe. So I can say XS (which is a size) | S | M | L | XL | XXL. One, two, three, four, five, six… sizes. I want to use it for the variations, important — check that. And then I save the attributes, then I want to add a second attribute. So here we have size, and if I edit, I can say colour. Then I say Black | Gray. Again, used for variations. I save it. So now, I have size and colour. I go to variations below.

And then I click here and I say, create variations from all attributes. So it’s going to combine those two attributes and create 12 variations. And there they are. So I can give everything their own information. So I can change the price for everything. So what I want to do first, do some global settings. So I click on add variation and I change it to set regular prices. I think it was 112 euros. I will change it to dollars in a few moments. Set the regular prices, go, 112. Okay. So now if I open something and it’s the regular price of 112 euros, I expand it so I will open them all and you see, they all have 112 euros. So the next thing I want to do, add variations. I want to toggle manage stock.

Right now, we do not manage the stock. I want to do that. So I told her it’s for everything. Okay. Now, if I expand it they are all checked. Then I want to set the stock. So I click on stock and I want to have. 10 pieces of every colour and every size. So the total of 120 sweaters. Maybe I think XS black is not as popular as medium black. So over here I can change the stock to 5 XS Black. And if I would go to M Black, I can say 20. And now when I save it, update it, I refresh the page. I can say XS Black 5 in stock, but if I will go to M, it says 20 stock. So that is what you can do and what I also would like to do when I refresh the page. There are no sizes and colours I want to… I need to choose it, what I also can do is say by default add variations. The default form value should be M Black.

So now when I go to this page, I already see Medium Black and I can change it. Okay. Then I go to the categories, add a new category — man. Where is it? Man with an ‘A’. I uncheck uncategorized, and I say sweaters, parent category — man, edit and I also check it and there’s the product tag. Let me take a look at the description — sweater, crew neck.

So I can say sweater, edit, crew neck, Heather. Okay. Product image — what do I want to show?

Upload files > select files. Go to downloads. I want to have the black one. This one, open and then below, I want to have the rest in the gallery. To open files, select those other two but also upload more. So I go back to downloads, to the grey one, Command+A, open them, you need to optimize them all over here and then add them to the gallery. We can change the order in the gallery. So if I would update it and I refresh it, it starts to look better. I see the other options over here.

Maybe if there is one too much, you can change it, but we’re going to fix this later using Elementor Pro. That’s why it looks so ugly. Again, we’re going to make it better. Trust me. It’s going to get so much better. But now if I select grey, I still see the Dark sweater. So how can I fix it? I go to the variations, I open them all and here it says, black. So I click over here on the image and I go for the black one, grey, grey one. That’s what I will do. Here’s black again, so I will do it with all of the t-shirts or all the sweaters. Now when we save it and I update it over here, I refresh the page. You’ll still see the same, but if I would go to grey, you see this one.

If you click on large, you still see the grey one. If I click on black, I see the black one, because over here we say that everything should have its own image. But I also can say, this one is 112 euros, all of them. All the sizes, I can also say XS should be 99 — XS Black, update, refresh. So now it says between 99 and 112. Middle black is 112 and XS is 99 and XS grey is the one on top. So in that way you can create diversity or variation. I bring it back and I update it. So if I go to the shop, I see two products, one is on sale the other one is not. Here I have options because there are more options for colours and sizes. Here, I can add it to the cart because there’s only one piece, no variations and what I can do now, I can go through customizer and I want to make it a little bit smaller.

So you can see the menu over here. I want to go to menus, the main menu, I want to drag this to the left. Then I want to go to add items, product categories, and I want to add Men, and then I want to have scarves and sweaters. Sweaters are the subcategory, so I bring it a little bit to the right below Men, scarves to the right of the women.

So here we can see the whole shop and here we can see, let me show you the category. So if I click on women, I only see this because that’s the only product we have for women. And this one for men. So let’s go to the settings of WooCommerce. Bring this back to 100%. I go to the backend, close this. Right now, we see euros over here. If you want to change those things, you can go to WooCommerce settings. Here’s my store address. Where do I want to sell? I want to sell to specific countries or all countries except for Belgium or the Netherlands or whatever. I want to sell to specific countries. Oh, let me see, selling locations to specific countries, which are the United States and Canada. Okay. This one, I leave, also. I can enable taxes. We’ll talk about taxes later. I can enable coupon codes, we’re going to talk about the coupons and here I can change the currency to the dollar. Scroll all the way down, United States, Dollar. I want to change this to a comma for a thousand and the point.

The decimal separator, number of decimals sense to of course save the changes. So I go back to the website. Now what I need to do now, I need to add new products, variable products or simple products. If you want to know how to create different kinds of products, you can go to YouTube search for “Ferdy Korpershoek”. I have tutorials about creating digital products. Let me see. Let me go to my channel, digital products, service products, variable products, a normal product, so I’ve tutorials about all those.

So if you want to create a digital product, search for Ferdy Korpershoek digital product and you can find my tutorial and learn how to do that. What I will do? I will fill this workshop with products and then I will give you a download link and the only thing you need to do is add your own images again because I cannot give those to you because they’re not mine. And what I want to tell you is if you go to women, let me see, if I go over here, there’s a different size table. So what you need to do, new product, scroll down, go to variables > attributes add, and in this case size not XL or whatever. Just 36, 38, 40, et cetera. And in that way, you can get this instead of XL. So that’s what you can do.

I will be back with you and then I’ll show you how you can download all these products to your webshop. Of course, if you’re creating your own webshop, you can add all your own products. Well, I’m adding all those products. I want to show you my way of working. Here I have my t-shirts or a shirt. It’s black, I have all those things over here — those sizes. And what I see over here is that I see a shirt, this one, a white one. So what I can do now, I can create it all over again or over here, I click on copy to a new draft, close this, and then I copy this white shirt. But since I copied it, also here, and I know the sizes are the same, I don’t have to do that much. It’s also in the right category, only not blue but white. I change the SKU to 12, and I remove the images over here and here, and then I do this. What I found out on this website, I say your right mouse click, save it that’s what you can do.

Really easy, you don’t have to do this. So I scroll down, the second one, the third one, the fourth. Okay. Then I go over here to my product image. Then I go to my folder. There are just added over here. I drag them all here. I select this one as a product image and then the other ones click+shift, click, and in that way, I can create a new product really quick. So now if I open it, I know it’s a white t-shirt with L selected. Again if I take a look at shirts, which is a category — product category — Men T-shirts, I see everything had to do with t-shirts. So let’s see if I have an image like this and the product image. No, I don’t.

I just have to live with that for the rest of my life. Maybe this one. Yeah, maybe this one. And then I remove it here and I add this one there. So updated, how does it look? Yeah, better. Better, better, better. If I take a look at the shop, I’m halfway through, I think. I’m just having some nice music in the background. And just adding all those products and let’s see if we can import them quick. Okay. See you in a minute. So here I have all those new products. What I want to show you now is how you can import those products without creating them. So you can save some time. You can go to Elementor Pro, hit enter, then go to tutorials > Elementor Pro, scroll down and then click over here to download the images I use in the tutorial. There is a zip file, open it and in folder 8, you see WooCommerce and you see a CSV file. You can import those 29 products. They are without an image because again, I cannot give you those images, but you can get them over here. Right mouse, click save them as… so what I’ll do, I will go to my test website, my tutorial domain and I’ll go to the backend, WooCommerce, and then below products, all products. I click on import. I can choose file 29 and then I click on continue, scroll down, run the importer and it says they are being imported at this moment.

Okay. I view the products and there they are with images. Okay. I’m not sure if that’s what will be the case if you do that. Because I will remove the images from my current website, but, if I go to the website now, to the shop, I see all those images. Well, it saves you a lot of time to import all those images yourself. So now we can follow along in the tutorial.

I have these images over here, and if I scroll down, I can go through the second page. I see all those beautiful products while there is one product, the heather sweater. If I click on it, I see the size and the colour. What do I want to do? I want to add a review. We don’t have reviews yet. So what I can do, I can go over here and leave a review, but I’ve logged in already, so it’s a little bit weird. So I’d rather have a guest leave a review. So I can copy this link, this URL, I go to Safari, I paste the link. And then I want to leave a review. Over here, reviews. I can leave a review. I say rating 5 and I can say, “Whoa, I love this sweater. It really changes your life.

So I save my name for the next time I want to comment, submit, but when I go to Google Chrome again, when I submit this what I see now your review is awaiting approval. So, I go back to Chrome. I refresh this and I still see no review, but what I see over here, when I click on it, I can approve this or I can reply or bring it to the trash. I approve of it. I can reply. “Thanks, Eduardo, that is exactly what we want,” I reply. And now when I go to the product, I go through the shop or I go to men, then it’s on the first page or is it over here?

I see five stars over here, one customer review and you see it over here? And you see my reaction. And again, when people have a gravatar account attached to their email address, they leave here this. You’ll see their image just as you see over here. So that’s how it looks right now. I go to the shop and what I want to do now, I want to customize the website and I want to add a few more sub-menus. So I click on command minus to make the website a bit smaller so I can see the menu. There I see women, scarves, men, sweaters. I want to add more.

So I go to menus, the main menu, I want to remove the category scarfs, I change it and I want to add some new items. So I go to product categories and those, I have them already. I add coats, skirts, coats, shirts, jackets, accessories, blouses, and those scarfs. So the only thing I need to know is coats, are they for women or for men? So for men, there are sweaters; there are coats. Skirts are for women, coats are also for women. Shirts are for men. Jackets are for men and then there are accessories for women and blouses, I think for men. I publish it and if I close it, I say command or control zero, I see women coats and those coats are for women. So I need to change those, customize command minus, menus, and I change it over here.

You can change the order. Command Zero, so now women coats, you see I’m here at a product category, women coats, skirts and accessories and men coats, sweaters, shirts, jackets, and blouses — only one. Those are for women. So one more time. That’s how it goes when you make a website — trial and error and in the end, you will have amazing results. So publish, that’s it. So what’s next?

I think we can make the product page look better using Elementor Pro. This is how it looks right now and we can click here, navigate, zoom in, also by clicking. Click here, so I go to full screen. You can close it, the title, the price, small description, the size, you can choose how many, SKU, the categories, the tags, other images, the description, additional information and reviews. So this is the basic layout for WooCommerce and we can make it look so much better. So that’s what we’re going to do. I go to the back end.

I close this and I close this. Now I want to go to templates, theme builder. I try the new one and then I want to go for a single and I want to add my first product template. You can start with a template. You can click on the plus. This is how it will look, so description replaced related products are over here and it looks better and you see the bread crumb is now over here instead of here above, and there are customer reviews.

So that’s what you can choose if you want to by clicking here. A few more options, also something like this — this area. It looks so much better already, but it’s up to you. I’m going to start from scratch and show you how we can create something beautiful over here and since we are creating a product page, you see extra elements over here from Elementor pro.

So if I would drag the product title over here, it will automatically fetch the product title. Right now, it’s an orange Acrylic ring. I can also go over here to the settings and give this a title. So I can say a single product template or a single product and then at preview settings, I can select Heather sweater. When I click on apply and preview, the title over here will change. So it’s fetching information from the product and we can decide how we want to display everything. So first I want to publish it and I want to add a condition and that is right now to include it in all the products. So every product we see, every product page we’ll use this template.

Make Easy Web Shop Elementor Pro Plugin

So that means that right now, if we would go to the shop, and we go to a certain product, you only see the title. So we’re going to create a beautiful area and the great thing is with Elementor Pro and WooCommerce product pages, you have more flexibility to create the design you want to have. So really quick, what you can do, you can go to the section, let me click over here and go through the user preferences, editing handles, so we have a little bit more options and what I also want to do, I want to use the dark interface so also add those preferences — dark. You will get used to it. It is better for your eyes.

I click on update and then I can go back over here. I click there. At the layout, I say the height should be a minimum of 200 pixels. Then I can go to the style and at normal I can choose a background type classic, and then over here at the image, there’s this icon over here — dynamic text. If I click over here, I can select the featured image of this post or the product. So look at this.

Now it’s fetching the image from this product. So I don’t see it that well. So I can also go to this area and make it 300. I can go to the style. And here below change that size to cover, or maybe not. I can change the attachment to fixed. So if I scroll, you see more or less about it. But this gives you so much more options. So, uh, let’s continue a little bit.

I’ll remove it in a second. Just want to show you what’s possible. I can go to the overlay, use colour on my website. Bluish. And change the opacity, change the blend mode to multiply or overlay. Colour dodge — colour. You can do so much over here. Bring this to the centre and then if you go to a certain product, you can take a look over here at the results preview.

We can go to the shop, to a random product, and it will be displayed like that. Different product, like that. So that’s how you can create custom templates for your blog posts. So what do I want to do. I want to remove this and start from scratch and what you can do. You can become inspired by other websites. There’s a big website in the Netherlands — bol.com. If I click on a certain product — television, I see a go back button. I see the title, a small description. So we can too, create something similar to this. And of course, for some things, there are extra plugins, but we’re going to add something beautiful. And if you want to, you can also download my pre-made templates. The thing we’re going to make right now, you can download it if you go to FerdyKorp.com and then you can go to templates, you can fill in your first name and your email address over here.

Give me the Package. I’m from Europe, so I need to consent to a few things. I need to go to my email accounts and then here it is. Get your Elementor template pack by clicking here. Then you can download the complete template pack or you can go to all templates, and then you can go to Elementor Pro, headers and you’ll see a few different headers you can get. And if you want to see how it looks, you click over here you scroll down, you see it appears again. So you can create things like that.

And you can download it over here, you can see how it looks on a different device, you can go back and if you go to complete pages, you can find templates for products. I need to create them, so that’s why I don’t show them yet, but they will appear over here. And right now, we’re going to create one from scratch.

So I go over here, and what I want to do, I want to create a new area with two columns. and I click over here. So I go to all the elements and then we can see them over here, the bread crumb. So if I want to have a bread crumb, I can drag it over here and it’ll say home > men > sweaters, and then there’s the title and we can change the text colour. It could look different, or we can use a global colour, and there’s so much to talk about Elementor Pro, so I’m just going to talk about it right now. If you go over here, to the site settings, then there are global colours. And if you click on it, there are a few global colours and you can add more colours and all of a sudden you or your client wants to change a few colours in the website you can change those colours over here and then your whole website will change.

So you don’t have to do to everywhere on your website manually. So I want to have my primary colour over here. So I paste it and there it is. If I want to add another colour, for instance, orange, you can do it over here. You can give it a name, for instance, Header, or you call this orange, whatever you want to do. You can update it over here and when I go back by closing this and over here, I select the global colour – this one — and I update it. Then I go back to the global colours and if I decide to change this colour to something else, you see it will also change automatically over here. So in that way you can change the look and feel of your website really easily.

I bring it back, update and close. I select it again, and then I can change the style, link, colours, the typography, you can align it in the centre at the right. And I leave it as it is. Then I want to go back to all the elements and then there’s a product title. I want to drag that to the right over here and I want it to be the same font like this one.

So I click over here and then I go-to style. Here at content, you can change the content of your website to make sense. And then here at the style, you can change the style of your website. So there are three steps and depending on the elements you use, there are different settings here at the content and at style. So I go to the style, to typography and I change it to Courgette. There it is. I can make it bigger. I can make it capitals and again, I can take a look over here, how they do it. Okay.

That’s okay. So I leave it. I go back and then let’s see, product images. I want the product images here at the left, and maybe you think, “Hey, but this is going to look exactly as it was before?” But keep in mind that you want to make it as easy as possible for your clients to navigate through your website. So if you have a website that is totally different, it can scare them a little bit. So I like to keep it a little bit normal, but again, it’s up to you, what you want to do. And over here, there are a lot of options. Every element has its own options, here in style, we can have a border. So if we say border five pixels, you see a thick border. We can have a border-radius.

And if you increase that, you see those edges over here, and we’ll say, I only want to have edges at the top and at the bottom. I don’t use it. I want to keep it clean and simple. So I say, add border type none. We can have spacing, so if I increase it, you see there is the spacing between those two images and the big image and the small images also spacing here. Yeah. That’s what I like, spacing between those. You can do it in pixels or em. I like pixels, 7 and here I want to have zero, also here — zero. So that looks great in my opinion and I think this can be a little bit close to each other. How can I do that? You can click over here, go to advanced and then uncheck the margin and at the bottom you say minus. To the arrow down and then it comes a little bit closer. And in that way, you can make things pixel perfect align and all that stuff.

You can also change the size, the width of the columns, and if I would update it and then it will look like this. Okay. I can also click over here, make this 50 and go over here and I also make this 50 like that. Okay. Over here, I want to have a little bit of extra padding or margin. So I click over here, advanced, uncheck this and that the top I increase it so the title will align with this area a little bit more. Okay. Heather sweater. Then I go back and maybe I want to have something like this — a rating. So I can search and over here I see product rating. So I drag it here below and I like it, but I don’t like the colours. I want it to be gold, the stars are more yellowish, goldish. A star colour, let me see. Why is… yeah… Yes. I like that.

The link colour, just normal black. And I can also make it bigger. It’s all up to you, A little bit more spacing between the stars and the link. We can align it to the centre and maybe that’s something I want to do. Yes. So I click over here on the other, elements and I go-to style and if it’s not there, I go to content and bring it to the centre. So that’s what I want to do — bring it to the centre. Customer review, bring it a little bit closer to the title, so over here at the top, I bring it a little bit closer. What else? Product price, maybe that’s a good idea, show the price. So we can drag it here below, bring it to the centre make it black, make it bigger maybe not too big, because it’s really expensive — all this stuff. And to show you what is possible, we can also go to, let me see, advanced, and then we can make this whole area dark, the background.

So I go to backgrounds and I can grab the colour, primary colour, and then I go to the style and I go to the colour and I say white. Then over here, I can increase the padding, and then over here, I can increase the margin. Should it be closer or like that? And if I uncheck this, I can say at the top, I want to have more space, but now I’m driving a lot of attention to this area. So I don’t want to drive attention, bring attention to the price, but rather over here. So what I also can do is make this background dark. So I go to advanced > background, I also have a gradient, so let me show you the primary colour, also your primary, but then make it a little bit lighter and then change the angle to 90.

So here it is a little bit darker than over here and then we can go to advanced, increase it a little bit, go to the style, make it white, so you see it is a lot possible. If I want to bring things back to how they were, CMD or CTRL Z a few times, or you can go over here to the history and go back a few times. Okay. Update, refresh. Okay. So far so good. I think this can be bigger, so I can make it bigger. And that’s… it’s just actually playing around with what looks good and if you want to take it even more serious, you can do split testing in the future, do a few different settings and see what is converting better, but that is for a different tutorial. The price is okay. What else, add to the cart button and you see this whole area — interesting. So to size or the colour and the amount.

So here are a few things we can do. We can bring it to the centre. We can change the topography of everything. When we hover over things, what should happen? So first, what we see over here, says we can change the stele of the button. We can bring it to the centre and this has all to do with the button.

So I can have a border around the button, what I want to do, I want to change the colour, so at normal, at background colour, I want to grab the primary colour and no border colour. And there’s a quantity over here. Do we want to make it bigger or more space? Maybe something like that. Or I like some space. We can change the topography, also border over here or no border. We can change the colours and then there’s the variation. I don’t like the grey area. So what do I want to do? At first, I want to change the width to 100, then there’s the spacing. That’s all fine, spacing in between also fine. And then there’s the label. And if you want to know what happens, just try it out. Nothing happens over here. You can put it back. You can change the topography, there you see what happens. Okay.

Okay. You can bring it back. And then it has the default settings. The background colour. I want it to be, let’s check, nothing happens. So I leave it as it is. Okay. Advanced. This is all fine with me. Update. The only thing I don’t like is the grey area. So what we can do, Right Mouse Click — inspect. It’s a little bit of CSS, but I’ll show you step-by-step what you need to do and to be honest, I have no idea yet. So what I can do over here, let’s try it. Backgrounds, #FFFFF, and then it becomes white over here. So I want to drag this whole area, select it, copy it, close this and then I want to go over here and then add this element. I want to go to the custom CSS, I want to paste this area, and then only remove this area. I only want to show the background.

So what that will do, if I would say zero, zero, zero, it says that the background of this element should become black. I don’t want that so I make it white, which is the colour code FFF, freaking Ferdy formalities. That’s how I remember that. Yes. So, so far so good. As I said, you can change the font size, the colours, you can clear it and then you need to choose another option. There’s one thing if I update things over here and I click on the I, I don’t see the image over here. I don’t know why, but what I can do, I can go-to sweaters and then select the sweater. And then I see it. So here we have the area, we can click over here and then we can navigate, we can zoom in, we can make it full screen. So that’s what you can do. And as I said before, if I choose a grey option, then I see the grey image, which I have selected for this product. I see how many there are in stock. Button, maybe I can stretch it. I like that. And I change the padding a bit, make it a big border or a button.

Okay. When we hover over it, what should happen? So you can change the colour to the global colour, orange, for instance. And then that happens. What I like to do is to make it a little bit darker. So I grab the primary colour then I click on the colour, make it a little bit darker or lighter. Yes. Okay. Heather sweater, one customer, the price, the size you can choose, add it to the cart, update it. Let’s take a look at, what else is possible? Product rating, we have it. Product stock, you see that already. Then there’s product meta, extra information. So I can decide to have it here below, but, I also can have it here. Okay. That looks weird.

So first I want to have space between then I want to change this to stacked or even better the table, better. Do I want to have a divider? No.

I want to change the colour of everything to black and also the links. Let’s bring it. That’s great. The primary one and make it bold. So the weight bold. Okay. Then the text, the normal text. Yeah. I’m happy with that. Then there’s the caption and then you can change all those captions over here. You see all they are link. Okay. A short description, I want it to be here below, here between, and then of course, bring it to the center, go to the typography, change the line height a bit. Like that. Then this product content, that’s for a new area. So I drag it over here and that’s the description.

So I want to go to advanced, or you know, before I want to add a title and this time a normal title, so I scroll down, I go for a heading and I say, product description. And I click over here, go to advanced, increase the padding a bit. Okay. Update. Or product data tab, like description, additional information. Maybe that’s better. So I can get rid of this area, and then it will look like this. Description, additional information and the reviews. Okay. So we have the description, additional information and the reviews. Okay. And you see that the amount of stars of those reviews over here. So, that’s okay. Update. And then if I want to, I can have related products here below. So I go over here and I search for related products and I drag it over here. There they are and you can select the amount of columns, so I can say three products, four columns, and they see this, or you can say three columns and it looks like that. Order by date or random and I want to bring this to the center. Also this to the center. So let’s see how we can do to that with the content. Style: alignment center. Title. I think it’s okay like that. Okay, and then the heading, bring it to the center. Products again, something went wrong, everything in the center, and then at the products, the column gap, we can increase it and you know what?

To keep things in the same style I want to have. Four products, four columns like that. I can change the column gap. If they’re more rows, you can change the row gap, alignment in the center. The image — no border, no radius, not much spacing between the image and the title. I want the title to be of this topography. I mean this color. So this, I bring it back. That’s okay. The priceless spacing. Make the price bigger. So I need to go, scroll down and change the color off the price make it bigger and then the area below, the button, background-color: primary, text color: white.

And then the spacing, bring it a little bit closer. When you hover over it, hover, make it a little bit darker. And yes… and if there’s a sale, you can change how it looks with the colors, but we don’t have a sale over here. We don’t have star ratings over here otherwise you can also see them. I update it and if I take a look at this product, sweaters, this one, you see our gallery, the title, the price, the size, add it to the cart, the SKU categories, the tag, additionally information and reviews.

And if there is no long description, you won’t see it over here. Then there are other related products. So that’s how you can create a page. As I said before, you can also import pre-made templates. So that’s how you can do that. And if you go to different products, so you go to men and this one, you see the title, the price, the options, you can add it to the cart, the description, additional information and the reviews and related products. If I add it to the cart, it says that it has been added to the cart and I can view the cart and all that stuff. So that’s how we can create a single product page.

You don’t have to do it exactly as I did. You can also create something like this, but I just want to show you what is possible or how you can do it using the single product template. Now let’s make it responsive for all devices. So over here I go to the tablet view. This is okay. There’s information and then over here, I click and then I add content, add columns, okay. It will show only… You know what? I’ll do two columns. Related products like that. Again, then I go to the mobile and what I want to do, I click over here. I go to advanced and then I scroll down to responsive and I say, reverse columns on a mobile. So now you first see the title and by the way, over here, at advanced the margin of the mobile, let’s say zero, so there will be no gap over here like that.

Then the images and description, additional information and reviews and the related products. And at related products, if you want to, you can say only show one column; like that. Okay. So that looks better. What I want to do. I want to show you a bit more about templates because right now, we have this area over here, but it can be so much better. So what I will do, I will go to my Gmail account again, click over here, get my template pack. Go to all templates. Then I go to Elementor Pro > headers. Now, I want to go for the WooCommerce header.

So I click over here. I can see how it looks, scroll down. It comes with us. So I click on download this template and I unzip it. What I want to do now, I go over here to the back end, to Elementor… sorry, templates > theme builder, new one of course and I want to go to headers. There’s this one, I want to remove it, bring it to the trash and I want to add a new one. I don’t want to use any of these templates, but over here, I can select the file. I go to my downloads. I did not unpack it yet I think. Here it is, the header. So I go… yeah I did. So let me see. WooCommerce, header 3. Open. There it is WooCommerce Header, I click on insert. It’s already optimized for all devices. You see here about contact shop women and men. So you see our own menu. We see what we have over here, in our cart, and I want to add it to the complete website. So save and close. View the site, and if you click on the logo, you go to the homepage and if I would go to the shop, I’ll see that and if I scroll down, this appears over here.

It’s behind this area, but if you’re not logged in, then it looks perfect. And you see the amount, I think we have over here with this nice area. So this looks better. Okay. Then I want to go back over here and at style, on active, I want to have the text color of the primary area and when I hover over it, yeah. So if I update it and I am at the shop page, it should be blue. Okay. So let’s take, look at the shop page. I go over here, to the dashboard, I closes this, I close this and then I want to go to templates > theme builder > try the new one, and this time we’re going to, the products archive. Nothing found. We’re going to grade our first one. I click on add new, and again, we can make use of a template. We can also view it over here.

It looks nice. We can insert it, but I don’t want that. I want to start from scratch and you see different elements than with a product page because every page has their own special elements. So here’s an archive title, archive products, archive description. What I want to do, I want to create two columns. So I click on the plus, two columns and I want to drag the archive title here at the right. There it is. Then I want to click over here. I want to say no to include content. So you only see the title products in this case. And then I go to the elements and I drag the archive products over here below. Come on. Yes. Wow! If I publish it, what I want to do, I add a condition, not to all the product archives, only to the shop page, save and close.

So right now, if I view the live website or I go to the shop page, it looks like this. But if I would go to a certain category, it would be like normal. So that’s what you can do over here with display conditions. You can decide where you want to display your template. So right now our template is only being shown on the shop page and it looks like crap. I don’t know if it’s a bad word, if it is my bad, I’m sorry when I say this from the Netherlands, it’s like, it looks bad. Okay. Let’s make this look better. What I want to do over here.

I want to have a menu with all the categories so I can make this smaller and let’s say 15%. And then over here, of course, 85%. But what I also like, if I go to the Spanish Clothing Shop. Webshop close, the second one, I see this over here — a nice slider. And then you can go to the category, men or women. So what I want to do all to save this image, I go to a man or excuse me, I still don’t know if it’s women or women. And this one, men. Here you see how important images are. You can make this with Photoshop. Of course, you create a picture and then you can add this in Photoshop and it looks amazing. So now I go back to Elementor, I go to all the elements. I search for a slider and I drag it here above. Then I close those two. I go for a slider heading one. I want to add an image men, oh, I renamed it. So let me do it a different way. I go over here.

Wait a minute, first, so over here, insert, okay. It looks good. Cover. We can have a Ken Burn effect. So it zooms in a little bit. I like that. Then I go to the content. I want to get rid of everything, also off the button, but I want to have a link. So if I would go to the category women, I want to copy this area, url and paste it over here. Excuse me, nope, paste it here. And apply the link on the whole slide. So if you click over here, it also goes to that page. Then I want to duplicate it by clicking here. Second one; upload files, desktop, men, insert the media and then again, content. Get rid of everything, okay Ken Burn effect, zoom in, and there should be a link over here and this time it goes to men.

Okay. The height of the slider, we can make it a little bit higher if we want to, slider options, do we want to have auto-play, so it goes automatically to the second slide. Yes. Do I want to have arrows and dots? Well you don’t see them that well, but they are there. I don’t want them. Auto-play pause and hover — yes. Pause and interaction. So every four seconds it changes to the other one. Infinite loop. Yes. And we can also have fade. Right now, it’s all slide you can also make it fade. Transition speed, well, let’s make that a second so it goes like this. Awesome. Update. I go to the shop page and it looks like that. If I click over here, I go to the category women. And if I click here, I go to the category, man. So this is how it works. Okay. I like it.

Then I click over here. I go to style. I want to change the style — the topography to Courgette and then over here, we can change a lot of things. At the same time, I have to say I’m a little bit disappointed in this archive product element, because, normally I would like to hover over here and see a different image. It’s not the case yet. I have a close contact with them. So I will talk about with them about this and see if they can arrange something because this should have more options. Let’s see what I can do. I want to allow the order, so you can sort it and show the result count, how many products are there.

If I turn this off, it will be gone. So it’s up to you. If you don’t want to have sorting, you can turn this off and it’s not there. I want to leave this one here. Advanced nothing. So let’s go through the style and before we continue, of course we can style things over here and as you see, I’ve done it already. This is a recording from later because I found out something important. So what I don’t like about the style is that you cannot change the amount of columns.

So I was a little bit frustrated, but then I found out when you install WooCommerce on your hello theme WordPress website and you go to the customizer, you have an extra tip over here, WooCommerce and there you can change the amount of columns. So right now, if I say command minus, then you see the website, how it will look on a normal screen. Four columns, if you want to change that, go to WooCommerce and the customizer when you use the hello theme, go to the product catalog and there it’s really easy. We can change it to three.

Awesome. And I will also talk about this later, but I’ll show all the product images as you see they’re square right now, but here you can change the aspect ratio. So you can also make that longer, and then you see it like that. But we’ll talk about it later, but I just wanted to show you that already. And now we can go back to the tutorial and continue with the styling of our product archive.

We can change the column gaps, and I like to keep it cozy, so next to each other – 10 pixels and the row gap also 10 pixels. I want to outline everything in the center. At the image, do we want to have a border? That can be an option. I don’t want that. Or do we want to have a border radius like that? I don’t want that, but it’s an option. And then if you space it, you see the space over here and I want to bring it a little bit closer, then there’s the title, color. Of course, the color of my website — primary. And you can change the typography and it can be a little bit bigger. And again, this is my example website. So if I would take, look at men, women. This is how it looks in capitals. So, you know what, I will also make it the capitals. Weight, upper case, and then I can also make it really lightweight or light. Yeah. And maybe, you know what, I will go with the style of the website, something like that, or, this color. And if I want to know what this color is, I click on update. That’s a great thing about Elementor, it’s getting better and better right now. Before I should leave this and then go to the header, right now, I can click on the header and I can edit the header. So now I am in a different template, so I can not edit this, but this area, if I click over here, I go to the style, I see the default color. I can also click on the plus and I can give this a name, menu, links. Okay. Update.

Then I go back to the products archive and I go over here, style, title, the global color, menu links like that. That’s how you do that. Awesome. You can make it a bit bigger, but then be aware of long product names that they can go to a second row or second line. Okay. Then there’s the rating. Star color, well, what I can do, I can go to a single product, edit it with Elementor. So to a single product, I click over here. I copy this color or I click on the plus, and I say star or a star is born, just because I can do that if I want to. Then I need to probably close this because right now, oh, it’s there already.

Wow! It’s there already that’s amazing. So that’s what you can do. The empty star over here, I wear this for like six years and decide, no, I give this three stars. So I can also make it transparent or really bad. Like if it’s not good, you will definitely see it when it’s not good. Okay. It’s just the outline. So I make it transparent, star size, don’t give it too much attention. So yeah…. that’s okay. Spacing. The price, what color should the price be?

Good one. Or I leave it as it is. I can make it a little bit bigger. What do they do over here? They make it okay. If you want to it that way, I will do it that way. Make it big and make it bold. Then there’s the button, I can say background color green, whites or primary color. I like that part, I’d rather have people clicking on the object first. So, and I also don’t like it at the here. It says add to cart because there’s only one option and here it says select option. So what I also can do, you can do this with CSS but right now, we can make it transparent and background transparent also on hover.

Oh, it’s the same so you don’t see it, but then you can also make it smaller. You can text-padding: zero, spacing: zero, topography: zero or one. Update. So there’s a small link over here somewhere, but it’s hard to find. Okay. I like it. Then I want to give this a certain background. So what I can do, I can click on the box and there’s a background color, and then I always give the red color so I can see what area it’s talking about and then I can make this a little bit lighter than white. So you see a nice pattern over here. Yeah, I like it. Then there’s the pagination over here. Spacing, how much space between the latest product and this area? Whatever you want to do, the border color also, you can remove the border. Padding and then the background color and the color white. And then there’s the active color, which is gray. And I like it so I leave it as it is. And if you want to hover over it, I also would like to make it gray. Actually the same color.

So what I can also do now, or I can say, since we use a color gray already, we use the manual links color and then at active, also the manual links. It’s a little bit dark, so make this extra white and then it’s fine. So, yeah. I like it. When there’s a sale, is there a sale? There’s no sale. How should it look? You can change the text colors, backgrounds, colors, border radius, and it will appear somewhere over here. If there are no products found, what should… how should the colors look? Well, that’s all fine with me and I click on update, preview, and this is how it looks.

I click over here. And we can see the product itself and then the related products, all that stuff. Now we go to the shop there, there you see the look book. I can go to the category women, and here I can click on a product. So what I want to do now, I want to have a menu here at the left. So in order to get it, I go to the customizer and I can go to menus, create a new menu, and I can say WooCategories. Next, add items and I scroll down to the product categories and I go for sweaters, coats, skirts, coats, shirts, jackets, accessories, blouses. There are two coats because they’re for men and women. I can also click over here and say, coats women. And here it says women, so let’s keep it the same and then over here I say men. Awesome! Publish. Close it. Okay.

I close this and I say, I want to edit the product archive page. And then here at the left, I want to add a navigation menu. So I search for nav menu. Drag it over here. There it is. I want to select the WooCategories menu. It’s going to be vertical aligned at the left. When I hover over it, I don’t want to see this. So I say nothing, no pointer. No tablets view, so it’s also going to look like this on a smartphone. Okay. And then the colors, of course, menu links. I want to make it uppercase and a little bit smaller, lighter and the line height, or maybe I should not do that over here but rather here. Horizontal is okay. Vertical. Yes. Then I can go to advanced, motion effects, sticky on top. So when I scroll down, it sticks with us, the only thing is that this area will be there.

So what I can do. If I want to see this over here, I can say at advanced, let me see of this area and navigation menu, and then the advanced motion effects. There’s an offset. So if I would say 70, and I scroll down, ah, I like it a lot.

So here it’s on top. And when I start scrolling, it has an offset. So, that’s what you need to do and then you click on update and then also over here, I’m going to scroll down there’s an offset. Yes. Awesome. Okay. And what happens if I click on one of these areas?

Let’s say coats, let’s see is it really for women, it is for men. So I should change it. Customize > Menus > WooCategories > Coat > Women. Wow, come on! And then men.. publish, close it. So shop, coats, women — Yes. Awesome.

So what I want to do now, I want to have exactly this same area, but let’s do one more thing over here. Click over here, I’ve been told that you can go to the box. If it’s a little bit overwhelming, you can lose everything. Now I’ll go to the box and I want to have a box shadow, not too much. So let’s say two, not that much blur. Just play around until you think, okay, this is what I like. And then you can also go over here and make it less transparent or more transparent, less opaque. Update. That’s what I like.

Two more things. Let’s make it look good on a mobile. Go to the tablet. That’s… okay. I can change the height. Okay. And then this looks great and this looks great. And then I go to the mobile version and I can bring this. To the center and it’s sticky, I don’t want that. So, let’s see, motion effects. I can also duplicate it. Click over here, advanced, responsive, hide this on a mobile and this one; hide this. Let me see responsive, hide it on a desktop and the tablet and then this one should not be sticky. So motion affects none. Update. So when I scroll down, it’s not sticky, but when I’m on a different device, you don’t see it. In that way you can optimize things. Awesome. So let me show you refresh. Just want a sticky. Let’s go back over here, align it to the left.

Sticky — also I want to make it a bit smaller. When we go to a smartphone, it’s not sticky and it’s in the center. So again what I want to do, I want to duplicate this area. So what I can do now, I can go back to the dashboard. I can rename this Elementor product. I call this shop page template. Update. Then I go to theme builder, try the new one again, and then I can click on add new. I want to have a product archive page, click on the plus, and I want to import a logo.

So if I click on my templates, you automatically see all the templates you have already. So here’s the shop page template, I insert it. Yes, I’m sure. Then I want to get rid of this area and the rest I want to leave it as it is. This is what I want to bring up to the top. I want to publish it and then add a condition, show it on all the product archive pages and add a condition except, so I exclude it on the shop page. So what should happen now, on the shop page, you’ll see that the area over here and on the other page, you will see it without that area. So this is what you can do. Okay. One more thing. I want to bring this a little bit up. So I go to a desktop version. This is okay but on this page, so I open the theme builder, here’s the images, so if I would go to the product archive, I know which one I need.

Make Easy Web Shop Elementor Pro Plugin

This one, add it over here, I want to go to the advanced area. Uncheck this and at the top, I bring it a little bit up. So this aligns better. Like that, and then if I take a look at the different devices again, oh, sorry, wrong one… Then on the smartphone, it’s better to uncheck this. Yeah.

Or make this a lot smaller and then do it again. So there you go. Again, I go to the align so I know it’s aligned, or you know what? Like this. Better. So this is what we have made, with our menu like this. And when we click on it, we go to the single page. We see the reviews, people can leave a review people see, related products and the great thing is if I think, “Hey, I don’t want to have this area anymore. I hover over here, I go to the single product template, I scroll down, I go over here, I go to the style. Let me see, rating and the button, I can make this really small and then also make it transparent.

Instead of hide it, hide it through css. When I update it, it will be updated for all product pages. So over here, you don’t see the button anymore, but if I would go over here, you also don’t see it. So in that way, you can save so much time. If you want to change something over here, for instance, this area, the empty star can be transparent, update.

And then if I go to the shop, I see products with less than five stars. I don’t see the star over here. So that’s how you can change things really easily. If I go to the shop and then I see this, and I think I want to have three in a row, not four, so I go to
the customizer again, let me go to WooCommerce, let me go to the product catalog — that’s this area — if I make it smaller, you see the normal view. I won’t show the products.

I’ll just show three in a row instead of four. Rows per page — one, two, three, four. So we see 12 products on the one page. Oh, let me bring it back to three. Okay. Product images, we can change the size. So, I can say custom 4×3, I’d like to say 3 by 5, and then it looks like that. Doesn’t that look better, maybe? I think three by five is okay. It shows you a little bit what you can do. Okay. I publish it, I close it, and now it looks like that. I think that looks better. So the next thing, if I go to this product over here, and I want to add it to the cart. See this area over here, we’re going to change it later. If I click on the cart, it looks like this, but I don’t like it. So I want to edit it. How can I do that?

Well, it’s part of this area over here, and this area is from the header. So I go to edit product or sorry, edit and then the Elementor header. I say, CMD + 0. I close this and I close this. So if I click over here, I can go to style and then there’s the menu icon. You can change those colors if you want to, you can go to content by the way, and show the subtotal like that. You can change a few things. I don’t want to do that. I go to the style. I like those colors, and then we can scroll down the icon. You can change the size but right now, it’s the same size as all the other stuff. Then I want to go to the cart.

I need to update it and take a look to see the results. So I click over here and then this is what you will see. How can we change this? Well, I can change this area over here, at cart. So cart, do I want to have a divider over here or not? So if I update it and I click here again, you don’t see the divider anymore. You can change the color of this text. I will change it to the menu, links, color and typography, I think that it’s fine.

Then I can go to the products. Right now the products are red, the titles, product title color — I want it to be blue. I can change the typography but it is okay. The product price is really light gray, so I’d rather have the color of the menu links and then do I want to have a divider — no. This is all fine. And then there’s the button over here, two buttons, and I can change the colors to, let me see, this is typography, the background color of the view cart blue, and then there’s the other one of the checkout. You can also change it and then the color of the text — white and also this color. Right. So we have quite some options to adjust it to your wishes. You can also put those below each other, scroll up and then the button layout, you can say stacked. And then there, like that.

This is scroll area and then there’s this area. Okay and here you can remove things, so if you don’t want to have this one, you move it over here, and then it’s gone. Then you can choose to view the cart or go to the checkout page. I want to go and view the cart, and this is how it looks. Well I don’t like this color, so how can I fix that? First I want to edit the page. Then I want to grab this shortcode, copy it, edit with Elementor, this will probably stay there. Yeah, I like that. Okay. I can click over here, go to advanced, custom CSS and if I check this area, right mouse click > inspect, and I see this color, background color. So what I can do over here, I can copy this area — copy — I can paste it here and then the background color, I can change it. So if I have the color, let me see. Let me go and edit the header.

And over here, I grabbed a background color, copy the code and I paste it over here. Remove the hashtag. Okay, so now it’s a blue area. Okay.

This area is not necessary over here. Also, the cart so I click on settings. Hide the title and I say Elementor full width, let’s see what happens. Refresh. Okay. So I want to add some extra space over here. Let’s say 60, and I can also have a plus over here and let me see… Oh, What’s going on? Okay, yeah. Then in that I can have a heading. I can say cart, bring it to the center, make it white, make it uppercase or even better, Courgette, And then add some margin over here. Or say, over here, height of 200 and then here, vertical line, middle, center. If that is not working well, it seems to work otherwise, I can still use this area, maybe a bit bigger. Update. So you get a little bit more flexibility.

Something is going wrong and that’s okay. Oh, I see it already. Yeah. Okay. New area over here. And I drag that. I was already thinking what’s going on. Something is weird. Like that, let’s see – zero.

Okay. Why are those two colors not the same primary color. So I can go to the hover… or the header sorry, and there, I can also change this. So now it’s the same color everywhere.

Okay. There are ways to make this look better using different plugins, and I will talk about it in different tutorials, you can find them over here or in the description. Right now, I want to edit the page again and give it a little bit more space. Okay. So let’s add a few different things. Add it to the cart, another one, go to men, add it to the cart, view the cart, so this is how it looks now.

We can apply coupon code. We’ll do that later. We can proceed to the checkout. So from everywhere in the website, you can click over here and go, view the cart and go to the checkout. If we go to the checkout, it looks like that. You can do the same thing. Edit the page, make it editable with Elementor and then I can have a new… wait.. first, hide the title and make it full width. Then I can click on the plus over here, update. Then, let me go to the cart, I say, right-mouse-click copy, right-mouse-click paste. And then here I say checkout. And then probably, I want to have some extra space over here. So I say 40, so there’s the checkouts. If we want to change a few things over here. Then we can click on customize, I close this and I close this. Then we can go to WooCommerce checkout.

Do we want to have a company name field? Right now, it’s optional, you can hide it and you can make it a required. So if you’re only doing business to business, you say it’s required and you can hide it. Address line second field, address line and and there’s second field — No. So it will be gone. Phone field, do you want it to be required, or hidden or optional?

It’s up to you. Highlight the required field with an asterisk over here? Yes. Yeah, if we create a privacy policy page, by going back, back, menus, create a new menu or click on one of the menus, add an item, then you can create a new page, privacy policy and remove it over here and can have terms and conditions, and you can also get rid of them over here. Publish it. Go back. Go back. Go to WooCommerce, check out. Privacy policy page. I need to close this and then click on customize again. So it will reload all the new pages. WooCommerce checkout, privacy policy, terms and conditions, and then you’ll see that over here. I’ve read and agree to the terms and conditions. And then here’s some texts about the privacy policy and here you can change that text, and here you can change the text of this area. Then people can place the order, there are no payment methods yet, but we will take a look at that. And again, there are plugins that can help you to make this look so much better and I have different tutorials for that.

So I click on publish, close it. Okay.

One more thing — every link should be blue over here. So how can I do that? Edit with Elementor, view in a new area, right-mouse-click, inspect, here’s the color of a link, copy, and it means if I go over here to the section then all the CSS rules I apply here at advance and custom css will apply to this section. And if you want to make sure that will happen, because sometimes it’s not the case. Go to advanced, go to CSS class, call this, blue link, copy blue link and go to custom CSS and above say dots and then paste it, and everything below there’ll be applied to this area, and I can add the text color over here and then the color becomes blue. Update.

If you want to follow my complete HTML and CSS tutorial, you can click over here or take a look at the description. And, I don’t have the knowledge yet, I’m learning CSS again and HTML, and then I will make a tutorial, but without having too much knowledge, you can do this and especially when you follow my tutorial, you can see exactly what you need to do.

So one more thing if I go to the shop and I click on something and I want to add it to the cart, this appears and I want to change the color. How can I do that? So again, we’re going to inspect things. I don’t want to make the use of too much plugins. CSS can do a quick trick. So we can do two things, we can change this color to blue, or we can get rid of the color. So,but I don’t want it to be green. So I click on inspect? The great thing is when you use Chrome, you can also change the color over here already. And then it will be, you see the results immediately over here so I can play around.

So here’s the background color. I can copy that and I can paste it here. And also over here the border top, they sit here. So then it’s gone. Right-Mouse-Click over the cart, inspect. Okay. And I see the color of the text. If I will make that #FFF, it will be white and the background color, I still have over here. Copy. It’s a blue color. Paste it. Come on. If I click somewhere else, it looks like that. So what I can do now, I can grab this whole area, maybe arrows up, so let’s see, how can I do that? Like that. Copy. Okay. And this time I want to go to Elementor and in this area site settings, and then the overall CSS over here, custom CSS, and I want to paste it. But I only want to change two things. I can also drag this to the right. So the only thing I want to change is the color. So I don’t need to change all this stuff and the background. Everything else can stay the same.

So I don’t have the need to have it over here. So this one, then there was the second one and then that was this whole area, inspect, and I need to scroll up a bit. WooCommerce message. So this one copy, paste it, Enter, Enter and then one more below. Copy and paste it. So, again, only the colors over here are changed. So I don’t need to have this stuff over here. That one I do need. Update. So this CSS is in the whole Elementor page builder so for every page. So if I close this, and I take a look at the website, I close this and I go to the shop and I go to one of the products, this one, and I add it to the cart. You see it’s in the style of our website.

Cool.

So the product page is okay. The shop page is okay, here I have this area. If I go to a certain category, you don’t see anything here, but you see this. I like it. Jackets. Then we can go over here. It’s in our style. We can view the cart. Awesome. We can, Oh, here you can not go to the cart because you’re there already. If you go over here and you check out, there’s a checkout, I should change the padding and margin over here and then it looks like that. So since we have all this stuff, I want to go to the back end. I see something over here. I want to change the title. So I go to settings, general and Jose Alba. That’s summer clothes, but clothes 2021 new collections every week. Okay. I also can change the order of the menu. So I go to the customizer and go to menus > main menu, and let’s see. Contact this for all the way below, About is for above that area. So it starts with the shop, then women, men, about, contact. Shop — women, men, about, contact. Amazing. So, I go to the back end and I want to go through all the other WooCommerce settings. Or I can do that over here WooCommerce settings.

If you’re still watching, I want to congratulate you for persevering in watching or applying everything I say in this video, either way. Thank you for that. I hope it is helpful and it’s also a little bit entertaining. I know it’s a lot of stuff I’m covering, but when you learn everything and you become familiar with Elementor Pro and WooCommerce, it’s such an amazing tool and it can benefit you so much. You can become a Web Design Agency by now, and that is amazing. What we’re going to do now, we’re going to talk about a lot of things like the WooCommerce settings, shipping, taxes, payment methods, and I’m going to do that with a different website. And then we will go back to this website we’re currently making and we will finish it.

So good luck with the second part or the next part of this video, and then you’ll see me again. Good luck. So guys, ladies we are still having fun. I hope so. Let’s go to the next subject. We’re going to talk about the settings of WooCommerce. So we go to the dashboard. Then we go to WooCommerce reports. No, just kidding. We go to settings. No, it was not even funny.

No. It’s not even funny. You need to leave your address over here, I think it’s mandatory in a lot of countries. So I fill in the address and then there’s the question where do you want to sell to. Do you want to sell to all countries or a specific country or to all countries except for Burkina Faso in South Africa. I’ve been to both countries. I love them. I love Africa. So that’s why I thought about that country. I can also say I want to sell to specific countries and I would like to say the United States of America and Canada. The shipping locations, well, I would like to say ship to all countries you sell to. It will be a little bit weird to ship to all countries if you do not sell to all countries. So default customer location, you can say based on the shop base address or geo-locate, or geo-locate with page caching support. I would like to say geo-locate so they see automatically if somebody comes from Canada or from United States.

Enable tax rates, we will talk about tax later, so I’ll leave it as this. Enable coupons, we will also talk about coupons later. Then the currency, we’ve talked about it already. I leave it as it is. Save all the changes and then we need to configure geo-locate. So what I will do. I hold command and I click over here. So I can go to the documentation of it and I can generate 25 license keys. Well, why not do it? MaxMind GeoLocation.

Okay. Sign up for GEOLIGHT2. I’ll leave my company, name, address — all that stuff. Choose one industry, eCommerce, Netherlands. Well, for me it falls on their language location and I can leave my email address, my phone and then I agree and I say continue. Thank you for signing up. You will receive an email with instructions then you grab the API key. I need to create a password and I copy the token and I click on reset password. Okay.

I paste the code over here and now GeoLocate works. It says it’s not active but if I just created it, it needs to take a while. So I go to general again, and that’s fine. I go to products, I close this, I close this and the shop page which one is it? Well it’s already shop page. You don’t need to change this. Add to cart behavior: Redirect to the cart page after successful addition. If you have a one product page or website you can say that when people buy something, they add it to the cart here at shop. If I say I add this to the cart, I immediately will be redirected to the checkout.

I prefer to leave it unchecked. So when people add something to the cart, they stay on the page and they can buy more stuff. Enable AJAX add to Cart buttons on archives: yes. Just leave that on. Placeholder image — leave it as it is. The weight — you can change it. I leave it as it is. Enable reviews: yes. Show “verified owner” label on customer reviews, that means that if somebody bought something and they will become a customer when they buy something, and they leave a review, they are a “verified owner.” You can check that. Reviews can only be left by verified owners — that’s up to you. If you don’t want strangers to leave a review, maybe they are competitors and say negative things, you can check this, so that only people who bought your stuff, they can leave a review. I think that’s a good thing. Product ratings. Enable star ratings on reviews. If I take a look at the hoodie, you see star ratings.

You can check that and star ratings should be required, not optional. Yes. I like it to be required. I save the changes and then we can go to inventory. Enable stock management, hold stock for 60 minutes. What does it mean? If I have over here, 50 hoodies in stock and I say I want to add 10 to the cart. I go to the cart and I change this to 10, update the cart. It is actually now reserved. So if a different customer comes now and he wants to buy 41 hoodies. It will say sorry we only have 40 left, and the question is how long should somebody have the first right to buy those. So I would like to say 10 minutes. That means that if somebody put them in the basket, he has ten minutes, the first right to buy those 10 hoodies. If someone else comes and wants to buy 41 then it will say sorry, that’s not possible. But after ten minutes, if he’s still shopping, then he loses the right and somebody else can buy 41. So that’s how it works.

I like to say ten minutes because I think in 10 minutes people can buy things on the Internet. Notifications – Enable low stock notifications: yes. Enable out of stock notifications: yes. You get an email when you have a low stock for product and when you have no stock anymore for a product. That email goes to this email address so you can choose one. Low stock threshold: I would like to say 20, depending on where you buy things. If you buy things from China, it takes four weeks before they arrive. Then you can say you know what, I have 50 left.

So depending on how much you sell. If you sell five products per day, that means you have ten days left to get new ones. So in that way, so in that case, I would like to say 300, if you have 300 left. It totally depends on what you sell and how fast you can get new ones. Out of stock thresholds: yeah that’s zero. Hideout of stock items from the catalog. So if I’ve no stock for a certain product, I can hide it from the catalog, but I like to leave it into the catalog. Stock display: always display. So right now, it says there are 50 or only show quantity remaining in stock. Only this much left in stock instead of in stock. So a small difference, this is the difference — only 50 left in stock or just 50 in stock. So you can change the text there, or never show the quantity remaining in stock.

So I save the changes and it says nothing. It just says in stock, not how much. Well I like this first one; save the changes and then I go to the third one — downloadable products. File download method, so it will be forced download so when people buy it, then immediately the file will be downloaded.

Does a download require a login: no. When people buy something, they can immediately download the thing they bought. Grant access to downloadable products after payment: yes, of course. First I want them to pay and then they can immediately download it. Filename: append a unique string to filename for security. Do this otherwise people can, by reason maybe figure out to where the download page is. So if they see there’s an e-book that’s called “make money online,” again try ferdykorpwp.com/make-money-online.pdf and if you add a string then it will probably be called something like this. So, yeah, turn it on. Save the changes.

And then we can skip shipping because we will talk about it later. We can skip payments and we can go to accounts and privacy. I skip payments because we’re going to talk about it later. Accounts and privacy — allow customers to place orders without an account: no. I want everybody to get an account. Allow customers to log in an existing accounts during checkout.

So they go to the checkout and they can leave older details, but if they already are a member they can log in over here and then all this information that will be filled in already because we contain that information, because we have that information already that’s linked to the account. So I turn it on; save the changes; refresh the page. You don’t see it over here because I’m logged in already so then you don’t see that. But if someone is not logged in they can log in over here. So I turn it on. Account creation: allow customers to create an account during the checkout – yes, of course.

So while you’re here for the first time, you can create an account by filling in these details and then you can create an account. Allow customers to create an account on the “my account” page: no. Only when people buy something, they can create an account. When creating an account, automatically generate an account username for the customer based on the name, surname or email — yes. They cannot use their own account name, we are creating it for them. When creating an account automatically, generate an account password, yes and then I will show you later how you can change that.

Account erasure projects: remove personal data from orders on request – yes. When people want to remove all the data, we should honor that. Remove access to downloads on requests – yes. Allow personal data removal: allow personal data to be removed in bulk from orders. I’ll uncheck this because I want to keep the data as long as people don’t want me to erase that data. Then there is the privacy policy, we’ve talked about it already in the customizer. Then I can say I want to remove certain inactive accounts after a few months or a few days. I leave it all as it is. I save the changes. Then I go to emails. Those are the emails I get when there’s a new order. I get an email on my personal email account when an order is cancelled. I get an email from that when the order is filled, I can email about it and this is all for the customer. When the order is on hold, when we’re processing the order, when the order is completed and the great thing is that we can change some things.

So if I click on completed order, I can click on manage, I can change the subject, I can change the email heading — “thanks for shopping with us,” I can say “thanks for shopping at FerdyKorpWP.com” so people recognize where it’s from. Additional content: thank you for shopping with us, if you have any question feel free to reach out to us. We are happy to help you. Save the changes and if you want to take it to the next level, you can change the custom PHP and in that way change the order. I do not have much knowledge about PHP. I would ask someone else to do it for me.

So we scroll down, all those emails from, from who is it? You can say it’s from PS5 tools, chargers and stickers or you can just say it’s from Ferdy Korpershoek and then PS5 shop. From the address ferdykorp@gmail.com. The header image, so right now if I save this and I scroll down again, I can take a look at the preview of an email template. Right now, it looks like this. Well, it screams WooCommerce standard. So how can we make this a little bit better. I close this and I want to go to media library. I hold command, I click and then there’s this image over here. I want to copy the link. Copy; and I want to paste it over here.

Then there’s the footer text. I want to say, “Thank you for your trust in us,” and then there’s the base color. So I go back to the colors, copy and paste it. Then we can change those colors and I like it the way it is. So right now, if I take a look, it is a bit more personalized. It’s also a little bit big, so I can grab a different image, media library, grab the smaller one, copy and paste it. And if it’s still a little bit big, what we can do, refresh (that’s the same one). Okay, what I can do now, I can go to the library, I can click on add new > select files. I upload it again. This one, this time the normal one.

I can click over here. I can click on edit image and I can change it to 250 pixels and click on scale and I think that should do the trick. Close it. Click on library again to refresh it and then over here, it is made smaller. I can copy the link and I can paste it over here. Save it and then refresh this and now this looks better. FK Media – different color, and the text will be created based on what kind of email they will get. I can also click here, then you see text over here. You can change it. Okay. That was it about emails. Then there is something about integration but we are not going to integrate something. Of course, only the MaxMind license key. I had it in my email so I should paste it over there and then I should go to advanced, the cart page. Well this is all already okay.

Terms and conditions, choose the right page for that and you can change the checkout endpoint URLs. So right now, if people want to pay, they go to ferdykorp.com/order-pay. If you have a different language, you can change this to a different language and over here it says what it’s about. So you can change those and also those. I’ll leave it as it is. I save the changes and then I go to REST API. I will do nothing with that. Webhooks: no. Legacy API: no. WooCommerce, if you want to, you can allow them to get to know better how people are working with WooCommerce and then they can make their product better. I leave it as it is. I save it.

Now I want to take a look at coupon codes. So over here at WooCommerce, I can go-to coupons, it’s a little bit hard to pronounce but I know that you know what I mean. So here I want to add my first coupon code, so I click over here or if you’re in a really good mood, you can click over here and it will bring you to the same page. Here we can enter the coupon code and keep in mind that this is the code that people need to fill in in order to get a discount. So I can say 10% without capital. I can give a description – you applied a 10% discount on your complete order. Then I scroll down a bit, coupon data.

We have three tabs and the first one is general. The discount type — we can have a fixed discount. For instance, a fixed amount of money. We can have a percentage or a fixed product discount for a certain product. I say a percentage and the amount is 10. If you want to know more about all these options, you can hover over here. Value of the coupon — we can allow free shipping. So I also can say Free Shipping and then remove this area over here, remove this and just check this and when people enter this free shipping, they get free shipping. I will use a percentage of 10% but that’s what you also can do. I can also say that this will be valid until the 31st of May 2020, and after that, it’s not valid anymore.

So I can send an email to my email list, until the 31st you can have a 10% discount on my awesome webshop, where you can buy zoom sessions and stuff. Usage restriction, the second tab, the minimum spend, I can say this coupon can only be applied when people spend a minimum of twenty dollars. Let’s make it 10 or a maximum of $500. So when they buy something for $600, they cannot apply the coupon code and when they buy something below $10, they can also not apply this. If you want this coupon code to be the only coupon code that can be active at the same time, you can check this. Because when you check this, visitors cannot apply three different coupon codes for this website and get a lot of discounts. So you can only use this one, not in combination with another coupon code.

Excludes sale items, so if I go to my website and I go to the shop, I see I have one item for sale. I can say it will not be applied to the product that is for sale. We could also say apply this for only one product, for instance, the t-shirt or exclude a product, for instance, the t-shirt, or different products. We can do the same with categories. You can say it is only for a certain category or we excluded only for a certain category, and I can also say, you know, some people that have bought for thousands of dollars on my website, I can track their email addresses and then I can put them over here so WooCommerce knows only people with this email address, those users can apply this coupon code. So I can say to people that bought for thousands of dollars, we want to thank you for everything you’ve bought, we give you an extra discount.

So that is what you can do and then there’s a third tab usage limit. Usage limits per coupon. I can say this coupon code is only valid 25 times. Limit usage to x amount of items. I can say the discount will only be applied to the first three items. You can do that. I leave it to unlimited and I can say use this limit per user. So over here I can say everybody can only use it one time.

So the first 25 people before the 31st of May can use this coupon code. You need to spend a minimum of ten dollars and a maximum of $500. You cannot use it in conjunction with other coupon codes. You cannot use it for sale items and that’s it. So I click on publish and now I want to test it. So what I want to do, first I want to show you how not to use it. I go over here and I remove everything, and then I go to the shop, I scroll down and here I see the sale. So if I add this to the cart and I want to view the cart, and I say 10% it will not be applied, why? This coupon is not applicable to select products, and why because it is a sale.

So okay, next option, shop. I go for this eBook. It will also not be applied, why? Because it’s below $10, the minimum spend. Okay. I think it’s clear. Let’s do something that is applicable — the USB stick. So I want to have a few of those, add them to the cart, view the cart and now if I say 10%, apply it and now it says coupon code applied successfully.

So here I see 10% of the subtotal is being subtracted and the total amount is still 90% left. Awesome. So that’s how it works we can do something else. I can add a new coupon code and this time I say $20 — get a discount off $20. Okay. Discount type – fixed. Coupon amount – $20. It will be available for an unlimited time. There’s no minimum spend, no maximum spend. Well, the minimum should be $20 at least, otherwise, people can buy things for free. So let’s say the minimum is $50, no maximum. Individual use, so it cannot be used in conjunction with other coupon codes, and it’s for all products, it’s for unlimited usage per coupon and per user, I publish it. I think I need to refresh the page and then I say $20, apply the coupon — coupon code applied successfully. Now the other one is gone. So you see it cannot be used in conjunction with others. If I would turn it off, over here update, then let’s see, 10percent, apply and then again $20, apply. It says “Sorry, coupon code 10percent already has been applied it cannot be used in conjunction with other coupons.” Okay. So if I would go to all the coupons, I hope I pronounce it right with time.

So over here 10percent, I turn this on-off, refresh and out it is 10percent and there is $20 and I can use them both. Okay. What else? Okay, the third one, I say, or everything small capitals, ebook, get $5 discount or off for the e-book, I don’t know if that’s correct English, Grammarly, is it? It seems to be. I can check the fixed product discount, how much: $5, for the E-Book.

Okay. I publish it. I refresh this page. The e-book is over here, so if I say ebook, I apply the coupon. Coupon code successfully applied. There it is. But if I remove this, it says, “Sorry, it seems the coupon ebook is invalid, it has now been removed from your order.” Why? Because it’s only applicable to the e-book. So that’s how we can play around with discounts and discounts are a beautiful way to attract visitors. You can send an email to your email list, you can even go to Facebook, do advertising and say, “Hey, get 20% discount only for the first 25 people.” In that way, you can get more clients, get more sales, get more money and give that money away to people that need it or do other things with it. So that’s what you can do with discounts.

So now let’s talk about my favourite subject – NOT. Let’s talk about taxes. So I go to
the backend and I’m not talking about the state of Texas, I’m talking about taxes — paying tax to the government. So let’s go to WooCommerce > Settings and in general, I scroll down and it asks me to enable taxes, do you want to enable taxes? Yes, I want to. When I do that and I save it, there appears a new tab over here which is called tax. Prices entered with tax, do you want that? And here you see an explanation of what it means. When you add taxes, that means that when something is $20, then the taxes will be added and it will be something like $26. Well, I prefer not to do that. So I say, no, I will enter prices exclusive of Tax. The question is do you want to have prices with tax? If you are focusing on people that want to buy things for your personal life, I would like to say include taxes in the total price and then still keep the item $20 and then you will subtract the taxes from your profit.

So I will say yes. If you sell to businesses, I would say, no enter prices exclusive of tax. Calculate the tax based on the customer shipping address, customer billing address or the shop base. While I do the customer shipping address. Shipping classes — you can a standard, reduced or zero and I say shipping tax class-based  191:5 on the cart items, why? Because every item can have its own taxes, like standard, reduced or zero. Rounding — round tax at a subtotal level instead of rounding per line. Well if I go to the website, I go to the shop or over here view the Cart, do I want to show the taxes over here per item or only here at the total? So I say only at the total. You can add more tax classes. Right now, we have the standard one which is always there, then reduced and then zero.

Make Easy Web Shop Elementor Pro Plugin

And if you add some over here, it will be added over here and you can assign products to your own made taxes rate, right. Those two are enough for me. I will talk about it later. Display prices in the shop excluding talks or including? Well, it depends again, do you sell to people that buy it for personal use or for their business? I like to talk about including tax. Okay, you know what? I will do as if I will sell to business so here I say no. I will enter prices exclusive of tax and then here display prices in shop excluding tax because businesses can always subtract that and get their money back from the government. So they don’t have to pay for that. Of course, they pay it at the moment itself but they get it back from the government.

Display prices different cart and check out — well, then I say include tax. So at the checkout, they can see the amount of tax. Price display — I can say this is ex. VAT, that it means it’s without the VAT. And if I save this and I go to the shop, everywhere I see the price, I see this is the amount ex. VAT. So let’s leave it like that. I will show you a few things and then I will also show you a way to do it on automation. But first, I want to show you how to do it manually. So I like the settings, what we will do now, we can go to the different rates and if I go to standard for instance, as I told you I sell to the United States and to Canada. Well, per state there are different taxes for different kinds of products. So if I go to taxjar.com/states, I can see per state what the taxes are. So I click over here and Oregon does not have sales tax. California 7.25% and in that way you can see per state what the amount of taxes people have to pay.

I will show you how it works. For instance, I want to go to the United States, so I type the United States and there it is. I select it, I can say for the state California, I can even narrow it down by choosing a zip or a city and the rate is let’s say 7.25% as far as I know. The tax name — I leave it as it is. The priority is okay and I want to also add Taxes over the shipping costs. So everybody that enters my shop from California has a rate of 7.25% of taxes. So I click on insert row and I can say the United States and I can say Florida, and there it’s maybe 10%. I can create something for Canada and for the whole country of Canada, there will be 15 per cent of taxes. If I think this is perfect, I can save the changes and excuse me I need to use a point. So I say 15, 7.25 not a comma and here is 10. Yes. Save it like that. So when somebody comes to my website from Florida, they pay 10% taxes on everything. California 7.25% and from Canada, 15 per cent. Then for different products, I have a reduced rate. So again I can say from the United States, California, there is only 5%. For instance, for books in the Netherlands when people buy books they only pay 9% taxes instead of 21%, which is the regular taxes.

So I save it and then there’s also the zero rate, insert and that is zero. Let’s say for the whole world and also here. Wait, let me save it. For the whole world, let’s say nothing over here so the whole world that enters my website pays a 5% reduced rate and the whole world pays 10%, and I select this one and I remove this one.

So the whole world pays 10% for the normal rate, 5% for the reduced rate and 0% for the zero rates. What I can do now, I can go to my shop and what I know is that digital products have no taxes. So I click over here. It’s not in every country. I want to edit this product, so I scroll down and now over here, I can go to the tax status and I can change the class to zero because it’s a digital product. So everything is profit which I really like.

In the Netherlands, it’s not the case I pay a lot of taxes for the courses I sell. So then I go to a different product. For instance, the hoodie — where are you — I click over here and this falls in the category of standard. So it’s 10 per cent. Okay. And let’s say I go to another product — the zoom session, that one is reduced. Just for the sake of the illustration. So if I go and view the product and I go to the shop, let me see there are a few things over here I want to remove everything. Okay. If I add this to the cart I pay no taxes at all. If I buy this one I pay the full taxes and if I select an option over here, here it is $19.95 and if I go to the shop, view the cart, you see all the prices are included in the tax.

So from the $32.95, there’s a small part that is taxes. And we see that over here $3.46 are taxes. Okay. I want to change it. What do I want to do? I want to go over here, I want to say the price is entered with tax — yes, and then over here I can say display prices during cart excluding tax. Save the changes. I can also remove this over here and now if I refresh it, here there’s zero per cent of taxes so it’s the original price. Here, you see it’s cheaper now. The tax amount is subtracted and then here you see the tax is added. So you can play around with these settings. I am going to my son. He is crying. It’s 12 o’clock at night. I will be back with you in a few minutes. So the question is do you want to show your prices exclusive of taxes or inclusive of taxes on your website, and where do you want to display the taxes and do the taxes come upon on top of this price or will the taxes be subtracted this over here. Like it says $27.23, but it is $29.95 actually. And then here you see how much taxes there are added. You can decide that based on this setting and then this setting and this setting.

Also, this one. So let me show you a better way. I go to plugins > add new and I search for WooCommerce Services. There it is, I click on Install now > Activate and now we need to connect Jetpack to activate WooCommerce Services. So I will do that. Install Jetpack and connect. I want to show you every step of the way. It will save you a ton of time when your taxes are automated. It’s a little bit hard to enter all the taxes of all the places in the world for you to show everything correct. Use my email address? Yes. It seems that I have an account already.

You can create a new account. It’s authorizing my connection and again you need to create a new account below if you don’t have an account already, and it says you’re all set! Okay.

Got it. Thanks.

Now, if I go to WooCommerce > settings, I go to tax. I can select automated taxes and I can say enable. Save the changes. Your settings have been saved. So I can do nothing over here because it’s all on autopilot. So now WooCommerce will take care of this. So let’s talk about shipping. This next step over here. I close this and now we can add shipping, what I can do? I can add a shipping zone over here. Let’s start simple. The zone name, I will call this the Netherlands, because that’s where I come from. The website sees where I come from, so I will choose a different name and say the Netherlands and then I need to save it because I’m not shopping. I’m not delivering in the Netherlands or selling to the Netherlands. So I can go to WooCommerce > Settings and I can go to General, leave this, and then I can say I also sell to the Netherlands. Save it. I go back to Shipping > Edit. I select the Netherlands. Okay. I save it and I add a shipping method. There’s a flat rate, free shipping and local pickup. I will choose a flat rate and what I can say, it’s really simple. I can edit it over here and I can say it’s not taxable.

The costs are ten dollars when I sell something. So no matter what I sell, how much people will buy, it will always be ten dollars. So over here I go to the checkout or I view the cart, I scroll down and it says flat rate ten dollars, shipping to the Netherlands. I can change the address over here. If you don’t see that yet, you can change the address and then based on that it will say how much it will cost. Update. But what I also can do, I can say to people, if their sub-total amount is more than $50, I can give them free shipping. So I can add a shipping method, flat rate, free shipping > add the shipping method, and then I click on edit > free shipping requires a minimum order amount of $50. Apply the minimum order rule before the coupon discounts. So when somebody buys for $60 and they get a $20 discount then it’s $40, they still should pay for shipping. So apply the minimum order rule before the coupon discount – no, after. Save the changes, refresh. So now it should be free. They can select free shipping now because they have a total amount of more than $50. So if I would remove this one, it is $49.90, they still need to pay for the shipping because it’s below $50, even though it’s just ten cents. So if I were them, I would buy something extra — a nice t-shirt or something like that. But, there’s a better way.

In order to get that, let’s go to the plugins add new, leave this, and then I search for table “rate from him.” There it is, updated a month ago, with a lot of likes. And I click on Install Now > Activate. Then I go to WooCommerce > Settings > Shipping. I remove the Netherlands, Delete and I click on add the shipping Zone and this time, I call the Netherlands again and you can also add Canada and United States — all the places you ship to and also here I select the Netherlands. I want to save it first and I add a shipping method and this time as on the flat rate but here it is a table rate. Interesting. I click on add shipping method it is the plugin we just installed and then here I click on edit and I can go to the pro version or I can get the discount for a pro version. I don’t use the pro version.

I can add a new list of shipping methods. I enable this one. I call this one PostNL or UPS because I use those to deliver my orders, and then I can do it based on the weight or on the price. Before I do that, I don’t want to disable the tax. So I want to say the total price. So when the total amount that people buy is between $0 and $20 or $19.99, I want a shipping rate of ten dollars. Then I want to add a new one. When people buy a total amount between $20-$49.99, I want it to be $15. From $50 until $99.99, I want it to be $20 and when people buy for more than $100, I want it to be free. So I say $0. I save the changes and now let’s take a look at what happens.

I go to the shop and I go back to the cart. The subtotal is now $49.90, so what will it be?

$15, why? Because between $20 and $49, it is $15. If I would make this $20 now, I save the changes and I refresh the page and it is $20. So I say $15 over here. What does it mean?

If I buy something that is below $20, I pay $10. So let me see if I can do that. Only the t-shirt, now I pay $10. If I have a few more let’s say 4, then I pay $20 because it’s now a subtotal of around $80 and that is still between $50 and $99.99 which is $20. If I buy one more than I exceed, excuse me, two more, now my total or subtotal is above $100 so there is free shipping. So that’s how it works. You can also do it based on weights.

So over here, and then you need to go to your products for instance the t-shirt, edit the product and then you can say, at shipping, the total weight — how heavy it is. Or when you have variations, let me see, variations > add a variation, and then you can go to, let me see, the weight. Go and say it’s 0.6, click on okay. If you expand it, the weight is everywhere the same now. So you can save it here below. It’s already saved. Well, you can update it and then based on the weight, if you would apply that, you can decide how much things will cost. I prefer the pricing but it’s up to you. If you want to make it more complicated or add different things you can search for “WooCommerce best shipping plugin” and you can also say premium because then you get better tools than the free ones. So that’s what you can do.

Hi, a small group called perseverance, are you guys still having fun, (and ladies). I hope you do. Yeah, we are almost at an end. That’s what I say every time. There’s so much to cover about. What we will do, now we will talk about Stripe — Payment provider and I waited four years to get a Stripe account because I thought it was so hard until I did it. And I want to show you step-by-step how you can get a Stripe account, even when you’re not from the United States. And it’s not for all countries, but people can pay from the whole world with Stripe, but not people in the whole world can get a Stripe account.

So there’s a list with countries, go to the website, check it herself, maybe the list is expanding. So here’s the list of countries that can sign up for Stripe accounts. Australia, Austria, Belgium, Canada, Denmark, Finland, France, Germany, Hong Kong, Ireland, Japan, Luxembourg, Netherlands — the Netherlands woohoo..!, New Zealand, Norway, Singapore, Spain, Sweden, Switzerland, United Kingdom, (United Kingdom woohoo!), United States, Italy, Portugal (woohoo!, okay that was weird), and Switzerland. So if your country is not on the list, there are workarounds but this video is not talking about that. I’m from the Netherlands and I will show you how I got my Stripe account activated and I will also show you how you can use it with WooCommerce.

So you need to get a file that shows your complete name. It can be from a bank, utility bill, bank statement, a letter from a government institution as long as it has your complete name. So I found the document, I uploaded it and then I got access. So since my account is active, I want to integrate it with my WooCommerce website, so that people can pay through Stripe using their credit card or Paypal or something else. So maybe your account is activated already, maybe not. What you can do, you can test it out. So we can go to developers over here when you’re on the dashboard, and then we can go to API keys.

Then click on a view test data and then we can use this publish book key, copy it now go to your website. I will go to mine. To the backend, then I will go to plugins. Add new and I search for “WooCommerce Stripe.” I click over here on Install Now. Activate it. It’s by WooCommerce by the way. Then I go to WooCommerce > Settings > Payments and there are all those options now over here from the stripe. So I can add a credit card, I can add Ideal if I’m from the Netherlands, but I will uncheck this now because we’re going to test with a credit card. But, there are a lot of options over here.

I click on Save Changes, then I scroll down I want to manage this. I can remove Stripe over here, so this is what people will see – pay with your credit card, pay with your credit card via Stripe. Then we need to enable the test mode and this is somehow weird. So I will remove this and then there’s the publish book key. I copied it. Then we can review the test key token, copy it and I paste it over here and then we need to have a test webhook secret. How can we get it? We go over here to webhooks below API keys. I create a new endpoint and then the endpoint URL, go to your website you can find it over here. Copy it. Paste it. Description – optional. Use the most recent version and then events to send, I want to go for the charge because I want to charge people when they buy things. I add the endpoint and then I can click here to review the token. The signing secret and I can paste it here.

Then I scroll down. I can have a statement description, FerdyKorpWP shop, for instance, capture charge immediately — of course, enable payment request buttons, Apple pay, chrome payment request API by using Apple pay — yes, and when I click on Save the Changes. Okay, ladies and gentlemen. Let’s take a look. I click over here. I go to my shop or you know what, I go to cart. I click on proceed to checkout. I fill in all my details over here and then over here, it says I can pay with a credit card. Since it’s the only option is already selected. If there are more options, you can select a credit card or PayPal or something else.

So I copy this over here. This is my credit card, my test credit card and I can paste it here and paste it here, and then I check this and I can place the order. And… yes! It works. Thank you, your order has been received. So it’s working. This is amazing. What that means, is that right now if your account is active, we can go to API keys, we can then turn off the test data, we can get a publishable key. We can create it over here, then the secret key, then we create a webhook and then we can use it for real and people can buy things. So when people buy things, what will happen?

Well, I’m the customer with this email address so I should receive an email, and there it is, From Ferdy Korpershoek PS5 shop, your PS5 tools, chargers, stickers order has been received. My logo — thank you for your order. Hi Ferdy, just to let you know — we received your order, with the order number, is being processed; the date; what we bought; the free shipping; paid with credit card; the amount; the shipping address so this is all amazing. What we can do now? I am a website owner. I get a message too, both in my inbox and over here. At WooCommerce, it says orders, and there it is. It says processing. If I click over here. Maybe I have all my stuff at home, so I’m making ready the order. I send it to the post office and then I send it to the people. What I can do then, if that’s the case, I can change the status from processing to completed and then I click on update.

Now I as a customer get a new email. Here it is and right now it says: “Your order is complete. We have finished processing your order. Thanks for shopping at FerdyKorpWP. Thanks for shopping with us. If you have any questions feel free to reach out to us. We’re happy to help you. Thank you for your trust in us.” So that’s how it works. Now if I go to Stripe, go home, no money is added because it’s a test payment. But if we which to the real API key, then the amount of money will be sent to me and then every week depending on what you choose, Stripe will pay the money to your bank account. So I will go to the website, and ladies and gentlemen it is time to create the home page. And let me tell you that the home page is so important. It’s the first thing people will see when they enter your website. If it’s unclear or it’s ugly, you can forget about the new clients. So it’s really important to make something look appealing and give people an idea immediately, why they’re here for, what they can do. So we’re going to do that. How can we do it?

We can edit the page. Over here, and then we can edit it with Elementor. I’m not the best web designer in the world. I’m aware of that. I’m also not a thief, although those images, I still feel a little bit weird about it using the images from Eduardo Riviera, but, I will delete them after making this tutorial and I suggest you use your own images. It’s just for the sake of showing you how you can create something beautiful. But what you can do, you can get inspired by other websites. I’m a fan of the Flatsome theme. It’s not the Elementor page builder, the Flatsome theme is different. Actually, it’s a competitor, a little bit off, Elementor. So what you can do, and you can go to Flatsome theme examples, and then over here, go to Flatsome free UX themes, where you can see a few examples. If you click over here, I hold the command. So I open it in a new tab. I can open them all. You can take a look, what do they do, okay, big image with a slider and some text. Nice.

So what do you say, it has finally started huge sales up to 70% and then three categories, and this is how it looks? I think this looks beautiful. Should we copy it one-on-one, no, but you can get inspired. So if you take a look at a different website, you can create something like this with Elementor, or this. So what do you need to do, you need to think about your business? What do you want to sell and how do you want to show that to people?

So you can also go to different examples of course. If you’re selling a lot of shops, I would go to otto.nl, it’s a Dutch website. These guys sell a lot of stuff. These guys are selling thousands of products, so you can have here, or look at this, all those categories, subcategories. So this is how they do it when they have nice deals, how much percentage, the best deals — a lot of people are buying this T.V. You can also do that with WooCommerce. Some brands, are promoting the number of discounts you can get. A lot of text. You can get five years of discount when you subscribe to their newsletter. And here’s some stuff. We’re also going to talk about the footer later in the tutorial. Yes. There’s are so much more to come. It’s going to be such a long tutorial. Now, I think it’s going to be below four hours or maybe around four hours. Yeah. It’s just the way it is. I want to cover everything.

So another Dutch website wehkamp.nl — Black Friday is coming of course, again. The same thing you see, so what you see big shops do the same. So if you would go to bol.com — it’s means fat. Again, categories, subcategories. So really big shops do the same thing. If you want to, if you’re in a smaller shop, you can go to a smaller shop. If you’re a clothing shop, you can search for clothes or new collections of clothes 2020 winter. Then you can go to the advertisements because those people are really aware of what they’re doing. They’re probably making money by selling stuff through ads or doing ads. So then they probably will also have a good website that’s converting. So if you want to take a look at a website that’s converting, otherwise you would not waste your money with ads. You can click on it.

Sorry for that. But you get a free advertisement in return, in this video. You can have this 70% of discount and again the same thing. But we’re going to take, look at this area. What you see over here, if I would go to zalando.com, it looks like this. You can have a timer. So I think I’ve got enough inspiration as you know, I use images off Eduardo Riviera. So what I want to do now is, first I click over here settings. There’s the homepage, and I want to make the page layout full width, and I want to hide the title.

Update. Then I want to click over here. I want to have a section with two columns and in the right column, I want to have some text. So before I do that, I want to go to the style and I want to make use of background and I did a little bit of Photoshop. There are tutorials about how we can do Photoshop, how we can download images. I replaced them, changed the aspect ratio, changed the image size and I have that now and if I go to the background type, I can choose a colour. So I can say, I want to have a background. If I go to layout, I can say a minimum height of 400 pixels or you see it better. I can also have a gradient like that. Choose my second colour orange, well it’s so ugly.

Now I can add multiple images. So I click on the plus over here, and I think I’m getting ahead of myself again. I’m getting too fast. So I want to relax again. Click on the plus, go to upload files, select your files on your computer. And in this case, I already have them over here. This is what I mean. So here at the image, and then I use the same background over here, I use a small blend, so there’s a fade. You see it over here maybe — a little edge and then here it can be the text. So I can open this one, but there’s another one.

So I go to upload files again, select one and I go to the man home. Also, you have to laugh here, you see that at the edge, it is not that well done. I should, well… now you know what I mean. There is the image and then I add something extra. So there are two images selected now. You can make them look better over here and then at the description, you can have a description — everything to be found better, then create a new gallery. You can change it. I think women should go first. As far as I know, 80% of the people that are watching these tutorials are men. What’s up bros! But 20% are women, hello ladies! So, I think women should go first and what you can do now you can adjust it. So, here’s the infinite loop, you can go back from women to men and to women again. Yes. How much, how long? Every five seconds; I think that’s okay. The transition can be fading or it can go slide to the right or down. Well, I like fading, but I think the fade is really fast.

And then I created my first tutorial about it. But I never finished it. I wanted to do five parts but I only uploaded the first part, but that was this reason. So thank you, Ken burns — all those people that helped me to become where I am. Thank you, Ken. Thank you. watcher, the viewer of this video, because if you’re not watching this, if nobody would watch it, I could not do this for a living. But I’m talking too much about things that have nothing to do with creating this tutorial. So I will continue to look at those beautiful people that are looking straight into my heart. Okay. There I go again.

Come on, the latest hour off the video. Let’s do it. I can also zoom out, hello there. I like to zoom in. You can have a background overlay, but I will leave it as it is. And when people hover over it, you can change things. You can change the transition duration, but it’s okay for me. So I have two columns over here. What I want to have is a text over here.

So I click over here. So I go to all the elements and there’s a simple area, simple element text. And again, as I said before, if you take a look at all the other areas, you can talk about a new collection. You can talk about a discount. So what I want to say is new collection, and then I want to go to the style or first bring it to the centre. H2 is okay. Style — make the colour blue. No, no, no, no. Yeah, no, no, no. Dark, make it dark; like that.

Typography, make it upper case — or default and then I say Courgette. Same as the logo. Like that. New collection. Then I want to duplicate this area. So I scroll to the right, hover over here, duplicate it. If you don’t see that, go over here to the user preferences and turn this on. Click over here. Change the text to huge sale and then change the text. Let’s say Raleway, I like that font. Make it bold, make it uppercase and make it huge. It’s going to be a huge, huge sale. What else you can do? I can drag this to the left.

So I can say fade in from the right and then after that this one — yeah. Let’s do this first, then you know what, first, after motion effects fade in normal, after one-fourth of a second. Then, it should appear motion effects, fade in from the right. But then after a half-second, then the next one, I can also copy the style and paste it but then this will also be bigger. So I will choose just like this — motion effects and does animation from the right after 3/4th of a second, and then after one second, the shop button appears out of right. Not out of nowhere, but from the right. Right, after one second – thousand milliseconds. So I update it and I’m going to take a look. Wow! The new collection, huge sale. Up to 70% off, Shop Now. And if I click over here, I go to the shop. If I want to edit the shop.

I see over here, I can edit the header and the shop. What I see is this number over here, so let me go there really quick. If you want to change the title, I think I told it already before, but I want to go over here, remove it. Because then, when we take a look at the website and want to edit it, let me go to the homepage. It looks better instead of that stupid thing after that, I don’t want that. So if I would go to the shop, I can edit the header and the shop page. Doesn’t it look great? This is our own made shop from Jose Alba. Well, I also like this. What I don’t like is that I don’t see their eyes.

Their eyes are beautiful. His eyes are also beautiful. I think eyes are beautiful. If you take a look at this guy, I think this guy has such beautiful big eyes. Look at this. Wow. Those eyes are also, these men, I think I know what I’m going to do tonight. Watch a movie, Monsters Inc., with a beautiful — how do we say it in English — ending. I love it. People get more energy from happiness than from being scared. Wow. That’s a big spoiler, but I am sorry.

Make Easy Web Shop Elementor Pro Plugin

Okay. I want to make this huge. Huge. Yeah. So we’re getting there. You know what 550 will make it even better. Where are you? Come on. Come on. Yeah, there you are. Okay. I think. Let’s say for a 73, who said we should round up numbers, and what you also can do again, you can do split testing, see what works better — new collection, huge sale up to 70%. And if I want to have a little bit less space over here or make this the same size, you can do it really easily. Click over here, go to the style. Go to the typography and bring it up until it’s the same size. Then you can go to advanced, uncheck the margin and at the top, go to the minus and you’ll bring it closer to each other.

Same, you can do over here. And again, if you click on the eye, you’ll see all the updates immediately. So if I would change something, I save it and I go over here. It will change automatically. So this one, I like. You see the guy, new collection, Huge sale up to 70% off. So people know it’s about clothing for women and for men. And there’s a call to action.

Okay. Well, what I want to do now, I want to create a new area over here. Two areas. So again, I click over here and I want to show an image of a man and a woman again. So I can let people go to the category men, category women. If they click on the category men, they go to all the articles or all the products of men. If they click on women, they go to all the things of women. I still don’t get why it’s women, a woman at the Riviera page, I think is a woman. Maybe they want to be different. So I will use Woman. Yeah, I don’t know man. I did it for the whole video already, so I will keep it like that.

And what I want to do over here. I want to have a heading over here. If I want to, I can copy it, paste and this is only with the animation, I don’t want that — none. Then I can have another duplicate, and then I want to copy this one and paste it here. So, also here no animation. So let me go to motion effects — none.

Okay. I want to change this, of course, the text. So I say Mujer, which stands for women and then I changed it to… let’s see if there’s something really bold, maybe Verdana, and then bold and then bigger. Yeah. Mujer. Okay. Copy. Paste the style. Then I change the text to 20% off. Actually, I can also say 70, otherwise, it’s a little bit weird or I say nothing about this. So I just say Mujer, then I want to go to the style and I want to add the text-shadow. You know what, I will do it later. I will show you why, and then I can say shop now or women, I will leave it as it is. And then I can also say duplicate. I remove this.

And then over here I say, hombre. Yes. Okay. Update. Then I want to go to the area of the column, to the column settings, go to the style, normal, background type — click over here and grab an image. Upload files, Mujer category, okay, there it is. And then I want to go to the background overly and I want to add it again. But the background overlay will be visible when you have a normal background. So now I can use it again and I go to the normal background. I can remove it again, but if I would go to the background overlay, I can go to, size, cover and then opacity one. So you see it completely. Over here, I want to do the same. Style, so first I have the background and then there’s the background overlay. Click over here. Add an image, this time hombre, please forgive me for my pronunciation, also in English.

I’ve shown you before how you can do that. So updates, what I don’t like is that you don’t see the text. So what I want to do, I want to change the text over here to white. That’s why I want it to wait with the shadow because right now there’s a shadow. We can increase, strongness, the opacity of the shadow, you can change the blur. So if I make it four and I increase this a little bit 4, and 4, you see better. Even there’s a light background or a dark one, so I can copy this and then paste the style and now you see hombre and you can see it even better. I don’t know exactly what to do with this, so I want to also make it white, but with a big shadow, otherwise, you cannot see this.

So let’s increase it. Okay, 4, 4, 4, but, you can also do it with, let me see, there’s the button, the text-shadow. Yeah. There’s also text-shadow. So also here, increase it and then, 4, 4, 4. Or, you know what, maybe 2.

Okay, you know what? Let’s forget it. I’ll just use a different background here. Background colour, I can make a dark. Yeah. I can make it look like this. Maybe not the best style, but why not. Copy, paste the style. This link should go to the category of women. So if I would go to the women category, I see product category women. Let me see, okay, product or I would go to the product category over here and I can copy it. If you copy and paste it, it’s hard to make a mistake. And then I go to men and you see, when I go to men, you see men over here and only see men clothes. Copy it, paste it. Update.

What I want to do now, I want to make this black and white and when they hover over it, I want it to be in colour. So I click over here, go-to style, background overlay and as you see there’s a hover. So if I would go to the CSS filters and I say, right now, I want to have no saturation. It’ll look like this. When I hover over it, nothing changes.

But if I would go to the hover and I go, let me see, to the CSS filters and I bring this back to 100, which is the case, then it will be like that. Same we can do over here, style. Let me see. Style, column, normal, of course, background overlay. Then here, saturation zero. Let’s take a look over here. At the hover, 100, update and that will do a refresh automatically. The new collection, huge sales up to 70%.

Yeah, but what I don’t like is this area over here. So what I need to do, I click over here and I make this full-width effect. If you click over here, then you see its full width and you can see how the website will look. So if you want to take a quick look at how it will look, you can do that. Okay. So far so good.

What do I want to do now? I want to show a few products. So I can click on the plus. I want to have one area and I don’t want to duplicate this or copy it and paste it over here and I will just say featured products. Create some page over here at the top, or also at the bottom or everywhere. Then I can click over here, and I can search for products, scroll down and I can see products over here. If I want to be sure that’s from Elementor Pro, I can close this, I go to Pro, see portfolio can add all this stuff, things.

But I can also click on WooCommerce and here I see products. And again, I want to have an area that is full width, and I want to show five products in one row like that. And then there’s the query, I can have featured. So if I would say features, you see nothing. So I updated really quick and I go to a few products. So I go to Mujer, the ladies, this one, I can edit this product and I can make it featured. So where can I do that? Well, to be honest, I do not see it, but if I go to all the products, I can give it a star, over here, so this one, this one, and this one. And the latest one, of course, this one. That’s such a beautiful featured product. Now, when I click over here on the homepage, I see featured products and it still has the animation. If you want to, you can keep it in, I don’t want that. The more effects you use, the slower your website becomes. Okay. So far so good. Featured products or you can decide to go with this one.

So you a copy this, paste the style over here and make it smaller of course and then change this to 2020. No animation. I would like to be thinner, and a bit smaller. So there it is — full width. I want to change the colours over here. So click over here, go-to style, and actually what I need to do, of course, close this. Edit with Elementor, I need to reload the featured images because they were not loaded yet, that they did not exist when I was editing this page and there they are. Click over here, query, as I said, featured images, I can also exclude certain things by category or by author.

I can change the order, date, or order by date, or random. I like random, so every time you go here, you see something else. Then we go to the style. I would like to have a close gap, a small gap of 10 pixels. There are no rows, so this doesn’t matter. I want to have it in the centre. I can have a border around the image, no spacing between the image and the title — the title colour, of course, the primary colour. I can make it a bit bigger.

Let’s say 20, and if I make it like this, I rather have not that they go, the title goes to the second row, so make sure the title is not too big. Again, spacing between the stars, then stars colour. Of course, my pre-made colour, the empty one transparent. So we don’t see it. And then all this stuff, of course, you can change the star size, but, let’s say one and then again, the spacing with the price, and then we can go to the price. The colour is okay. Make it a bit bigger, too big and then we can go to the button and again, I want to make it disappear. I think. And I can make this one transparent so you don’t see it. Update. Okay. Then there’s the box so I can change the background. I can have a shadow and I like it — small shadow. So 2, 2, and I’ll make it a little bit lighter. You can play around with it until you’re satisfied. I think this looks beautiful. Featured products, yeah. What I can do now, I can duplicate this whole area and then I say bestsellers, and then I can select that over here so I can go to query, or I can go to sale, or a manual selection and I think bestseller should be a manual selection. Heather sweater, should be one of them. Cut bag, any. So there are three, two more. There was a ring and another ring, and then I have five.

So maybe those are the best, and then I can say based on the date or the menu order. So over here, I guess, change the order, if you want to, but I like random, I don’t want to show people what is the best product because they can also sell it. So here is the featured product. Here is the bestseller, and then we can have more. So if you want to download this, I have more complete pages. I think by now, you know how you can edit things in Elementor Pro. What I want to do now to make it a little bit more complete. I want to go to the backend, to templates, theme builder, what goes on theme builder, try the new one. Then I go to the footer. I add a new one and I was making use of a pre-made template.

So if there’s something I see, this one I can click on insert or this line, insert. I can give this a name: main footer. Publish. Show it on the entire website, save and close it. Let’s view the site and there it is. So now we’re going to edit it to make it look better and again, here you can do some research, take a look at other websites, see what they do and how you can do it for your own website.

Well, I have an ID. So first I don’t need four columns over here. I only need three. So, I hover over here, I close it and then here, I change the information to “About us.” I don’t need this menu. I want to have a text area. So I go over here and I drag it to here below and I start typing. “We believe that every single person is beautiful and should feel that way. That is why we create beautiful clothes that make people feel how they really are.” Beautiful. Can I hear an amen? Okay. What I want to do then, I want to use the same color as over here. So I click over here, go to style, text, copy this, click over here, go to the style and paste the color. Okay.

Then I want to go back. I want to go to the social icons. I can drag them here below and I don’t use Twitter. So I change this one to instagram, insert, and then I can change the link to https://instagram.com/ferdykorpershoek. Awesome. Then I can go to the style and or I can first bring them to the left, go to the style, change the size, change the padding, change the spacing, change the row gap if there are more rows and also here, we can make them square or circle. So it’s up to you.

And let me see, I can hover. You can have a grow animation. Awesome. Let’s bring this more to the style of our website by clicking here, go to advanced. And if you want to… sorry, style, if you want to give it a border, we can change the color to this one. But I don’t use it. So I say zero and then I say none. But then I go to the background and Ichange it to a primary one. Then I go over here because there is a column in a column, or there’s a section in a column, an inner section. So here at the column, I go to advanced and I uncheck both. So I will use more space. So that’s About Us. Then over here, I would like to see more information, what is this. It’s an icon list. Well, that’s what I want.

So here I change the text to terms and conditions. Of course, I need to make all those pages and then you can have the link over here. I want to get rid of all those, and then I duplicate it and then here I say, “Privacy Policy,” of course change the link, another one bites the dust. Return policy, does it work, if you don’t like something, how can you turn it back we’ll pay for the shipping and stuff. Yeah maybe people want to work here. Maybe you are hiring people.

Maybe you offer a service become a model for us, or maybe you want to learn how to become a real minion. Why not? Sky’s the limit with WordPress.

Okay. Then I would like to have more information with more links. So I hover over here, duplicate it and remove this column. So here I say support, then I can say over here, FAQs and here live chat. You should have a live chat function then. Email us, rest I want to remove and then I go to the fourth one, I click on style and I go to the button and I make it green.

What else we can do? I can link ConvertKit or another payment provider or a email provider to this, and that’s the way the cookie crumbles.

So I like it. And then here below. I click over here and go to the style of the text. Copy the color, Command+C, I go over here, go to style, paste the color, then I go to content, I change it to nothing or 2021, because I think the most people will watch it in 2021.

Since it takes around two months before a video to be found better on YouTube and today it’s the 23rd of 2020 and then here’s my logo. But what I also can do, I can remove this. I can go over here, go for an image. I want to show some payment providers. So I choose an image, upload files, select the file, that’s it, logo of Stripe, I found this on the internet and I can use it and I’ll turn it… align it to the left. Go to pixels, make it around 200 pixels and that’s it. That’s our footer. You are as free as you want to add more stuff to it. Update. So how does it look? Well, we are going to find out. Over here, we have our homepage, and it looks like that.

I want have a little bit more space over here. So over here, I can create some space. Update, refresh the page, go to the home page, and that’s better About Us. More information, support, and people can subscribe over here. And when they hover over here, it should become blue. Let’s take look how it looks on a tablet. Yes and on a smartphone. No. On a smartphone, I would like to say 100%, over here also 100%, and you see this icon over here, which means that all those settings are only applicable on the mobile right now. Support a 100% and then this one should be already 100%. This area, I can bring it to the the center. Also, this one is already at the center. If I would go back to the table view, it looks like that and on desktop like that. So it’s optimized for everything. I click on update and now we have a beautiful footer that will be shown on our entire website.

So that is it, guys. We made a beautiful website with a nice homepage, a new collection, huge sales. People can go to the ladies or to the men, shop now, of course, there should be a little bit more padding. So I want to go, let me see. Edit the homepage over here, uncheck the button or maybe better padding. Sometimes I’m still confused. 15, also here, 15.

Okay. A few more things I want to do right now. I see her eyes really well, but if I make it bigger, you see the image becomes bigger. And then where is the lady? It’s really close. So what I want to do, I want to make this area a bit bigger. So let’s go for 550 as before. Update. Then I want to do a few more things over here. I click over here. I want to have an entrance animation. So I go to advanced, to motion effects, entrance animation, at the left, from the left, fade in from the left, like that. It can be normal, but after one second, ladies go first. So I want here also an animation but the man comes second, so after one and a half seconds. So I update it. I want to take a look. First lady, and then the man. You know what? We’re not in a hurry. Make it two seconds. Why?

Because we can decide to do that. We are in charge. So this is what I really like, then this area, this area, hombre, I can click on it, both to the men or to the women, the other way around. Featured products. Okay. What I want to do now, I want to make it optimized for all devices, but we can do that by clicking here, go to the tablet mode and see what will happen. This is what you’ll see on an iPad. I checked it and it really looks like this on an iPad. Also with the effect. And I like it. Also, the menu is optimized. If I want to, I can decide not to have an entrance animation on a tablet or a smartphone. It’s up to you.

I like it. When I scroll down, I see two rows over here. I don’t want that. So I can click over here and I say make it five columns like that. Also here 5. My son is crying, I wonder if you hear him and then over here, wow, let’s not do that, let’s make it one like that. So people can scroll and then also this one. Turn it into one, so the featured products, okay. Better. Update. And now it’s optimized for all the devices. Nice. And if I want to, I can also have a small shadow over here. So that’s what you can do.

So, this is what we have created, our beautiful logo, it’s just a simple logo then our menu with a sub-menu with categories, subcategories, our beautiful hero over here with two images, one of the ladies, one of a man with a new collection, huge sale, up to 70% off. We can go to the shop. Then we see all the categories over here and here we see all the products in the shop. We can click on one and we can select different sizes and there are also products if I go to man sweaters. We have multiple options, like a different size, if I change it to grey, I will see a new image. We decided to display the product page like this, with the bread crumb over here, the image, the title, customer review, small description, the price, the options, the amount of stock, you can add it to the cart more information and the description, additional information and the reviews.

And below that related products. If I go back to the shop and I would go to a certain category, I do not see this anymore. So if I would go to coats, it looks like this. We can change the sorting by popularity, average rating, price high to low. So if I want to buy the most expensive one, I buy this one. And then you see these scrolls with us. This menu appears, we talked about creating a menu and we talked about importing a menu. We have this beautiful footer over here, we can go to the homepage and take a look at what else we created. This area over here, ladies first and then the man. When you hover over it, it gets the colour. You can click here and go to all the products of the man, product gallery man. It can go to the second page.

If we go back over here, we see featured products. We see best-sellers and we see our footer area. If I make the screen smaller, it is optimized for all devices. If I click over here, I can go to the menu and this is now in the centre. Also here below, all products are in one column. And then here it is also optimized. So that is what we have created and when people buy things — let’s a buy few things go to the shop. I like this one for my wife. So I add it to the cart, just $88, but we can get a 20% discount. So I also want to buy something for myself. This one; I add it to the cart. Since now I can see/view the cart over here, or I can click over here and view the cart.

I click on proceed to the checkout, we can leave our details then we can pay with a credit card which supports all these credit cards and we have done that and we agree to the terms and conditions. We can pay and we get the stuff into our mailbox within a few days.

Then we get an account over here. So if I would log in, you can see your orders, your downloads, your addresses, payment methods, account details, and you can log out if you want to. Thank you for watching this video. Man, I think this was my longest video so far. Four and a half hours, I just couldn’t get it shorter, but it covers so much about creating a webshop.

So I hope you liked this video. If you do, please like it, subscribe and let me know what you think of the video. Are you missing something about it. This can be the case because there’s so much to talk about when it comes to WooCommerce. I want to use this website, maybe change the images and then use it for more tutorials like adding a wishlist, more plugins that are WooCommerce related, because I want to serve you with the best tutorials there are. I do my best. And I love being here, recording things and practising the other way around, practising and then recording things. And I want to thank you for everything.

Thanks to you, So I’m just going to wrap it up. Have a great day and good luck with the business or organization you have, or with making websites for clients. Bye-bye.

Read Also This: Best WordPress BuddyPress Plugin Review | UpTig

Make Easy Web Shop Elementor Pro Plugin