Learn How to Make an eCommerce Website including Online Payments System (For Beginners) | Saddam Kassim | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn How to Make an eCommerce Website including Online Payments System (For Beginners)

teacher avatar Saddam Kassim, A Professional Web Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

39 Lessons (5h 10m)
    • 1. Introduction of this Class

      3:41
    • 2. Learn How to Get a Free Domain with Web Hosting

      6:12
    • 3. WP installation on hostgator

      3:42
    • 4. Learn How to Make the Website Secure

      2:24
    • 5. Learn How to Create a Business Email

      4:39
    • 6. Installing & Setting up the Shopping Cart Plugin

      11:11
    • 7. WooCommerce Basic Settings

      7:04
    • 8. Learn How to Set up the Shipping Price

      8:09
    • 9. Leran How to Set Up New Order Notifications on Email

      7:38
    • 10. Learn How to Set up the Taxes

      11:47
    • 11. Learn How to Set up Coupons and Discount System

      8:19
    • 12. Learn How to Set up Online Payment System

      7:43
    • 13. How to Generate the PayPal Identity Token

      2:27
    • 14. Learn How to Create the Product Categories

      4:36
    • 15. Learn How to Create the First Product

      12:19
    • 16. Learn How to Create an Affiliate Product

      4:43
    • 17. Learn How to Create a variable products

      14:16
    • 18. Understanding Up sells and cross sells

      6:14
    • 19. Order Management in WooCommerce

      2:32
    • 20. Picking up the eCommerce Compatible Theme

      3:42
    • 21. Basic Theme options

      10:51
    • 22. Learn How to Create Pages

      3:48
    • 23. Learn How to Create Menus

      9:20
    • 24. Learn how to Create Content on Homepage

      18:41
    • 25. Learn how to Create Content on Homepage(Part 2)

      42:24
    • 26. Learn how to Create Content on About Page

      4:05
    • 27. Learn how to Create Content on Contact Page

      3:39
    • 28. Learn How to Set up a FrontPage/Landing Page

      3:24
    • 29. Learn how to Create Footer

      10:09
    • 30. Setting up Facebook Login in an eCommerce Website

      10:27
    • 31. Learn how to Create the Login & Logout Menu

      5:01
    • 32. Learn how to Integrate WhatsApp Chat on the Website

      4:46
    • 33. Learn how to Create Product Filters

      5:47
    • 34. Learn how to Set up AJAX Based Search Box

      6:30
    • 35. How to Create Pricing Table in WordPress

      11:24
    • 36. How to Enable SMS Notifications on New Orders

      8:09
    • 37. Learn how to Set up Extra Product Options

      6:58
    • 38. Learn how to Customize the Product page

      8:00
    • 39. WooCommerce Emails Not Sending? Here's a Quick Fix

      3:32
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

739

Students

1

Project

About This Class

This course is very helpful for you if you are looking to learn how to make an eCommerce store website. Here, you will be building a fully-featured Online Store which can sell Clothes, Shoes, Bikinis, Mugs, Affiliate Products, Digital Products and almost anything that you have in your mind to sell online.

You need to have a mindset that this is the time when you are going to sell your products online and have a very small budget of just $65 to get the launch of your eCommerce website today.

What you will be learning in this course:

  • How to make an eCommerce website without programming skills.

  • How to integrate PayPal Payment Gateway for Online Payments.

  • How to create products easily.

  • How to manage orders including refunds.

  • How to Create Product Filters.

  • How to Create a Variable Product on an eCommerce website.

  • How to Create an Affiliate Product on an eCommerce website.

  • How to Add Extra Product Option with your product.

  • What are domain names and web hosting?

Build your eCommerce Website by yourself and Save $1000s in web development costs.

The most valuable skill you will learn today is how to create an eCommerce website to run a successful eCommerce business. All you need is a fully-featured eCommerce website and an Online Payment Processing System. In this course, you will learn how to make a stunning Online Store within an hour and later on, you can customize the website as per your need.

How this entire eCommerce website can be built without any prior knowledge of programming or coding?

This eCommerce course is fully designed for beginners who have no knowledge of how to make a website without any coding skills. Although, somewhere on the website we'll be needing a few lines of code but don't worry as I have already provided the codes in the lecture descriptions. So, you can just copy and paste as per the instructions are given by me in the course lectures.

Here, we are using WordPress as the Content Management System of your eCommerce website which is FREE to use and 100% user-friendly. WordPress is the most popular platform to build amazing websites with just a drag and drop interface.

For creating the page's content, I have used the most popular and 100% FREE page builder plugin named Elementor. It gives the flexibility to design amazing web pages and arrange the content without dealing with any HTML or any custom code.

For eCommerce integration, I am using WooCommerce Plugin which is also a FREE plugin and widely used by the eCommerce Business Owners.

What type of Products you can sell with WooCommerce?

WooCommerce is the One-Stop solution for all your eCommerce needs as it gives you the flexibility to sell any type of products whether it is a physical product like T-Shirts or a digital product like Softwares.

Here is a list of all possible products that you can sell with WooCommerce:

  • Clothes

  • Shoes

  • Jewelry

  • Stationery Items

  • Daily needs items

  • Grocery

  • Food Products

  • Electric Appliances

  • Automobiles and their parts

  • Songs

  • Courses

  • Ebooks

  • Subscription-based products

  • MP3, PDF, DOC, etc. files

  • You can sell everything that exists on this earth with the help of WooCommerce.

What Exactly You Will Learn With This Course?

This course has clear and step by step instructions for those who are interested in learning how to create an Online Store and accept Online Payments. You will learn the following things in this course:

  • How to create an eCommerce website within an hour

  • How to design a website with the Elementor Page Builder Plugin

  • What is WordPress and How to use it?

  • What is WooCommerce and How to use it

  • How to Create a Simple Product

  • How to Create a Variable Product

  • How to Create an Affiliate Product

  • How to set up Taxes in your eCommerce Website

  • How to set Shipping Prices

  • How to add a WhatsApp Chat feature to your Website

  • How to Create Product Filters on Shop Page

  • How to set up the PayPal Payment Gateway for receiving Online Payments

  • Plus everything that you need to run a success Online eCommerce Business

Don't waste your money on hiring someone who can charge you a minimum of $1000 for making an eCommerce website. Do it yourself by learning the eCommerce Development Process with me and launch your Online Store Today!

This will be an amazing and highly profitable eCommerce Course of the year. Even you can get a 30-days money-back guarantee as we stand behind the Udemy. So, what are you waiting for?

Go Ahead and Enroll today!

Meet Your Teacher

Teacher Profile Image

Saddam Kassim

A Professional Web Developer

Teacher

My name is Saddam Kassim and I am from India.

I am a full-time web developer and I work on the WordPress platform for building websites and blogs.

I completed my graduation as a computer science student in 2013 and was campus placed as a Technical Support Executive in an IT company.

After working for about 2 years, I left my job even I was getting paid about INR 35,000 which was enough in India but there was something more creative took birth in my mind and I decided to start my own web design business.

Though I knew PHP, it was not a bit hard to learn WordPress and I started freelancing and started earning good budget projects.

In my first year of the startup as a web developer, I earned $20,000 in a year which was enough to boost my confidence and th... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction of this Class: Hi. Welcome to my course in the scores. I'm gonna show you how exactly you can make an amazing, fully featured e commerce sister without any prior knowledge of programming and courting. According to the Forbes magazine, by the end of 2020 e commerce industry will cross $1 trillion business. So it would be a great idea to start your own e commerce store today. And the benefit of the starting an E commerce store is that you can sell your products without having any physical shop in your market in your locality. So you don't need to manage the rent off those shops. You can have all the products at your home starting re commerce store and list all the partners over there. That's all you have to do. And in this course I'm gonna show you everything from scratch without according how you can make a fully featured e commerce website. Let me show you what exactly we are going to develop in this course so that you can take a decision whether you have to enroll into my course or not. This is the beautiful e commerce website that we're going to develop in this course, which can sell anything, whether their clothes, they are shoes, they are bikinis. They are designer mugs. They are T shirts. Anything you can sell beautifully on this website, it do have a quick view feature. So when someone click on this quick view button, a pop up comes up, which displays the quick details about this product customer. Not need to go to the individual page, and we have a beautiful footer is well, this is the back and area off your website. I can say admin area. From there, you can manage your entire e commerce store easily. Here we have the products. A list for these. All are the products that I have created into my e commerce website and the same you will also be having into your back and panel. There chose deported price, product name, stock availability and almost everything. Creating the products in this e commerce website is really super easy. There is a fully featured product management panel available from here. You can just try the product name. It's a description. It's prized upload deponent image and at last publish, that's all you have to do. And there is no dealing with even a single line of coat. Here you go. So this is how easy to create a product in your e commerce website. Creating the content for the pages are really super easy. I have included a dragon drop based page builder which can help you design your entire e commerce website without dealing with a single line of code. I will also be teaching you how we can say that the shipping price, their taxes and the PayPal payment gateway into your e commerce website so you can accept the online payments directly onto your e commerce stores. Guys, this course teaches you everything that you need to know in order to make your e commerce website and I can give you 100% guarantee. After watching this entire course, you will be able to make your e commerce store within one hour and please, once you and all into my course keep watching the electors carefully. Because there are so many students. They invest 5 to $10 by enrolling to the courses. But it loud did not watch. Maybe after watching the lectures, you will be able to learn something new that can change your entire life, and I request you once you complete the cords, please do not forget to leave your reviews and ratings. That really helps for the upcoming year students, whether they should and roll into my course or not. So let's get started. 2. Learn How to Get a Free Domain with Web Hosting: before buying the domain name and hosting. Let me explain you a little bit about them. Domain name is the name off your website, for example. Google dot com amazon dot com Sony dot com So these are the domain names off these individual companies. On the other hand, Web hosting is the space that you need in order to put your website content on the Internet . Or, in other words, I can say Web hosting ports, your website on the Internet. So without these domain name and Web hosting, it is impossible for you to operate or run any type of website on the Internet. So let's go ahead, and we can buy the domain name and hosting. You need to simply open this Web site host to gator dot com. And the good thing is that now you can get three domain for complete of one year when you get Web hosting with whole skate for complete one year, our domain cost around $10 a year, so in that case, you can save at least 10 or $11. In this Web hosting package, the only child around $2.75 for of one month and that is really not expensive in order to run on $1,000,000,000 e commerce business. So unit is simply click on getting started. All right, so whole skater offers you three different hosting plans. 1st 1 is hatchling plan which all force you to host single domain. It means if you go ahead with this plan, then you can only use one website with this hatchling plan. On the other hand, baby planning business plan offers you to use unlimited website. Off course business plan is the most expensive. One charges around $6 a month and we're really not need all these free as your tools were dedicated, i p So let's skip this business plan and we can talk about hatchling and baby plan in simple words. If you're going to use one website, then you can go ahead with the Hash Ling plan, which is the very low cost. It just charge you $2.75. And if you are planning to use more than one website that you can go ahead with the baby plan, so I'm just going to buy the hatchling plan. All right? Now, as you're going to get free domain for complete one year when you're going to register this Web hosting for at least of one year, it means the annual plan. So here you can search for our domain name. For example, Carbon claps and dot com is already selected. Let's click outside so that it can check the availability off this domain. Here we go so we can see this domain name is available and it is free for complete one year , So that's really cool. There are many other extensions also available, but we do not need to use them. Dot com is the best one, as it is the TLT top level domain. Let's jump to the domain Privacy's protection section here. We can see a charges of $1.25 a month, and we really don't need it at the initial stage. Just on jacket here, you can save at least $15. Now choose ah hosting plan. Already hatchling plan has been selected, but if you change your mind, you can also select baby your business plan. At this stage, I'm just leaving it to hatchling. This is the billing cycle. At least you need to sign up for one year. That is 12 months or 12 or 36 so that you can get the domain name free off course. So alert, selected 12 months at least. Here you can create your user name. For example, I'm creating like Saddam 123 So this user name will be used. When you are needing to Logan into your whole skater account and secure depend, you can create at least 4 to 8 characters. Long security pin. The security pin will be needed. Then you will be needing any type of customer support from whole skater team, and you need to fill up your billing info over here. So I'm just fast forwarding this video and filling up this entire form one that I can side you can fill up your payment type like if you're going to pay with credit card and can fill up the credit card details. If you have the PayPal account, you can select this check box and you will be redirected to the papal page. So I'm just going to fill up the credit card details over here. Okay, now let's the school down. There are some additional services like site look monetary, just uncheck it side backup on jacket. Because here a charge you around $2 every month for backing up your website. But I will be teaching you how you can take the entire back up off your website with a free plug in, and that will cause to you $0. So here you can also save some money. Now, our default coupon court has been applied, which is shared 3660 that gives you the discount off around $53.99. So the total you have to pay is $84.25. That includes one year of free domain name as well as the Web hosting for at least 12 months. Now you need to remove this coupon code and apply the one that I'm giving you over here. That is Web 27 a. M. So that will give you maximum savings. Let's click on Validate. And here we go. Now you can see their discount. You're getting a $60.95. So now you have to pay just 7 to $6 point for sense. That's really cool. And you can save at least $10 more over here. Now it's time to get this domain name and hosting, so just select this check box and click on Check out. Now on. We're going to buy this domain name and hosting because I already have an account with Host Gator. So once you will make the payment than whole skater will be sending, you are welcome email that will give you the log in details and everything. So let's go ahead and weaken Logan into our host Gator account. And in the next lecture, I'll be installing the WordPress onto the domain name, which is carbon blab Starcom. 3. WP installation on hostgator: We will be using WordPress or developer e-commerce website. Wordpress is a great tool that can help you to build almost any type of websites without dealing with a single line of code. It provides you drag and drop interface. So let's go ahead and we can install WordPress from the host gator cPanel. Open the website that is Host Gator.com. Now at the top right corner, we can see this sign in menu. You need to click on portal and login into your host gator account. This is my host gator dashboard and that is one of my dummy domain, a blogger.com, that I will be using in order to explain you how exactly you can install WordPress on this domain. But remember, we're going to use a different domain for building the website. Now here you need to click on Launch the panel, as you can see over here with this button. Or you can also click on this hosting. So let's click on Launch cPanel. A different page will be opened. All right, now on this page you can see this option WordPress installer. Just click on it. Okay, Now this is the screen from where we can install WordPress on the domain name. So here we can click on this install menu. This is the latest version of the WordPress which is going to be installed on tour domains. So that's okay, just leave it as it is. Tools installation URL. So this is the protocol HTTPS, and that is the domain name that is auto selected. Make sure this box is should be empty. Then we can just call down. Now here we can give it a name, just like fashion hub. And you can give a small description about this website just like an online store. Remember these, both of these text can be changed later on from the WordPress dashboard itself makes sure there should not be checked, otherwise your side will not be working. Now let's go ahead. This section is very important, admin username. So here you need to create the username of the WordPress account. So let's say I'm just putting over here the arms 7, 8, 9. And here we need to create the password. So I'm just creating a password that is London dollar 1, 2, 3. These two details will be used in order to login in to your WordPress backend. And here we can provide an Admin email address. So in case if you forget the password, then we can reset the password at the help of this email address. Now let's just call down, leave all these options as it is at last hearing to provide your alternate e-mail so I can provide hear my own e-mail address that is Saddam calcium are the two hotmail.com. And then we can click on Install. Now we need to wait for a couple of seconds in order to get this word present stalled on to the domain name. All right, so the WordPress has successfully been installed onto the domain name. Now this is the administrative URL that will be used to login into your WordPress dashboard. So it will always be appearing something like your domain name then forward slash WP, HIV and admin. So let's click on this URL. And this is how the WordPress dashboard looks like. I mean, this is the backend panel from where we can manage the entire content onto the website. You can create the product, we can create the pages, we can upload the images, videos, everything can be managed from this backend area. You must not need to share your login ID and password of this WordPress with anyone else. Keyboard saved somewhere onto your computer or a handy of these details. Now let me show you how exactly our website looks like once we install WordPress onto the domain name. So I'm just opening it into a new tab. So this is how the homepage looks like. I know it doesn't look good at all, but that's not a problem. We'll be installing a good theme to make it amazing. And let's go ahead and we're going to start building the website. Thank you very much. 4. Learn How to Make the Website Secure: When you open google dot com just before the domain name, you can see this lock symbol. When I click on it, it stays. Connection is secure. So this really generates our trust in the customer or the visitor who is visiting to your website. So let's go ahead and we can integrate this lock symbol onto our website. Currently it stays north secure, so off course, no one will trust onto our website and no one will try to purchase the products from your website. So it's time to make your website secure with the SSL certificates or vacancy haste to TPS protocol. So you need to log in back into your host gator see panel with the same process that we have repeated in the previous lecture. So this is our whole skater. See panel Now in this top search box, you need to type s s l. So here we have two options as a cell TLS and SSL TLS status Just click on this status option as I have many domains in this whole skater accounts of the all are listed over here . So in the search boss, let's type. Okay, so now all these sub domains and Main domain is showing which are related to coupon tape dot com. Here my domain is already validated with the auto SSL. That's why it is showing the green lock over here. It means I have to enable something from the WordPress back and in order to show that green lock symbol with my domain name. But when you will be installing the WordPress first time on your domain name, you will be seeing an error message over here. So the all you need to do is just select this checkbooks before your domain name and hear this button will be enabled. Run auto SSL So you just need to click on that button and the SSL certificate will be installed and activated onto your domain name. It is very important to install the SSL certificate onto an e commerce store because then you are selling a product. Then off course, it'll be receiving the payment details onto your website so no one will make the payment online. If you would not be having a secure website, so their soul, we had to learn in this lecture and let's jump onto the next lecture to do some more advanced things like we are going to create a business email in the upcoming lecture 5. Learn How to Create a Business Email: let me explain you a very important reason that why do you need a business email account? We all know their Gmail or calm Hartwell dot com or yahoo dot com or any other email service providers are completely free off course, so anyone can go to those websites. They can easily sign up and create an email account. But when it comes to professionalism when it comes to business, it is very important that you should have a business. Email accounts something like support at coupon tape dot com. So coupon tape dot com is my domain name, and support is the user name. So the complete email address is support at the rate coupon tape dot com. That really gives a good impression on a customer's mind. They can trust me like I am the owner of this website. If I am dealing with my customer Wyatt this email account, so it is very important that then you are starting a new e commerce business or a new e commerce website. You should have a business email and host. Gator offers you to create unlimited business email accounts like support at Great Coupon take dot coms or you concert like in four there coupon tape dot com or helper there Coupon . Take door com or even You can use your own name like Saddam ad rate coupon tape dot com. So let's go ahead, and we can create the free business email account from the host Gator. See panel screen. So you need to log into your host care See panel. And here we need to scroll down. We have this option email account. Just click on it. I have many emails available which are related to some other domains. They are listed over here when you need to create a new email account. Just click on this. Create Burton on the right hand side. All right. Now, from this list, you need to select your domain name. So here begins E the ad rate Coupon day Broadcom is already selected in this box. You can put your user name something like support at great coupon day. Broadcom is already added. Here you can create a password or if you are needing some kind of a strong password, just click on this. Generate Burton and this see panel recreate a very strong password for you. Well, of course, it is really hard to remember. So let's school head and begin create our own one. Something like that. I'm just making a copy off this password somewhere. And then after you can specify, like, what should be the storage space off this email account? I mean, what is the maximum limit off the emails that this email account getting Store 500 MB or you can just to specify it as unlimited? And at last, you need to click on Create. It will take a couple of seconds. Here we go. So I have just searched for support Address Cooper and tape dot com, and this email account is listed over here. It means we have successfully created this business email account. Now, if you would like to access the inbox off this email account, it has a very special inbox area, and this cannot be directly access from Gmail account or any other email provider. But you need toe. Either go to this check email button, so let me show you how, exactly it shows the inbox. So it's loading up now. Here we go. So now there are three applications that we can use in order to access our email account. The 1st 1 is horde. 2nd 1 is around Cuba, and 3rd 1 is a squirrel meal, so you can use anyone off them. I mostly used this around Cube, so first Levy can make it as set as default. So every time when we'll be longing to our email account, it will not ask us which the male application we need to use. So let's click on Ground Cube. So this is our inbox off our email account that we have recently created. It is a little bit different from the Gmail or Hotmail one, but this really works good and it's completely free. This is the welcome email that has been sent to us when they created the email account and this email was sent from C panel off host Gator. So that's how easy we can create a business email account. And there are many other options as well. If you click on this drop down, you can see here forwarders. Almost all the features are available into this area. If you would like to change the password, you can simply go to the settings and there is the password change option. I hope the literal was easy for you. And you can create unlimited emails with the help off host Gator. See, Panel screen. Thank you very much. 6. Installing & Setting up the Shopping Cart Plugin: we're going to use the most powerful e commerce plugging, which is called Vu commerce. So this is the official website off newcomers. Let me introduce you with this. Plugging newcomers is an e commerce plugging for WordPress. It makes creating and managing an online store simple, with a reasonable levels off flexibility and several vital features such as products management, inventory and packs, management, secure payments and shipping management. Even you can use any type of payment gateway as well. And do commerce is the only plug in which supports worldwide payment gateways like paper stripe sage pay. While pay or tries dot net pay you money almost any type of payment Gateway can be easily integrated with calmer. Let me show you a few websites that I have developed with the help off this vu commerce plugging for my real clients. The first website is your smile or condor? A You. So this is the website that I have developed with the help of Wu Commerce plugging on Miss Universe, Australia off 2016 Catalyst Evil is the brand ambassador off this company, so this is a big company, and they're selling some teeth whitening products on here they have, like some kind off packages, which are categorized into three different pricing the structure so someone can directly go ahead and book now. Also, they have individual products like this enamel booster of whitening pen, and they have their own prices, like $39 or 1 $99. This that's what it really looks beautiful. And the reason why I choose Vou Commerz is that most off this supported plug ins are free off course. So in a very normal price, we can develop almost any type of website. With the help of Luke Homers, let me show you one off my other clients that side This is my Arben kingdom dot com. So this is also of Oak Homer Spofford website. This website is selling some type off custom printed T shirts so and even can simply go to the T shirt section and they can put their own logo, upload their own images, and this website receives the order. They can print those custom logos or images onto the T shirt and delivers to you. So this is also another example of what we can develop with the help of a commerce plugging nor just the physical products. But let me show you one more rep site, which is one off my client. She is basically a writer. Maddie Reynolds Thompson. Maybe you have heard her name, so she is writing the books as well, and she's selling the courses. So off course this is not a physical product, but it's a digital product. I mean, when someone make the online payment, then after the quarters are available, either in the form it off PdF or video so easily they can directly Fortuny videos life. Or they can download the pdf onto their computer. So this website is also developed with the help of flu commerce plugging so these are the possibilities that V can fulfill with the help off commerce plug in, and you can sell almost any type of product with the help of this three plugging. So let me give you a few reasons why we use vou commerce. But Northey other shopping carts vu commerce pricing vou commers is a free plug in. Then a new retailer is using a platform. Price is likely to be a major factor. You should know that 13 3rd party payment applications and other extensions may cost money . But this is not the case with Luke Homers as there are thousands off free plug ins available, which extends D functionality off the free vou commerce plugging vou Commerz is modeler, just like WordPress Blue bombers includes a rich set off features that can be extended with the addition off plug ins. For example, if you would like to integrate product filter, then there is a plug in for that. On the other hand, if you would like to integrate a Razor Bay payment Gateway, then there's a plug in for razorpay payment Gateway company. So that is the main reason via blue commerce is the best e commerce plugging because in the very minimum cost, you can develop a fully featured e commerce store with almost all the features that you or your client needs. Commerz can be used to sell anything. If you want to sell something, you can sell it, withdrew Commerz. That includes physical products like T shirts, mugs, shoes, mobile phones, laptops, anything digital products like courses and between files, software's subscriptions, appointments and much more so I can save you. Commerce is the Swiss army knife off e commerce applications. There are many great features the view commerce plugging offers. So let's go ahead and we can install and activate this view commerce plugging into our website. So I'm just going to open my left side, which is coupon tape dot com and you need to access the WordPress dashboard. So after your domain name carried forward slash then WP hyphen admin and then hit Enter. This will ask you for the user name and password. So I'm just going to logging into my account. Okay, Now, firstly, let's do one thing as we can see over here, it stays north secure. So let secure our website with the SSL. In the previous lectures, we had already installed and activated the SSL certificate from the host gator See Panel. It's time to install a plug in so that the SSL certificate will be active on to our live website. You need to install of free plugging, so go to this plug ins and then here you can see add new Just click on it blood inside a small sore fares which extend the functionality off your website. So here we need to search for really simple s s l the first plug. Indigency. Really simple SSL just install and activate display gin. All right, now here. We need to click on. Go ahead and activate as a cell is still we cannot see the lock symbol over here. So the next thing that we need to do is under the settings. You can see this general menu. Just click on it. Okay, so now you can see at the very top lock symbol is already applied after deck. Click on log in once again. Because when you convert your website from the known secure to the s treaty P s website, then it again ask you to logging into your account. In case if you cannot see that the screen, then you need to go to the settings and then general. And here you need to make it as https. Earlier, you would be seeing something like his TTP call and slash slash than your domain name. So you just need to aired s and then save changes. Let's install the vou commerce plugging so simply who were owned plug ins and then click on add new. So this is another free plug in that we are going to install and activate into our website , which will convert the basic informative website to an e commerce store type. Hear vou Commerz and the first plugging is vou commerce by more than five million active installations by automatic. Just install and activate display gin when you install the vou commerce plugging first time onto your website, then it asks you to complete the set up process. So here we have six steps that needs to be completed. Let's go ahead and fill up all these details one by one. So very zero store located. You can enter your country name over here, so I'm just leaving it to United Kingdom here. We can put the address something like now here you can select the currency in which he would like to accept the payments either if you are from learned and then you can accept the payment in pounds or this is optional. You can also use U. S dollars as a currency off your e commerce store. Vile setting up your store address in UK. So there is no limitation with the currency and that is the best thing with Commerz. I'm just leaving it to pounds now here you can select whether you would like to sell both digital and physical products or just want to sell physical or individual digital products . I'm just leaving it to the first option. If you are selling the products in person, then you can just select this check box. Otherwise, leave it empty. Then let's go. This is another new pop up over here like enabled usage tracking and help improve commerce . So this is really optional. Either you can just check it or on jacket and then continue. So this will send some use ages static sticks to the flu commerce company, and they will be checking, like how, exactly the view commerce plugging is performing onto your website. Now I suggest you just tow uncheck these stripe or PayPal or any other payment option over here because in the upcoming lecture, I will be walking. You troll off how weekend set up the payment options. Let's click on. Continue Now. Here we have another option on shaping stab. Did you know you can print shipping labels at home? I'm just making it on Jake because this is really Norton needed and also inject this section because I will be guiding you how we can set up the complete shipping fees in the upcoming lectures. Let's click on. Continue. Okay, now here. Recommended for all book homers. The stores. So these all are the optional things, like a store foreign team, which is a basic team. Let's install this team right now and later on. Begin change it. Automated taxes, new commers add main male shame. This is basically an email often on Facebook, so I'm just going toe. Inject these two options and let's install and activate these three recommended features for Wouk Homers. Let's click on. Continue. Okay, now, jetpack is 1/3 party service, so I wouldn't recommend you to install an activated. It needs some kind off special access off your website. You need to create your account on to divorce press dot com. So this is really not needed at this time. Click on skip this step, and that's all we have to do. Last step is ready, so go to this visit dashboard. So veer back to our WordPress dashboard, and here we can see to new taps available nor Tober three taps, vou Commerz, burnouts and analytics. So these three taps are available. Then we have installed and activated deVeau commerce plugging as in the book, Omer said. The process We have also installed the storefront team. So let's go ahead and we can open the website onto a new tab and we can see how our website looks like. Here we go. So now we can see the look and feel off. Our website has bean changed earlier it was looking to ugly but now it is looking a little bit better. Here we have this search products search box. The price shopping guard idea is also added. These are the menus here we can put the logo and these are some default Post will be making this website more beautiful than I will be installing a new team and that will be completely free off coast. So this website will look amazing. Thank you very much. 7. WooCommerce Basic Settings: in this lecture, we're going to do some basic settings off our blue Commerz store. So here you need to Hoover on vou commers and then click on settings. This is the standard setting speech off newcomers there will do some kind of basic settings in order to complete the set up process off our online store. There are several types available, like general product stacked shipping payments, accounts and privacy e mails in advance. So I have created separate lectures for Texas shipping, payment account and privacy and email. Let's go ahead and complete some bending task under gentle and product stab. So here we can fill up the complete store address. A store address means Veer. You have your physical shop located, but this doesn't mean that you must need ah, physical shop in orderto operate your own land business. Even you can start your own e commerce business from your home as well, and you can put your home address in these boxes. Let's jump to gentle options selling location. Now. This option is very useful because here you can choose whether you are selling the products to the entire world or to just specific countries for example, you are just selling the products to United States. So here you need to select cell to its specific countries. And then in this box, you can put the country name, for example, United States. So then someone will try to make an order. And on the building page he will only be seeing the United States in the country list so that no one will be able to place an order who is living outside the United States. So this is really a very cool feature off who, Commerz. I'm just making it available for the entire world. So let's put it back to sell to all countries shipping location. Now, maybe you are receiving the orders from the entire world, but you are just planning to ship your products to some specific areas. So here you can simply select the specific countries or just ship toe entire world. So I'm just leaving it as it is. Customer location. So, by default, who commerce is tracking their location? As for the geo location off their browser? Or you can also select some other options like show base address. It means, whatever the address, he will be filling up onto the check out page that will be considered as the default customer. Location enabled taxes, whether you would like to charge access from the customers or nor so make it enable because in the upcoming lectures we're going to cover the taxes part as well enable coupons off course. This is really a very great feature in order to increase your sales. So here I will also regarding you how you can create the discount coupons, and those coupons can be applied onto the car page so that users can a whale, some discount currency options. Off course. You can change the currency from here. If you would like to make it like United States dollars United and the United States dollars like that, I'm just putting it back to GBP. There's bound, strolling and then, after make it save changes. So once you will save changes than all these sidings will be permanently saved. But remember, you can change any off these settings later on as well. Any time let's jump to the product, step under the product stab. We confined the first option shop page. So whenever you install the vou Commerz by default, four pages are automatically created. Let me show you those pages and this view Commerce plug in create those standard e commerce pages. The pages names are card page, check out page my account and shop page, so we haven't created these page, but they're automatically created under this radius section. These pages are very important because when you are operating the only store with newcomers , then their entire functionality of the parades are linked with these pages. So make sure the nor delete any off these standard vou commerce pages. Let's go back to the product step, so make sure to leave the shop as the shop it selected at the guard behavior. If you select this check box, redirection Carter Page after a successful addition. Then when someone click on the add to cart button, he will build directly redirected to the card page so that it's completely up to you. If you would like to customize your e commerce stores in that otherwise the standard mechanism say's, you can leave it unchecked. Placeholder image. Leave it as it is here. Measurements. If you're selling some kind off waited promotes like mobile phones off court, that would be having some weight around 200 grams or 300 grams of. From here, you can select the weight unit, whether they could be in Grams Selby's or ounces, and you can also specify the dimensions unit from here. So that's completely up to you. Reviews. If you enable the reviews, then the buyers could be able to leave the product reviews. So this is really good for generating the trust in the future customers, and then, after you can keep it, us save changes under the products. Now let's go to the inventory tab. This area gives you the complete control off a stock management off your products. So from here, you can manage the Endara stop off whatever the products you're selling. But off course, that is not applicable for their digital products. Let's go to the downloadable products Stop now. This area is aptly cable for only those products, which are digitally available onto your website. For example, if you're selling E books than those e books would be available in the form it off door pdf . So then someone believe making this successful payment. Then, after they will be our download link of able onto the transaction, complete page So here you can see the last option grant access to downloadable products. After successful payment, it is checked. So this is the standard mechanism that off course, when someone is making the payment, he will be willing to have their download link available immediately. And if you check this option, downloads require logging. So this means when someone made the successful payment, then also, the download link will not be available, but they must have to log into your website in order to download his product. So this is really a little bit disappointing option for the customer. So make sure to not touch any of these options. And also please do not select any other option from this drop down rather than this force download, so keep them selected as it is. At last, you can see if changes. So that's all we had to do in this lecture and in the coming lectures will be dealing with the taxes, shipping payment accounts and privacy and emails. Thank you very much 8. Learn How to Set up the Shipping Price: let's go ahead and begin set of the shipping prices for our products. For example, this is a demo productive that I have created. Now when someone clicks on at two card, this product will be added to the card page. Let's check out the card. All right, so this is the card page where all the products are added whenever we heard the add to cart button onto the single product page. If we check here the shipping part, you can see flat trade £55 shipping toe India. So the total price that a customer have to pay is £95. That includes the shipping fees, and you can notice one more thing that shipping to India, so it automatically detected my country. But I haven't entered my country name anywhere in this entire purchase process. If you remember in the previous lecture, when we were setting up the vou Commerz under this view, commerce and then setting stab here we have selected D Ford customer location to geo locate , so vou Commerz automatically detected my country, and that's why it automatically calculated the shipping cost to India. But obviously this shipping cost has been set up by the website owner from the back end. Now, if I select a different country like United Kingdom and leave all these things as it is because the shipping price has been set up as per the country basis once the update, we can see the shipping prices now £50. If a customer is in United Kingdom. So there are different prices has been set up for the United Kingdom and for the India in the same way. If we select any other country, for example, the United States and let's check out what is the price so we can update and here you can see flat rate £100. So there are different different shipping peas as per the country's. So in this entire lecture, we're going to set up the shipping price for the products and you will be having the full control, like what specific price you are willing to charge for the customers when they're belonging to different countries. So to deal with the shipping prices, things we need to go to the loo, commers and then settings. And here we have the fourth tap shipping. Just click on it. Here you will be seeing a little explanation like what exactly you have to do in order to set up the shipping prices. But let me walk you through fastly and Weekend said that the shipping crisis for our products, the first thing that you need to do is click on add shipping zone so either you can click on this button or here we have add shipping zone, just click on it. Now, for example, you are willing to set a shipping price for India. So in the zone name we need to put India. This word is just for our reference now. Zone reason Whatever the country name you will enter in this box, the shipping price will be applied to that country. So again, we need to put here India like this. And now here we need to click on add shipping method. So basically this will be the option from here. V consented the shipping price for India. Here we have multiple options like flat rate free shipping, local pickup. So let's click on flat rate first and then click on add shipping method. So ah, flatter chipping method has been applied. So when someone will be for chasing the product from India than this. Flat rate shipping will be applied, but we haven't set the price for this flat rate. So let's click on edit, and here you can see cost in this box. You can put the shipping price to India, for example. 55. If you would like to make this shipping price Tex ableto, then keep it as taxable, otherwise select as none and then save changes. So the flattered shipping for India has been applied over here. Let's go back to the shipping zones. Once again, you click on this link. Now it's time to set up our different shipping fee for United Kingdom. So again you need to click on Add Shipping Zone. Repeat the same process once again, for example, United Kingdom. And here you can type United Kingdom. Let's add the shipping method, keep it as flat rate at shipping method and now click on this edit here. He can put the shipping fee for UK as £50 now save changes, and it's done. So we have set up the shipping prices for India as well as UK. Now what will be the shipping price when someone is making an order who is not living in India or in UK. So here is the third rule location not covered by your other zones. Let's click on this option. Manage shipping methods. It means when someone is placing an order who is not belonging to India or UK than this shipping price will be applicable to that customer. So here we can select add shipping method, keep it as flat rate, and here we can put the shipping price like £100 save changes, and that's all done. So in this way we considered the shipping prices for our products on our e commerce website . Now let's say you are willing to provide free shipping for all the customers who are making the order from United States. Then you can click on Add Shipping Zone now in his own name. You can enter USA or whatever the name you would like to put over here in zone area. We need to put United States and let's add a shipping method here. This will be free shipping and then add shipping method. So this time we are making the free shipping for all the customers who are living in the United States and That's all we have to do. So now we have created three shipping rules for three different countries. Now let's jump to the shipping options. Stop. Just click on it. Okay, so here we have three options available calculations, shipping destination and debug more. Under the calculations, we can see the first Jack box enable the shipping calculator on the card page. Let me show your demonstration. We're on this card page, and here we can see this is the shipping calculator. I mean, whenever a customer is willing to place an order so he can simply go to the scarred page and after entering his country name, he can directly calculate the shipping fees before placing the order. So this is called shipping calculator, and there is a possibility either you can enable or disable the shipping calculated from the card page. So this option is only used for making the shipping calculator visible or not. Second option hide shipping cost until an address is entered. This means the shipping price will not be visible. Toe any customer until he entered his address on to the check out page. Next option is shipping destination. So here we have three options the fall to customer shipping address. They fall to customer billing Address force shipping to the customer billing address. Let me show you what exactly these three option means. We are on to the card page. Once we click on, proceed to check out the next page is check out page. So this is the check out page from here. You still have to fill up his all information like his name, address everything. And once he will make the payment successfully, then the order will be delivered to his address. Now, with the help of this option, we can specify, like what would be the exact shipping address for the customer, either. We need to send the product with these billing address because here we have two forms. One is for billing details, and 2nd 1 is for shipping details. So vote for baby shipping address considered whenever someone is making the purchases. So either you can make it as default to customer shipping address or billing address. Or if you select this third option, then the next shipping to a different address. Books will be completely disappeared and the last option is debug mode, which is only needed when there will be some kind of issue with the shipping raid catch, so they really don't need to make it enable at this time. That's all we have to do in this shipping area in order to set up the shipping fees for our products. 9. Leran How to Set Up New Order Notifications on Email: when someone place an order successfully on your website. Then there are two ways the admin get notified for a new order. Either he needs to keep this WordPress dashboard opened, and he just need to go to this view commerce and then orders area to check all the new orders coming through. But it is really quite very hard to keep open this wordpress dashboard all the time to track the orders. So the second standard mechanism is go to the settings and we can set up an email address. So whenever someone will place an order successfully, then the admin off this website will be notified directly to his inbox. So in this lecture, we're going to set up an email address, withdrew Commerz so that the admin off this website will be notified whenever a new order comes in. So here, under this view, commerce in settings, you need to go to this accounts and privacy. The first section is guest check out. Allow customers to place orders without an account. This means whenever someone will try to purchase a product from your website, it is not mandatory for him to create an account first before making the purchase. Second option. Allow customers to log into an existing account during check out. If you enable this option, then there will be a log in button available on to the check out form. This option is best for those who are coming back again and again to your website to make the purchase. It means the existing customers. Sova Never. They will be trying to purchase this second product from your website. There will be a log in button available or into the check out page. From there they can directly lovin into their existing account, and they can make the party s successfully without feeling of the entire bling form. Again and again. Next option is a con creation. If you enable the first option, allow customers to create an account during check out. So whenever someone will be making the payment onto the check out page, there will be an option to create an account and that account will be created on the basis off the billing details the customer has filled up. So it is a better idea to enable this option next option. Allow customers to create an account on to the my account page, let me show you. First of all, how exactly your my account page looks like off the scoop on tape dot com. So this is the current my account page off this website. It only has the Logan option. But what if someone will try to create an account on to this website by directly going to the my account page? There is no form which will make it possible for the users to register themselves. So if we enable this option and then after we can save the changes and now I can refresh the page. The register form will also be available over here like this, so user can directly register into your website, even if you do not want to make any purchase. The other two options say's whether you would like to create the user name and the Passover for your customer automatically on the basis off their billing details or not. So it's completely up to you whether you can check it or inject. That's up to you next option account. It is a request. Leave these checked boxes as it is. Next section is privacy policy. So under this privacy policy, drop down you can select a page that consists off the entire content off privacy policy off your website, and this page link appears onto the check out page just before the place order button and leave this personal data retention section as it is at last. Save changes. Now let's jump to the email section so that we can set up an email account for new order notifications. So here we can see a lot off Tom certain, like new order canceled, order failed order and have against the email sandal option from name. It means when someone will be receiving an email from your website, then what will be the name appearing in this sandal area from address. So here will be the email address that will be appearing like from where this email has been sent through. So it is a better idea that in the name field you can put your website name, for example, coupon tape. And if it is a company that you can put the entire company name like Private limited from address, Better would be if you can put a business email in this area something like orders at coupon dave dot com. Next option is headed. Image. So here, you need to pause the link off your website logo. So this logo will be appearing on to the order confirmation email to your customer. So here we can come to our website and I have a logo over here. Don't worry. Later on, I will guide you. How weak. Inside of the logo. So here we can simply copy the address, copy, image, address and then go back to the email settings. And here we can simply based it. So this is the image link footer text. So this will be the text that will be appearing on to the welcome email to the customer. So you can added this entire text even you can use HTML. You can use some type off, redefined short towards like the site title or who commerce. So I will be teaching you all these things later on. Right now, you can simply replace this text with some off your custom text or content. At last, you can save changes. These are the color options. You can play with the colors as per your choice. Now, let's set up an email account for new orders or canceled orders or failed orders. These three type off emails are very important for the admin number one new order. This means whenever someone will purchase a product form, your website admin will be notified directly to his in box canceled order. It means ven ever Ah, use every tried to purchase a product and he directly goes to the check out page from the check out page. He canceled the order. An email will be sent to the admin about cancellation off that order. Last one is failed. Order. This means do you do any issue with the customer? And, like, payment failure, Internet connectivity issue or any type of problem off course meant someone tried to make a payment. Then a notification will be sent to the admin that this order has been field. So we can set up either three different emails for all these three type of different email notifications. Or you can set up of one common email address for all three notifications. So, in order to set up a email for new order notifications, simply click on this. Manage. Now here, make sure this check box is selected Enable this email notification recipients box. You can put your email address on which you would like to receive the email notification for the new order arrest. All things will be same either. You can also customize like war should be the subject or the email heading. Otherwise, leave it as it is because blue kamas take years off it. At last, you can save changes. Once it's done again. Go back to the emails or you can click on this ad over here, this little arrow, then go to the cancelled order. There. You can also set up the same email and the same unit to do with the field order. So that's all you have to do in order to set up the email account and the account privacy section with the flu commerce plugging. I hope this lecture was easy for you to understand. And in case if you have any ready, please do not hesitate to send me your questions. I will always be there to help you 10. Learn How to Set up the Taxes: setting of the text says it's one of the most important asked that you have to do very. You are making your online store ready for the world. Most businesses have legal obligations to run their business and commerce makes it possible for you to collect it access to set up the taxes. As for your legal jurisdiction, So in this lecture, I'm gonna show you how exactly you can set up their taxes in your e commerce website easily . So let's get it started looking into your for president side who were on newcomers and then click on settings. Here we have her tap backs. Just click on it. Now, this is the area. From there we can manage the entire tax system off our website. The first option is prices and good with tax. If we select the first option, yes, I will enter prices inclusive off tax. This means whenever you will be creating the products onto the commerce website. If you are entering the price $100 then the attacks will be included in tow. That $100. So even Norby charging anything extra from the customer if you select the second option? No, I will enter prices, exclusive off backs. It means you need to enter your product price only, and you can set up the text separately. Next option is calculate tax based on customer shipping address or customer billing, address or shop based. Addressed as I have shown you earlier as well that on the check out page, we have two separate areas. Were customer can fill up his details. 1st 1 is billing details where he also need to enter his address. In the same way. There is another area where we can see a next form where he needs to fill up the shipping address. So from this option, you can select whether we would like to charge the attacks from the customer based on a shipping address or on his billing address or on your show based address. Next option is shipping tax class. Here we have four options shipping tech class Based on card items. It's tender reduced rate theory. So these three are the X classes, which are created by deformed by the boomers. You can see at the very top a standard rates reduced rate zero rates In these three tax classes, you can specify different tax rates and whatever you will select from here. For example, under the standard rates, you have a specified 6% off tax on all the products, and under this reduced rate you have a specified 10% tax rate. So if you will select standard from here, then six person will be applied onto the shipping fees. If you select a reduced rate from here, then 10 person will be applied onto the shipping fees. So this is the working mechanism off this shipping tax class. Drop down next option is rounding if you enable it. It clearly say's round tax at sub total level and stood off rounding bar line. This means if you are having more than one tax is applied onto a single order, then the round off value will be displayed on to the check out page rather than showing the different taxes on each different line. So just leave this. Inject additional tax classes well. These are two different X classes which are created by deformed by the commerce as they are showing over here. So it is really not needed to deal with these two tax losses, but we will be setting of the tax rates under this standard rate X class. Now next option is display prices in the shop. Let's check out the drop down options, including tax, excluding tax. This means then you will be entering the price for the product so better those prices will be showing the tax included or excluded. So that's completely up to you. Display prices dealing cards and check out excluding the accident or in tax. The same thing is applied over here but on the car and check out page price display suffix . Here we can put something like including off taxes or whatever they text you would like to display as a suffix to your tax relief. I'm just leaving it to empty. Last option is displayed tax total, itemized or as a single total. It means if you select itemized and you have more than one products onto the carpet, then each product will be having their own separate tax displayed or if you select as a single total, it means if you have five corners into the card page, then vou commercial Catholic, the entire tax off, each off the different products and those taxes a little bit displayed just as out one single value, so it would be a better idea if Eakins keep it as as a single total. At last, we can save changes. So far, we have done some basic settings off tax in commerce. Now it's time to specify the tax value. I mean, what for? With the person Day of tax would be applied for a product or for a single order. So let's goto standard rates in this section we can set of the tax prices. We all know that different states or different countries have their own different tax labs . So here in Blue Commerz, we can specify the tax rates. As for the location in order to apply attacks for slick click on insert room So here we can see a new has been inserted. The first column is country core. Send this box we need to provide the country code. For example, if you are from the United States, you can simply put the country called us. If you don't know the country core off your country, you can simply click on this country code, and here it will open the Wikipedia page very congested country Court off all the countries in this world, for example, for Afghanistan, it is a F or for Albany A. It is a L. In the same way. If you have any other country, you can simply go toe that appropriate row and copy the country code. For example. Congo CG So let's come back to our website now. State code. If you would like to specify a accident for a specific state under this United States, you can simply ported state called Over here, for example, let's say we're going to apply our tax rate for California, So C is the California State cold? If you don't know the state court, simply go to Google and try to find out from there post cord. For example. All the post courts are applied the same tax rate, so keep it as a star and just leave the city as well. Tax rate. Here you can specify the tax person days that you would like to charge for the customers who are making an order from California, for example, 5% to just under five. Here, you can put the tax name any name that would be displayed on to the check out all card page for example, decks at flight Priority one. I will let you know what exactly this purity means later on, but keep it as one. If you select shipping, then this 5% age tax rate will also be applied onto the shipping fees. For example, if you have set up the shipping fees for California about $100 then 5% will also be applicable on that $100 to at last week and save changes. Now it's time to test whether this extra it is working, probably or not. So let's go back to our card page. All right, so here we can see we haven't set up any tax rate for India. That's why it stays. Where estimated for India. £0. Let Jane the address and we can put here United States and then California. Now date and here we go. We can see that is applied. £5 so totally customer have to pay is £105. Because there's no shipping charge. Tax rate has been applied on the shipping cost. Let's go back to the tax settings once again. Now, this time I would like to charge a standard rate or 4% of all the people who are making the orders outside California, but they are living in the United States. So let's insert a neuro. And in the country court, we can put us keep the state court fourscore and City Box empty. Here, we can provide 4% tax name would be same. Or you can put your own custom one now priority. Let me explain you what exactly this priority means. If we go to the card page and here inside the shipping calculator, let's click on Change Address. We can see here that the shipping cost as well as X, can be calculated on the basis off either country name, then either on a state or it'll by city name or vice it cold. The same thing is also written over here country estate, zip code or city. So let's say United States is the entire country, and California is the estate off this country. So if we keep the priority off California as the one and for the entire years also as they want, so when someone go to the card page and here he select California, then 5% tax will be applied. As for the 5% rate over here, but 4% is not applied because we have placed the priority Top Puritan used one number in the same way. If you would like toa set a tax rate for a specific country, just click on insert rope, put the country code over here, and then here you can put the tax rate in case if you would like to apply specific or a particular except for the entire world except this US and California keep all these boxes empty. And here you can put the tax rate, for example then and then we can put here like some text international tax, keep the priority one and then save changes. Now, let's go ahead and we can to fresh the guard page. All right, now I'm going to change the address something like India, and then update So here should be 10% a plight like this, you can see £10 is the 10% off £100 total value off the product in the same way. If you select any other country like China and then update the same 10% tax will be a plight like this. And here you can also see for the China. We have set up the shipping fees for £100 the product fee is also £100. So now the tax rate is total 20 bonds. The reason is that we have already set up the shipping tax enabled. There's a reason why when there's a shipping fees available for a specific country like China, 10% is also applied on this shipping fees. So the total tax customer have to pay is £20. So this is the way how we can say that the taxes in your view, Commerce Website, Thank you very much. 11. Learn How to Set up Coupons and Discount System: coupons or promotion courts are a great way to attract new customers and get back the loyal ones. Come back to your website again and again. So in this video, I'm gonna show you how we can say that the coupons and discount court system into your e commerce website, which is completely based on who commerce. So, Luke, almost white. An inbuilt feature off coupons and discount. But the help over which you can set up almost any type of coupon code you can send the users limit you concert the rules, like on board minimum order. This coupon court should be applied. What is the valid ity off that coupon? And almost everything you can do with the help of this inbuilt this Concord system invoke Commerz. So let's get started. And we can set up the coupons and discount system onto our Rukh Homers website. So we are in the WordPress dashboard. Let's go ahead and we can create a new coupon. So just over on who commerce and here you can see coupons. Just click on it. Make sure this coupon many will only be shown over here if you have already enable it inside this setting and this gender tab here it is enabled the use of coupons, so make sure they should be checked. Then only this coupon menu will be displayed inside this book Homers menu. All right, so we're on the coupons page now, here begins. He We haven't created any coupons before. That's why it stays. Create your first coupon. So let's click on it. So this is the page. From there, we can create the coupon code. First box is coupon cord. So here you can enter the coupon code, for example, 1st 50 So this could be any text, any number. Whatever you want, make sure to use the Alfa pneumatic characterise in this box. Or you can also gender it a coupon court by clicking on this button. So I'm not using it right now in this box. You can provide the description off this coupon. So let's say like this. So we are creating a coupon cord and this coupon court will be applicable. When the card Well, you would be at least 1 £50. Now let's the school down. Under this coupon data tab, we have three sub taps general usage restriction and use a limits. So let's go with general right now. Here we have three different type of discounts. Person day discount, six car discount, fixed product discount. If you select percent discount. So whatever the discount value U will enter in this box, for example, 10 the total 10% discount will be available at the customer onto the card page. For example, if the Guard page has a total order off £500 then the user have to pay just £450 so he will get a 10% discount, which is equivalent to £50. If you select fixed card discount, this means, whatever the value inside the card, for example, £1000 or £2000 the customer will only be getting £10 discount, so that is called fixed card discount. On the other hand, if we select fixed product discount, this means if we have more than one products available into the card like here, we can see T shirt, and another product is shoe. Both have different prices. This is £100 this is for 1 £20. Here we have the quantity £500. Let me just said it do? One quantity. All right, so now both off these products are their original prices £100.1 £20. Now let's apply the coupon code 1st 50 and apply. Here we go so we can see the Gorda discount of £20. It means, if we have to products than each product will be offered a discount off 10 bombs. So this T shirt got £10 discount and the shoe also go £10 discount in the same way. If we will be having one more product than the discount price will be 30 bones, so £10 will be applied to the third product. So this is how we can deal with the coupon court system over here. Next option is allow three shipping. So if we enable this option and when someone will be applying this coupon cord, he will be getting off free shipping. But make sure off free shipping method must be enabled into the shipping areas that we have already done into the previous lecture. So this option will only work. In that case, I'm just leaving it toe uncheck Groupon expiring. If you would like to set an expiry date off this coupon, for example, today is 28 off November 2019 and we would like to expire this coupon after 30th. Then let's select 30 off November 2019. So if someone will be trying toe, apply this coupon. Gordon First of December offer that this coupon court will not be working anymore. Let's jump onto the use age restriction tab. Now here we concert certain rules. 1st 1 is minimum Spain. So in this box you can specify the minimum card value. Then this coupon court will be working. So we have already explained into the description that the card, while you must be at least of 1 £50 in order to make this coupon court working. So in this book you can put that value maximum spent. If you would like to set a maximum of spend limit, then you can put in this box. Otherwise, Leavitt empathy individual use only if you enable this check box. Then after time, only one coupon court can be working. For example, here we have created one coupon code, which is 1st 50 If you create another coupon like 2nd 50 or forced hard bread, it means more than one coupon chords. Then, after enabling this check box on Lee, one coupon court can be working at a time for the customer onto the card page, So this option is really idol and vineyard. To make it checked. Exclude sale items. Maybe you will be providing some products at a discounted price. So if you would like to exclude those sale items to get offer off 50% or whatever the coupon cord is providing the discount maker check. Otherwise keep it unchanged. So better for B. We are not going to provide any discounts on with sale items. Keep reject products. If you would like to specify a few products, fear this coupon court will be valid so we can just put the product name in this box. For example, we can put the 1st 3 characters like shirt, and here it is T shirt. Let's select So this coupon core will only be working. Vince someone. We were trying to buy their T shirt product that we have already onto our website. Don't worry, I will be guiding you how we can clear departures into the view commerce website later on. This is just for the demonstration purpose in this lecture. If you would like to exclude any products that will not be getting any type off all four with this coupon cold, just put the name in this box in the same way you can apply this coupon. Go to a specific product category, for example, lords. So plots will be having that discount offer with these coupon coat and exclude categories something like similar to the one explored products. You can exclude the categorias well, Leave this allowed email section as it is, it is not needed at this time. Let's go to use a limits. So here you can specify, like use a limit per coupon, it say's how many times this coupon court can be used before it is white, so you can put a number over here like 10 so 10 times the scoop on court can be used. When someone will try to use this coupon court at 11th time, it will not be working. I'm just leaving it to empty limit. Uses two X items the maximum number off individual items the scoop on Gordon apply toe when using for discount, leave blank to apply to all qualifying items in the guard and here use a limit body user so you can just started like 11 customer can use this coupon board only at one time. So these are the settings that we can use in this coupon court area. In order to create the discount course into our view commerce website, I hope the tutorial was easy for you or in case if you have any questions, please do not hesitate to ask me, Thank you very much. 12. Learn How to Set up Online Payment System: when it comes to receive online payments on your website. Payment gateways are behind the scene. So what are these payment gateways? Well, these are the third party companies. They have the authorization to charge the customer credit or debit card whenever customer fill up the car details onto your website. Those details are sent to the payment gateways companies Payment gateways Companies have their transaction fees around toward 3% on each transaction. When customer do not file any charge back after a certain period of time, like seven days or 10 days, different payment gateways has their own terms off releasing the payment, then payment gateways companies deduct their transaction fees and transfer the remaining amount into your bank account. There certain payment gateways companies like PayPal or twice dot net pay you money raiser pay we pay while pay so in the scores were going to integrate the most popular payment gateway in this world, which is PayPal, which is very easy to sign up, and it's almost free. So let's get it started and we're going to indicate that payment gateway into our e commerce website under the vocal honors again, go to the settings the fifth tab is payments. Let's click on it in the view, Commerz. PayPal is the integrated payment gateway. So you don't need to install a separate plugging for integrating the PayPal payment. Gateway here we have four different payment methods by default. The right bank transfer check payments, cash on delivery and PayPal. Let me explain you all these things. One by one. Direct bank transfer. If you enable this option, then you need to provide your bank details like your bank account name, account number. I have a C or sift cord or whatever the details it needs. So whenever someone will be placing an order onto your website, then onto the order information page, your bank details will be displayed. Were the customer can transfer the forms to complete the entire payment? Next is check payments. This means when someone place an order on your e commerce website, then customer needs to send a payment. Why? I check so that his order will be completed and you can deliver his product. Third option is cash on delivery. I'm sure you're aware about this tome. Then someone is placing an order online and he select cash on delivery as the payment method. This means valuable but delivering the product to the customer. Your career boy can collect that payment in hard cash, so this option is used for cash on delivery or we can say payment on delivery. Last payment method is PayPal. PayPal is a payment good V, which helps you to receive online payments, and this is one of the most popular and easy to use payment gateway in this entire world. In order to receive payments, why are people on your e commerce website Firstly, you need to create an account with PayPal, so either you can click on this sign up at the very top or here you can see sign up for free. Let's click on it. They borrow force you to create to type of accounts. Either you can create an individual account, so it does not mandatory that you must have a registered business. In order to sign up with people, you can select an individual account or if you have a business registered, then you can sign up as a business account. Click on next. It will ask you some details, like your first name last name email. Bank on details some kind off. I didn't really prove. Once you complete the entire process, the new people account will be approved. Let's come back to our website in order to set up the people payment Gateway. Let's click on Set Up Over here. The first option is enable or disable PayPal Payment Gateway. So let's make it enable title. Here you can replace the title as per your need. Better would be to keep it as people so that customers can know that the PayPal payment gateway is used for the online payments description. You can change their description. Whatever you would like type over here. For example, you can make your payment. Why a credit or debit card? Or you can also use PayPal account. Put this description. We were displayed to the customer Papal email. When you have signed up onto the PayPal website, you must have used an email account, so you need to put that email address in this box, for example. I'm just putting a demo email address Over here. Something like this is just for example, let's school down. Keep these poo check boxes unchecked. Papal sandboxes used for testing the payment and double August for some other purpose i p and email notifications, So this option needs to be enabled. Here, you can see send notifications when an i. P and is received from PayPal, indicating reforms, chart bags and cancellations. So in these three cases, this idea notification is important. Next is receiver email. So in this box, you need to provide your PayPal email address where you would like to receive the payments . PayPal Identity Token. Remember, Without papal identity token, it is not possible to receive the payments via PayPal payment Gateway. So PayPal Identity token is basically an encrypted cord that can be formed into your PayPal account. So let me show you where it is. I'm just going to the papal, and I'm going to logging into my account. This is my business PayPal account. So let's go ahead and we can find out the papal identity token. You can see this gear. I can just click on it under this area, you need to go to this selling tools. Now these are the bunch off options available. You can focus on website preferences. Let's click on update, and on this page you need to do some settings in order to make this PayPal payment. Gateway. Working with your website here, you can see or to order done for website payments. So make it on. And in this box, you need to provide your website domain name like I have done over here, including the https protocol. After that, you need to put forward slash and type payment hyphen confirmation at last. Save it. So once you will save it, then it will generate a papal. I didn't really talking for you. Something like this. Under this payment data transfer, once you make it on, then you will be seeing the identity talking something like this. So this is an encrypted code. We just need to copy this entire court from here and then paste it into this box invoice prefix wc. So that's completely up to you that you can put your own text over here. This will be perfect off the invoice that will be sent to the customer. For example, if the invoice number would be 123 then it will be showing something like W c hyphen. 123 Shipping details. Keeper Checked. Address override. Keep it. Inject here. Under this payment action make sure it should be capture. This means then someone will be making the payment to your website immediately. The amount will be deducted from the customer bank account or his PayPal account, and it will be credited directly to your PayPal account pages style. This optional. You can leave it as it is image you are. You can also leave it as it is, or you can provide your website's logo. You are a link over here AP I credentials. It is completely optional. Leave all these three boxes empathy. They are really not needed at all. At last Dave changes. That's all we have to do. Now let's click on this little arrow and we'll be seeing that this PayPal payment gateway is active on to our website. Here we go. So this is quite very easy to integrate the PayPal payment Gateway with your e commerce website using the newcomers integrated PayPal Payment Gateway. Thank you very much. 13. How to Generate the PayPal Identity Token: Hey guys, in this lecture, I'm going to show you how we can generate the PayPal identity token or where we can find the PayPal identity token into your PayPal account. Well, if you are a new WordPress developer and you are building the website with the help of Woo Commerce. You might be needing the PayPal identity token in order to integrate the PayPal payment gateway into your WordPress website. So in this lecture, I'm going to show you how we can generate the PayPal identity token so that you can properly integrate the PayPal payment gateway into your Woo Commerce website, as you can see over here. So this is the settings page of Woo Commerce plugin and we're on the Payments tab. So here it asks for the PayPal identity token in this box we need to enter. Otherwise, the payment gateway will not work with the view commerce website. So let's go ahead and weekend generate the PayPal identity token. Firstly, we can login onto the PayPal.com. Now you need to click on this my PayPal button, okay, now you will be getting this kind of settings icon. Just click on it. Okay, now here we need to click on this dwellings tool. And under this section you can find website preferences. So just click on this update button. Now let us call it down. So as you can see in my PayPal account under the payment data transfer tab here we can see identity token. So this is the long identity token that we need to use in order to integrate the PayPal payment gateway into my Woo Commerce website. So in order to generate this type of identity token, you need to do few settings into your PayPal account. So let me scroll down first, make sure the payment data transfer option is on. And now here we need to make block non-encrypted web site payment of and this paypal account optional contact telephone number of. As we can see, PayPal recommends this option, express checkout. Just know that's all you have to do. And at last we need to scroll up. Now, scroll down, and here you will be finding this auto return option. So in this box you need to put your website URL and then forward slash payment hyphen confirmation and make sure it is saved from here, you need to click on the Save button. Once you will click on the Save button, the papal identity token will be generated in this area over here. So that's super easy. Thank you very much. 14. Learn How to Create the Product Categories: When you're launching your e commerce stores, you should decide first what products you are willing to sell online. And hence for those products, it is important to create departed categories so you can put up ordered into its upper appeared category. For example, this Amazon website. They have a bunch of product care degrees like beauty in which all the beauty related products are listed. Here we go Even. There are many sub categories under the beauty category, like this bath and body fragrance here, care and styling. So there are many sub categories also available now inside this Barton body, only the products related to barking is available. But when someone clicks on the main product category, that is beauty. All these products will be displayed, which are already listed into its sub categories. So let's go ahead into our WordPress dashboard, and we can create the product categories. Firstly, you need to Hoover on the product step and then click on categories. Now this is the page. From there, we can create categories for our products. This is a default product category created by Vu Commerz by mistake. If you forget to assign a category to your product, it automatically goes under this UN categorized product category. Even we cannot believe this product category as there is no option to dilate it in the name field, you can tie the product category name, for example. Cloths leave the slug box empty as it will be order created. Leave the parent category and other options. As it is, I'll show you the use off parent category in next few seconds. Now click on this, our new category button, and this care degree is now created. As we can see on the right hand side, cloth is created Now, if you're selling cloths for both men and women, it is a better idea to create two separate sub categories for them. Let's create men, and from this parent category, you need to select plots. So now men Villa Billy's subcategory off this cloths, and at last you need to click on this. Add new category button. That's the scroll up so we can see on the right hand side. Men is also created under this clots, and that big hyphen symbol shows that men is this subcategory off plots. Let's create this second subcategory, which is women and again we need to assign it under cloths. So here, make sure it is selected as clouds click on Add New, and this government will also be assigned under this cloth like this. So both men and women are created as this subject. Degree off lots alerts create another parent category as shoes. So here we can type shoes. Make sure inside the parent critically drop down. There should be none, because this is going to be the main product category. At last. Add new category. So in this way you can create the product categories and sub care degrees in SMU Commerce store. So I'm just fast forwarding this video and creating all the remaining product categories that we need into our e commerce website. - All right, now these are the slugs. Slugs means the unique you are off that specific product care degree page in the same every have men hoodies as this slug off men category. So all the categories we have already created into this Web site that we need to use in order to create our e commerce store? No, here we can see ground count means whatever the number off products evil assign under hoodies this zero number will be in peace toe. 1234 It totally depends on the number of products that you will assign intuits specific product category. I hope it was easy for you to create the product categories into the flu. Commerce in store. In case if you have any question, please drop your message. Thank you very much. 15. Learn How to Create the First Product: creating a product invoke commerce website is really very, very easy. So in this video, I'm gonna show you how exactly you can create a beautiful product in e commerce website that will be having a perfect image. Product name, short description. Predict long description price going three box at two Card Burton and almost everything that a symbol productive needs. So let's get it started. This is a WordPress dashboard to create a new product under this product. Stab, click on Add New. Now if your family or with WordPress this is quite similar to the posts and pages creation screen. From there, we can create our new product into the vou commerce a store. So let's create the first product off your website, which is a bikini. So in this box we can put the product name. Let's say it is Marjorie strain in this box. We can write a long description about our product. No matter what is the length off words you enter here? I have a long description, so let me pass it over here. This is just a demo description that I copied from some other website. Now, if you would like to do some for mating. In this content, for example, I can insert a heading. I simply tied that heading in. Now at the top, we can see double toolbar. Just click on it. So an additional tour while comes up from here. We can change the foreign color. So, firstly, let's select the heading. And here you can change the color. Let's say I can select it to blue. And if you would like to make it bold here we have the board. I can just click on it. Let us fall down. These are the Ocean WP team settings, so I will explain you about these settings later on. Then we'll be creating the pages. Now let's scroll down product data tab. So basically, this is a matter box where we can provide the pricing, invent tree and everything about our product. Invoke OMERS. We can create four different type of products. Number one simple product. 2nd 1 is group the product. 3rd 1 is external or affiliate product, and 4th 1 is variable product. So right now we're going to create a simple product that is just going to be an individual product Now next to it, we can see, there are two check boxes, virtual and downloadable. These checked boxes are only used when we are selling our digital product. So, for example, you are selling a course online, so make it as virtual. And if that course is downloadable, wants someone make the payment. So here you can just check the downloadable check box so the course file will be available for the user to download. Let's on jacket because we're going toe. Create the bikini, which is our physical product. Now it's time to set a price for our product. Let's say 9 99 Well, I think for a bikini, 9 99 is too expensive. Let's make it 99. Now there's a war. The price. If you have a discounted price for your product, you can enter that amount in the sale price box, for example, 89. So now this bikini will be sold at £89 in straight off 99. Next is tax status. This means when someone buy this product, he or she needs to pay tax on this bikini or not. I'm just leaving it to non keep the text loss as standard. Now let's jump onto the inventory from here, we can manage the entire inventory off our product. Sk you i d. This will be a unique alphanumeric number which is used to identify this product into your inventory. So this could be any number that you can write in this box. For example, F A s edge 001 So this could be any alphanumeric number, But make sure SK you idea is always unique. Next option is managed a stock. So from here, you can manage the stock off this bikini into your IMM entry. If you have 10 pieces available interior inventory. Just put the number 10 in this stock quantity box. Next option is allow back orders. So whether you would like to allow or disallow back orders, that's completely up to you. I'm leaving it to don't allow. Next is low stock press hold. This means went remaining two pieces off this bikini product available in your stock and rest. Eight are sold out. You will get a notification email from your website to take an appropriate action. Next is sold individually. If you enable this option, then only one unit off this product will be sold out in a single order. That means if one user warns to buy two units off this bikini, he cannot do so. I'm not enabling it. Now let's go to the shipping step here. We can specify. Deviate off this product in kilograms. I have set up kilogram as the very unit in the vu calmer settings. So if you would like to change this kilograms to some other unit, like ounces or powers, you simply go to the settings and then change the unit. So, for example, I'm just entering over here like 0.5. That means 500 grams. If there is a dimension off this product, you can specify in scent emitters in these three boxes. I'm just leaving them as it is, Lindberg notes. I have created a separate lecture on these up cells and grow cells. Attributes These are used then will be creating the variable product into our website. So right now, and just leaving it as it is because I already have a separate lecture for it. Inside the advance step, we can see enable reviews. Right now it is checked. This means you can collect a customer ratings and reviews onto our products something similar to Amazon were after purchasing the products customer leave their ratings and reviews to that specific product. So the same thing. You can also collect for your products if you enable reviews over here at the very bottom, we have product short description. Here we can write a few words about our product, but not too long as we have a very limited area to display this description on our single product page. So I have just copied a demo text from some other website. Let me pay street over here something like this. Now it would be better if we can display this entire text in the form off list. So I'm just arranging it in Leicester style. Okay, I think five lines are enough to display as a short description. Now it's time to set the product image, which is very important because images speaks more than words. Here we have two options to start the product image. The 1st 1 is said product images, with the help of which we concert the main image off the product, and with the portrait gallery images, we can add additional images off the same product. For example, if men. Image of the product shows different view than at other photos off the same product. Inside this gallery area. Let's go ahead and weakens their demand product image. Click on start product image Now This is the media library off our website, where we have already uploaded all the images that we are going to use in this course. Lead to select the blue one, which looks really pretty and that will attract the customer as well. Make sure they use better quality images onto your e commerce website Devil and create the customers to buy the products. Now that is the main product image. Let's go ahead, and we can add some additional images off the same product. So click on the gallery images link. Let us select the back view off the same product and the only bikini photo. So keep the control key pressed and select more than one photos simultaneously so you can see the arrow shows at the top right corner off. Both photos at last, click on at two gallery so these two images appears in this area. You can also rearrange the order off these photos, something like this, but just drag and drop mechanism. So whatever would be the first photo in this gallery area that will be displayed immediately once someone put the mouse onto the main product image. Next is product tags. Here we can provide some keywords related to our product. This will make our perk as your friendly. For example, we can put here blue bikini, so this is related to our product in the same way we can type another term something like this, and then add. You can also hit and protest after writing the text so it will be added. There is no limit. You can add numbers off tags over here, and this is really helpful for ranking your product onto the search engines. That is not enough, but it will make you protect us your friendly now product categories. We have already created departed categories. Let's assign this product into its appropriate product category. So as this is a in a rear, it goes under the under Gammons. And here we have this subcategory as well for men, so make sure to select both off these categories, and that's all we have to do. Now it's time to publish this product so This is the entire process off how you can create a new product into your e commerce website with the help off Who commerce plugging. I hope it was very easy for you to understand the process. Now let's check out different page off this product. So click on this view product link or this is the complete link off this product. Let's click on view product. This looks beautiful. All the information about this product is arranged in their proper places. There's the product name here. It is the actual price off this product as we have provided a discounted price of £89. That's why 99 is crossed and the actual price of this product is now 89. This is the product short description total 10 pieces off this product we have in this stock. This is the quantity box so customers can buy more than one units off this bikini product. He can just increase the quantity and the price will be adjusted automatically. So that's really cool. Feature off this view. Commerce here is the SK you I d that we created the categories under which we have listed this product and do tags When we scroll down. We have a long description about this product. As you can see, the heading is also included in this description. The last step is reviews. So currently there are no reviews because no one have left any type off review on this product. Off course, this is just a fresh border we have created. So once someone by the product, then he will be able to leave the review. Now let's scroll up and I can show you the zoom functionality off this product. When you put your mouse pointer onto the product image, the zoom functionality enables. If you would like to have a full view off this photo, just click on the search Aiken and the full view comes up. Click on the black area to close this full view just below it. We have the gallery images as well. So once you click on any off the image, the main product image India's. This is how you can create any type of product, invoke homers beautifully and sell anything. This is the sidebar, which is placed by default by the Ocean W B team on this product page. After a few lectures will put some useful content on the sidebar, which can help to increase sales rather than these default links. I hope it was easy for you to understand how to create a beautiful product. Invoke OMERS easily in case if you have any questions, please drop me a message Now in the meanwhile, I'm going to create the remaining products for our website because I don't want to waste your time by just showing the same process again and again. Thank you very much. 16. Learn How to Create an Affiliate Product: Vu Commerz makes it possible to create an affiliate products as well. If you don't know what is an affiliate product, then you must need to know about it. These days, Amazon affiliate marketing is helping people to earn six figure income by just promoting Amazon products. I have a complete course on Amazon affiliate marketing. So if you would like to learn how to create an Amazon affiliate website and roll into my course, the link has been provided as a resource in this lecture. Let's start creating an Amazon product now under the products. Click on Add New. Now here I am, creating an existing product off Amazon website something like this one. This is a product on Amazon Web site. There's the product name. Bella Vita Organic. There's the price in Indian rupees and dressed all the details of our this product like it is in a stalk short description at two Card Burton. I'll be creating the exact same product onto our website, but with my affiliate link. So, firstly, I'm saving the product image like this. If you aren't being those computer that you can use the snipping tool now, let's copy the product name from here, we can come back to our website and face to the name in this box in the same way we can get the other details from the Amazon product page and use it on to our website. So let's copy the long description from here. Now come back to our website and paste their description in the long description box like this, it's crawl down from this productive data drop down. You need to select external or affiliate product, so this will make it possible for you to provide a link. Insert off the direct product onto your website. So in this box we can paste with the affiliate link off our Amazon product. Remember, you must be an Amazon associate in order to get the affiliate link Jack Ma Amazon Air Fleet Marketing course for more information which is linked with this lecture as a resource. Now, when you are logged in into your Amazon associate account and you will open Amazon website , then there will be a bar at the top from very can get your affiliate link something like this to just copy or link, and here you need to paste it in this box now let's sport oberyn text, for example, by on Amazon. Or this could be any text that you would like to put in this box. Now let's enter our regular and sale price of this product. It's time to copy the short description off this product, so let's copy the short description, and we can paste it into the very bottom box over here. Let's copy a few more details, so I'm just hoping this return policy as well, and we can based it in the product Short description box. Now it's time to set a product image, so let's click on certain product image. Now. Let's go ahead and we can upload the product image off which I have already taken the snap short onto my desktop. Here it is. So let's uploaded said product image. All right, now it's time to create deported category, so I'm just creating a separate product category for the affiliate products and then click on Add new category Burton. Here we go so we can see a flat prescribing recreated at last click on Publish so their souls we have to do in order to create an affiliate product onto our website now Let's go ahead and we can check the front page off this affiliate product. Here we go. So we can see the exact same product have been created onto Arvo Commerce Website. Let's check out the Amazon product. So here we can see the all details have been provided. Now let's check out our website. So the short description is over here, the foreign policy. And if you can focus over here by on Amazon Burton. So once we click on this button, it redirects the user onto the Amazon product page. Why are your affiliate link so your sale will be countered and you will get some commission like you can see over here. When I clicked on the button, it opened the Amazon website page. So your affiliate link get dragged by the Amazon and they will pay some commission as per the slab off this exact product. So this is how we can create an affiliate product into Arvo Commerce website. In case if you would have any question, please do not hesitate to ask me. I'll be there to help you. Thank you very much. 17. Learn How to Create a variable products: Hey, guys, Once again, I'm back to one off my new tutorial where I'm gonna show you how we can create a variable product. Invoke homers. Creating a valuable product in blue commerce is really very, very easy. And let me show you onto my screen what exactly we're going to learn in this tutorial. So here we have a variable product with the name men casualties. So, of course, these can be any type of size or colors. So here we have the three colors available black, red and yellow, so this color is basically called the attribute, and these are the values off this color, like black, red, yellow. These are the values off this color attribute. In the same way. We have size attributes with the values large, medium and small. If I select black color image doesn't change. But when I select medium. So according to this combination, the image off this Burke changes as well as the price. Also update, which is £75 for the T shirt, which is black color and medium size in the same way. If I select red T shirt and large size vegans, either prizes £95 So this is basically called variable product, and in this tutorial we are going to learn how we can create variable product invoke OMERS . So let's go ahead and we can start learning this variable protect process. We can create the variable product in three easy steps. Number one. We can create the attributes, for example, color size number two. We can assign the values to these attributes. For example, if the air tribute is color, then you can assign the values to this color attribute like black, red, yellow, violet, pink or whatever the colors you would like to link with this color attribute in the same way. If you have the attributes size, then the values would be like small, medium, large excel Double Excel Triple XL. So that's completely up to you. And third point is we can create a product as the variable product. So this is our WordPress dashboard. Now. First thing that you need to do is creating the attributes. So who were on this products and then click on attributes. Make sure you have already installed the vou commerce plugging and you have set up the entire process. Now, here in the first box. We need to provide the our tribute name, for example, color. Leave all these other options as it is, and click on add attribute You can see over here on the right hand side. Color attribute has been added, and it stays. Corn figure terms. Configure Tom's meas. You need to add the values, so click on conficker terms, and here you need to provide the name off those values. For example, black click on add new color so it appears on the right hand side. In the same way, you can add more colors like red. You can alter directly hit Andrew Burton, so we have already added all three values. Toe this color attribute in the same way we need to go back to these attributes menu. And let's create another attribute, which is size. Then add attribute. Please do not get confused. This is the main screen off the attributes. As you can see over here, most of the people think like when they are on the conficker Thomas Page than their start adding the names. So make sure when you are on the attributes page it clear. Leave mentioned over here air new attributes so these are the attributes, so please do not get confused. Between these are tribute names and the terms. Let's go ahead and economic terms or values to this size Attribute All right, so we can add, like, small than medium and then large. You can add as many as sizes to this size attribute, So all three size attribute values have been added. So we have completed initial two points, creating the attributes and assigning the values to those attributes. Let's go ahead and we can create a variable protect now, so click on add New. So this is the page from where we always create a product into the vou Commerz. Let's provide the name like men Castle T shirt and this is the long description area. So I'm just leaving empty now. This product date, our tab is really very important. From this drop down, we need to select variable product because we're going to create a product that several options over here. If you have sk you already for this product, you can provide it over here. Otherwise, leave it empty. So I'm just putting like tea or nine on their several other options. You can go ahead with them. Now our next step is click on this attributes, and here we can see there is a new option custom product at a beauty and click on add and then a custom product attributes will be added, but as we have already created, the attributes from this attribute main tap. So let's click on this drop down, and here those two attributes are already available. Let's a select color at first and then click on add. It will take a couple of seconds, and the color appears over here. Now, in this values box, just click, and those three values will be appearing. Let's like them one by one black. So it appears over here again. Click on this box and then read again. Click and then yellow at last. Click on used for variations. Make sure do not leave this jack books inject. Otherwise, these values will not be used for the variations. And then let's close it again. Click on this drop down, and it's time to select size attributes. Then click on add size appears over here again. Either you can just click them one by one and select all these values or just click on select all So they will be appearing over here. Then click on used for variations and then click on Save Our Tributes button. Wait for a couple of seconds. So this was the fourth step that we had to do on this variable product page. Now next step is adding the variations off this T shirt product, So click on this variation stop, and from this drop down, you need to click on, create variations from all attributes and then click on Go. This pop up comes up so it stays like maximum. 50 variations can be created at one time, so click on OK, wait for a couple of seconds. Vogue homers automatically arrange all the variations. As for the color and size you can see over here, nine variations added. So let's click on OK, and all those nine variations have been arranged in a proper manner, like black with large black with medium black with small in the same red, large red medium blur ready small than yellow. So let's go ahead and one by one we can provide the price and color for these variations. So just next to it, you can see this arrow click on it here. We can specify a particular image for this variations, so let's click on upload an image. I have already uploaded the image in the media lab. Pretty. You can simply go to this, upload files and select the file from your desktop. I'm just selecting it from my media library. So this is the black color certainly edition image. It appears over here, and you can provide the price for this combination like black large. Let's say we can put it there as £99 and then double close than black. Medium off course. The color will be same. So let's select the image and then you can provide the price like 89. Then close it black. A small select a color at last. Provide the price like 86 in the same way, you need to repeat the same process with other colors, red and yellow. So I'm just fast forwarding this video. Okay, so I have already added all the prices and color off the tee shirt toe These variations. It's time to click on save changes. Please do not forget to click on this Save changes button. Otherwise, these variations for Lord Be created, so make sure to click on the safety in this button now on the writer inside. We need to set the main image for this product. So here we can see certain product image. You can set any image as the main image off this product, either yellow or red or black. I'm just starting it as Fred Color and then certain product in age. If you have more images, you can go ahead. Add them as the gallery images. So I'm just selecting all these images by holding the control key actor Kelly there appearing over here and the same process you can repeat like quoting whatever the product category. At last you can publish. So that's all you have to do to create a variable product in this view commerce website. And let's check out this product onto the front page. So I'm just clicking on this view product. Here we go so we can see this product is now converted as the variable product. When a select any specific color like black and size, is like medium, the price updates £89 the color is also black in the same way If I select the yellow color , the yellow T shirt comes up automatically and asked for these selection off this size, the price updates. Let's select small size. You can see £35. Now it's time to make it similar to the one that I have shown you earlier. So this is basically called these swatches or variation swatches. So let's go ahead, and we can convert these. Drop down into these beautiful color swatches and these buttons. This can be accomplished with a free plug in. So I'm just going back to my dashboard. Now go to the plug ins and click on Add New. Now here you need to search for vidi, ation, Sarge's and the first Blufgan is Variation Searches for Food Commerz by Imron Amad If you can see over here 70,000 plus active installations and this plugging has more than 200 positive reviews. So let's to go ahead and begin install and activate this plugging. So this is the welcome screen off this plug in and you can see a new tab has been added as social settings. So let's go to the forced up simple. Now here you can see enable tool tape enable style sheet, make them as it is and here at the very bottom, or toward drop downs to button. Just uncheck it. Otherwise, all the door bones which are appearing on to this website, they will be converted into the burdens by default. So off course, we need to go ahead and use the images swatches for the color attributes, but nor the buttons, so make it unchecked and then click on save changes. Now, if I check the front page or for product, this color attributes needs to be appearing as the color swatches, and this size should be appearing as the burden searches. So let's go back to this dashboard, and here again you need to hold our own products and then Goto attributes. Now let's go toe each off these attributes one by one, and we can convert this color to the color swatches and decides to the button switches. So here you need to click on add it. Under this color, please do not click on this color. Otherwise, you will not be getting the options. So let's click on addict Now, on this page begins, he type so from this drop down we need to select color and then update and then update again. Click on back to attributes. It's time for this size. So click on edit under this size attribute, and from here we can select as button and then update. Let's go back to the main page off these attributes, so click on this attributes menu. Okay, so we have converted this color attributes as the color sort and the size attributes as decides torch. But now, if I refresh different page once again, vegan see the color are appearing just the blank white color. The reason is that we haven't specified black as the black color and red as the red color yellow as the yellow color. So let's go back to the attributes here. Click on configure terms. So in this black value, we can assign the black color. No, these are the values black radio click on. Add it at the very bottom vacancy, extra option color. Choose a color. So from here you can select black color, close it and then oblate the same process you need to repeat for the other two colors. Click on back to color attributes, so that's all we have to do now leads to the fresh, different page. Once again. Here we go. So now we can see the color drop down has been converted to the beautiful color searches if I select the yellow color and the medium product image changes. But we haven't done anything with the size attribute and how it is appearing over here like that. The reason is size attribute has the text buttons, and that's where the button has already applied. It was not a color or image sorts, so that's easy. You can create a variable product into the vou commers, and you can also apply these type of styling without dealing a single line of code. I hope the tutorial was easy in case if you would have any questions, please do not hesitate to leave into your comment, and I request you. If this tutorial was helpful, we subscribed like and share my video. Thank you very much. 18. Understanding Up sells and cross sells: There is an interesting thing in blue commers that you can increase your sales with some awesome and build features here. We're talking about up cells and cross cells in order to give you a live demonstration off . What exactly these two terms means We need to have at least six products created. But here I have created almost 20 different type of products, including shoes, cloths, accessories at sectoral. Okay, so let's talk about up sells. For now, this is a feature that displays and relieving products along with a mean product on single product page. This helps to sell more than one product at once as it is human nature. When he finds something better with good price here, treks towards that product or buys all products, this really helps in selling more products in single order. On the other hand, cross cells does the same job. But whatever the products we specify, using gross sells, those products are displayed on the card page rather than onto the single product page. So to increase sales, it is a better idea to use both up cells and cross cells simultaneously. I have a product over here with just golden export shoes. Let's open the front page off this product. This page is called a single product page, their golden sports shoes displayed. If you can see at the bottom, there are 13 related products are showing related products are displayed on the basis off product category. It means the main product, Golden sports shoes and the boredom products are belonging to same product category that is shoes. Hence, along with the golden export products. Those other parts are also showing. Now it might be a case when they want to display our own choice products at the bottom area rather than these default related products. In such cases, we can use up cells. I would like to display these red shoes, blue shoes and gray shoes on the Golden Sports page at the very bottom in this area rather than these default related products. In order to do that, go back to the products. Firstly, we need to edit the Golden Sports product salutes. Click on edit. No, it's going down here. We can see the tab link to products. Just click on it Now. There are two sections given up cells and cross cells, so in the up cells area. You need to type the 1st 3 letters off the product that you would like to display at the bottom area. For example, red. It will search all the products, which are later with this red word. So here is a list available. Let's check out the red shoes. Here it is the red sports. Let's dyed green. Here comes screen and weaken type blue here is blue, so in this way you can select multiple up sells products in this box. It's timeto update this product, and now let's check out this product onto the front page. Let the school down. Here we go so we can see all the tea products off. Our choice are displaying over here and now the title has also changed. Earlier, it was related Berks. Now it stays. You may also like so in this way you can set up the up sells product on the single product page. Along with that, at the bottom, you can see related works are also showing, so this helps you to increase sales in your e commerce the store, because you will be displaying some more profitable products off your choice, along with the related products on this single product page. Let's talk about cross cells just like up cells. Cross cells also used to put some more profitable and related products in front of the customer, but on the shopping cart page, so it appeared the same process again. But this time you need to type in the product's name inside cross cells box. So on the guard page, I would like would display this purple shoes and this green sport shoes. The same thing we need to do added the goal in the sports shoes. Now let's jump to the link products inside this cross cells, we need to type red, and the very last one is red white, and then we can tie purple so the purple shoes comes up. Here we go. So I would like to display these two products onto the shopping cart page along with this golden sports product. So let's click on update. Now, whenever someone will be adding this product to the card page, those two products will also be displayed. Let's check our different page on. I will be going ahead toe er this product to the card, so this is the main product Let's click on Acto guard now here we can see view card, just click on it. So this is the card page and we have recently added this golden exports to the card. Along with that, you can see you might be interest rating. These two shoes are also displayed on this page, so there would be more chances than someone will. But trying to buy this golden a sport, he'll be seeing these two products also, and maybe you can get a chance to sell two additional products as well. But this is not guaranteed off course. You must try to increase your sales, and these are some basic techniques to display more productive in front off the customer. I hope the lecture was easy for you to understand. In case if you would have any questions, please do not hesitate to ask me, Thank you very much. 19. Order Management in WooCommerce: in this lecture, I'm gonna show you how you can manage the orders. Reforms invoke Homers Website Goto who commers and then orders on this page. You can see the list off all the orders which have been placed on your e commerce website till date. The order number with customer name, Date of the order Order s traitors and order value is also mentioned. I mean the price. Let's check the order number 6 35 Click on this little I and it will display you few as initial details about this order. But these are the 1,000,000,000 deals off the customer, the email address, phone number and the payment mattered that he selected of any check out onto your website. This order is on hold. As you can see, the very top it means customer, please to the order. But his jack haven't been received. The website owner. Once the online store owner gets the cheque payment cleared, he can put the order into processing. That means backing of the products sending to the career facility, etcetera. So here we can see the new products. Traitors is processing. Earlier, it was on hold to check the complete details about this order. Click on this little I once again and now click on the edit button at the very bottom right corner. Here it is. Let's click on it. This is an individual page about the order number 6 35 On this page, we can see all the details about this order like the customer I p address customer billing and shipping details, his email address and phone number, the date on which he placed the order and everything. There are a few other options on the right side bar like this order actions through which we can send the invoice to the customer, even address, which he used during the check out at the bottom. We can see the ad notebooks from here. You can send a message or notification to your customer, selected the North to customer option and hit a red button. Your customer will be notified through an email. The message is added under order in orbs. Now here is an option off difference. You can also differ in the amount if your customer asked, but here the order is under processing. Hence, the referred amount box is inactive. So this is how you can manage the orders and reforms into your book Homers website. Thank you very much 20. Picking up the eCommerce Compatible Theme: Let's make your e commerce store design impressive. There's a bunch of teams available which can change the entire look and feel off your e commerce Store Teams plays an important role when you are developing off that site, nor just for designing purpose. But it is also very important that the team you are installing on your website is probably integrating with the vou commerce plugging or not. So before installing a plug in, make sure it is vou Commerz compatible here. We're going to use the best free Voke Homers compatible team, which is Ocean WP on this team. You can design and develop almost any dive off the stunning and amazing website. This team works perfectly with newcomers and products are probably adapted by the team modules. This is the Oficial website off Ocean W B team, and few big dogs in the market are saying something positive about this team. Let's check out few reasons why I have included Ocean WP team in this course. It is mobile friendly team. It is fast in loading it especially designed for who Commerce website. It is a zero friendly. There are many reasons why I love this team like it has in built quick view feature, So I do not need to install a separate plugging for that. So, firstly, let's go ahead and we can check our website how it looks like right now before installing the ocean w B team. It is really not beautiful at all. We can see the content are organized topsy and turvy, so let's go ahead and we can make our website looking impressive who were on appearance and click on teams. There are four teams installed and a storefront team is currently active. For your information, we can install more than one teams in a WordPress website, but only single team can be active at a time to add a new team. Click on this Add new button in the search box type ocean WB. Here is the team just installed and activated. This team Ocean WP team is currently active, and let's check our front page whether any changes have been done or not. Let's refresh the page. Here we go so we can see the website. Design has been changed now, but it's still it doesn't looks pretty at all. Not a problem in the upcoming lecturers will be using elemental page builder to design the home page and other pages off this website. Ocean WP recommends to install few plug ins in order to make it work properly. Plugging is a package of some courts, which performs a specific task. Like this elementary plugging, it is used to design their pages. Double B form Blogging is used to create contact forms with dragon drop mechanism. So let's install and activate these recommended plug ins. Select all them at once, install and then apply. All four plug ins are installed and activated. Let's click on Return to Dashboard. This is the rank math plugging page. Click on a skip now had the dog click on No thanks. So we have installed all the recommended plug ins into our website like this elementary plug in the rank math plugging, but it is really not needed and it lost. WB forms plugging. So this is how we can install a team into our WordPress dashboard and in the upcoming lectures will be making our website more beautiful. 21. Basic Theme options: Ocean WP team comes with a list off team options. Likewise, book homers plug in. We can also do some default settings for our Ocean WP team. Like setting upper default foreign style foreign size color button style card, Aiken at Spectra. Go to the team customization settings. Either click on this, customize your side Burton or most Hoover on appearance and then click on Customized. This is the team customization panel. From here, we can do all the default settings for our website. Left panel has the options and right panel shows the life preview off the settings that drivel do. Let's go to the site identically. Here we can provide the site title and tagline. Let me explain you by opening the front page off our website, you can see at the very top. It is written my WORDPRESS website. So that is the site title and just another WordPress website is the tagline Sellards chain decide title and tagline. You can put the site title as fashion Villa and Baghlan would be something like your one stop fashion shop or fashion store. Something like this. Now let's publish so that we can see the changes have been done on to the live website or not. So let's refresh different page. Here we go so we can see the website title and the tagline has been changed. This later likened Is Gold Fair Aiken. So we'll be doing this later on in the upcoming lectures. Let's go back to because to Mice Page and we can play with some other options. Our next option is general options. Here we have sub menus as well. Let's go to this styling section. First General is styling. From here we can manage the primary color off our website. Currently, the primary color is the sky blue. Let's change it to read and Wendy highlight the logo or any other menu off our website. The color changes. It means, whatever the primary color we can select over here, the entire links off this website will be changed to that color. But it doesn't mean that you cannot put a custom color for the menu Lings. Let put it to default. From here, we can manage the background color off our website. Let's say black off course. Black is not the ideal color for having it as a background color, so keep it default toe white at the very bottom weakens in link colors. So from here you can manage the link color off your website. Currently, they are black and on over there blue. So let's change the Hoover color to something like green. And now when we go over the menu, you can see they convert into green color if we change the link a little red, so by default that link color is red. But when we who were they convert toe green? So this is how we can manage the colors off our links and the menus. Let's put the default colors back. Go back to the other options now general settings. Here you can choose the layout style off your website, whether it could be void, boxed or separate. Vied Mies and our website content will be a sticker tow. The browser border box means there will be some space on the left and right side off the pages, and there is no need to use separate, so let a stick to divide. And at the bottom we have decide bar areas like how your page should look like whether it should be having a sidebar or not. sidebar is something like this area, so it is common on all the pages by default. Make it as full of it page so we can put our own desired content on each off the pages without having their default sidebar. Let's go back. Next option is page title. Here we have page title page title is the name off the page, so either you can enable or disable it. Let's go back, scroll to top. From here, you can control the visibility off this little arrow, which is at the bottom right corner. When we click on this link, it directly is call you up at the very top section off your webpage. Let's go back. Next option is Team Burton. From here we can manage the button color button radius padding and almost everything that a button needs onto our website. Let's go back again back. Our next option is typography. This is the area. From there, we can change the foreign style formed family, foreign color and almost everything that a text needs onto our website. For example, this heading one here we can change the foreign family to mourn, said it so wherever the H one tag has been used on to the website. It will be applied on that text like you can see the page title changed. If fighting it to monster, it alternates again. The foreign, the style changes. So let's put it back to the morn, said it. It is the best formed I use onto the Web sites in the same way you can change the foreign family off. Other hatch one tax, like heading to or heading three now body typography. This is very important. These are the small forms that we use on all the pages off our website. So whatever the foreign family you will select over here, it will be applied on all the text which you have written into your website without the heading tags, Let's publish and go back. Next option is top bar toe, but is the very top area off your website. So this is the Tobar. As you can see onto the right panel. First option is gentle. From here, we can enable or disable the top bar. Let's disable it. We can see the robot has bean disappeared. Let's put it back. Next option is visibility. So from here we can control the visibility off the top bar. If you would like to hide the store bar on tablet and mobile, you can select the option from here. Or you can also make it disappear from both off those devices by just selecting the third option. Next option is a style. From here, we can control the alignment off the content. In the Tobar, for example, I'm selecting centered content and social, so the entire contained will be aligned into the center in this top bar like this. Now let's select left social and write content so we can display these social wagons on the left hand side and content on the right hand side in this top bar. From here, you can change the background color off this Tober. Let me show your demonstration something like this. So you can see the preview on the right banner at last published to save the changes. Let's go back. Next option is content. So from here we can put the content into this box and whatever the content will right in this box, it will appear at the very top right hand corner. You can see in the life preview panel. So in this box. Either you can put a contact details or an offer message. Next is social. From here, we can put the social media pages link and the icons will be displayed on the top header left hand corner. So let me put all my social media pages link in these boxes we can see in the top header left corner. All these three icons have been placed leads published to save the changes. Let's stroll up. And from this foreign size you can increase or decrease the social media Aiken size. From here, we can change the color off these Aiken's also we can change the mouse hole where color something like black and let me show you. Here we go. So on her where it changes to black, let's publish. Next option is head of So let's go to the General tab. Now here. If we can change the header color, let me show your demonstration so you can see in the right panel. The color off header is changing, so let's put it to something like F seven or F three. That looks amazing. I'm just leaving it toe white. Okay, lets go back next is logo. So from here we can upload a beautiful low. Go to our website. I have already uploaded a lower into the media library. So let me find out where it is. Here we go. It is there. Let's select and skip groping so the entire logo will be displayed. Now I can see in the right panel in place off the fashion villa. The logo will be appearing something like this. This looks beautiful. Let's publish and we can refresh Our friend paid to see whether this low is displaying on to the main page or not. So let's refresh. Here we go so we can see the logo is appearing. The top bar has been changed and we have placed the social media Aikens, let's go back to the customization panel. Next is Vou Commerz. The first option is store notice. From here, you can put any noticed that you over like would display onto your website when your website is not fulfilling the orders and it isn't a staging estate. This could be any message like coming soon, opening the store soon or whatever you would like to display at the very bottom off your website as a notification bar. So these are some default settings that you can do as body of requirements, and whatever the changes you will do in the customization area, it will be reflected onto the entire website. On the other hand, Ocean WP team do provide a facility that you can have settings on each page and I will guide you later on how you can do that, Thank you very much. 22. Learn How to Create Pages: pages plays an important role in view commerce website. On the pages were display our products on the contact page. We put our contact details, so whenever someone would be having any issue taken directly right toe us, we can create terms and conditions. Page right all the terms and conditions off our e commerce store On the privacy policy page , we can write the entire privacy policy like war details you will be keeping from the customer, his name, email address and you're not sharing those details with any third party company. This is the pages section. From there, we can create the new pages and we can get the list off all the pages which are already created onto our website. But we haven't created these five pages which are showing over here. The reason is that when we install the WordPress by the fold, WordPress creates this privacy policy page and after the installation off newcomers that Blufgan also creates four standard e commerce pages like this card, check out my account and shop age shop displays all the prints off our website. My account page is the page their customer can get all his account information or he can log in and register into your website. Check out Paid is the final page off your website. Fear Customer needs to fill up his billing and shipping details, and he can make the payment. Carpet is the one we're customer can add all his products one by one, into the shopping cart. Now let's create the remaining important pages off our website like home page, about page, contact, page and terms and conditions. So you need to click on this. Add New Burton over here. From this interface, we can create the pages. So in this title box, type the page name like home and here we can see at the top, publish hurts. Click on it. So this page is live on to our website. There are many other team options like this ocean WB settings or on the right hand side via ascertain options. So I will explain you all these things later on. Let's create some blank pages first onto our website again. You need to go back to this, add new and we can add another page, which is about okay, not type about and then publish. We'll put the content on these pages in the upcoming lectures, then again at new here. Recon type contact, then publish. Let's create the last terms and Conditions page and we can publish so all the four pages have been created. Let me show you how exactly this page looks when we open on two different end. Here we go. So this is a complete blank page after this header. This is the page title bar that is the page title and this is the breadcrumb bad. Come shows the part off this page as terms and conditions exist inside the home directory off this website. That's why the home icon, then a little arrow and then terms and conditions page name. This vital space is the body area. There, we can type all the content we can put all the images and everything can be placed in this white area. Currently, we haven't placed any content onto the stones and Conditions page. That's why it is blank and this black area is called footer. The very bottom area is called Copyright Bar, where you can put any type of copyright like Copyright 2019. You can also put your own signatures over here like website designed by Saddam Qasim. Or you can put your name So they're Solvay had to do in this lecture. Now, in the upcoming lecture, we're going to create the menus for our website and those menus will be displayed in this area. Thank you very much. 23. Learn How to Create Menus: Let's go ahead and we can create the menus for our website. Menus are used to navigate between the pages. Currently, we do not have any menu onto our website Perovic. We can just click and open as Pacific page. So in order to create the menu, let's to go back to the dashboard. Now under this appearance, go to this menus. All right, so from here we can create the menus. The first task that we need to do is provide a menu name, for example Main menu. This could be any name. It is just for your reference. And now we can click on create menu button so the main menu is created as we can see over here Now it's timeto heard some pages and some other links inside this main menu. So there they can be displayed into the header area. On the left hand side, we can see certain taps available like this pages inside which all the pages are showing, which we have created or automatically created by the word present Boo Commerz. Inside this pages area Inside this post, all the posts will be displayed. These are basically the block post Albert discussing it later on, but recently we haven't created any post. That's why they are no items custom links. With the help off this stab, we can create any custom link into our menu area. For example, if you would like to put ah Google link into your menu, you can simply type like Google. And here you can put the Ural off that page like www dot google dot com. Once you click on add to menu, it will be added over here in this area like this. So inside your menu area, the Google link will be displayed. When someone click on that link, the Google page comes up categories. So these are the block Postcard agrees. We do not need to do anything with them. Menu Aiken settings. Leave it as it is. I'll explain you later on and Blue Commerz endpoints Just leave this section also. No, let's go ahead and we can add some pages inside this menu. So firstly, alerts were delayed this Google, in order to related simply, click on this arrow it will open and then click on remove. Go to the pages and here you need to be onto the view all so all the pages will be displayed. Let's select home about going back to shop, so these are the four pages I would like to add as the main menu. So let's click on Add to menu button and we can see all the four pages are added in this area. Remember one thing. You must be facing the same problem at your end as well that the whole menu shows custom link, but about contact and shop Age is showing as a page. The reason is that whenever we install WordPress by default, a custom link named as home appears. So we need to remove this custom link, and we have to add the home page over here. So here we have rulings for home that is the 1st 1 and that is the 2nd 1 Let's add the 2nd 1 and then add menu. Here we go. So now it is also added as a page. When you scroll down, there is a menu settings area under which we can see display location, so there are four redefined areas for menu by the ocean W B team top bar. If you select Tobar, all these four men use will be displayed at the very top bar off your website if you select men. So this area is reserved for the header menu and off course. We have to display all these menus inside this header. So keep it mean if you select footer, these menus will be displayed in the footer area and for mobile, it is optional. Now let's save many. Now let's open the website and we can see if these menus have been created or not. Here we go so we can see the menus have been created about contact shop and home. This is the card Aiken and that is the search box. So these two items have been added by the Ocean WP team when they install the vou commerce plugging onto our website and we are using the ocean W B team. This card I can automatically comes up so they never will be adding the products into the card. By just taking on the air to card Burton, this number will be increased to 123 or whatever the number of products we have added to our card. So this is really a very cool feature in this ocean. W B team. Now let's arrange the order off these menus. I would like to keep the home as the first menu, then shop, then about and then contact. The process is very simple. Go back to the menus area now. Here you need to just drag and drop the element like this home, and we can just put it at the very top. So home will be appearing as the very first menu in the same way. We can just drag and drop shop after the home menu like this about is already at the third position and then contact. Now let's save menu and we can refresh different page. Here we go so we can see the home is the first menu than shop, then about and contact. Now let's add some product categories under this shop menu, so they will be appearing as this sub menu off this shop. Go back to the menus now, here we cannot see the product category tab. As you can see, all six steps are here, but partick category is missing. You just need to scroll up to this page and here we can see the screen options at the top. Just click on it now. These are some options that we can enable or disable, and they will be appearing or disappearing from this area. For example, if you would like to hide that categories, just uncheck it. Remember, this is not the product category, but this is the block post categories and hear that category tab has been disappeared. So now let's add the product categories. Here it is. Just jacket. Close it and we can see the portrait categories are appearing. Now let's open it and we can click on this view all so all the product categories can be displayed. All right. Now let's select each off them. One by one, this one categorizes the default category created by Vu Commerz. So we just need to inject it. And now let's add to menu. So the all are appearing over here with their tag category. I have to add all these product category inside the shop menu, so you just need to dragon drop and now shifted a little bit. All right, like this. It means now this is the sub item off shop menu in the same way you can add other car degrees like this Bangles So it is this sub item off shop menu. Then Glaad's and off course clothes have their own sub Burnett categories. So we need to drag this men and shifted to right under this cloth. So now, men, is this sub item off this clothes in the same bed. This woman just put it below the men care degree, then cosmetics. We can put it as the main sub item off the shop menu. So heavy go under the shop. These all are the edge isn't or we can say in line. Cosmetic is also the men's off item off this shop now shoes and hoodies. No off course. The who these are for men and for women. Let's put the T shirt inside the cloths. So I'm just going it over here. And we can put it like this than undergarments. That could be the main sub item off the shop. So we have been lined it to the main sub menus and then men as the sub menu, often development and then women like this. So this is the entire structure. Whenever you would like to make a sub menu off a parent menu, then you need to shift it to the right area and that will be assigned at this sub item. It's time to say of menu and we can refresh different page again. Here we go. So we can see now Shop has a little arrow. Once I mouse over on it, you can see all the sub menus have been created in the same order that we have created them . Also inside this clothes again, we have three sub categories like T shirt men, women than cosmetics are the means of item of shop. Then again, who? These have men and women and undergarments also for men and women. So this is how easy we can create the menus into our view commerce website. I hope it was easy for you to understand. In case if you have any questions, please drop me a message. Thank you very much. 24. Learn how to Create Content on Homepage: now let's go ahead and we can put some content onto the home page. As we can see over here, This is the home page with complete blankly. Out here. We can see the page title, the bread firm, and this entire area is called Page Title Bar, so lets go ahead. First, Levy can remove this page title bar. And then after on that I turned side, I will put a lady image. She looks so beautiful. And on the left hand side I'll put some text and buttons. So let's go back onto the WordPress dashboard here, looking click on pages so all the pages list comes up. All right. Now let's go ahead and we can addict the home page. So let's click on Add it. Now, as we have already installed, the elemental page builder plugging so will create the content with the help off this edit with elemental page builder. But before going ahead, let's disabled this page title bar, and we can hide this page title and breadcrumb so the settings are given over here. If you can see this is the title, just click on it, and from here you can make it disable in the same way we have the bread crumbs. Just go ahead and disable. That's all we have to do. Now let's update, and we can refresh our home page once again. Here we go, so that page title bar has completely removed. Now it's the body area with, ah blankly out. So let's go ahead, and we can start putting the content over here to create the content. Click on this edit with Elementary Burton so the elemental page builder area comes up. Wait for a couple of seconds. Elemental page builder is loaded. This is the entire idea from where we can create the content for our home page in the left side bar, we have many useful elements like this. Heading Widget, which is used to add headings to your of a page text editor, is for writing text. This inmate vision is used to insert photos in to our webpage. Video is used for inserting YouTube or venue videos. This button element is used to insert buttons. Spacer is used to add some space in between the elements. Google map for inserting Google maps into the webpage image. Coro sel toe display, sliding images, testimonials for showing your customer feedback to your store. And there are many useful Villagers that we can include in to our webpage in order to make it more impressive and attractive. So let's start. Firstly, we need to define the layout off our webpage. So let's click on this red plus Aiken. We have columns. Columns are containers in which we can put the text buttons, videos in majors and everything. There are 12 different type of columns available. Each column is divided into several parts. The first column is not divided. It's a single column second column is divided into two parts. So in the first part we can put some text, and in the next part we can use an image in the same way. Third column is divided into three different parts. In the one part, we can have text in the 2nd 1 we can put button, and in the 3rd 1 we can use an image in the same way. There are other columns available, which are divided into several parts. Few columns have the layout like this one. As per our equipment, we need to have a column divided into two parts. So in the first part, we can put some text, and in the right part we can insert an image. Let's go back. So now we need to select the second column. Just click on it. It displays a lay out something like this. So this column is divided into two parts. Now let's sport the content into the first part. So click on this plus, Aiken, or you can click on this great Aiken over here. So all the video is available. Now, let's go ahead and we can put a heading in the first part. So just a dragon Drop the heading Bridget from left to right once returns to blue. Just drop it. So it appears over here something like this. To add your own heading, you can simply click on this text. Use the back space key from your keyboard. So all the default textile, but deleted and just type your own heading over here something like this. Best quality products to do any customization toe this best quality products heading. You just need to select it. I mean, just click on it. And on the left hand side vacancy, this panel comes up. The first step is content. So from here you can just type whatever the content over here it will displayed on the right hand side. You can also edit the content by just clicking in this area, and then you can type anything second thing at the very bottom. We can see the size option so you can change the size off this text. For example, let's set it too small, so it changes too small. From here we can apply the HTML tag, whether it should be hitched to his three hatch four or whatever. You would like to apply on this, heading at the very bottom vacancy alignment if we select the center, align this heading, get aligned to center into its container in the same way. If this select right it goes right, so let's put it back to left. Under this style tab, we can control the text color typography. I mean different the style text shadow. If you would like to apply any shadow this heading, you can just control it from here. But I'm not touching it right now and blend more. Just leave it as it is. The advance section is used for applying some kind off CSS files, you can add the margin padding off whatever you want. I'm just leaving it as it is. I think by the fall, the shadow has been applied. Let's go back to a style and here we can just make it back to default. So Shadow has been removed. Let's update so these changes have been saved. Now let's go ahead and weakened a fresh, different page. Here we go so we can see best quality products is appearing over here, so this elemental page builder works in the same way. Whatever the element, you will put in this back in the area. And then after you can update it, all those elements will be displayed on two different page. Now let's go ahead, and we can put a beautiful girl image in this right area, so we need to go back and here, click on plus. So either you can click on this plus or you can go ahead with this great Aiken and then brag and drop. Now let's go ahead and weaken Dragon. Drop the image, Bridget, because we need to import the image. So let's drop it. All right now, let's go ahead on the left hand side, we can see choose image. So click on this Jews in age. It will open the media library. From here, we can select the image. So let me find out the best one. Here it is. Let's select this image and then insert media heavy Go. Also, we can see the image size for lead to select the image size from here Full. Okay, so this is the original image size off this girl. Now let's align Ito Center so it will align center into its container. I think that's all we have to do with this image. Now let's go ahead and we can add one more heading just below this best quality products. So the Albany to do is click on this grid. Then again, Dragon, drop the heading vineyard from left and make sure once it turns to blue, then just drop it. So heading comes over here. Now it's timeto addict, this heading, So let's delete and we can die appear something like we print, Then change the line. What you want? Something like that. You can type anything over here. Now let's go ahead and we can increase this foreign size so firstly, on the left hand panel, we can see the setting options are enabled from this HTML tag. Select Hedge one. So it increased a little bit now, from this size drop down, we can make it extra large, so it converts toe the maximum forms. Now, as we can see, this warrant is shift rated third line. But I would like to keep it on to the second line just after this you So the Albany to do is increase the left column size. So here you can put the mouse and you can see the mouse pointer changes. To this. I can just hold and shift it to right. The left column size will be increased and right will be decreasing like this. So in this way you can also resize the columns as part of your need. So let's update this page, and we can the flesh different page once again. So that's the refresh. Here we go. So all the three elements are properly placed onto the front page like this small heading this big heading and this image. Let's go ahead and we can add some text just below this large heading, and we can also put a button over here, so we need to go back to the elementary and here. We need to add some text. So let's click on this grid. And here we have the text editor. This text editor is used to write the long text. So it appears something like this. Now, on the left hand side, I'm just basting some demo next, like this again. If you would like to change the color off this text, you can simply go to this styling. And here we can see text color, select this panel and you can change the color. Something dark like this. Who? There. It looks OK. Now, let's add a button just below this text again. Click on this great Aiken. And here we have the button. Bridget, just a dragon drop, okay? And leave it so the button appears over here. Now, let's go ahead and we can change the button color, the Burton text. And also we can set a link. So whenever someone clicks on that Burton, the next link opens. So firstly, click on this button on the left hand side. We can see all the options came up here. You can see type. So this is just our default button. I suggest you to keep it as default text. From here, you can change the entire text off this button. I'm just deleting it, and we can put here like get started now. Third thing link. So let's set a link to this button. So whenever someone click on this button, that page comes up. I would like to open the shop age when someone clicks on this get started button. So in order to get the link off the shop page, let's go back to the pages area off our website and here begins the shop. Click on this view so the shop page front end comes up. Now here is the link. Let's click on it and then we can copy. So this is the link off the shop page. Let's come back to the elemental area, and in this link box we can simply paste the shop page link like this. All right now, from here, you can control this size off this button, and also you can control the alignment. If I select center, align center into its container, keep it as left from the size you can increase the size like extra large or large of whatever you want. I would like to keep it as a medium alert started as a small. I think that looks more better. If you would like to use an icon, you can simply click on this plus and select an icon from here. Let's say we can search for at a so these other types off arrows I can available. We can select anyone off them. Ah, it's too like this one that looks pretty and then insert So the Aiken is also inserted here . You can specify the position of this. I can either left or right, so before it means before the text we can put after it goes on the right. So this is really a very good feature off elementary plugging. You can control each and every part off your website. I can a spacing. You can also control the spacing off this icon with this text like this to keep it at the D for the state, or we can add some space. Okay, let's scroll up. And we can change the burden color. Click on this a style tab. So from here we can change the color text color. Keep it as white on just sitting in the white and then background color. We can make it as orange, so here orange color is not available. The thing is that this bar is at the very bottom. Put it at the very top and you can see all colors comes up so we can just use this color picker and the color has been changed. Let's close this color palette. OK, so these are the settings for the normal state off the button. Now when someone put the mouse on this burden, then what should be happened So that can be done under this homework tap. Let's click on it. Then again. Here begins you text color so you can make it as white. And I would like to keep the button to be turned in black color when someone who over so background color could be black. Let's update, and we can do fresh our front page once again. So whenever you make any change in the back and panel, please refresh d paid so that he can come to know whether all the changes are getting updated on to the website or not. So here we go. The button has been placed. Let's mouse over. So it changes to black ID Illustrated orange and then black. Let's click on this button and we can see shop pages coming up or not. Here we go. It's a short page comes up. Let's go back. OK, so that's all looks pretty good. Let's go ahead. And we can add a small line just above this best quality product, so that will look much appealing. So in the L. A mentor, we can put a line element just above this best quality products. So let's click on this grid here we can see divider element. Let's drag and drop This divider element makes it possible to put a line just above this best quality products. Okay, so now this line is 100% with let's decrease David upto here. So here begins in the left hand side with it is 100%. We can just use the slider and you can see in the right panel this size off. This line is decreasing. I think that size is much better. OK, now it's time to change the color off this line. Toe this button color. I'm in the orange color, so let's go ahead and we can get the color court off this orange color. Click on this burden So the buttons I thinks comes up here is the background color. Let's click on this pallet and this is the cord. Just copy this court from here. Now click on this line element so its settings comes up in the style. Here we can see color. Let's change it to orange. If we can paste that color cord at last click so you can see the color has been changed. From here. You can increase the weight off this line. Let's say we can use this in cream. Enter. So here we go. Wait until this Jane, this comes up like this. So this is how we can increase. Deviate off this line as well. It's time to update and weaken the fresh different page once again. Here you go. So now this looks much better if you can notice one thing. This image is awful height, but on the left hand side, we can see there is a blank White is based, which really doesn't look good at all. Also, the left hand side content is a stick at the top, so it would be better if we can shift this. And I left content to the middle off this container. I mean, we can adjust this white space 50 person at the elbow and 50% at the below, so this anti contend, will be displayed in the middle area, and that will be properly in line with this image as well. So let's go back and we can shift this entire content to the middle offers container. So here this is the first column. I mean the first container area off this entire column. Here we can see this little gray box. The same box appears with this second column as well. So let's click on this great Burton. I mean the right click and you can see added column. Just click on it. Now, on the left hand side vacancy, 13 settings have been given. There is a second option vertical align. It is default over here, So from here you need to select middle, and you can see the entire content is now aligned to middle. That's all we have to do now. Let's update, and we can refresh different paid, so I can show you how better this content looks like. Leads to the fresh. Here we go. So now we can see this Left hand side content is probably in line with this image that looks really pretty at all. So that's all we have to do in this lecture. I have Divided Homepage content Creation lecture in two parts because this lecture is going to be too large. So we'll continue creating the content for home page in the next lecture. Thank you very much. 25. Learn how to Create Content on Homepage(Part 2): So far, we have created this beautiful section on to our home page. Now I would like to put these three sections just below the top section. So all these three sections are linked with the different product categories. The 1st 1 is linked with the ladies cloths. I'm in the moment clothes category. 2nd 1 boy image is linked with the shoes page. I'm in the show's product category page, and the 3rd 1 would be linked with the cosmetics product category. So let's go ahead. And we can put these three sections just below this lady and this button over here in this next room, simply go back to your WordPress dashboard under the pages. We need to add it the home page once again. So here is the home page. Either you can directly click on this edit with elevator or even click on this edit. So let's click on added with elemental, so it will directly open the elemental er page builder area. All right, let's school down Now Here. We need to click on this plus, and this time we need to take a column which is divided into three sections. So this is that column. Just click on it. So the column has been added. Now, in this first area, we can put the image than some text. Then again, we can put some text and then image and the same thing we have to do in this 3rd 1 So let's click on this. Plus, here, we need to Dragon drop the image budget because First Livia going to put an image in this box now from this area, click on Choose Image. We have already uploaded all the images into the media library, so let to select that image from here. In case if you cannot find any major over here, simply go to the upload files. And when you click on the select file, it will open your computer. So either you convey directly upload a new image from upload files or choose an existing image from this media library. So let to select this one. And now we need to click on insert media. So this image comes up over here. He made size large, so this is the specified image size by this elemental plugging. It would be a better idea to keep it as full, so whatever would be the actual size off this image, this image will look exactly the same. We can also make it as alignment center. Now, let's go ahead and we can put some text just below this image. So from the left hand side, we can click on this great Aiken and Dragon drop the heading. Okay, now let's go ahead. And we can edit this heading something like most lovely designs. And now let's go ahead and we can align it to center. So once we click on center it, get a line to the center. Now let's reduce this foreign size. So from this hedge team attack, we can select it as hedge for So I think this is a little bit of small, but let's make it more small. So h five Okay, this is better. Now again, I'm going to put a different heading over here just to below this most lovely designs. So we can click on this great I can again, and then dragon drop the heading just below this and in this box like import, some text that will make it clear for the customer to know, like when he will click on this link on vote page he will be redirected to. So let's say we can type here, shop your plots, just make it as center. And also we can play with some foreign styling to. So here we can make it as Hatch one. Let's see how much bigger it is. Okay, I think that looks fine. So this is what we need to do in this section. Now, let's go ahead. And we can link this image as the less this text with the clots product category page. So how we can do that? Firstly, let's link this image. So once you click on this image on the left inside, the option panel comes up here begins E link. Right now it is not just make it as custom u r l Now in this box, you need to paste the you are off the cloths product category page. So how you can get that link? It is very simple. Go back to your website, dashboard. Inside this product, we have categories. Just click on it. Now we have a lot of categories created in previous lectures over here, So right now we can see cloths have men T shirt and women at the sub categories. I would like to link this woman product category with this image and this text. So let's go back. We need to get the link off this product category. It is very, very simple. You can simply click on this view. Just click on it. So the front page off this woman category comes up at the very top. We can see the link. So this is the link. Just copy. Come to your elemental area, and in this box we can paste it on the same link we need to paste with this heading to alerts. Click on this heading So eight settings comes up here again. We can see Link box, just paste the Ural and then update. So that's all we had to do. A. Now let's go ahead and we can refresh the home page. So here is the home menu. Let's click on it. OK, now let's scroll down. Here we go. So we have successfully placed the girl image as well as the heading text just below it. Let's go ahead and we can click on this girl image to check whether it is opening development clots page or not so I think some page is loading up now. Here we go. So the moments cloth page is no successfully loaded. Let's to go back. And this time we need to click on the heading text because we have also linked this text with the same page. Let's click on it again. It opened the moments page. I mean, the link that we have just attached with these two elements are working properly Now. Our next job is just to place a different image in this box and in this area, and the same text or we can say are different next weekend. Just put over these two remaining sections, but those text and images will be linked to a different product category. So let's do that very quickly. Now. This time I'm giving you a very quick way to do that. Already we have created this section perfectly. No, it would be a better idea if we can just duplicate this image and then dragon drop in this area. Let me show you what exactly I'm talking about. So on this pencil right click and you can see duplicate, just click on it. So this image is duplicated Now let's hold on and just drag and drop into the next section like this. So it means we do not need to do the same settings again and again. Now let's go ahead and we can change this image. So once I click on it, it's option panel comes up here, we can go to the choose image and let's select that boy image from this middle ability. This is the boy image. Insert media so you can see very quickly. We have done it. Now let's duplicate this extra as well. So here we can't duplicate and then drag and drop like this. Also weaken. Just duplicate this one. And then Dragon drove that school again. We need to duplicate this image. So let's duplicate and we can drag it into the last section, the same thing we need to do with these texts just to duplicate and dragon drop. Now let's Janie this image first. So click on this pencil. It's settings comes up Jews in age, and this time we need to select a different image. This one insert media so that email has also being changed. Now let's change these text. Who wants re click on it. The editing, more activated. Let's dilated and we can drive something like design off the week and here we can make it, like Shop four shoes. Now let's go ahead and we can change the link. So first living it to click on this boy image, and we need to remove this link from here. Control A and delete. Let's go ahead and we can get the shop page link for this boy image. So I mean, I'm going back to my dashboard. I'm opening it into a new dab. Okay, let's go back to the categories once again, and from here, we need to find out shoes. Here it issues. Let's click on view. So the front page comes up and this is the shoes for that car degree page link. Just copy. So I'm just copying it. Let's go back to the L A mentor, and here in this box we need to paste that link the same thing we need to do with this as well. So let's click on it. Here is the Link area control a then delete and then control V. So the link has been pasted. Let's do the same thing with the third image. Click on this pencil so Earth starting comes up. Here's the link just to remove it. We need to link this lady image with the cost. Might expect category. So here on the shoes paid and just going back. And now we have the cosmetics Click on view. Copy the top link. I'm just coping it by hating the control, See? And here we can just based it the same thing we need to do with this text. Delete the existing link and then paste the new one. Also, we need to change the text off this lady section. So here we can just edit it like show up for cosmetics. It's maker something like Shop for Plots. So they all look identical. Okay, knowledge update. And it's time to refresh the home page once again. So either you can click on this HomeLink or you can simply click on this refresh Aiken on right. So Vegans E. We have successfully added all three images in this second section as the less all three images are linked with their own different product category page. Let's do one more thing. If we can see on the demo website. Here we have this text at the top and this image at the bottom alerts to go ahead and weekend just said these two text at the top and image at the bottom so we can go back to the elementary. And here, as elementary provides a dragon drop mechanism. Just drag and drop again. Drag and drop like this. Now let's update and we can refresh the home page once again. Let me driving this link. Here we go. So I think this looks really beautiful. Let's add some space just below this lady image and these section, so better would be weaken. Just put a spacer in between how we can do that. Simply take a single column. This one. Now just Dragon drop this column. In between, both off these rules, I mean this 1st 1 and the 2nd 1 Now inside this column we can put ice pacer. So let's click on this plus and we can have this spacer just dragon drub on the left hand side. We can see the size for once you increase something like 15 52 you can see the height of this space is also increasing. But it's completely invisible. So better would be. We can just put it as 40. That would be better. Let's update and weakened refresh different page once again. Hey, ago. Now this looks much better. We can see here. It's really awesome. So this is how we can arrange to contend with the help off element er, plugging. Now let's go ahead, and we going to start putting the products just below this three people section. So we'll be going ahead to put this heading our divider just below it, and then they products with their Tom Nail, the product title and price. So that's the go ahead. This is our elementary area. We need to take a new column, So just click on this red plus icon. Now we need to put the heading, So let's take a single section column. Here is a column in which weekend right are heading now, rather than taking a new heading and wasting time on for mating the text. Let's duplicate this shop for cosmetics heading and weaken Dragon Drop like this and we can drop it. OK, now it's time between this heading. So let's click on this pencil and in the left bar. We can see Title box, remove the existing text and we can write our own heading over here like best selling products. So we have returner heading properly. Just blow it. You can see there is a link box in which the cosmetics product category page you are exist , so we need to delete it. Now let's add some space. Abo are heading at the door. We already placed our space over here, so let's duplicated the entire column So it is duplicated. Now let's drag it from here and we can just drop it above are heading something like this. Let me drop it above the heading. Okay, so you can see the empty space has been added and there is a gap in the above and devoting column. Now let's go ahead, and we can add a separate area just below this heading. So we need to click on the great I can again, and here we can see divider. Just dragon. Drop it below the heading like this. Now it's time to reduce the length off this divider. So let's click on pencil on the left hand side. We conceive, it just reduced David and you can see in the preview panel. It is decreasing now. I think that much is fine. Now let's align it to center. So click on this center. It goes into the center just below the heading. Okay, now let's go ahead and we can change the color. And we can also increase the weight off this divider. So first leaving you to just move it at the top so all the colors will be enabled. Now let's select a color from here something like red. So the color changes. It's time to increase the weight off this divider, so let's increase these numbers. Yeah, that looks better. It's time for display the products just below the divided line. It can be possible with the help of short cords. If you can check in the left side bar. There is no such element, which can display the product as products are dynamically flashed onto the home page. When you will create a new product from the back end, and hence there are pretty find short courts created by vu commers, and these short cords can help you to display the products. Let me show you how these short boards looks like So this is my website where I have listed all the useful short courts created by the Vou Commerz. For example, if you would like to display a shopping cart form onto a specific page, you just need to copy and paste this short court in the same way. If you would like to display an order tracking form, you can pays to the short court in the text editor on that specific area off the page. No, here we can see product short codes product. Short cords are used to display the products on to a specific location off your webpage. For example, if you paste this short court onto a webpage, then all the products would you have created into the back and will be displayed in the same way. If you pays to this short cord, all the featured products will be displayed. Now here we are going to use this short cord As you can see the description. This short court will display the total off four products belonging to shoes protect category. In this short court, we have some parameters like limit equals to four. This means the total off four products will be displayed columns, A call to four. This means all the products will be displayed in the great off. Four columns category calls to shoes. This means all the product will be belonging only to shoes category. So let's copy this entire short court and we can go back to our elementary area in orderto paste the short court into the text block. I have already provided the link off this page in the lecture description, so you can go ahead, find a link from there and on this page you can get all the useful Vou Commerz short court with the help of which we can create our e commerce website and display our products into a specific the page area. This is our elemental page. Now, to paste the short court, we need to use this text editor element to just drop it over here. Okay, Now, on the left hand side, we can see the text editor option is open. Firstly, let's delete all the existing text. Now here, you need to see there are two taps visual and text. Make sure whenever you are pasting any short court into the wordpress website, you must need to paste that short court inside this next tab. So let's based it over here. - This is the customization idea. There were default settings done by the Ocean W B team. So let's click on this view commers, and we can change those settings. Firstly, let's fix the image crop issue. So the very bottom we can see product images just click on it. Now this is the screen. From there we can men 80 product images dimension at the very bottom vegan C unt groped. Just click on it, and in the right panel, you can see the preview So all these images are fixed. None of the images are showing cropped. It's timeto fix the products. Great issue, like on the homepage. Three grades are showing over here instead off four. So the fourth product is now shifted in the next line. So let's go ahead, and we can fix this great issue so that all the four words will be displayed in a single room. In order to do that, go back to the customized and here we can see archives. Just click on it now scroll down and you can see shop Columns is said to three. Let's increase it to four. So on the right panel vacancy now four product images are showing in a single rope. Let's publish, and we just need to double check whether changes have been done on to the home page or north. It's alerts that a fresh the home page Here we go. So now this looks much better. Let's go ahead, and we can add the middle section just below it. That will be the bikini product with our display ad image, as well as one or two products just next to it. So in our elementary area, let's take a new column divided into two sections. Now in the first section will be put an advertisement image and in the next section will be put. We will pour two products, so let's go ahead in the 1st 1 Click on this plus and weakened dragon image budget because we have to put an advertisement, and that will be an image on the left hand side. Vacancy. Choose image. Let Jews image Now. This time I'm going to upload a new image so you can use any advertisement image as but your business mortal. I'm just going to use one off the image for my desktop. So that is the image there's uploading now, all right. Now it's time to insert media, and that image will be displayed over here. Now let's go ahead, and we can link this banner image with the bikini product category. So just click on this pencil on the left hand side. We can see the link, make it as custom you are ill. And again, we need to go back onto our website dashboard to get the product care degree link. Let's go to the products and then categories, and here we need to find out in which Bernard category. Those product has been listed out. So they are under this undergarment and then women. So make sure to click on this view. Different page comes up at the top, begin. Simply copy it from here. Come back to the elementary area and here in this link box, just based it in this way. That's all they had to do. Now let's go ahead and we can add to featured products in this area. I mean to different selected bikini products next to each other. But the problem is that this is a single section if I just drag and drop an image individual into it than the single image covers the entire section. So how we can accomplish the task? The solution is very simple. When we are using this elemental page builder, let's delete this image budget first. And on the left hand side we can see intersection just a dragon drop. So this is basically a column inside a column. So that is the main column, and this is the inner column. Or we can say Nested column Now in the first section off, this inner column will put a bikini product image manually, the price off that bikini and a button with product name. So let's click on this plus and weaken Dragon. Drop an image Bridget into it. Now it's time to select an image from the media lab ready. So let's click on shoes in age, and we're going to use this maroon bikini as we haven't displayed this product anywhere yet . So let's click on insert media. It appears over here. All right now let's add a button just below it so we can just drag and drop the button element. OK, now it's time to rename the text off this button so we can put the product name onto the button. Here is the text box, so let's go onto our website first. We had already created the menus off this website and under the shop menu. We have the product category, so under the undergarments we have women because inside this women we have listed out all the bikini products. This is the individual page off bikini products, the very last product we're going to create onto our home page. So that is the product name. Let's copy it from here. Come back to our elementary area and in this box we can just paste that name so you can see on the button it replaced. Let's align it to center. Now go to style and we can change the button color. So here, under this normal background color, drag it to top and we consider it a color. From this color palette, he had big whiting. This color looks OK. Make sure do not use too many type of different colors onto a website key by specific color scheme onto your website. So as we had already used this divide as a red or orange color to keep the button color also similar to that one. Now let's go ahead, and we can also change the whole work alerts event. Someone put the mouse onto this burden. The bad wrong color changes. So go to this hover tab, and from here we can change the background color had selected Black. That's okay, Let me show your demo. So when we put the mouse pointer, it turns to black. Now it's time to link the burden with the specific product page. So, firstly, let's click on this product and hit is the unique link off this product. Lords copy. Go back to your elemental area. Now it's crawl up and here in the content, we can see Link box that space to that link. That's all we have to do. And now this button has been linked with that specific product page. It's time to put the price in between this button and the product image. So to put the price for Steelers, copy the price from this website. Come back to our elementary area now, as this price is basically our text so we can use a text editor, just drag and drop this text editor Between these two elements and now on the left hand side, remove the demo text and we can paste £89. Let's former this text so weaken, select, and from the drop down we can assign, adding three. Tow this £89 so this will look a little bit bigger and bolder, as you can see over here. Now let's align it to center. So here we can see alignment. Center hurts. Click on it. That looks fine. Now, if you can focus over here, there is a lot of a space in between this price and above this Burton. So let's go ahead and weakened. Remove this extra white space. Click on Advanced Step. Here we can see margin and padding at the very last. We can see this Aiken. If it is selected, then when you will increase the value off. One idea. Let's their top. All the remaining value increases proportionally, as you can see over here, so make sure toe uncheck this. I can first and then after a venue to increase or decrease the value off any area whether attribute top bottom, left or right so you can see I'm increasingly margin and in the right panel. The margin above the price is increasing, so let's put the margin in negative. In that way, the remaining a space at the bottom off, this price will be decreased. So we're going to decrease the margin off the bottom area so you can see in the right panel the bottom area margin is decreasing and the empty spaces also removed. Over here. Now this looks much better now. We need to create the another bikini product in the next election, having the exactly steam settings that we have used on the 1st 1 So let's duplicated and we can save a lot of time, drag it into the next section, and later on we'll change the product image in the same way we can duplicate the prize, and again we can duplicate this burden and let's drag it into the next section. So we have created exactly the same product. Now it's time to change this product image, the prize and the product name. So let's select a different bikini product, go back to the website and from this women's page we can select this white one. We haven't used this one also, let's Go ahead and Deacon Copy. Deeper nickname. First come back to our elemental area, and in this button, we need to rename it. So let's base that one. Now it's time to copy the price, which is £120. Let's copied, and we can replace £89 with 1 20 salutes pasted over here. Now it's time to link the burden with its appropriate product page. So let's copy the product page link from here. Come back to elementary area. Click on this button and in the link box you need to replace this link like this. That's all we have to do and let's go ahead. We can change different image as well. So click on the Jews image and we can select this. They imprinted image from the media library. So here is the white bikini. Let's select an insert media, so that has been replaced. So we have successfully placed both departments. Let's update, and we can refresh our front page once again in order to check whether these changes have been done or not. So let's click on home menu. Here is a page. Let's school down. Here we go. So we can see body parts having placed successfully just below these shoes product. Now we need to put the mug product just below these bikini in the same order like we have done with the shoes products. I will be using the similar heading the same divider. But these shoes products will be replaced with the mugs. So let's get started. You can go back onto our elemental idea rather than creating a new column. It would be a better idea if we can just duplicate this entire column and we can drag it at the very bottom like this. Now it's time to change the heading the project. Short code. So first of all, let's go ahead and we can change is heading something toe shop four mugs now, as these shoes product Short would have been placed in the text editor. So let's edit the test editor and we can change the slug. Hair from shoes to mugs. Confirmed. This mugs slug from your dashboard area at last Freakin refresh our front page once again Solarcity fresh it Okay, lets a school down. Here we go. So exactly same section have been created with the different products the mugs have been placed over here. So this is how easy we can quickly duplicate any existing column and interesting element into your flu commerce website. With the help of this elementary page builder Plug in and we can make our e commerce website very quickly. Now, this is a demo website I have on my screen. Please don't get confused. You can check the website link. It is different, but we're going to create a similar section onto our website as well. I mean, on this fashion villa So here on our website, we're going to create such type of section. If you can see when I'm scrolling the background image is fixed but the content is calling up and down. So this effect is called parallax effect. We're going to create such section into our website as well, but with a different lady. So let's go to started. Firstly, go back to the elementary. So this is the back an area off our website. We need to take a new column and that column will be off one section. Okay, Now, if you check this demo website, this girl images basically the background image off this entire column so in our website. Also, we need to serve the background image off our column, Soto said. The background me. Firstly, you need to right click and then edit on the left hand side. We can see this panel comes up, so these are basically the settings off our entire column in this style area. Under this background tab, you need to click on this first classic, so it gives you the option to either 30 color off your entire column. Or you can also upload an image from here to let's choose an image from the media library. So I'm going to use an image as the background image. I have two images off the high resolution. This is the 1st 1 So let's select the same image. Insert media and hateful appear over here. Now let's update this page and weaken the fresh different page. Once again, let's refresh it. Okay, now here we can see that background images not showing at all, but this is just a very 10 line over here. For your information, the height of the column depends on the amount off elements you insert into it. This column has no element into it. I mean the background image that we have set into this column is basically just a simple image. But that is not countable as the element as the heaven dragon. Drop any element from the left inside into this column, and that is the reason why the height of this column is too short. Let's go ahead, and we can put some elements inside it. So first leaving it to click on this plus on the left. Inside this Elements panel comes up. Let's go ahead and weaken Dragon, draw the intersection into it. So this is the inner column, which is divided into two sections in the first section. We can put some content, so let's click on this, plus Aiken from the left panel. We can just drag and drop the heading element. And let's rename this heading. So I'm just relating their default text and weaken right over here. Something like, Hurry up. Now let's change its color toe white so it will be more visible. So here begins select white. There it looks fine. Now we're going to put another heading just below this. Hurry up. So let's duplicate it first, and we can rename urge something like deal off the day like this. Now let's go ahead and we can increase the foreign style so we can assign the hatch. Want tag into it. So this is a little bit bigger. Now let's update and we can see if the changes have been done on the front page or not. So let's to refresh it. Heavy go so we can see the height off. This column is not increasing, and we can see the lady face a little bit over here. So the more content will put inside this column, the more visible the background image will be. Let's go ahead, and we can put some embodies space into it. So here begin click on this great Aiken and just drag and drop the separate above this heading and we can increase the height off this empty space. Let's say maximum would be something like 1 45 That would be fine. Nothing. So let's update and refresh. So whenever you make a chain, always update and check on the front end. Whether did work you have done that has been reflected or not, So now we can see this is a much bigger now let's go ahead and begin. Add more space. So I'm just going to duplicate this a spacer, and we can put just below this heading. Also, alerts duplicate. Now it is duplicated. Now let's go ahead and we can drag it to the bottom off this heading section. Okay, let's update, and we can refresh our front page once again. Here you go. So now we can see this background image is a little bit bigger. Let's go ahead and we can add a burden just into it. Let's go back. Flick on this great Aiken and here is the burden. Just drag and drop. No, let's say we can rename it Do something like shop now and we can put the shop page link over here, So let's go back to our website. The quickest way to copy the link is highlight the menu and then right click copy link address. So I'm on the Google Chrome browser it gives to copy link address, and on the Mozilla Firefox, you would be getting some other option. The knowledge Go ahead and we can paste the link. At last, we can update no before refreshing different page. Let's go ahead and we can change the color off this Parton go to this style under this normal tap background color. It should be something like red or orange. So I think that color looks OK. Extra color is fine. Let's put the whole background color as black. Now let's oblate. It's time to refresh the home page. Okay, lets us call down. Hey, go! So now this is much better. Let's make this section more impressive. So firstly, I'm going to increase the foreign size off these text a little bit more, and then after I'll be adding a new line just below it that will be saying something like Use coupon gored. This want to get a 20% discount, and we'll also be going to increase the burden size. So let's go back to the elemental area and here for slipping into select hurry up next from the size box, we can make it large. This is a bit bigger in the same very kin selected deal of the day and make it something like Double Excel. So this is much bigger. Let's increase the burden sizes will select the button, and inside this content area, we can see size naked something like large, but this is a bit bigger. Let's update, and we can refresh once again. So we just need to confirm whether this is looking OK or not. Let's refresh it. Here we go. I think they're text is much bigger now, and the burden is also clearly visible. So this is better. Now if you can see on the left and right side off this column, I mean the background image. There is white space, so let's go ahead and we can remove this vital space so the background image will be strict with our Bowser's border. So let's go back to the elementary. The only solution is that we can make this column full stretched. So once you click on this edit setting option over here on the left hand side, we can see is Stretch section under this layout. So let's naked. Yes, so this is completely is stretched. Let's update, and I can sure you would exactly have been done. I'm just going to refresh it. Here you go. So we can see now there is no a space on the left and right side off this background image , but this looks of really awesome. So that's all we had to achieve. Now let's go ahead and we can make it parallax, because when I'm strolling up and down, this image is also a scrolling, but it is not fixed. So let's go back to the L A mentor. You can find the setting in the same column room. He is going to go on to the style and under this background tab vacancy attachment. So from this drop down, you need to select fixed. So this will air the Parallax affected to our column. Let's update and vegan refresh our friend page Once again. Let's a fresh it. Hey, go now let's scroll up and down. So this is how easy we can add the parallax affected toe. Any column off our website, which has a background image. Now let's go ahead and we can add another products row over here that will be belonging to the cloths category. So we need to go back onto the elementary now again, the idea would be simply duplicated this existing road from here just duplicate it and we can simply drag and drop, and now it's time to edit the text. Huiqin simply edited something like shop for GLAAD's and we need to edit this short court from here. So let's click on pencil. From here, we can simply type clots, then update and let's refresh our front page once again. Here you go. So now all the products are displaying over here, which were under the plots category. When we put our mouths over here, this second image comes up. So this is how easy we can set up the homepage into a e commerce website. I hope it was easy for you to understand how we can put the buttons, how we can add the icons in those buttons, how we can link any image to any specific page off your website or with any other website. How to use the short course to display the vou commerce products. How you can create the custom products by just dragging and dropping the image budget. And you can put your own custom burdens and how you can set up the parallax effect. So, in case if you would have any question, please do not hesitate to ask me, Just drop your message. I will be there to explain you the things. Thank you very much. 26. Learn how to Create Content on About Page: it's time to create the content for about US Page. Currently, our about page is blank because we haven't placed any content over here in this lecture, I'm gonna show you how exactly we can make the content for about the space age within one minute. Yes, you don't need to do any hard efforts creating the columns, importing the images or content. Nothing. You just need to import a template which is pre made and the entire about a space will be ready. Are you still getting confused? Nobody. Let me show you what exactly we're going to do in this lecture. So, firstly, we need to go back on to the about US page back and panel. Click on this page is, and here we have about Let's click on addict. So this is the back and panel off our about US page now, Firstly, before going ahead with the elementary, we need to do some basic sightings like we need to remove this page title bar this page title as well as this breadcrumbs. So let's go back. We can find the settings under this portion WB setting firstly, under the main tab, we need to specify the page layout, so make it full with then inside this title tab, we need to disable title as the last we need to disable the breadcrumbs. That's all we have to do. Let's update. OK, now it's time to refresh the about page first so we can see whether this has been disabled or not. Okay, it's gone. Now. Let's go back to the backend This time. We need to click on added with elementary button. So the elementary page builder is Screen comes up. All right, so this is the elemental paid the screen. I'm sure your family or with this a screen. Now, in order to create the content for this page, you don't need to click on this Plus, but go ahead and click on this folder. I can just give you the option to import any creamy template, but these are some premium templates of you're going to use them. But here, go to my templates. We can see the import template option. Just click on it. Now it ask you to import or Jason five ordered zip folder. So we're going to upload a door. Jason, file. And here we have the folder inside this page template folder. These all are did or Js and file so we can import any template from here. Let's say the 1st 1 and then click on open this world a couple of seconds to import it. Here is the one LP page about Syria. One dark hero. Let's click on insert and wait for a couple of seconds. Here we go. So vacancy the entire content has been imported from the template. We just need to edit this text heading. We can upload our own image over here, and we can create our own F A Q content. Also, we can change the link off this button, so let's go ahead and we can change the link. Click on this pencil and here we can pass out the contact A link. So this is the contact page right click core billing address. Go back to the elementary and pays to the link update. Now let's officially about page first, and we'll change the content later on. Here we go. For the entire page, content has been created. You can change the content as body or noon. That's completely up to you. And if you don't know how to change the content. Please wash my previous lecture. Also, I have shared more than 300 plus elementary page templates, so you can find a download link with this lecture and one civil download the file they will be be a signal of folders. So firstly, you just need to double click and extract those folders and then in these folders you will be finding another zip folders, so just extract each off them one by one, and you will be having all the required or jails and files that you need to import into your website. So these are did orgies and files. In case if you have any questions, please do not hesitate to ask me, Thank you very much. 27. Learn how to Create Content on Contact Page: Now let's go ahead and we can create the content for our Contact us page. This page is very important because here we need to put all our contact details or company email address contact form Google Maps. So if anyone wants to contact us, they just visit on this page and they get our contact details. So let's go back onto the pages area, and we can click on Edit just below this contact link. Now, before going ahead again, we need to do the same default settings like inside this man area. We need to make it as full with hired the title as the less the breadcrumbs. It is really not mandatory that you must need to hide the title or the breadcrumb, but that's completely up to you. If you would like to display that page title bar so you can make it enabled. I really do not like all these stuff onto the page, so I'm just making a disabled over here. Now let's update, and then after it will be a reading this page with the help off Elemental. Okay, let's click on added with Elementary now as redid imported up pre made templates and pretty about the space, the same thing we are going to do on with this contact page. Now again, click on this for the Riken because we need to use a pre made template. Now, this time we're not going toe a plate our own custom template in this area, but under this page is the elemental already made it available free contact page template. So let's type here contact and all the results are filter. Once you who were on any off them, you can see at the very bottom GoPro. It means this is a premium one. So we don't need to go ahead with the premium one. Let's find out something which is free off cost. So here we can see that it say's insert in place off the GoPro. So let's click on insert and the entire page downplayed will be imported into our contact page. Here we go. So this is the back and area and you can see the entire contact page have been imported. You can easily edit any content over here. You know how exactly we can change this background image by just right. Click on this edit section and go to the style. Here we can see that is the background image. So go ahead, choose the image, upload your own image over here and that will be displayed in this area. Let me show you how exactly we can update this Google map because this is a Google map integration over here. Once I click on this pencil icon on the left hand side, it say's London Islander United Kingdom. So that is the Google map off London area. If I type over here something like my own company that soft Global Ideas Services Here we go. It find out my business address over here. So this is how we can update the Google map. Make sure you must be registered onto the Google maps before embedding that Google map on your website. If you don't know how to register your business onto the Google map, I have provided a link off a video that will help you how to set up your business onto the Google map with this lecture description. So that's all we had to do. And now we have created all the important pages off our website like home about contact and in the same way you can create the other two pages content like privacy policy and terms and conditions. Make sure those two pages are very important because when you will be applying for the payment Gateway, then those two pages will be reviewed by the Payment Gateway company. So before applying or before signing up with any payment. Gateway company. Keep those two pages ready. Thank you very much. 28. Learn How to Set up a FrontPage/Landing Page: You must be wondering when I opened this domain name coupon tape dot com. Then this default blank page comes up instead of this home page where we have placed all the content. The reason is that we have created so many pages into the back and area like home shop about contact cons, conditions, privacy policy, but website don't know. That should be the first page off your website, so we must need to set that home is the front page off this website. In order to do that, go back to your dashboard and here under these settings, you need to go to this reading option. No, As you can see over here, your home page displays your latest post, so you need to select the second radio button and home page. Should be whatever the paid you was sacked from this list. That page will be displayed whenever someone go on to your main website domain. So here we have selected home as different page or home page. Now let's save changes. At last, I'm just going to open the main domain. Let's hit the main domain. So now the home page content displays as different page So this is how we can set any page as the front page or home page off your website. Thank you very much. 29. Learn how to Create Footer: footer is the very bottom area off your website. So in our website, this is the footer. Footer plays an important role into our website development because then it is not possible to put all the links in this header area. For example, you are having more than 100 pages. So how you will put those 100 pages link in this header? So footer comes into the mind and in this folder we can put all the links off those pages without any problem. Let's start creating the content for our footer. Go back to your WordPress dashboard Now, In order to put the content into the footer, you need to have our own appearance and then go to this village. It's this is the video. It's area video area means off fixed area. On your website created by the team developer, for example, we have this 40 of one. So this is basically off budget area. Whatever the content of evil, put inside this photo one that content will be displayed in this location in the same way we have the 2nd 1 foot or two. So this is the footer visual area to, and the location reserved for foot or two is over here just next to for 12 1 in the same way. This area is for 43 then this last one is for for therefore So let's go ahead and we can put the content inside them. So let's create a footer. Something like this. The first footer of one has some image and social Aikens. 2nd 1 has some text. Third and fourth widget area has some kind off links to the internal pages. So let's get it started. We need to go back to our vineyards area now in the first photo area, we need to put an image budget. So let's find out the image because we have to put that logo so logo is basically a form of graphical image. Now here it stays there. Would you like to put this email vineyard select footer one and then add digit. So now we can a scroll up and under this foot of one, this inmate visit has been placed. Click on this ad image and this will open the media library. So let us select our local from here. Here's the logo. Let's selected, and then at two digit save it. Now it's time to refresh our friend Paige. Let me the fresh Here we go so we can see in the footer idea. This logo has been placed in this location Off course. The background is also dark, and the local forms are also a little bit great. That's why it is not clearly visible. So I recommend you when you are using a dog background, then always place some kind off light content over it. No, just below it. We're going to use some social Aiken's Let's Go back to division area. Firstly, we can totally blows the maid. Bridget. We can use more than one vineyards into the same for Trevan off orderto who that's completely up to you. Let's find out the Social Aikens here it is, so either you can just drag and drop. Also, it works exactly the same, and now it stays followers. That is basically the title. So here we have so many Social Aiken boxes available. If you would like to pass your Facebook, Ling just tied the Facebook link over here, something like hedge to DBS www dot slash I'm just putting my own profile link over here in the same way we can put Instagram. If you have Pinterest, you can put over here. I'm just putting different wrestling. Let's put one more. Yeah, you too. And let's save it At last begin click on Done and now alerts that a fresh, different page. Okay, let's just call down heavy go. So the social icons have been placed in a very beautiful manner and this is the heading now in the next footer to we're going to add some text. So let's copy the text from the other website. So I'm just called being this entire text. Let's come back to our vegetarian off course. The foot of one role is over, so let's close it. It's time to deal with for their to to write the text. We need a text widget. So let's find out the text of injured. Here it is. Let's click on it now. This time, select foot or two and click on add digit scroll up. So here we can see inside this foot or toe. This next block has been added. No, we can simply paste the entire text that we copy it from the other website. Title box is empty, so Let's put this title inside this text box. You can use the control plus X key to cut the text from this area, and we can paste it in this one. Let's save changes and we can refresh our front page once again. Here we go so we can see the second area is also fulfilled. Now it's time to put some links into the third for television area. Let's go back to the vigilance. Firstly, we can close this next block. Also, that roll off order to is over. Let's close it. It's time for 43 to create the custom links into our website Footer. Here, we can see custom links figured just click on it and we can add it into the 43 vigil area. Click on add Digit. Here is the title Useful links. You can change the title that's completely up to you. Linked, ordered blank if you keep it as blank. So whenever someone click on that link, the page will be opened into a new browser. Deb. If you make it ourself, the link will be open into the same tab. So that's up to you. Number of custom links How many number off links you would like to provide into the exact for privilege it area. So let's go ahead and we can select here to this means only two rulings can be provided into a specific provision. Okay, now, here we have two boxes available. Number one you are and number one text. It means in this box you need to provide the u. R l love that page. And here you can put the text. So, for example, privacy policy. And in this box, we need to provide the privacy policy page bottle. So I have already opened the pages section off our website. Here is the privacy policy, so we can see here view right, click on it and just copy link address. So this will be the link off this privacy policy page off course. You conceivably click on this view. The next page will open up, so that will take a lot of time. Come to the digits, and here we can pays to the link. So this is the complete link off Privacy policy in the same baby can pour terms and conditions, and here we can provide the link off terms and conditions bait So here it is, right Click go Billing address. Come back to our website and then based That's all we have to do save and we can the fresh different page. Here you go so we can see both the pages Links have been created in the same way we can create the links into the fortress aged 84. So I'm just fast forwarding this video at last weekend's Save it and now leads to the fresh Our friend Page once again Okay, lets a school down. Here we go so we can see we have placed all the links into our footer and disquiet Very easy to set up the footer into Arvo Commerce Website. Our last task is to change the text in this copyright area The default text resident and copyright Ocean W with team by Nick. So let's go ahead and weaken added this text. Now this text can be editor inside this appearance, we need to click on customize. Just click on it. Here we go. So this is the customization area here. We need to click on footer bottom so you can see here. This is the copyright text written you can edit the text as but your new. So let's delayed it and weaken type something like Copyright 2019 all rights reserved. And then we can put a vertical line and you can give any credit over here. Something like website developed by you can put the company name something like Web soft. Now, if you would like to make this Web soft as a link, the only HTML you need to do is type here bracket a then space hedge R E F equals two double cured bracket clothes and after this Web soft again record start, then forward slash a and then blacker close. Now, in this double courts, you need to provide the link. So, for example, I'm just putting my website link over here like this. It means Web soft have been place between the anger tag off html. So this link will be click able. Let's click on Publish and we Can the flesh Our front page Now. Okay, here we go. So we can see in the copyright bar all the custom text have bean placed and Web soft is the link. If you can see the mouse pointer changes. So this is how we can create the content for our footer. And in case if you have any questions, please do not hesitate to drop your message. Thank you very much. 30. Setting up Facebook Login in an eCommerce Website: guys. My name is Saddam Kassam, and once again I am back with one off my new lecture where I'm gonna show you how we can integrate the Facebook logging into your book homers based WordPress website so anyone can simply click on the Facebook lovin Burton and taken logging into your book homers that side with the help or Facebook account. So let's get started to integrate the Social Logan into your book Homers website vineyard to use a plug in so you need to simply go to WP is crashed or com, and you can get the social log unplugging at a very huge discounted price. Here, you need to type Vou Commerz social log in. Here we go so we can see the first Blufgan is vou common Social Logan. Let's click on it so this plug in is at a huge discounted price. If you can check the original price off this plugging on the Commerce website, it costs around $79 every year. But if you buy it from here than you can get it for just 10 bucks and you will also be getting one year free updates, so simply click on at the card and download this plugging in Dort Zip for mate. I have already bored this plugging, so let's go back to my book Homers website And here I'm just going to the plug ins and then click on Add New. So I will be uploading the view. Calmer, social lovin, plugging into my book Homers website. Simply go to upload, plug in, then choose file. So this is the plug and I have vou calmer social logging in dot zip for mate. Let's open or you can upload it if you are on the window specie here, we need to click on install now. This will take a couple of seconds to get installed into your view Commerce website. At last, we can activate display gin, so this was the first step to buy the plug in installed onto your website. Now, second step is which is a force. The last step set up an app on Facebook so that there will be a synchronization between the Facebook developer console and your website. Now let's go to the loo commers and then click on settings. So this is the view Calmer Settings Page, and we can see the last step social Logan. Let's click on it now. Here we can see the setting step and the first step is Facebook. Let's click on it so that we can enable the Facebook logging into our boo commerce website now before enabling it. This APP idea and APP secret is needed by default. It took my user name off this wordpress of upside, so let's remove it from here vineyard to generate the app i D and app secret from the Facebook developers console. So before enabling the Facebook Logan just empty these two boxes And here we need to copy this. Redirect you are I because this will be needing in order to set up the Facebook app for our group Hamas website. So just copy it from here and then click on save changes now alerts open off Facebook Developer Console Website. So simply type developers dot facebook dot com. So this is the Facebook Developers page from where we can create the logging app for our woo commerce website. So simply click on this log in menu and you can log in with your existing Facebook account . So I'm just going to log in with my account. All right now. Once you will Logan into the Facebook developers account. Then at the top right corner, you can see my APS. So let's click on it. And then we need to click on create app so this mortal box will open. Now, here, we need to give it a name, for example, Carbon gloves. You can type any name over here, but that I commend you to just tied the name off your website. I'm not talking about the domain name. Now. Next thing is contact email. So in this box, you need to enter your working email address. At last, we need to click on create app. I d. Now this is a security check. Just complete this capture and then click on submit. Okay, so now the developer console has been open. You will be seeing this type of a screen. Now the first option is Facebook logging. Let's click on set up. Now, as we're going to integrate the Facebook logging into our website. So you need to select this web the triple W. So in this box you need to enter your website address. You need to include the https protocol as well. So that is https. Call in slash slash carbon collapse dot com. So the domain form it would be something like this and then click on save. So on this webpage, that's all you have to do. Now let's go back to the settings and here you need to click on Basic. Now, this will ask you few information about your app that you're going to create. The first is display name, so this will be the carbon collapse. Or you can put any name there. It's up to you. Name space. You can put a short name off your website, so I'm just going to put like, carbon collapse. They should be at least 7 to 8 characters. Long AP Domain In this box, you need to enter the domain name off your website. So, firstly, I'm just going to type https colon slash slash carbon claps dot com, then select from the drop down so it will appear something like this. Now again, you need to type carbon claps dot com and then select from this drop down. So these are the 24 made off our app again. The contact email is over here. You can either update or leave it as it is now in this box privacy policy, you are all you need to provide the link off this page. So firstly, you need to create this privacy policy and terms of service page on your WORDPRESS website . So let's type here something like https, colon slash, slash and in the same way you need to provide the terms of service. You are over here. Make sure both off these pages are ready and life on your wordpress website. Otherwise it will not work because when you will be submitting this app onto the Facebook developer console than Facebook will check dynamically if these webpages are live or not. Now here you need to set the icon for your social log in absolutes. Click on edit and we can upload and I can off the size 1000 and 24 pixel vid and the same would be height. So in this folder I have this icon ready. Let's uploaded. Okay. And here you can select provide services to other businesses. Now, in the category, you can select a care degree off your business as carbon gloves is the online shopping site for their demonstrations. I'm just selecting shopping from here There. So you have to do. And at the very bottom you would be getting these type off messages. Just ignore all of these messages. They will not affect any off the things. And here just double check in this section Website side you are l There should be your website. You are It will be auto filled. Let's click on save changes. We are almost done now at the very top you would be seeing this app I d. So this is the app i d that we need to paste into Arvo Commerce website and right now the APP is in development more so First click click on this double button so the app will be in the live more. Now let's click on search mode. All right, so the app is in live more now this is the app i d And this is the app secret But these are the two details that we need to copy and paste into our blue commerce website. So firstly, let's copy this app I d and we can go back to the Blue Calmer Settings page So again you need to go to the loo Commerz than settings and at last, social logging. So here we are on the Facebook settings page, enable it, and in the app I d. You need to paste that app. I agree that we have copied from the Facebook developer console in the same way we need to pay us to the APP secret. So let's go back to the Facebook click on the show. It will ask you for the password. So let's enter it. Okay, now, let's copy it from here and vegan pastry in this box, there's all you had to do. Now, this is very important. Redirect you are I You need to just copy this complete. You are all from here. Now go back to the carbon collapse Facebook developer console under the Facebook log in. You need to click on settings. So this is the last step that we're going to do. And here village haute redirect you are. I just based it over here. Select from this drop down and then click on save changes. That's all you have to do. And your Facebook Logan has been properly set up with your view. Commerz store. It's done. Now let's go back to the book Homers website and here We need to check this check box at last click on save Changes. So it's done. And now boo. Commerce website has the Facebook love and functionality. It's time to it best. So let's copy this. You are all from here. Alerts lowered from the admin account. Now I'm just going to open carbon collapse toward comb forward slash my account. So this is the default Luke. Homers log in page. Let's school down here. We have the log in with Facebook option. I'm also going to look out from the Facebook account, Otherwise it will order Logan. Okay, now alerts. Click on log in with Facebook. Here we go. So let me enter my password. And now you can see this is the pop of window. That's the Eiken. That's the website name, which I have set up in the Facebook developer console. Let's click on, Continue with Saddam. That's my name. And here you go. So the Facebook logging has been successfully work, and that's my name, which is auto fished from the Facebook account. I've also got a confirmation email. Let me show you. So that is the confirmation email. I have received from the commerce website. So this is how you can set up the Facebook Logan into your view. Commerz based WordPress website. If you would have any question, just drop your comments. Thank you very much. 31. Learn how to Create the Login & Logout Menu: creating the Logan and Low Goat menu is very important than an existing customer comes to your website to make his next purchase. In such case, he'll be finding a log in button. From there he can, logging into his existing account on your website and make the purchase without feeling of the land. A billing and shipping details again and again. So video to install off free plug in go to the plug ins. Click on Add New and in the search box you need to type multi mate member to the first. Plugging is ultimate member user profile and membership plugging by Ultimate member. Just install and activate display gin. All right now, next thing is that we need to go back onto the appearance and click on menu. I'm going toe. Add the Logan and low what many are the very top in this area, so this area is basically called the top bar. Let's go back to the menu. Okay, now here we need to create a new menu, so just click on, create a new menu and we can give it a name, something like Dog Menu. This is just for your reference. Click on create menu. Now from the pages section, click on view all and here you will find my account, just click on it and then click on Add to Menu. My account page is a default page created by the Vou Commerz that gives the options for the user to log in and register into your website. So let me show you into the new browser. How, exactly this my account page looks like and then after will be going ahead to rename this my account page with the log in text. So I'm just opening my website and then my account hit Enter. So this is the my account page, which has the log in form. So it would be a better idea if we can just put the my account page link and we can rename the text as logging. So when someone click on that menu, this Logan page comes up. So here we have already added the my account page. Let's open it, and we can rename it something like lowing Let's school down here. We can see Ultimate member menu settings, so these options are only available when we have installed the ultimate member plug in this blogging gives you the flexibility to control the visibility off this long in menu. If you select everyone, it means this many will be visible toe all the people who comes to your website. It doesn't matters whether they are logged in or logged out or they are just the visitors. If logged out users selected, this means the many will be visible toe. Only those people who are not logged in into your website, for example, on normal user. But if you're logged in into the website, then this logging menu will not be visible. So that would really be a good idea. So let's select the second option. And then after we can just close the step now second thing, we need to add a log out menu. So here you can see vou Commerz endpoint. If you can not see this step at your end, make sure just scroll up here. We have screen options, and from here you just need to check this view commerce endpoint, make it enable from here and then after this stab will be visible, salutes pope in it. And here we can see love out menu. Let's select and add to menu. And again we can control the visibility off this lookout menu to so here we can see logo. Too many will only be visible toe logged in users. That's all we had to do. Now let's save menu. 01 more thing we are forwarding over here. They're display location. So make a checked top bar and then save many. That's all they had to do now, as I am already logged in into this website being an administrator, So I'm just going to log out first. And now let's go ahead and v contest the visibility off that menu. So remove this WP hyphen, Logano Redman and just open the website pretending to be a normal user. Here we go so we can see at the very top. We can check this Logan menu, but nor the logged out Let's click on Logan. And now I'm just going to use my own details logging into the account, click on Logan, and then, after this, Logan will be the place with the logo. Burton, Here we go. So this is log out. Once I click on love out, it refreshes the current page, which is the my account page, and here is the button conform and logged out. So let's click on Lagarde once again. So this will take us completely logged out from this website. Here we go. So I can see we're back onto the log in page and the log in button is also available at the very top. I'm in the logging menu. So this is how we can integrate the log in and low vote menu into Arvo Commerce Website. Thank you very much. 32. Learn how to Integrate WhatsApp Chat on the Website: in this lecture, I'm gonna show you how we can integrate the board Snapchat feature into your book homers website so that you can chat with your customers in the real time and you can provide the best and quickest customer support. Trust me in the e commerce industry, it is very important if the customer support is great. If you're services are great, you will be successful. So make sure to provide the best service so that customers can come back to your website again and again. So this is my website at the bottom right corner. You can see there's awards up. I can. Once I click on it, it redirect me onto awards that page it say's message. That's my mobile phone number. Onward step. So once a month click on this message, a next page comes up, which asked, Looks like you don't have words have install to download. This means this is a message for mobile phone version or you can use words. Sepp Web sellers click on words that Deb this works perfectly onto the desktop and onto the mobile version. So this is the desktop was an open in front off me and That's my own contact, which I have integrated into the website. Then someone tied the message over here, for example, like I need a vet site. This will directly come to my mobile phone onto the work subject. So in this way I can communicate with the user. Now let's come back to our website. So this is a WordPress that side back. And firstly, we need to install off free plug in and then add new now venue to install a plug in, which will help us to insert JavaScript cord into our website. So in the search box, you need to type custom CSS space GS. The first Blufgan is by a silky press dot com. Just install and activate displayed in the plug in has been successfully activated and vegan see a new option custom CSS and Jay's. So here we need to add a new custom. Js scored. Just click on the third option in the title box. You can put any title. I'm just putting it over here like board SAB chat code and in this box just hit control a and then delete. Now go to a website. It is words help dot io slash widget. So this is the website. From there, we will gender it a Java strip cord that will help us to integrate boards captured into our WordPress or who? Commerce Website. All right, now, firstly, click on this, get your burden and here we can select Ward said the second option. Make sure we just cross this messenger now in this box, you need to provide your own words up number, including your country code. So I'm just putting it over here like 91 which is the Indian Standard Country code. And that's my words up number. Now let's scroll down. So this option is completely optional. There are many premium features as well, like you can see pro feature. If you can put your own company logo or if you would like to insert your own custom welcome message, leave it as it is position. If you select left this, Ward said, chaired option will be displayed on the left off your website, so keep it right. Call to action so this will be a message. Let's type over here watched up us so you can see along with your chat icon. That message will also be displayed, but sometimes it did not work. So don't worry about that. It is really not mandatory. Next often is completely pro feature. Don't waste your money about $2.5 per month. Just leave it as it is Now. Here, you need to put your email address. So let's type even address something like And then after a click on get button cord. So here we can see this is the JavaScript code. Just click on it. It is already selected. Right. Click copy the entire court. Come back to our website here, just paste the code and then click on update. So that's all you had to do. Now let's go ahead and we can open our website onto a new tab on just opening the front page. Here we go. At the bottom, right corner. We can see divorce up. Chad Burton, one someone click on this burden. It will redirect the user on to divorce. Seth Page, just click on message and your customer would be able to chaired with you directly onto the wards up. So this is how easy weaken indignant divorce Snapchat into your view commerce website. In case if you have any questions, please do not hesitate to ask me, Thank you very much. 33. Learn how to Create Product Filters: This is the shop page off our e commerce. That site, which has all the promotes listed, no matter of which Bernard category they belongs to. This idea is called Sidebar, which contains many common elements that we would like to display with all products. But here these are some useless veg. It's like recent comments archives at Spectra. It would be a better idea if we can remove these default widgets and can put the product filter over here like filter by price or filter about product categories so the customer can easily filter this shop it for his products. So let's get started. This is our WordPress dashboard. We do not need to install a separate plug in to create product filters. As vou commerce has some involved figures simply go to the appearance and then digits. I'm sure your family with this page as I explained you about it when we were working on to the further in the earlier lecture. So here we have a specific sidebar widget only for Blue Commerce Shop and protect Spade who Commerz sidebar. So whatever the content, you will put inside this sidebar widget, they will be displayed on to the shop page. No, let's just call down and I can show you a few inbuilt product figures like we have over here. Filter products by attributes. 2nd 1 is filter products by star ratings. 3rd 1 is filter protects by price. So let's add this product. Filter onto the shop page at the very first position. Here we go. Let's click on Done, and I'm going to refresh the shop page so we can see the price product filter is available to filter the products. As for the choosen price range, for example, I'm setting the price range between 0 to £50 then hitting the filter button. Now all the products are showing, which has their price below £50. As you can see over here, the all of £35.6 pounds, £4 which is completely ranges between 0 to £50. In the same way, we can add a few more filters over here like filter Parex by a star ratings. So let's go ahead, and we can add this filter as well into the new commers sidebar. Let's rename the title like Filter by Ratings and then save and done nursery slash the shop page again. Here we go so we can see a new star. Ratings Protect Filter is available. Now you can filter the products as per their ratings. Let's a select four stars. Now you can see here each off the three products are showing, which has four ratings. So this is how we configure the result. As for the ratings now, let's add a new product figure, which is product care degrees. Here it is. Let's add it to the newcomers. Sidebar. Now let's refresh the shop page again. All right, let's a stroll down and have a go. We can see product categories. So these all are the product categories that we have created into our e commerce website. There are many categories which are no more useful. I mean, those are empathy categories, so let's hide them from here. Save it, and then again, we can do fresh, different page. So this one categorized is no more useful. Let's refresh. Here we go So all the M pretty product categories are now removed. It would be a better idea to present only those categories in front of the customer, which has the products, so there will be no blank pages. So click on done and let's go ahead. We can add a new Bridget into the shop sidebar. So let's scroll down. Here it is. It isn't viewed products lets air disparage it, and I can show you what exactly it does when we have it on to the shop page. This video, it helps you to increase the sales. Here we have the option for a number of products to show. So let's make it for, I think, then work too much. Save it and let's go back onto the shop age. Let's refresh this page and we can a school down on the left hand side. It shows Claudia push up bikini. So recently I checked that product. That's why it is showing over there. Let's check out this Happy day mug. So this is the another product I have just opened onto this website in the current session . Now let's go back onto the shop page on a school down. Here we go. So it automatically added this happy day mug. Over here, this means book Almost tracks are activity and displaced. Those product inside bar which we had looked up in the current session. This helps to sell that Burke most likely as Venna customers, see Uppercut in which he has interest and that correct is coming up on the screen again and again. There are more chances off the sale. Now let's add a product search box onto the sidebar. So here is the product search widget. Lets added to the newcomers sidebar. And we can put a title over here something like Search your product, Save it. Now let's drag it to the very top. So this product search box will be displayed at the very first position. Okay, now let's go ahead onto the show page and we can refresh it. Here we go. So we have successfully placed the search box as well. All the product filters have been placed in this sidebar. So this is how we can. Poor departed filters into the sidebar, and it is very important to improve the customer shopping experience. So you will be having more sales onto your e commerce stores. Thank you very much. 34. Learn how to Set up AJAX Based Search Box: in this lecture, I'm gonna show you how we can implement the objects based search boats into your e commerce website. Objects based search box means whenever you type a product name in this box, it imagers researchers that part into your e commerce website without hitting the search button or without really your ding your page. So this saves a lot of time, and this will really improve your customer experience. So here I just type the mug and you can see four prints Have Bean displayed over here related with this term mug. Let's say I click on this Valentine's Day mug and this will open the individual page off this product something like this. So in the same way, we can type another product something like Push the soul, search out all the products which has this keyword push. Claudia push up. Let's click on it. Here we go so it searches this bikini product, so let's go ahead, and we can implement this type of search box into our e commerce website to improve the customer experience. Let's go to started. Add the object search feature into your view commerce website vineyard to install two free plug ins, So simply go back to the plug ins area and here you need to click on add new. Now in the search box, you need to type edge X surge For newcomers, the first plugging is a jack search for Blue Commerce by Damien Gora. Just install and activate this plug in. No, this is just a set of page, so click on a skip. All right, Now this is a short court. As you can see, over here it is inside this square record. So wherever you will place the short cord, the search box will be displayed. Include that location. Now, as we have to display the search box inside this menu area, so we need to install a plug in that will make it possible Toe based the short court into the menus area. So simply go to the plug ins, click on add new. And now we're going to install the second plug in, which is short code in many. So with the help of this plug in weaken paste that search box short court into the menu. The second plugging is by Gergen deep Singh. Just install and activate displayed in All right now. Firstly, let's go to the loo, commers. And inside it we can see abject search form. So let's click on it and we can copy that short code. So this is the short court. Let's copy it from here and now. Venue to go to the appearance and then menus because we have to add the search box into the menu area. Okay. Now, from this drop down, we need to select main menu because there are two type off menus we have created. One is for Tobar, and 2nd 1 is for main menu. Select the main menu and then hit Select button. All right, now, on the left hand side, we can see short court tab. This was not president earlier. But when we have installed the short court in many plug in, then only this is displaying over here in case it is not showing at your area. Make sure we just go at this screen options, and from here you can enable it. So let's scroll down and click on short code. Now there are two boxes. 1st 1 is for title. So leave this title box empty in this big box just pays to the short court like this click on add to menu and at the bottom the short court has been added. So this will display something like entitled Don't worry about that. Let's click on Save Menu and we can go ahead on to our home page. And let's refresh it. Here we go. So vacancy at the very top in the header area. This search box is displaying let's type of product name into this box, something like law degree. So it will search the product matching with this term. So that is the product. Let's click on it and it will open the individual product page. Okay, so this is the partner. It has searched for us in the same way. If we type something like Nike, so this product is not existing. That's why it stays no result. On the other hand, if we type mug, it displays all the products related with the mug. So let's click on the lady mug and this will open the individual page off lady mug like this. So this is how the abject search box works into the e commerce website. Now, this looks a little bit Mestre because this surge book has been sticked up the top bar. Let's go ahead and we can align it to center. Also, we had to disable discharge Aiken because there is no means to have to search boxes into a single menu. So when we integrated divorce septet into our view commerce website, I asked you to install this custom CSS and Js plugging. So here we need to add a custom CSS code. Just hover on it and you can see here add custom. CS is just click on it. So in the title box we can provide a title. Something like Edge X Search Box CS has fixed. You can give it any name here, just 40 at most. Pointer control A and delete everything. And there's a chord that we have to paste in this box. And this court has been provided to you in the video description or in the lecture description. So please go over there and copy the court from there. At last, we just need to publish and let's go ahead and weaken the fresh our home page once again. Here we go. So you can see now this search box is completely aligned with the other menu items. Let's go ahead and we can disable the starch Aiken. So in order to do that, go back to your WordPress dashboard under the appearance. Click on this customize. So I have already opened to customize into a new tab over here. Here. We need to go to this header, and then we can see many Just click on it. Now it's crawl down and vegan sea search Aiken section. So here search. I can make her just disabled from here at last publish. And then we can refresh our home page again. Here we go. With their search, Aiken has completely been removed. And now we have the objects based search box into our menu area What I can say into the header. So this will really help your customer to search the products in real time. I hope it was easy for you to understand. In case if you have any questions, please drop me a message. Thank you very much. 35. How to Create Pricing Table in WordPress: Hey guys, my name is Saddam Kasim, and once again, I am back with one of my new WordPress based a tutorial where I'm going to show you how we can create this kind of pricing table in your WordPress website with the help of a free plug-in, you can see this amazing pricing table with the different header colors. All the features are listed in a proper manner along with the pricing, the billing cycle, we also have a button over here and these are clickable buttons. So this kind of table can be easily created with the help of a free plug-in. Along with that, we will also be creating this kind of pricing table where all the features will be listed on the left-hand side and the Values, Prices, pricing buttons, everything will be listed in right columns with the hover effect. So this type of table can be created with the help of a premium plugin. And this kind of basic table can be created with the help of a free plug-in. So without wasting much time, let's get started. Now we are going to install a free plug-in. So simply who are on the plugins and then click on add new in the search box, we can type pricing table. Now the very first plugin is pricing table by subsists trick. This plugin has more than 200 positive reviews and more than 40 thousand active installations. It is a free plugin and that is really amazing for creating a pricing table without paying anything. So let's install and activate this plug-in. Now on the left-hand side we can see pricing table by subsisting, hover on it and then click on add new table. This is the interface from where we'll start creating our pricing table. In the table name box, we can give it a name, just like pricing table, where you can give it any name. This is just for your reference. Now here we have several predefined templates that you can choose from. Few of them are free of cost like these. All are the free templates that you can simply click on Select and they will be imported and rest are premium. So we do not need to use the premium one. Let's go ahead and we're going to import this template. So click on this button and then click on save. Now the page will reload and a complete table has been imported. You can see a beautiful table has been imported. Now you can edit the text prices or even you can also set a custom link to these buttons. So in order to edit any of these table content, just click on that area and you will be seeing this cursor. So let's say we can delete it and we can put over here 19 bucks. In the same way, we can change this billing cycle text, just click on it and Reagan type something like like this. That's super easy to edit any content in this table. In the same way, we can also change the title of this first table. So let's say we can type over here basic plan if you would like to increase the font size. Firstly, you need to select that text. And now we can select the font size from here. So this is how the title font size can be increased. Now let's jump onto the content area. So here we have several rows available in which all the features are listed out. Now let's edit this row so we can simply click on it. Then with the help of keyboard, you can delete the text and we can type something like 500 domains in order to add a new row just below it, we have this arrow. So you can see arrow and then plus just click on it. And here you go, you can see a new row has been added. We can edit this entire row as per our requirements. So we can simply select the entire text and began type over here something like free tech support. Whatever the text you would like to display over here, you can simply type in it's specific cell. Now let's click on this button and we can set a custom link. So firstly, click on this button, and here you have this link icon, just click on it, and then you can provide your custom link over here. Let's say I'm typing over here. Like this. Here we have the attributes open link in new window or add nofollow attribute. So that's up to you. Once you are done, click on outside area and the link has properly been setup. To double-check. Just click on this button again, click on the link and check if your domain exist or not. So that's okay. In the same way, you can also edit the other remaining tables or I can say the columns. And once you are done, then scroll up. And here we have the save button. You can see at the very top there is a short code. Just click on it and right-click and copy this short code. So this is a short code that we need to paste on to a specific page in order to display this pricing table. So let's go onto the pages. I'm going to add a new page. So right now I'm using the Divi Theme, let's say home. And we can use the divi builder. Let's take a row and here we can search for code. If you're using elemental, you will be finding the short code widget so you can use the shortcut visit in the Divi theme code widget works properly in order to paste the short quotes. So let's paste it over here and then save. Now I'm going to save this page. And let's exit with the visual builder. Here you go. So this is how the pricing table looks like onto the front page. And once I click on this sign-up button, you can see in the new tab that is opening my own website. So this is how you can create a column-based pricing table with the help of a free plug-in. Now let's jump onto this step two, where we'll be creating a pricing table, something similar to this, where will be having the features on the left-hand side. And in the remaining columns, we can insert the values or the availability of those features. To create such kind of pricing table, we need to buy this premium plugin, that is AIR prize. If you go on to the code cannon website, the price of this plugin is $27, but I can help you to get this plugin for just $10. So you can simply open a website that is WB is crashed.com. And here in the search box you can type AR price. So this is the same plugin that you can get for just $10 and you will get one year of free updates. These people also have a great membership plan that can help you to download unlimited themes and plug-ins for around $2939 a month. So you can simply click on this Add to Cart and download this plugin. I have already bought this plugin. So let's go back to our WordPress Dashboard. Now go to the plugins, then click on add new. And here at the very top we have upload plug-in button. Let's click on it. Click on browse, because when you buy the plugin from WB is scratched, the plug-in will be available in dot zip format. So that is the plug-in AR prize table. Let's open it and we can install and activate this plugin. So the plugin has successfully been activated. And on the left-hand side we can see a new menu, AIR price. Let's click on this AIR price menu. The skip this tour. Here you will be finding two options. Select the pricing, that is, choose your design, or you can install free samples. Three sample means, these are some premade tables that are gonna directly click and import them and those tables will easily be added on any of the pages. But I suggest you to go ahead with this selected template, but nowhere here. Now these are some pre-designed tables. So you can check the design. I suggest you to go ahead with this design. It held the features listed on the left-hand side and all these features values are listed on the right columns. So you can simply click on this select Eigen. Now wait for a couple of seconds. And the complete table has been imported. You can see how easy it is. Now in order to edit any of the text or any of the prize or any of the feature or any of the features value, you just need to mouseover on that particular cell, then you will be seeing this vertical bar. So here you can see this one descriptions setting. Just click on it and this pop-up comes up. So from here you can change the text, Let's say email accounts, and then click on okay, that's pretty simple. In order to edit this price, just mouseover, then click on this icon and you can change the price. There are some kind of CSS classes also used. So you just need to change the value, let's say 28, and then hit OK in order to change the column color, firstly, you need to mouseover on this heading, and then you will be seeing this horizontal bar. So this is the icon which is used to change the background color. So here you can see Header colored, pricing, Color, button color. There are so many predefined colors, you can change any color. Just click on this color and you will be seeing this color palette. So let me show you how easily it can be changed. You can see the color of the bronze is completely been changing. So this is how you can change the header color as well. I am not changing it right now. So let's click outside in order to add a new row. Firstly, you need to mouseover on it. And then on the left-hand side you can see this plus just click on it and a new row will be added. Now we can again go ahead and add a new content. So click on this description and type here something like. And then, okay, in order to set the link on this button, just mouseover on it. And again you have this button link, click on this icon. Now scroll up. This is the box where we can type the button link. So firstly, let's remove it and we can type here something like HTTPS colon slash slash. You can pass any link over here, but make sure to include the HTTP or HTTPS protocol. Now at the bottom we have several more options like hide default button, open link in new tab, open a new window, and no follower link. So that's up to you. Let's click on this, okay, in the same way, you can edit other columns as well. And then here we have this Save icon, just click on it and this table will be saved. Remember this is 100% responsive table, so it works perfectly on all the devices. Now, to display this table onto a web page, again, you can go back onto this AIR price menu. Now here you can see this short code. Just click on it and the short code has been copied. Now go back onto the pages. Again, we can edit the homepage. So let's click on edit with dV. Now let's scroll down and we can take a new row. So I'm clicking on this plus icon to take a new section. And here we can die for cold. So that is the code widget. And we can paste to the short code in this code widget. At last click on Save, okay, and then save. Now let's exit from this Visual Builder. Alright, so this is the symbol table. And at the bottom we have created this amazing four columns table where all the features are listed on the left-hand side and the values of those features are listed in right columns. So this is how you can create these type of pricing tables on your business website in order to sell any of your services, products, or any of the things that you would like. I hope the video tutorial was easy for you to understand on how to create pricing table in your WordPress website in case if you have any question, just drop your comments and please like this video and subscribe my channel for future updates. Thank you very much. 36. How to Enable SMS Notifications on New Orders: Hey guys, in this lecture, I'm going to teach you how we can integrate the SMS notifications into your Woo Commerce powered WordPress website so that when someone places an order on your website, they will get an SMS directly onto their mobile phone. And trust me, acinus notification really helps you to boost e-commerce sales as this feature generate trust about your business in customers mind. Hence, they come back to your website again and again to buy the products. So let's get started. There are just two simple steps to integrate SMS notifications into your e-commerce website. Number one, just like you recharge your mobile phone to send SMS to your friends, colleagues, et cetera. In the same way, you need to sign up with a SMS gateway provider and get credits from them to send SMS notifications to your customer's. Number two, to integrate the SMS gateway into your e-commerce website, VD to get an SMS plugin that can help you to synchronize data between SMS service provider and your website. So firstly, let's go ahead and we get the SMS plugin. So this is the MOOC, Homer's website. We are, we are going to integrate the SMS notification. So let's go ahead and we can open a website, WB is scratched.com from where we can get the SMS plugin. Now in the search box, we need to type text local, that's all one word. It automatically search over here in case if this takes time in loading and loading, then just hit enter. And this is the plugin that we are going to integrate into our website. It just cost $12. So just go to Add to Cart. And then by this plugin, and this plugin can be used on multiple websites. So don't worry, like it is not limited for just one website. You can use it on any number of websites. I have already bought this plugin, so I'm not willing to buy it right now. Now let's go ahead and weekend, install this plugin into our Voc Omar's website. So this is my backend panel. Now we can go to the upload plug-in, choose file, and we can upload that plugin into our website. Now after activating this plug-in here, we can see a new option. Sms notifications will just hover on it and then click on SMS notifications. Ok, now this asks you for the API key. So it's time to get the API key. Again, we need to simply go on to the new tab and then open a website that is text Local.com. So this is the global website of texts local, that is basically a SMS provider company and the services really great now as I am from India, so I can select India. So you can choose the option as per your location. So let's click on India. Now they open the website texts local dot-dot-dot. And I think that is the Indian version of their website. We just need to click on this signup and then we can create a new account which is 100% free of cost. And they provide ten test SNS credits. So we can directly test it onto our website. So here you can enter your email address and then just click on create a free account. All rights. So they have sent me a verification email. Just open your inbox and then you need to click on the verification link. So here I have got an e-mail from them. Let us click on this. Activate. Here we go. So we can see this is the dashboard of our texts local account. Now we need to provide our name, company name, rest of the details. So you can just go ahead and just fill up all these details. And like You can provide the address over here. Okay, times owners find, or you can change it as per your location. Now here you need to enter your mobile phone numbers so that they will send a verification code in order to verify your mobile phone. This is just to stop the spamming. So let's type a phone number over here. Alright, sirna verification code. And I need to check my phone. So this is what I have received one time password for activating your text login account. Sure, it is case-sensitive. All right. Now here we can create a password, then check this check box, and then activate my account. Alright, now just close this popup. It is really not needed. Now go to the settings and here you can find API keys, just click on it. Now at the very top of weekend, see ten credits are available just for testing purpose. So here we need to click on create new key. Now let us call down key both of these boxes empty. Don't put anything over there, and then click on save new key. All right, so this is the API key and just copy it from here. And now go back to your WordPress dashboard. And here we need to paste that API key. So let's paste it over here. Okay, now once you enter the API key, just scroll down and click on save changes. Now we can see here the sender ID is activated, so you don't need to do anything with that. Make sure do not enable these checkboxes. Otherwise, the notifications will be disabled. In this box, you can provide your primary admin number, so that could be your mobile phone number. Now make sure to include your country code just before your mobile phone number. Like as I'm from India, so I have inserted a plus 91. So if you are from the United States, you can simply insert plus one. Now let us call down. Now here we need to select on what actions the SMS notifications will be sent to. So I suggest you to select processing and completed. So when someone places an order, then he will receive by SMS notification as well as once you complete the order, then the SMS notifications will be sent to. Now here we have 13 boxes. We are, we can provide the custom messages. So this box is for the orders which are under holds status. Here we have complete status Boston processing. Now just below eight, you can see this variables. So if you insert these variables in this box, it will automatically fetch the order number or the customer details from the billing form as well as from the Woo Commerce database. So let's say we can type here, hello. And then we have billing firstname. This is the variable, just copy it from here and paste it in this box. So that will automatically fetch the customer name from the billing form. Coma. Thanks for shopping with us. Your order number. And then we have the order number variable has been completed. Good luck. Make sure it only supports 160 characters, so do not make long messages over here. Now let's copy it from here, and we can paste it inside this processing box. And here we can type something like, thanks for shopping with us. Your order number is under process. Okay, now let's just scroll down. Leave all these four boxes empty and then click on save changes. So that's all we have to do in setting up the SMS plugin into your WordPress website. Now it's time to test to the SMS notifications on our phone. So I have a demo website. Now let's place order of this product. And we can click on Add to Cart view card. Now this is the checkout page where I have already filled all my details and that is my phone number. I mean, the mobile phone number. Now let's click on Place Order. Ok. Now I'm going to show you onto my mobile phone whether I have received the message or not. So here we can see onto a mobile screen if the TLT ESD, and this is what I have received health Saddam, thanks for shopping with us. Your order number 476 years under process. And here also we can see on the screen that is the order of number four 76, and the name I have entered as a customer was Saddam. You can see the firstname has been fetched. So this is how you can integrate the SMS notifications into your MOOC, Homer's website. Thank you very much. 37. Learn how to Set up Extra Product Options: in this lecture, I'm gonna show you how exactly you can add an extra bit of option with your existing e commerce. Perhaps something like this birthday cake, as we can see over here, we have two extra fields Birthday boy. So anyone can enter the name over here something like Armand off. Whatever the name you would like to enter in this box that will be sent to the admin off this website. Even the customer can also select a custom delivery date from here. So these are two extra fields which are not provided by the vou commerce natively. So in this lecture, I'm gonna show you how exactly you can add more fields into your e commerce website. As for your need, So let's get it started again. We can accomplish this task by using a free plug in simply, go to the plug ins and click on add new in the search box. We need to type P p o. M for Rue Commerz. The first plug in is P p o m for Vou Commerz by Najeeb Ahmad just installed and activated. This plug in once the plug in is activated under the SVU commers you will be seeing a new option B, P or M Fields. Let's click on it. So this is the settings page off this plugging from there. We can create the extra fuse for our product now to explaining the things in proper manner . I have created a new product into our website, which is a birthday cake, for that is the product. Let's click on it now. When you are selling this birthday cake, it might be possible that your customer wants a name on the cake. He wants that cake to be delivered to his loved ones as a gift, or he would like to have a specific girl every day to be selected. In such case, you can put extrapolate option for your customer toe, make his shopping experience awesome. So let's go back to the plug in settings which is under vou commerce and then PP om fears. Firstly, this is the demo field that has been created by this plugging for you. I recommend you just to go ahead, select this check box and deleted because we're going to make it from scratch. Okay, this has been deleted. The page is learning up now. OK, Now it's time to create a new group off options. So click on Add PP om my Tagro button over here, and the new page comes up in the matter Group Name Field. You can write a name for your extra protect options group something like custom options for cake. Next option is control price for display on product page. Maybe you would be charging your customer for using extra product, field and weather. The price should be displayed on the single product page or not. You can control those settings from here. I recommend you to use the third option. Show each option's price. Next is custom seizes. We really not need to implement any customs seizes over here, and the last option is apply two categories. It means. Would you like to add the extra operated options on a specific product category items or not? If yes, then you can type here this slug off that barricade, agree. Otherwise, leave it empty. We used the extra Bernard options with each individual product as per your choice. Now we need to add the extra print field. So let's click on add feel button over here if we need our customer toe, have an extra field where he can enter the birthday girl name, which he wants to help on the cake. Then we need to take this text input box where he can enter the name. Now give it a title, something like Birthday Boy or Birthday Girl named in the Place Holder. We can type something like Type A name here. Many extra fields are also here, like error Message box very can type a custom error message. You can also served the minimum and maximum length off input characters for the name. There is also feel probity. You can charge your customers for having a name on the cake. Just entered the price into it. Or leave it empathy for free. If it is mandatory for your customer to fill the name in the extra field, then check this required option. Otherwise, leave it as it is at last. Click on add Feel Burton. Now let's go ahead, and we can add a date field for the customer so he can select like on what date He would like this cake to be delivered. So here we need to use the date input field. Let's click on it in this box. You can just give the title, for example, like delivery date. If you would like to put anything into the placeholder, just type it over here. Otherwise leave it empty. It is really not mandatory at all. From here, you can select the former off the calendar, so that's completely up to you. I'm in India and this is my Indian date for mate. DD Mm bye bye. If you would like to disable the V Cairns, you can select this option. Otherwise, leave it empty and in the same way. If you would like to make this feel mandatory, check this required option. Otherwise, Gebert inject and then after weekend click on add field. So these other two options that we have added Now it's timeto click on the stay fields so the baby will lord up and now click on existing product matter. So we have created the extrapolate adoptions. Now it's time to air these extra options with the product. So here you can see that did the custom options for cake might a group name, and just next to it we can see attached to product. So let's click on Pashto products so whatever the productive evil select from this pop up, this form will be displayed with each off those products. So here I have a birthday cake. Let's click on add scroll down and then save. So let's click on, OK, this is the shop page. Let's scroll down to cake and we can click on it. All right, so here we can see along with this product details. We have these two fields Birthday Boy or Bournigal name. So we can type here something like I'm just driving here my own name for them, Qasim. And from here we can select the delivery date. So once we click on this arrow, it opens the calendar and we can select a custom date from here like 18th of December. At last weekend, click on our to guard and these details will be sent to the admin off this website. So in this way you can add extra printed feels with your products that you have into your e commerce website. This option is really helpful when you are selling a product with Newt. Some extra options like this cake. This is really a great example, because most of the time customer would be needing toe have a custom delivery date for this birthday cake. I hope it was easy for you to understand. Thank you very much. 38. Learn how to Customize the Product page: Hey, guys, in this video, I'm going to show you how we can make a custom product page with the help off elemental, pro plugging in blue commerce. So let me show you what exactly we're going to make today so that you can take the season whether this video is going to be helpful or not. So we're going to create a custom product page something similar to this one, or you can design almost any type of product page, whatever the thoughts you have in your mind. And this is really super easy for those who really don't know how to deal with, according in WordPress, or, if you are a beginner than this, video is going to be helpful. So let's get started now. We need to have this elemental pro plug in, which costs around $49 a year, and it is off course, a huge price for those who really have a very tight budget. So I came into you to go ahead with WP scratch dot com. Here you can search for L. A mentor. Here we go for the last one is elemental, pro plugging. It just costs around $4.99 which is equivalent to around $5 you will get one year free update as well. The only difference is that you will not get the license key, but that's OK because you will get free updates. And that is enough to use this plugging onto your website. And it is 100% exactly the same blogging that has been sold on to this website, so we need to buy the plug in from here first. So let's go ahead at two card and then you can buy this plugging I have already bought. So let's go to the WordPress dashboard. All right, so this is my WordPress dashboard and I'm under installed Plug in section. Make sure that you must have installed the element of free plugging because elemental pro only works when you have already activated this free version of elementary. If you don't know how to do that, simply go to this. Our new in the search plug ins, you need to type L a mentor, and this is the free Worsen. It is already installed and activated. That's why this showing me this update now, Burton, because there's a new update released, but I haven't updated yet, so you need to install the three words in and then after the element of pro that we have bought, we just need to upload it. So let's click on upload, plug in, and then go to the choose file and we can install this plug in onto our website. Now, Remember one thing before uploading this plugging onto your website that when you will buy this plug in from the WPS scratch or any website, then you will be getting this type of zip file. So you need to extract this file in order to get this folder. Now let's open this folder. And here we confined to separate zip files. This is elemental and this is element a pro. So this one is the three words in which we have already installed from the divorce press directory. So we don't need to install it. But this is the pro version that we need to upload into our website and we knew it. Install it. So let's go back to our website and here we can click on choose file. Okay, so this is the folder. This one is the plug in that you need to install. Let's hope in it and then install now. Now let's activate. Displayed in. All right. The plugging has been activated. Both L a mentor and element reproach is active now. Under this template Stab, we can see Team Builder. Just click on it. All right, so here we can see single product up. Let's click on it. Now you need to click on our new single product button, and here can give it a name, for example, like clogs. So this is just for your reference knowledge's click on Create Template. Okay, so here you can find out four or five different type off redesign Templars that you can directly insert by just clicking on the insert. Burton. And this is only available to the people who have installed the element of pro version. So let's close it, because we're going to make a complete custom product template from scratch Now, first of all, we need to click on this plus, and we can take a road. We can take this second rope, which is divided into two columns. Now, in the first column, we can take the product image, so let's click on plus and on the left hand side, we can see all the digits which are filtered for the product. So here we have the option product images, just a dragon drop. All right, So perfect image will be appearing on the left hand side. Now in the writer Inside Weaken, drag few more elements like product title or price rating at two guard Burton. So let's click on this plus and then we have the elements again. Let's drag and drop Project title. Now click on this great Aiken and meaning to Dragon dropped few more elements, like credit ratings. And then, after a weakened dragon drop product price and it last, we can add the guard Burton. So here is there to guard Burton now. We have a lot of a space at the bottom area off these elements, so let's align all these elements to the vertically center. So here you need to click on this column setting Aiken. Now you will be seeing the settings for this column. So here you can find out vertical line. This is default now. Set it to middle so all the elements will air just themselves. As for the height off this entire section now, let's add some static content just below it. And then after we will display some related products so again we can take a neuro. OK, now, in this role, we can put a banner image. So let's click on this plus and on the left hand side, we can search for image budget. So here's the image budget. Remember, this will be the static image that we will be displaying onto the cloths category. Okay, so this is the image of Edgerton Darst, a placeholder. Now let's go into the left hand side and we can change this image. So here it is. This is the big banner that we're going to use. Let's click on insert Media and this will be displaying here. Now, let's add a neuro and we can take the 2nd 1 So in the half portion weaken, display some default or dummy text, and in the heart portion, recon display a new image. So let's add some text in this one. So here we can search for extra widget. Here it is. Text editor. Okay, I have corporate. Some Lauren with some text alerts, copy and paste. Okay. And in the remaining half portion, we can add a new image. So again we can search for image. Here it is. And now let's said a new ban over here, this one. All right now let's middle district. So again, go to this column setting and under this vertical align said it to middle. Here we go. Now let's publish. Okay, it ask you toe are the conditions. So let's click on add condition. This is include, so right now it is applied to all the products here. We can specify it to a specific category, So let's select in category and then you can select a care degree on which you would like to apply this custom damn plate. And this is really a very cool feature about elemental pro plug in. So here we can search for plots. Okay, Now let's select this one and then save and close, so this will be saved permanently. And this specific custom template will only be applied to all the products which are existing inside the clots category. Now, let's go to the cloth, scared, agree, and we can choose this product. All right, so here we can see this is how it looks like and let us stroll down. So this is the banner that we have placed and this is the and other section. So in this way you can put any content, any StarTac or dynamic textile element over here. And this is how it exactly work In case if you have any question, just drop me a message and do not forget to buy the element of pro plug in from WP scratch . You can get a huge discount. Thank you very much. 39. WooCommerce Emails Not Sending? Here's a Quick Fix: This is a very common problem with Woo Commerce. That email notification stop working sometime and you try all sorts of efforts, but can't figure out the issue. In this video, I will show you a quick solution on how to fix the email notification issue in Woo Commerce. My name is Christina and I am from Saddam's team. And today we are going to use a free method that hardly takes five minutes for you to enable the Woo Commerce email notifications again, following other steps that you should follow to figure out the Woo Commerce email notifications issue. Solution number one, double-check if you have enabled the email notifications under Woo Commerce Settings page, simply mouse hover on the Woo Commerce menu and click on the Settings sub-menu. Now go to the emails tab, and then for each of the email notifications types hit the Manage button one by one and check here. If the email notification is enabled. Also makes sure to double-check your recipient's email is correct. The same process you need to repeat with other email trigger options. Solution number two, this is a 100% working fix. Go to the plugins and then hit the Add New Menu, search for a free plug-in named Wu commerce sent in blue newsletter subscription, install the plug-in with the author's name. Send in blue. Activate this plug-in. Now, we need to create a free account on send in blue.com. The link has been provided in the video description. Send in blue is basically an email marketing tool that can help your default Woo Commerce emails to be delivered to your customers and to the admin. This is really a wonderful tool for sending marketing emails to your customers. By default, Woo Commerce emails route through your native web hosting server. But here we will be routing the Woo Commerce emails through send in blue email marketing server. At the top right corner, hit the sign-up Free button, fill up this form or sign up with your existing Gmail account. After a successful signup, you need to verify your email address. So check your inbox and complete the verification process. Now, after logging into your scent and blue account, at the top right corner, you will be seeing you're registered name. Click on it, and then go on to the SMTP and API menu. Copy this API key from here, and go back to your WordPress Dashboard. Under the Woo Commerce, go to the Settings menu and click on the Send in blue tab, paste the API key and validate the plug-in. Now, go to the e-mail options link. Make sure the enable send in blue to send Woo Commerce emails checkbox is selected. In next step, you can check which email notifications would you like to enable through send in blue plug-in, leave the last templates option selected to Woo Commerce. That's it. Save changes and you are all done. This will enable the send in blue server to send Woo Commerce emails. And the issue of Woo Commerce email notification has been successfully fixed. Place a test order on your website and check if you are receiving the notification email or not. With sending blue, you can also send 300 marketing emails daily to your customers. It's cool. Do you have any other solution? Please share in the comments section. Thank you.