How to Make an eCommerce Website in WordPress | Full eCommerce Tutorial | Md Zaman | Skillshare

Playback Speed


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

How to Make an eCommerce Website in WordPress | Full eCommerce Tutorial

teacher avatar Md Zaman, WordPress 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

24 Lessons (3h 7m)
    • 1. 01 Intro

      5:27
    • 2. 02 Domain Name and Web Hosting

      0:59
    • 3. 03 Preferred Web Hosting and its Features

      4:01
    • 4. 04 Login in Web Hosting and WordPress Installation

      7:19
    • 5. 05 WordPress Introduction Menus and Settings

      7:49
    • 6. 06 Themes Getting & Installing a Premium theme (1)

      2:50
    • 7. 07 Plugins Installing theme plugin & Additional Plugins

      1:14
    • 8. 08a WooCommerce Quick Setup

      2:08
    • 9. 08b WooCommerce Settings General and Products

      2:56
    • 10. 08c WooCommerce Settings Taxes

      2:50
    • 11. 08d WooCommerce Settings Shipping

      7:35
    • 12. 08e WooCommerce Settings Payment

      3:21
    • 13. 08f WooCommerce Settings Acc Privacy, Email, Integration & Advanced

      1:41
    • 14. 09 Product Uploading

      23:49
    • 15. 10 Homepage Creating and assigning

      2:17
    • 16. 11a Designing Homepage with Elementor Intro and Importing Slider

      6:20
    • 17. 11b Designing Homepage body with Elementor

      30:27
    • 18. 11c Importing About & Contact Pages in Elementor

      14:30
    • 19. 12 Making Track Order Wishlist & Compare Page with Shortcode

      2:59
    • 20. 15 Creating Menus

      4:12
    • 21. 16 Footer Setting Up Widgets

      6:18
    • 22. 17 Adding Cutom Header and Logo

      5:50
    • 23. 18 Theme Customisation

      32:41
    • 24. 19 Final

      7:37
  • --
  • 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.

42

Students

--

Projects

About This Class

In this step-by-step WordPress course, we will learn how to make an eCommerce store. I have made this course keeping beginners in mind. So, even if you are a complete beginner, I assure you that you will be able to keep up with the course effortlessly.

You don't need any coding knowledge, and we will be designing our entire website using drag and drop.

After you have completed this course, you can make your own grocery store or any eCommerce website.

We will learn about all the important settings, plugins, themes, functions that are to become an independent web designer by the end of this course.

Here is a summary of all the points that I have covered in this course:

Here are a few things that have I have covered in this course

  • What is a Domain Name & a Web Hosting
  • Where and How can you get a reliable web hosting
  • How to Connect Domain with the web hosting
  • How to Login to WordPress website
  • What is a WordPress theme, and how to install them
  • What is a WordPress Plugin, and how to install them
  • Setting up WooCommerce Store
  • Setting up Taxes
  • Setting up Shipping (Delivery fee)
  • Creating a page
  • Downloading copyright-free images from the internet
  • Editing and customising the images for your website to make it load faster
  • How to upload different types of products
  • Using Elementor to design your website
  • Customising your Website for Mobile & Tab View
  • Creating Coupon Code

and many more

Meet Your Teacher

Teacher Profile Image

Md Zaman

WordPress Developer

Teacher

Hello, I'm Md Zaman.
I've graduated from Techno India, Salt Lake, with a Bachelor in Computer Applications, and I left my job to start my own business.
I believe in entrepreneurship and help people achieve it by assisting in the field I'm good at.
I've over ten years of experience in web designing, and I was asked to design my school website after I won first prize in two inter-school web designing competitions at 16.
I love teaching what I know, and I keep my tutorials as simple as possible by being uncomplicated, avoiding jargon, and only teaching things when required to keep up the focus.
Lastly, I love connecting with people. So, if you've any doubt, please don't hesitate to catch up!
See you 'round and happy upskilling!

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. 01 Intro: Hi guys, My name is Muhammad semen, and in this video tutorial, we will learn how to make an amazing and beautiful e-commerce website using WordPress and premium WordPress theme, Woodmont, this website is going to be absolutely step-by-step and you do not need to have any coding knowledge whatsoever. Everything is going to be drag-and-drop. So let's just say you want to change this image over here. All you have to do is click on Edit with Elementor. And this option is going to be available in all the pages of your website. And the edit with Elementor option is going to bring you to this page. Now, all you have to do is select that element which you have to change and go to this section since we want to change an image. So we'll click on Image and choose another image from the Media Gallery which we have over here. So currently this image is selected, and now we will change this image to this one. Now click on insert media and this image is going to get changed. Let's say we want to change this text also. So we'll go to Text. And let's just say instead of summer, I'm going to write winter. Alright, so our text has been changed and it is this easy. So let's get back to a website. So a customer can come to a website and search for a product and type like this. And even before he completes his spelling, the product is going to appear like this in the dropdown, so he can select the product and he'll get to see the product details in a single product page. I have not used that drop-down option of selecting colors and size. Instead, I've used these color swatches and size searches, and this makes it look even more beautiful. We will learn how we can add these beautiful swatches. And you will also learn how we can add these brand logos in front of our products. And if you scroll down further, you'd also find this about brand tab, apart from all other tabs that we have available over here, if you click on this about brand tab, it is going to provide you some details about the brand. And it is also going to display few products which belongs to this brand. I'm going to teach you each and everything in detail. And let me also show you the shop page. In our shop page, you have a really beautiful title bar over here. And in this title bar, we had these categories over here. You can add these categories on your title bump along with these beautiful Huygens in front of your categories, which makes it look really professional. A customer can come to your shop page and either a filter your products based on categories, or you can filter by price, or you can select the products that he wants. Over here. A customer can also hover over a product and add the product to the wishlist. I can compare between two different products. I can take a quick read from here. If he's going to select quick view, this pop-up is going to appeal. And over here also he'll get the option of selecting two different colors using the color swatches. Let us close this. And a customer can also add this product directly to this card by clicking on the card option. So customer is going to be asked between two different colors. Let's select red and let us add it to the cart now. And whenever a customer is going to select on Add to cart, the cart page will appear from the right-hand side, which is going to notify that a product has been added. Let us close this thing. And there are many more amazing features of this website. So let us go to a homepage and let us find out what all things are we going to learn in this course. So first of all, we have got this top bar, and in the top bar we have got some social icons on the left-hand side and on the right-hand side we have gone some important links. And the very next line of our header, we have got a logo and have our menus followed by Maya count, the search bar. You have already seen how this works, the wishlist option and the cart icon, and then comes a webpage. So first of all, we have this beautiful header. I'm going to teach you how you can import these kind of beautiful headers and you can customize these headers and use it in your own website. Furthermore, if you'd scroll down, we have got these beautiful banners. I'm not only going to teach you how you can add banners like this, but I'm also going to provide you all these images which you can add a news in your website. If you scroll down further, we had this featured category section. I'm going to teach you how you can add these kind of professional layouts for your categories and how you can display these categories beautifully. And now if you'd scroll down, we have featured products are featured products are divided into two tabs, Riemann collection and men collection. I'm going to teach you how you can add tags like these and add filters to them. I'm going to teach you how you can display all these products over here in different tabs. And a next section is very special one, we have this beautiful image hotspot. And whenever you hover over this hotspots, the products appears. So whenever you hover over the top, the top appears. And whenever you hover over these genes, the genes image will appear. The genes product will appear. And on the right-hand side we have displayed a product. Furthermore, if you scroll down, we have some latest post, and then we have a video. You can add your promo video over here and add this kind of thumbnail. Let's play this video. Alright, so this is how you can pause it. And let us scroll down at the bottom of the page and at the bottom of our page, we have got a footer afoot is divided into five different columns. In the first column we have written something about the company and have provided some contact details. In the next column we had some recent posts, and in the remaining column we have provided few links. And at the very bottom of our page we have this copyright text followed by some payment method which we accept on a website. There are many more features about this website which you're going to learn in this course. Syllabus start making this website. 2. 02 Domain Name and Web Hosting: So irrespective of what kind of website you want to make, you need two basic things, a domain name and web hosting. A domain name is simply the name of the website and it could be anything. It could be Google.com, Muhammad's Oman.com. It could be Facebook.com, anything. And a Weber hosting in simple words, is a powerful computer, a server which keeps all your files used in your website. It has a lot of storage and a lot of RAM, which keeps it very fast. This server is on day and night so that anyone around the world can open your website at any given time. Web hosting plays a very important role for the website speed, performance and ranking your website on top of Google search results. A good web hosting will ensure better speed, better performance, and better security of your website and have bad web hosting. Trust me, is capable of giving you nightmares. But let's not go there. I have a good solution for web postings. 3. 03 Preferred Web Hosting and its Features: I have a good solution for web postings. You can open a new tab and go to MDs among.com slash AFC M. This link is given in the video description, so you do not have to type in the website that you'll come to is going to be fast comment.com. And over here we have three blends. Fast Cloud, fast Cloud plus, and fast Cloud extra. The basic difference between this plan and these two plans is this plan offers only one website, but you can upload unlimited number of website in these two plans. Now if you scroll further, you'd see all the important features that they are providing endeavor boosting. So first of all, we have got cPanel and soft calculus, which will allow us to install WordPress very easily. And then we have got daily backups. So if something happens to our website, we always have a daily backup and we can always revert a website to a previous version. Then they had offering freak CDN. Cdn actually stands for content delivery network. This feature will not only make your website very fast, but it will also secure your website. And they're offering SSL certificate for all your domains. And it is very important to have SSL certificate for the websites who want to accept payment these days for the service security, they are using bitten ninja, which is an awesome solution. Then you get three website transfer. If you have your website elsewhere, you can bring it too fast comment and you can ask them to transfer your website for free. I will show you how to do this. There are other features of this upset as well. Like if you'd come over here, you'd find that they are providing SSD storage that too, with raid 10 configuration, most of the website hosting companies provide HD DSpace, which is very slow, but they are providing SSD storage. Having written configuration, which is around ten to 15 times faster than your HDD storage. You do not have to worry about the storage that they are providing because 25 GB is more than enough, even 15 GB is more than enough. The website that we are going to design is not going to take more than two hundred and three hundred mb. And even if you increase the product to maybe hundreds or thousands, it is not going to take more than 600 MB. So you do not have to worry about that. And there are other features of this website as well. They're telling you about the CPU cores available for different plans and the availability of the RAN that they will be providing in different plans. There are very few web hosting companies which are going to tell you this and this is why it makes them very reliable. There are lots of other features as well. You can read as many as you want. But we're not going to cover all of them. So we are going to get started with the fast Cloud plus plan. And you'd come to this page over here. If you do not already have a domain name, you can register, like Eigen register a domain name by word pairs. And next to this box you'll also find this extension button. And you can choose from different extensions that are available over here. The most popular ones are these ones. And then we have the domain name which are on sale. You'll get them in a very reasonable price. There are other domains extensions as well, but I would recommend you to go for.com. Now I'm going to close this and go with this one. So click on Use this domain. And in this page you'd have to fill your FirstName, lastname, email address, and master password. Just make sure that you get a piece of paper and write down your email address and master password so that you do not forget it. You can fill in all the details. Just make sure that your plan is getting displayed over here. And further datacenter, just make sure that you are selecting the datacenter which is nearest to you. They have quite a lot of datacenters around the world. So you can select the one which is closest to you. For the period I would recommend you to go with 12-month at least over here, they will try to upsell you something. I do not recommend them. But if you want to buy something, you can get this one, domain privacy and scroll down and you can enter your card details over here and click on I confirm with the terms and click on Complete order. 4. 04 Login in Web Hosting and WordPress Installation: And as soon as you are done with the payment, you can open a new tab and go to my dot fast comment.com and click on Enter. You'll come to this website. You'll have to enter your email address and password. I'm going to make them remember me and click on Login. So this is the fast common dashboard. And if you scroll down and you'd find all the details with which you have registered over here. If you have your website elsewhere and if you want to transfer it over here, you can just crawl up and click on submit tickets. You would find a lot of departments over you. If you wanted to transfer your website, you can click over here. And let's just say you are not able to understand in which department main problem falls. You can simply click on general support and ask them whatever you want. My elastic, it was resolved in two minutes, should be rest assured they're very helpful. Now come back to our homepage and scroll down. Okay, Now you can be in two scenarios. If you have come this far, in the first scenario, you would have registered your domain name from fast comet itself. And in this case, you do not have to do anything. And in the second scenario, you may have registered your domain name from elsewhere, like godaddy.com, named cheap.com, or from some other website. So if you have registered your domain name from elsewhere, you have to open a new tab and go to the domain registrar. From there you have registered your domain name. I registered my domain name from GoDaddy.com. So I'm going to give you an example of how it works. Make sure that you're signed in. Just click on it then, and click on my products. Let's say you want to use this domain name on fast comment. So just click on this three dots and go to manage DNS. Scroll down at the bottom and you'd find name servers. Now, irrespective from there you have registered your domain name from you just have to find name servers over there. Okay. And you would be getting an e-mail from fast comment, a welcoming e-mail from fast common, in which you'd get all the details that you need. And in this detail, you'd also find the name servers. So we have names server-1 and names over 2. Now let us get back. And over here, just click on Change. Scroll down, and you'd find into my own name servers, click on it. And over here also you'd find names server-1 and NIM server to just go to First Name Server. Come back over here. Now if you're not able to find this e-mail, I will also show you a movie from there. You can get these details. So first of all, I'm going to copy the name server one. Come back over here and I'm going to paste it. I'm going to remove this extra space from here. Good name servers to come back, copy the name server to come back and pasted. And now click on save. Give you a consent, and click on Continue. All right. In my experience, name servers not take more than a few minutes to get updated, but they can take up to 24 eyes. Now let's come to a fast commit website. And just in case if you're not able to find that welcoming e-mail and you're not getting the name servers, you can simply click on submit tickets and ask them for it. And now let's go to a cPanel. Over here. You'd find this option access cPanel. Cpanel actually stands for control panel. We're going to click on this and enter your master password. By the way, you can also go to your cPanel using this link. And you'd get the ID and password in this e-mail only. But let us not take that route and come back and enter the master password. Click on Proceed. Our IT guys for this is a fast comment cPanel dashboard. And the first thing that we have to do over here is make sure that we have SSL certificate installed on our domain name. Like in my case, I have installed my SSL certificate, and that is why this locked part over here is locked. And if you find this lock open, all you have to do is search for SSL and you'd get this option. Let's Encrypt this click on it. Scroll down and select the website on which you want to install your certificate. Click on issue. Scroll down and click on issue again. And your SSL certificate will be installed. I'm going to go back. And if you want to ensure that it has really been installed, you'd find that domain name over here in this section. Now let us go back and let me tell you what exactly an SSL certificate is. So if you'd come to a website, you'd find this lock in the address bar. If you click on this lock, you'd find that it's written, connection is secure. Now it is compulsory to have an SSL certificate on our website if you are accepting payments from customers. And now we have it installed. The next thing we have to do over here is you have to install WordPress and to install WordPress, just search for soft oculus over here and you'd get this option, soft calculus App installer. Click on it. And you will come to this page, just click on WordPress and click on Install. Now, you'll find the latest version of Wordpress over here. And for the URL, this makes sure that HTTPS acylated and no other protocol or rate. And for the domain name, make sure you select the domain name on which you want to install your WordPress website. So I'm going to select this one tutorial dot momentum on.com. And for the indirect tree, make sure nothing is written over here. Now scroll down, we can edit the site settings literals are, so I'm going to leave it for now. Come to admin, account for the admin username. Make sure you change this username. Please don't give admin as the username already. I'm going to change it to maybe Ximen to 0 for something like this, which makes it quite difficult. And for the admin password, I'm going to type a good password for this or read something which is strong. And for the admin email address, make sure you enter an email address which you actually use. So just in case if you forget the password, you can access it from here. Alright, so I'm going to enter my, you know, my email address which I use. And then for the language I'm going to select English. And then scroll at the bottom of the page and click on Install. It is hardly going to take few seconds to install. And it is going to be installed even, even before you know it. So it is installed. And now you can access your website's Dashboard either by clicking on this link, or you can open a new tab and enter your website URL. So in our case it is tutorial dot momentum and.com, which is this one, followed by WB hyphen admin. Just like this or it, and click on Enter. And you will come to this website in which you have to enter your username and password. So I'm going to simply enter my username and password. And I'm going to check this checkbox so that I do not have to login again and again. And once you do that, you'll come to the WordPress dashboard of your website. 5. 05 WordPress Introduction Menus and Settings: This is the backend of your WordPress website. And if you wanted to find out how it looks from the front end, you can simply click on this particular link, which says My WordPress. And you'll come to the front end, are red, so let's get back. So this is our WordPress dashboard and VC that there are a lot of notifications and lot of messages over here, right? So first of all, we'll clean this, will dismiss this and click on screen options. So I'm going to simply uncheck these checkboxes. And this is going to remove all the messages from you. Click on screen options again. And as you can see, our WordPress dashboard looks much cleaner. So the next thing that I want to do now is I want to familiarize you with all these options that we have over here in the menu list. Alright, so the first option that we have over here is the dashboard. And under dashboard we have two options. The first one is home, the page in which we already are, and the next thing we have over here is updates. Here you will find all the available updates they're appending. It could be WordPress update, plug-in update or teams update. You'll get a small number right in front of this option stating how many pending updates that are available for your WordPress website. Alright, so the next thing that we have over here is post. And guys, post means blogs that feed, right? It simply means blog post. Here we can manage our post. Over here. We already have a default page which says hello world. So we can edit this post, put it in the trash or deleted. All we can view this post right in front of this post we have several columns. The first one says auto, and then we have categories, tags, and date. The date is given by default, but you can assign the tags and categories if we'll click on Edit the post already, but we're not going to do that. Let's click on Media. All the files, images, audios, videos are available over here and we can manage them from your, alright, so this was media and now let us go to pages. Pages are actually the webpages of your WordPress website. It could be homepage About Us page, contact us page. You can take some actions on these pages like edit them or put them to trash, or take a preview. Or you can also take some bulk action by clicking on a particular page and then selecting a bulk action from here. And if you click on apply, these displays will get deleted. This particular option of bulk action is there on almost all the menus that we have on our WordPress website. You can add some more pages by clicking on Add New from here. Or you can also use this option. So let's go to comments. Comments are actually those comments which we receive from our visitors. You can unapproved them or you can reply to them. You can put them to trash or delete them. Or you can also take some bulk action by selecting a particular command and selecting a bulk action from this dog down. Alright, so let us go to Appearance. This menu contains links which can be used to change the appearance of a WordPress website, the front end appearance of our website. So V are currently in the backend. We will discuss the rest of the sub menus that we have over here later. But let me explain what a WordPress theme is. A WordPress theme is a front end styling of your WordPress website. It provides fonts, colors, widgets, templates, style of blogs, etc. It is basically the overall design or styling of your WordPress website, the way your WordPress website will look. So there are free themes and premium themes available on WordPress. For this particular website, we will be using a premium theme and we have some free themes also, which are installed by default, will be removing these themes. But let me show you how teams work. If you'll go to your WordPress website for now, you'll find we have a very simple website on a page. So let's come back and let us change a team. The current theme that we are using is 2021 team. Let us activate the 2020 theme. If you click on activate and let us go back and click on Refresh. So you'll find that the entire website, the look of the website has completely changed. Alright, so this is what a theme does. It changes the look of your WordPress website or red. So this was themes. Now let us go to Plugins. Plugins assembly apps for your WordPress website. Just like when we download a mobile app, we get a new menu icon and a new feature, mobile phone. We get a new feature when we download a new plugin in WordPress, there are few default plugins available right now. We can delete these plug-ins because we do not need them. Or you can do one thing. You can leave this plugin ascii anti-spam, and you can uncheck this and keep this as checked. And from the bulk action you can delete this. Click on Apply, and this plugin will get deleted, or it will come back to plug-ins again. So let us go to users now. So we have only one user on our WordPress website. That is us. We are the admin of our page. You can also change the role of a user by clicking on add new and changing the role from you, you can add your user as a subscriber, contribute to auto over-deliver, administrator or whatever. So all right, so this was users and non-users go to settings. There are a few general settings that we have to make for a WordPress website. We did not change the site title while Viva installing wordpress. So we will change the title over here. For the site title, I'm going to make it as Woodmont. You can name your store or your business name over here. And then we have a tagline for this website. I want to give a tagline of upgrade your fashion. Something like this. Then over here we have WordPress Address, URL. So over here you just have to make sure that after HTTP you add an S over here. Similarly for the site address also, after HTTP add an s, Alright? And after you add an S, and when you click on Save Changes, you'll be logged out of your WordPress website, so you don't have to worry. Right now, our URL bar says not secure. When will be logged out of a WordPress website. And when we login again, you'll find that this status has changed and it'll say secure. But there are few more changes which we have to make, like this membership, we have to check this. Anyone can register, make sure you do this change. And then if you scroll down the date format, I want the date format to be like this. Alright? And then the time format is fine. And yeah, the time zone, I'm going to keep the Kolkata time zone because I live in Mumbai, So my time zone is Kolkata. Now, scroll down and click on save changes. And like I said, you'll be low load of a WordPress website. So you'll come back over here again. So I'm going to enter my username and my password. And I'm going to make myself from a mommy and click on Login. So we're back on our WordPress website. And now you'll find that there's a lock over here which says connection is secure. So now our SSL is up and running already. So with this, we have completed our Wordpress settings. And I don't think the rest of the things are important for now. Yes, good. Permalink. There's one more thing which we have to make sure of it, which is post name, make sure that this post name is selected for the common settings and not any other post Nim. Alright, now click on save changes. And with this, we have completed our menu overview. 6. 06 Themes Getting & Installing a Premium theme (1): And with this, we have completed our menu overview. Now what we will do is we'll install a new team. So to install a new theme, go to Appearance and click on Teams. Now, over here, if you'll click on Add New, you'd find that there are several other themes available for your WordPress website. These teams have a very limited customization option, and that is why I do not use them. There are a few good teams also. So if you're new to WordPress, you can try them. But we are going to install a premium theme. So we'll open a new tab and go to moments among.com. And then add slash, and then write Woodmont. And you'll come to this team. This has got more than 30000 sales. And apart from it being a very light theme because it uses very few plug-ins. It has an amazing feature of this header option over here. You can make your own header simply by drag-and-drop. And then we have some pre-made headers as well. I really like this header and the one that I've used in our website the most. And apart from that, it has got some amazing features. And I'm really fond of this feature. If you'll go to a website, reference upset, and if you'll take this to the mobile view, it has gotten amazing foot abaa. This vertebra is, I must say, not available in many of the premium WordPress themes. And so we'll come back and make sure you purchase this theme by selecting this Add to Cart option over here. Over here. And after you have purchased your theme, it is going to look something like this. Alright, so what we have to do is hover to this option and then go to downloads. And click on Download and click on installable WordPress file only. And your team will start getting downloaded. So we'll come back to our dashboard and then click on upload themes, click on Choose File. And we will choose the file which we have just downloaded. Just click on Open and click on Install. Now, it is not going to take a lot of time to install this thing. And as you can see, it has already been installed successfully. So click on activate and your team will be activated. As you can see, it says active Woodmont. So after you have activated this team, we do not need these teams which we have over here. So we'll simply click on them and click on, delete, click on okay. Similarly, I'm going to select this one as well. And I'm going to delete it. Click on, Okay, this one, delete, okay. And if you'll scroll up, you'll find that there are a few plugins that this theme requires in order to work. 7. 07 Plugins Installing theme plugin & Additional Plugins: And if you'll scroll up, you'll find that there are a few plugins that this theme requires in order to work. So we'll click on begin installing from here, we can either choose this option or we can go to Plugins itself. And you'll find the same option over here as well. So I'm going to click on, Begin installing plugins, and click on this option, which is going to select all the plugins that we have over here. I do not want the WP Bakery page builder because I'm going to be using the Elementor page builder. Both of these are same thing, but this one is better. In my opinion. Of course, there are people who prefer to use WP bakery. I'm going to uncheck this one and click on Install and click on Apply. Already guys, so we have finished installing all our plug-ins. Now we have to activate them. So we'll go to Plugins. And I'm again going to check this checkbox VC that there is this notification again, which is asking us to install all the plug-ins. It is still showing it because we have not activated them. So from the bulk action, just click on activate and click on, apply on it. So with this, we have activated our plug-ins as well. And now what we'll do is we'll set up a WooCommerce store. 8. 08a WooCommerce Quick Setup: And now what we'll do is we'll set up our WooCommerce two. So first of all, we'll do the quick setup. And in order to do the quick setup, we'll simply click on WooCommerce, and here we will do a quick setup. So in the address I'm going to write my address. And then for the region, I live in Maharashtra in India. So you can enter your state along with the country. For the city. I'm going to write Mumbai and my postal code. And then I'm going to click Continue. I'm not interested in sharing my nonsensitive data. So I'm going to select new tanks and they're asking in which industry does the store operator. So we operate in fashion, apparel and accessories, not health and beauty. Let's say we deal in electronics and computers and furniture and all these things. And click on Continue. You'll get this option. We mostly deal with physical goods. So I'm going to select this and click on Continue. And then over here, they're asking how many products do you plan to display? And banging the display around a 100 products? You don't have to take this seriously. You can add more than a 100 products. This is just a survey. And then currently selling elsewhere. No, I'm not setting and sphere. And here they're suggesting us to install a few plug-ins. I'm not interested in them. So I'm just simply going to disable it. And I'm going to click on Continue. And then they're asking us if you want to use a team, but we already have a team, this one. So I'm going to click on, continue with my active theme. And here they're suggesting as this jetpack plugin, this is actually a good plugin, but I do not want to use that. So I'm gonna go with no thanks. Alright guys. So a quick setup pages complete, disclose this already gates. So we have completed our quick setup page, but that is not enough. We have to do all the settings in advance, like we have to set up our taxes, we have setup our payment options, and we also have to set up our shipping charges, and that is the delivery fee. So in order to make those settings will click on settings. 9. 08b WooCommerce Settings General and Products: Alright guys, so we have completed our quick setup page, but that is not enough. We have to do all the settings in advance, like they have to set up our taxes, we have to set up our payment options, and we also have to set up our shipping charges, and that is the delivery fee. So in order to make those settings will click on Settings. And over here we'll do all the settings. Are it first of all, dismiss this notice. So we have some details already mentioned over here. This is because we have already done a quick setup. So we'll enter the rest of the details. So scroll down and you'd find general options. So for selling location, I will select a specific country and my country would be India. And for the shipping location, I'm going to select Shipped to specific countries only. Alright, so I'm going to select in the overview, if you want to add some more countries, you can select this option and click on shipped to all countries you sell two. Alright, so scroll down. And for default customer location, make sure you select geo-locate. Okay, So this is done and now come to enable taxes. If you want to enable that axis, you can simply check this checkbox and there'll be one more tab after products, okay, where you can set up the taxes. So you have upside will calculate the taxes on your products automatically. Now scroll down. Misha, you have enabled the coupons if you want to, enabled coupons on your website, and then scroll down. And then you can change your currency from here. So I want to sell in, INR, that is Indian rupees. Okay, it is not available, so I'm simply going to read the whole spelling. All right, so Indian rupees over here. Rest of the settings are fine, so simply click on save changes. And it changes have been saved. Now go to products. And you do not have to do anything over here, particularly. But you can go to Inventory. And over here you'll find this option, low stock threshold and out-of-stock threshold. So what this does is whenever there is a product which is loan stock, you can actually assign the quantity from you. You can make it two or one, or maybe three. So whenever a particular product reaches two or three, whatever you have set it over here. Whenever it reaches the low stock threshold, you'll get a notification on your email address, which will notify you that this particular product is low in stock. Similarly, you can do it for the out-of-stock threshold. If you selected one, it will automatically send you a notification on this e-mail address saying that this particular product is low on stock. And this is going to be active for all your products on your WooCommerce two, alright, so simply click on Save Changes. And your changes will be saved. Now since we have activated the taxes. So we are getting this tax tab over here earlier. It was not there. So let us come to taxes and let us set up our taxes. 10. 08c WooCommerce Settings Taxes: So let us come to taxes and let us set up our taxes. So scroll down and you'd find additional tax classes. Don't get scared with the additional tax classes named. Classes simply mean tax labs already. So we'll just make this box a little bigger. Click on Enter and you have to mention all the tax slabs that you have available in your country. Alright, so we have four tax slabs in our country. The first one is 5%, and then we have 12 percent, and then we have 18 and then 24, I think. So I'll simply enter the tax lab. So I'm going to enter GSD five for 5%, and then GST 12 for 12 percent, GST 18 for 18%. And GST, I think it is 24. I don't remember correctly. 24 for 24 percent of it. So this is done. Now click on save changes and all the tax slide that you have mentioned over here. We'll make this kind of tab over here. Alright, so we have created the 5% rate and all these rates. So we'll go to 5% first and we'll click on Insert true. So first of all, over here, I'm going to enter my country code. My country code is India. You can start writing your country's name and the country name will appear in the dropdown. So my in-country is coming over here. So I'm going to select India from you. State code is not important. All of these things are not that important, but the tax rate should be 5%. Percentages already mentioned over here. So you do not have to put percentage sign over here. And for the tax name, I'm going to write GST in my country it is GST in your country. It could be something else. It could be VAT or something or some other tanks. And make sure you disable this for shipping and click on save changes. Alright, so 5% tax rate is complete. And guys, it is this easy to set up your taxes. Similarly, I'm going to go to 12 percent rate. We'll try the same thing with 12 percent. Click on Insert row. And for the country code again, I'm going to write India. So and for the tax rate, since we're making a 12, so I'm going to write 12. And for the tax name, I'm going to write GST. If you have that in your country, make sure you add VAT rates over here, okay. I've written GST 18 rates, GSD 24, eight, and so on. Make sure you write that 24, 25 or something like that. Or it, make sure you uncheck this check box and click on save changes. Okay, so we have done 5% and 12 percent. You can do the rest by yourself. So we have completed the tax section. Now let us go to shipping. 11. 08d WooCommerce Settings Shipping: So we have completed the tax section. Now let us go to shipping already guys. So shipping is basically defining where we want to sell a product. And it is also about defining how much do we want to charge your customers to deliver the products in their location? So let us click on Add shoving Xun. And the first one we have over here is Zun name. So I'm going to name it Xun one. And then we have Xun region. So I'm going to select India over here. If I'm going to select in the overview, this would mean that I want to sell my products in the entire country. So I'm not going to do that. I want to sell my products in Maharashtra. Let's see. I also want to add one more state. So I can add a state of Gujarat. Gujarat is a neighboring state of Maharashtra, So I think I can sell my products in Goochland. And you can be as specific as you want. If want to limit your area in which you want to deliver your products based on zip code. You can try this option. And you can enter your zip code by just simply typing your zip code over here. Let's say you want to ship your products from this zip code to maybe this zip code, something like this. Okay, so you can do that also. There is a documentation over here. You can go to this documentation and read it and find it out. Different options which you can use in zip codes already. I'm not gonna do that. And let's remove Gujarat from here. Let us focus on one state only array. Then we have shipping method. So let us find out how many methods are there. First of all, we have got flat rate and then we have got free shipping, and then a local pickup. Let us go for flat rate first, click on add shipping method, and click on Edit. Now, now I want to charge a flat rate of 50 rupees to all my customers who ordered from my website. But that is a small catch up with you. If someone is going to buy one teacher, it is going to cost them 50 rupees. But if someone's going to buy, let's say ten or a 100 t-shirts, it is still going to cost them 50 rupees. So in order to solve this problem, what we can do is we can add this formula. If we click on this question mark, you'd get this formula of 10 asterix quantity. So we're simply going to add this formula space and then Asterix. And then under square bracket, I'm going to write QT way. This is a small code for quantity over here. So what this would mean if somebody's going to buy one teacher, it is going to cause them 50 rupees multiplied by one. Similarly, if someone's going to buy a 100 t-shirts or 200 t-shirt, the rate is going to get multiplied by the quantity already. So click on save changes. And now we again have a small problem over here, which is, this formula is fine with T-Shirts or genes, something like those things which are lightweight ID, but what will happen if someone buys a refrigerator or washing machine or something very big. So what we can do in that case is we can define a shipping class, click on shipping class, and add a shipping class. And we will make a shipping class by the large products. Alright, products. Click on Save shipping classes. And now let us go back to shipping zones. Click on Edit the Zune one. And we'll come back over here. So if I click on Edit the flat rate, now you'll get two sections. And for the large products shipping class cost, we're going to add a shipping cost of 100 rupees to deliver the product. Okay, then again, add a space as tricks. And then under square bracket, I'm going to write QT by the same formula. So for each large product, I'm going to charge a 100 rupees per product to deliver. And for the rest of the product, I'm going to charge 50 rupees. So remove this code from here and paste it over here instead. And for the rest of the shipping classes, I'm going to charge 50 rupees per product to deliver. Leave this box blank and click on save changes. Alright, so our changes have been saved automatically. And now let us click on add shipping method again. There are few more shipping methods available. Like if you want to provide your customers with free shipping, you can click on free shipping and click on add shipping method, and click on Edit. And you'll find there are several options in this drop-down. Like if you wanted to provide your customers with free shipping, what do they have to have? Like? They can have a free shipping coupon and they can enter that shipping coupon to get the free shipping. Or there could be a minimum order amount. So if someone is going to make a purchase of 5000 rupees from my website, I'm going to offer them free shipping. Or there could be a minimum amount or a coupon like either of these two. Or there could be a minimum order and a coupon, they must fulfill both these criteria. I'm going to select this one, a valid fishing coupon, and I'm going to make a coupon later on in this video. So let us click on this one and click on save changes. There is one more shipping method over here. If you click over here, there is a local pickup. So a customer can come to a website and choose to pick up the products locally from us toward itself. In that case, we can make a 0 cost be charged in very less amount. I'm going to keep it 0 and click on save changes. This option was not really required for the kind of website that we are going to make. But I've just shown you. Now what we can do is you can click on save changes. The changes have been saved automatically. So we'll go back and we can add as many zones as you want. So the next zone that I'm going to add a zone two. And for this region, I'm going to add UK. Okay, I'm not getting UK because I have not selected UK over here in general tab. Alright, so to get UK, I can go to general. Click on leaf and scroll down. And from this option shipped to specific countries, I will select UK over here. Alright, so I'll add UK over here and click on save changes. So UK has been added over here. Now we'll go back to shipping again. And we'll add one more country. So I'll add it as zone two. And for the region, I'm going to select UK. And like I said, you can be as specific as you want. You can add your zip codes and add a shipping method and follow the same procedure for the flat rate. I want to give a flat rate of, let's see. I want to give a flat rate of maybe I'll incur more cost in UK. So I'll give a flat rate of maybe 300 rupees. And then space as tricks. And then QT way. And for the rest of the products, I want to charge 100 rupees over here in UK. And I'm going to enter this quantity code. All right, so this is done again. Now click on save changes. The changes have been saved and you can add the rest of the shipping method by yourself. Now let us go to payments. 12. 08e WooCommerce Settings Payment: Now let us go to payments. And this is the tab where you will add your payments gateway. Right now, we only have the option of cash on delivery and PayPal. But I want to accept payments from customers using credit or debit card directly on my website. And in order to do that, we'll just go to plugins. Click on plugins, click on Add New, and add a plugin by the name Stripe. It is this plugin by WooCommerce itself. Just click on install now and click on activate. Now let us go to WooCommerce Settings again. And let us go to payments. And over here you'll find a lot of options now. So what we'll do first is first of all, we'll activate the cash on delivery options and then scroll down. Then we have the stripe credit card option will activate this also and click on Setup. Make sure that this one is enabled. And for the credit card only, I'm going to remove the stripe from here first and from here also. And for the credit card, I also want to add a debit card over here. And for the description also, along with the credit card that is written over here, I will add debit card. And then you'd scroll down and make sure that this is disabled. It was actually the test mode. We have disabled the test mode. Now we need two keys over here, the live publishable key and the secret key. So what we'll do in order to get those keys open a new tab, I'll do one thing. You can simply access the link from here itself. So I've opened this in a new tab and we will come to stripe. Stripe is simply a payment gateway which enable us to accept payments from customers on our website itself. If you draw, have a Stripe account already, you can sign up over here. I already have a Stripe account, so I'm simply going to login. Click on Continue. All right, guys, so this is a payment gateway or a guide. So this is a stripe dashboard and we are in web hooks already. I do not know why I should be in-home. Actually, there are two things you have to do by yourself. First of all, you have to verify your email address. And this is a simple process. You can go to your email address and you'll receive a mail from stripe, you simply have to click that link to verify your email address and then you have to add your business details. I'm not showing you how to add the business details because it could be very different in your country. The options that I might be asked human, not be asked, but it is very simple. Okay guys, so get these two things done and then go to developers and click on API keys. You'll get the live publishable key. And the light secret key is simply have to click on publishable key and your publishable key will get copied, come back and, and in front of live publishable key is simply have to paste it. Then we have secret key. Let's come back and click on the secret key. It is going to get copied. I've kept my secret key elsewhere and I've copied it. So I'll come back and paste it over here. Just like this. Now scroll down and click on Save Changes. If you get any kind of error over here, just make sure you click on the Save changes again, and that era is going to get fixed. Alright, so with this, let us move on to our next step, which is accounts and privacy. 13. 08f WooCommerce Settings Acc Privacy, Email, Integration & Advanced: So with this, let us move on to our next step, which is accounts and privacy. Here will enable some settings. So over here we have allow customers to login into an existing account during checkout. I went to enable this. Then we have allow customers to create an account during checkout. I want to enable this as well. Allow customers to create an account on my account page. Yes, I want to allow that. So enable these three options and then scroll down again and click on save changes. So with this, we'll go to emails. These are actually e-mail notifications which Woo Commerce sends to your customers whenever there is a new order or someone cancels the order, or if an auto fields, you'll find format and presets for all these e-mails. If you'll click on Manage and you can change them as well, but I do not recommend it. Do that. So we'll move on. Integration is not that important. And then in the end we have advanced. And in this page, just make sure that for cartridge cut pages selected and checkout page, checkout pages selected and so on. If you also have a Terms and Conditions page, make sure you select that page from here. If you do not understand what this is all about, you can go to pages. You'd find that there are few pages like cart checkout, my account, which had been created by default. This has happened because we have installed the WooCommerce plug-in on our website. So these pages have been made, and that is why we have a paid setup option over here. But we do not have to worry about this part. This is usually taken care of by the WooCommerce plug-in itself. There's an archive page with the cart page and so on. So we'll scroll down and click on save changes. And with this, our WooCommerce settings are complete. So now let's add some products on a website. 14. 09 Product Uploading: So now let's add some products on a website. And to add products, simply hover to products and click on Add New. And in case. So this is the page from where we can upload new products to a website. So first of all, we have product name over here. So we'll come back on our website and we'll go to a simple product. So we're going to upload two kinds of progress on our website. The first one would be a simple product, and then we will see how we can upload available product on a website. Like for example, if you click on this particular product, it is a simple product. It does not have any variations like this. Genes is available only in this color, blue. It also does not have any size, like if you see over here, it does not have any size, neither is it available in any other color. So first of all, I'm going to copy this name of this product, copy it, come back, and I'm going to paste this name. And then we had the products long description. If you'll come to our website and if you scroll down the bottom, this is the products long description. The description that we have over here is the short description. So this section is for the production long description. So I'm simply going to come back and I'm going to copy this description over here. Come back and pasted. All right, so this was a productive, long description. If you want, you can also design this section in Elementor. But for that you have to enable this. And although we have not learned elemental yet, I just wanted to show you how we can enable that option. Okay, so to enable that option, simply go to element 0. I'm going to open it in a new tab. And over here you will find that there are several checkboxes. You have to enable this check box of products. Okay, So this will enable Elementor page builder on your product section. The option is going to come over here. So let's come back. And I also want to enable this for all the other options that are over here so that I do not have to come back again and again. Alright. So I'm going to simply save the changes. And I'm going to close this tab. Come back over here and let us click on refresh. Click on reload. And now you'll find that we have got this option of editing a product description using Elementor. But unfortunately I did not publish that page, so that page was not saved. All right, so let's come back over here. And I'm again going to copy this product's name. And I'm going to paste it over here. Similarly, I'm going to copy this description from him. And I'm going to paste it over here. Alright, now it's called on. And you'd find that we have got this option of product data. And in this drop-down, you'll find that there are several prototypes available. We're going to learn how to add a simple product and how to add a variable product. So for this one, I'm going to select simple product. And then we have got several tabs over here. We're going to go through them one by one. But first of all, we'll deal with the general tab. And the first option that we see over here is the regular price. Let's add a regular price of 2000 rupees. And let's just say that this genes is available on sale. So the price comes down to 1800 rupees. So what happens if you also enter a sale price is if you'll come to a reference of site, you'll find that the regular price gets cancelled. And in front of it, the sale price appears like this. Okay? So I'm going to enter a sale price like this. And I can also schedule the sale. It's like I can enter a from date and a to-date. This particular product is available on sale on this price between these two dates, I'm going to cancel it because I do not want that. And over here we have tax status. It is currently taxable and I want to keep it taxable. Then we have the tax class. And for the tax class I want to choose 12 percent. Alright, so this is done and let us go to Inventory Over here. The first thing that we see is SKU. Sku stands for stock keeping unit. In big stores, they give a unique identification number to each and every product so that they can maintain their stock. So if you want, you can give it. Otherwise, you can also leave this empty. You'd find that I have entered my SKU. So I'm simply going to copy this from you and I'm going to paste this. And if you want, you can also enable this option of managing the stock of this particular product. So you can enter the amount of stock that you have on your store. Let's say I have a 100 pieces of this genes, so I can add a 100 and this talk will keep on reducing whenever there is a sale in my website. Similarly, we also have low stock threshold. So let's say if I enter two over here, so what will happen is I'm going to be notified when this talk reaches to I do not want to enable this option. So I'm simply going to uncheck this check box just to make sure that the stock status is in stock and not out of stock. Alright, so this was inventory. Let us go to shipping now. Over here you can enter the weight of the product and enter the dimensions as well. And then we have shipping class, if you remember correctly, we had defined a shipping class earlier for refrigerators and big items. So if you click on this drop-down, you'll find the large product over here as well. I do not want to keep it in the large product because this is a simple product, right? So it does not belong to any class. It does not belong to the large prop class. So I'm going to keep it no shipping class already. With this, I'm going to go to linked products. And over here we have up-sell and cross-sell. Let me tell you what exactly upsells and cross cells are. Upsell is simply the alternate product or the product that you would recommend your customers instead of the product he is currently viewing. For example, if a customer is giving T us adjusting him to buy coffee, this usually comes in related products on Amazon.com. And then we have cross cells. This is the product we'd recommend our customers based on the product he's currently viewing. Suppose he's viewing tea leaves and you're recommending him to buy sugar at the bottom, you'd find Amazon.com recommending new products under customers who bought this also bought section. All right. So this was upsells in Kruskal's. We currently do not have any product on our website. So that is why even if I'm going to type something, it would not appeal. So we will see how we can add probes on upsells and crosses later on when we make available product. At that time, we will at least have one product to add an upsell and cross-sell. The attributes and rest of the sections are not that important. So we'll scroll down and we will add a product's short description. So let us come back. And I'm going to add this short description, copy this from you. And I'm going to paste it over here. With this, we have several more options over here. I would not recommend you to go through them, except for this one which says product tabs option. So what this can do is I can add one more time in my product section. If you'll come over here. And if you scroll down, there are already four tabs over here rate. So we can add one more time by the name. Let's say I add a tab by the names among. All right, and I can write something over here, so it would appear inside this tab. Let's come back. I can add anything over here. And if it's called on resolutely, options are not that important. And I would not recommend you to add a lot of information over here. Because the more information you add, you have to maintain that consistency in the rest of the probes. And if you have a lot of products, it would be headache for you. So let's come on the top of the page. And we'll have this option products category give you only have one category over here which says uncategorized. If you are not going to add any category at all, it is going to be categorized as uncategorized, arranged. So we're going to add a category. Let me see what have I given? I have added genes and men. So we'll come over here and I'm going to add a category of men first. So I'm going to click on add new category. And men category is going to be added. And that is going to be enabled for this product. And I'm going to add one more category by the name genes. With this, I'm going to also add a parent category of men, which I had earlier added. And then I'm going to add this new category. This product falls under men and inside men, it is going to be categorized as genes. So this is how it is done. Now scroll down, we're also going to add few tags over here. So I'm going to add a tag of genes. And then I'm going to add a tag of denim. And I'm also going to add a tag of men genes over here. Add commas as a separator and click on Add. So all of these tags have been added. Now scroll down and you'd be asked to upload a product image. So I'm going to click on Set product image. And since we do not have anything in the media library right now, I'm going to upload a product. Click on Select Files. Good. The folder that I have provided you please make sure that you have already downloaded that folder already. It is in the video description. And then I will add this genes as my primary image. So this image is going to appear as a primary image in my website. So click on select product image. And like I said, this is the primary image. Like this is going to appear everywhere on my website, right? Then we have the product image gallery. And over here we have to again select files. And now what I'm going to do is I'm going to select all the images that we have over here so that I do not have to upload all the images again and again. And then I'm going to open this. All the files will be uploaded at once. Okay, So all the product images have been uploaded, but I do not want these many images as my product gallery. So first of all, cancel this. So I'm going to click on add product gallery images, and I'm going to select all those products which I want as a gallery image. Alright, so I've selected all these images and click on add to gallery. And all those images will be added. Now, if you also have a 360 view image, you can add that and not have that kind of image. So I'm simply going to scroll up and I'm going to publish this product. Okay, So the first product that we want has been published. Let us take a view. Okay, So this is how it looks. I think it looks perfect. And since we have added one more tab as Ximen, it is getting a period of a year and the content is also getting appeared over here. Alright, so let's come back and we'll add one more product. And this time we're going to add available product. And like I said, available product is available in different sizes, in different colors, or there might be some other variations. So first of all, I'm going to name this product. I'm going to come to a reference of sight and I'm going to search for jacket. It is this one. So I'm going to go over there and I'm going to copy this name from here. Come back. And I'm going to paste it over here. And for the long description, I'm going to copy this long discussion from you. Come back and I'm going to paste it. So this is done. And for the product data, make sure you select variable product this time. And as you can see, the prices have been changed. It has changed because for different variation will put different prices. So first of all, we have tax status will keep it taxable. And this time we'll put this under the tax slab of GST 5%. Alright, so come to inventory. You have already completed the inventory. And we know what a shipping know come to link products. For the link products, since we have already added a product, we can add that product in, up-sell and cross-sell. So I'm going to add that genes, which we had added earlier over here as upsell. And the same thing in cross cells as well. So we're done with this step. Now let's come to attributes. Alright, so attribute is actually the term based on which your product is going to vary. So your product may vary from each other based on size, colors, or there might be some other attributes based on which your product might be different. So you can add an attribute using this button. If you click on Add, you'll get to add the name of the attribute and all the values. So suppose if you add color over here, you can add red, green, blue, whatever colors are there. Or an alternate way of adding attributes would be to go to the attribute tabs over here, I mean attributes section over here. So I'm going to open the attributes in another tab. Come over here, and I'm going to add the attributes over here. So the first attribute that I want to add is colors. I'm going to add colors and I'm going to click on Add attribute. This will be added over here. Again, I want to add an attribute size. So I've named it says and I'm going to click on attribute. And as soon as I do, that, size is also going to get added over here. So four colors, I'm going to click on Configure terms, and I'm going to enter all the column names. So the first color that I want is blue. And now I'm going to scroll down and I'm going to select a color from here. Click on Color, and I'm going to enter blue over here. Alright? And make sure you enable this check box and click on add new color. So this way, blue will be added with the color. Now, I'm going to add black. Now scroll down. And instead of this blue now, I'm going to make it black and click on add new color mixture. This one is enabled. So black is also added. Now I'm going to add t0. So I've added teal, and I want to select the color teal. I do not know the color code of teal, so I'm simply going to search it. So this is the color code for t. I'm going to copy this over here, and I'm going to paste it over here. Right? Click on add new colors. And this color will also get added. So I think I've added all the colors that I require for now. I'm going to go to attributes again. So we are done with the colors novel come to size. Click on Configure terms. And I'm going to enter all the size names that are going to be available on my website. So the first size that I want in my website is large. So for large I'm not going to write the entire name, I'm simply going to write L. And I'm also going to make it as enabled soldiers. So only LV be available over there. Alright, click on, add new size and l will be added. Now I'm going to add m And, and I'm going to make sure that this one is enabled. Click on Add, New, and medium is going to get added. And for small I'm going to add S and I'm going to add the size. So all these have been added now. So our attributes section is complete. Now let us come back to our products. And first of all, let us publish it so that it does not get deleted. Now let us scroll down good two attributes first. Okay, I just forgot to add brand also. So let us come back. I'm going to add an attribute of brands. Okay? So I'm going to add a brand over here. I'm going to scroll down and click on Add attribute. Now, good to configure tones. And I'm going to add all those brands which I need in my website. So the first brand name that I'm going to add is Elisa. Now scroll down and this time I'm going to upload an image. So click on Upload. I'm going to upload the brand logo. Go to Upload Files, click on select files, and I think it is in media folder. So over here we'll go to brands and click on LEC, this and let us upload all the brands over here. Click on open. And let us select this brand logo over here and click on Use this file. So this brand logo has been used now. Click on add new brand, and this logo will be added along with the brand. Now, I've also want to add one more logo, and this time it would be EVA solo. Already. Know I'm going to scroll down and I'm going to remove this one. And instead of this, I'm going to add Eva solos logo over here, which is over here, click on Add New File, and click on add new brand. So this brand image is also added over here. Alright, so this is done. Now let's get back and let us first of all update this page. Now let us scroll down and come to attributes. Now from this dropdown, you can select all the attributes from here. Click on Add. First of all, we'll add brand and then colors. Then I'm going to add size, click on Add. So let us do the settings one-by-one. First of all, we have brand. So this jacket belongs to the first brand which we added is elisa. So we'll add this brand name and we'll scroll down. Now come to colors. So four colors, we want it to be available in two colors, black and blue as well with not want, because we don't have an image of teal colored jacket. Alright, so we'll let it be like this. And for this attribute, I also wanted to be used as variations so a customer can come to my website and black and blue will be an option for him. This product is going to be available in these two variations, orange. So I'm going to enable this for brand. I'm not going to do this because it is already in because this jacket is already available in a particular brand rate. So you cannot change the brand of the jacket. Now let us scroll down and for the size, I also want to use it for the variations for the customers and for the value. I'm going to add all three of them. So I'm going to select all from here. And I'm going to save the attribute. As soon as you do this and come to variations. Now click on the drop-down, create visions for all attributes. And click on Go, Okay? And click on, Okay. So you'll find six different sections for six different variations. For Black, large, black, medium black, small, and blue, large blue medium and blue small. Let us open the first one. And you can add a different image for black lodge. So I'm going to add the image first. Select files. Come back to WooCommerce and good products. I think it is available over here somewhere. No, it's yeah, it's available over here. I'm going to select all these images over here and click on open. Now for Black large, I want to use this image. So I'm going to select this image and click on Set variation image. But this variation image is only for black luggage. If I want, I can select a different variation image for black medium rate. Similarly, I can add a different price. So for this jacket, I want to price it as 3000 rupees. And since it is on sale, I want to offer it to my customers at 2800 rupees. All right, so this is done and there are other options over here. There are, there is vague, there is dimension. And you can also put it in different shipping class, or you can enter this product into a different tax class. You can make it 18 percent operated in some other tax lab. But I'm not going to do that. I'm going to close this. And I'm going to come to black medium. And for black medium, I'm going to enter the same image. You remember, you can also change your image, but I'm going to, but I'm going to choose this one only. Click on Set relation image. So set variation image. And let's say this is available in 3,100 rupees, and I'm going to offer it in 3015 rupees. Alright, so this is also done. So I'm going to close this tab. And I seriously did not want the black small one. So I'm simply going to remove this. So this would basically mean that I have this jacket available in large black and large medium only. Similarly, I also don't want the blue small ones, so I'm going to remove this. So in blue variation also it is available in blue large and blue medium, no small array. So first of all, I'm going to come to Blue Lodge. And I'm going to enter the image from here and scroll down. And this is available in 2500 rupees. And I'm offering it in 2400 rupees. Okay, Let's close this and come to blue medium. I'm going to enter the same image. Let's add a different image. Click on Set volition image. And for the price, I'm going to offer it as two hundred and six hundred rupees. Regular praise and for discounted price, I'm going to offer it in 2500 rupees. All right, So with this, our variation thing is over. Click on save changes. And now let us come to the short description. So for short description, I'm going to come over here and I'm going to add the short description from your copy this. And I'm going to paste it over here. Alright, so let us scroll up and come over here. And I'm going to add a new category by the name jackets. And I'm going to put it under the category of men. Click on add new category. So this jacket has been added and it is under men and in jackets. And I'm going to remove this uncategorized option from you. Now let us scroll down and put some product tags. So I'm going to put a tag of denim jackets and winter wear, orange. So this is enough. Click on Add. Now scroll down and click on Set product image. So the default image would be this one. Click on Set product image. Similarly for gallery images, I'm going to use this one. And this image has been added already. So I'm going to add this one. And at this one, click on add to gallery. Now scroll down. Like I said, I do not have a 360 view gallery image. So scroll up and click on update. Okay, so congratulations, you have been able to upload your available product. Now let us find out how it looks. We'll open it in a new tab and come over here. And as you can see, it looks perfect. The price is given in range, so it is available between 2400 rupees to 3000, 50 rupees or red, and then it is available in different colors. The final price will not appear unless you select the color and choose the size. So as soon as you do that, your final price will appeal. And the image will also change based on what you have selected. All right, so we have done this. Now let's come back. And I would recommend you to add few products on your website so that it looks good. And I'm also going to add few products on my website. And then I'm going to continue the video. 15. 10 Homepage Creating and assigning: And let us now design our homepage About Us page and all those pages. But before that we have to make a setting. So how would you team dashboard? And I'm going to open theme settings in a new tab. And in team settings beside page builder, you'd find WP be. Actually this stands for WP bakery. We don't want to use this page builder. We want to use element or make sure you make this change and click on Save Options. And now that we have selected a page builder, Let's hover to pages and click on, add new and novel, add a title over here. So I'm going to write home and click on Publish, and click on Publish again. Let's find out how it looks. So this is our homepage, and we see over here that we have this title bar and this sidebar over here. And we do not need both of these. So we'll come back and then scroll down and you'll find this option, page title option. And over here you'll find Disable page title. Click on Enable. This is going to disable the page title. Furthermore, if you scroll down, you'll find this option sidebar position I'm going to enable without, so that the sidebar gets removed. And from here, I'm going to cancel this and click on Update. Let's come back and click on Refresh. Alright, so as you can see, our sidebar and our page title have been removed. But there's a small problem over here. Right now, the homepage is not the actual homepage of your website, as you can see over here, if you remove this home from you. And good your normal website. There is some other page which is getting displayed over here. And to make a homepage, as our actual homepage will have to go to a dashboard. I mean, let us go to the dashboard and scroll down at the bottom of the page. And you'll go to Settings. Click on reading. Over here, select a static page, and from the homepage, select the homepage that you have just created. Now scroll down and click on save changes. Alright, let us go back and let us just refresh this page. So as you can see, a homepage is now actual homepage of a website. 16. 11a Designing Homepage with Elementor Intro and Importing Slider: Alright, so the page title and the sidebar have been removed. Now what we will do is we will design a page. So let's come back and you'll get to see over here that we had this edit with Elementor option. Let's click on this Edit with Elementor. And you will be redirected over here. This is the element of page builder. And this section over here, this white section is for designing. We will be designing our entire webpage using these tools. These tools are known as widgets and they are also known as elements in Elementor. That is why the name of this page builder is Elementor. You'll also get to see several sections over here, like the first section is externals. And the elements in this section have been provided by Woodmont theme that we have installed. If you close this section, you'll get to see the basic one. The basic elements have been provided by Elementor. And then we have these pro elements as well. These elements have this lock sign because we are not using the pro version. We will be mostly using the externals elements over here, because of course they are premium ones are red. So let's start designing. Let's go back to our reference website and find out what do we actually have to design. So first of all, we had this section in which we have a slider. So let's come back and let us add a section. And in this section we're going to select this kind of structure which does not have any column. Come over here, you'd find that there are no columns in this section, right? So we'll come back and we'll add this kind of structure. So this sector has been added whenever you add a structure or an element, the options related with this section, an element appears on the left-hand side, and these options are also divided into three parts. The first one could be layout our content. The next one would be Style, and the last one would be advanced. We do not have to make any setting in this particular section. So we'll go to all widgets. And over here we will search for slider. Over here, just drag and drop the slider over here. As soon as you do that, you'll be asked Which slide or do you want to select? Currently, we do not have a slide over here. So the stream that we're getting is blank. Let us close this and let us go to a dashboard. Click on this particular icon and you'll be redirected to the dashboard. And to make a slider. First of all, we'll scroll down and you'll get this option, Slider Revolution. Just click on it. And you'll come over here. We're not going to make a stridor from scratch because that is going to take a lot of time. So what we're gonna do is we're going to import a slider. Just scroll down and you'll get this option. Manual import, click on it. And now click on, Click to choose. Just go to the folder that I've provided you and you'll get this folder slider. Just open it and you'll get to see this file selected and click on Open. Alright, so a slider has been important, and it is this slider. And let me show you how you can edit it. Just click on this edit button. And you will come over here. And here what you'll do is, first of all, we will unzoom it. So we will unzoom it so that it fits on a screen. Now if you want to change the background, you just have to click over here slight BG animation. And you have to click on this folder icon. And as soon as you click on that, you'll get this option. Make sure you are in this tab, and make sure you have selected background. And over here you can select any media from the library. So let us click on a particular file and see how it happens. So I'm already over here. Let us select this shoes. So I'm going to select it and click on Insert. And as soon as you do that, the image is going to change like this. Alright, so this is how it works. If you want to change a text like this, you can select on that text, actually it is this one. So you can select on this text and you'll get to see this text over here. You can change it. Anything over here, like if I write my name, it will appear like this. Similarly, if you want to change the next slide, you can hover two slides and go to the next side like this. Over here, we have this girl's image. Just click on this image and you'll get to see this image over here. We can select another image from here. And let us say that we choose to display this image. Now, click on the image and click on Insert. And it is going to come over here like this. The only problem is that this image is not transparent. And because it is not transparent, the entire image is appearing on top of this text. I want to make an image transparent. You can go to Google and search for Remove BG, this like this. There are many websites which you'll get over here. I personally use this one. Let us click on this website and see how it works. The image that I've used for replacement is actually this one. Just drag and drop this image over here. And the background will be removed like this already just click on Download and your job is done. So let's get back and click on Media Library again. And over here will simply drag and drop the image over here. It is going to get uploaded like this. Click on Insert. Another image, as you can see, has been replaced. You can just fix it a little bit here and there. And you can use it on your own website. Similarly, if you want to change something in the next slide, you can go to the third slide, click on that image and change the image from here on Edit guides. So this is how you can make some basic changes in the slider and use it on your own website. Let us get back now. Click on leave. And let's get back to Elementor. First of all, we will remove this now. And I'm again going to bring that slider over here. So search for slider, drag and drop it over here. And this time you will get your slider. So click on this plus icon and your slider will be important. All right, This happens sometime that the slider is not appear. This does not mean that you have made a mistake. I think this is element tos problem and they will fix it soon. Don't worry. Just click on update and let us go to a website and find out if it looks good. Alright, so you can see that aside, it looks perfect. It is not getting appeared over here. Don't worry about that. 17. 11b Designing Homepage body with Elementor: So let us move on to our next section, which is this section. This is actually a banner section. Let's get back and click on this plus button. And now we will again select this kind of structure which does not have any columns. So I'm going to select that and I'm going to search for banner. And it is this banner which I have used. Just drag and drop it over here. Alright, so our banner has been added. The first image that we have on a banner is this one. So let's come back. Click on the first one, go to Image and choose the image from here. Click on it and you'll get to see this option. Just scroll down. I think I have not added that. So let's go to Upload Files, click on select files. Let's go to the main folder. And I'm going to add all the files that we have over here. Okay, I'm going to go for Control a, and I'm going to de-select all these folders. Let's scroll down. All right, nothing else. Just click on Open. And this way I'm going to upload all the images that we have over there. Already guys. So now that we have uploaded all the images, Let's scroll down and find out that image. It was this one. Click on the image and click on Insert media. And this image has been added. The size of this image does not look that nice. Come to image size and I'm going to select full. Okay, So some improvement. Don't worry, we'll fix it step-by-step. Now come to text. And over here we have the subtitle as banner subtitle. It is written something like this banner subtitle text to say sometime I have already written and elsewhere. Let's copy the subheading. Come over here and paste it. So this has been changed. Now come to title and copy this one and paste it over here. Alright, so this has also been changed. Now it says over here Read more. We do not want it to be read mode. We want it to be, Let's find out CMO. Alright, let's come back. And I'm going to write C. Now if you scroll, it would say CMO. Alright, so let's go up and we are done with the content section of this banner. Let's go to style. I can see that the text over here looks small. So I'm going to make it a little Lodge, make it 26 pixel, and this will make it look a little bit larger. Now come to carousel. The slide that we see over here is actually three. If you'd go to a reference of site, you'll find four slides. So let's come back. And I'm going to make it for, don't worry about this blank space. We have only three contents over here. That's why it is blank. If we'll add one more content, it is going to get filled. Let's go to style again and again, come to carousel. And over here, the space between them is 30 pixel. I do not want to have 30 pixel over here. I want to have only 10. Similarly, I also do not want to have any pagination. So I'm going to enable this and click on Close. Now come to buttons. And the button is only getting appeared when we hovered over it. So we changed that and we'll make it static now compass style and from the style select Link button. So it is going to appear like this. And now I'm going to close this one. Go to content. And to avoid making the same settings that we did over here in all these banners, I'm going to simply remove them. And I'm going to duplicate it over four times already. So this is done. Let's come to the second banner. And over here, I'm going to change the image. The image that we have used next was this one, this shoe image. Click on Insert media. And then you can again go to text and change the text. Let's close this and come to the next one. And I'm going to change the image only again. Scroll down and this time we'll be using this one, the bag image, click on Insert media. And this is also done. Now let's close this and come to the fourth one. Come to image and click on it. And now we'll select this, this image. Click on Insert media. Alright, so this section is complete. Now we'll select this section and we'll leave some space at the bottom so that when we start the next section, it has got a space of 30 pixel. And to do that, we'll go to advance. And first of all, dealing this. And from the bottom, I'm going to leave 60 pixel. So whenever I'm going to add another section, it is going to be 60 pixels away from this section. All right, So this is done. And I also want some padding on the left-hand side and on the right-hand side, which means I need some space on the left-hand side and the right-hand side. So I'm again going to dealing this. And from the right-hand side, I'm going to add a padding of 10. Similarly, I want to have a padding of ten on the left-hand side as well. Just remove the 0. It does not look that nice. Alright, let's click on update. And this section is entirely compete. None. We will move on to our next session. And in the next session we have got these categories. Before these categories, we had this title. Let's come back and click on Add. And we're going to choose this kind of structure again, because this does not have any columns. Let's come back. Click on this kind of structure. And first of all, let us add a title. The title element is over here itself. So I'm going to drag and drop it over here. And let's find out what we have written over here. First of all, we had this text. Welcome to Woodmont. I'm going to copy this and I'm going to paste it over here for the title. We have it as featured category. So just copy it and paste it over here. Similarly over here, we have some content. So I'm simply going to copy it and paste it over here. Now let's come to style. And as you can see, the size of this text is quite small. So I'm going to make it a little bigger, go to predefine size and make it 36 pixels. And I also want this text to be contained in the center. So to do that, I'm going to reduce the width or adjust the width to, let's make it 40 pixels. All right, This makes it looks better. And with this, this element is complete. Now come to all widgets. And now we will search for categories that we have over here. All right, let's come back and search for categories that a few categories that we see over here. But like I said, I'm going to be mostly using these premium elements. So I'm going to drag and drop this element over here. All right, so there are lots of categories which are getting displayed over here. And I don't want so many categories. So from the number, I'm going to limit it to five or eight. So only five categories will appear over here. Now. Now, you can also choose those categories which you wanted to be appeared over here. And to do that, we're going to search those categories. But before that, we need to add images to our categories so that they can be displayed over here. Sarah, let's go to the dashboard and hover to products and go to Categories. And in this page, you'll get to see all the products categories that we have added on a website. And I'm going to add category images only to those categories, which I want them to display over here. Alright, so first of all, I want to display bags. So let's click on edit and let's scroll down and you'd find this thumbnail image. Click on Upload, and let's search for bags. Over here. Click on Use image. This image has been added. Now, scroll down and click on Update. Let's go back and let's remove this one. It is very annoying. Now, let's scroll down and the next thing that I want to add is glasses. Click on Edit. Now you'll get to see this option again. Click on upload. Just scroll down. And this image I want to add, click on Use image and scroll down and click on Upload. Now let's go back again. And you can repeat this process to all the categories which you want to display over here. Or you can add category image or category thumbnails to all these categories that we have over here. I'm going to add the thumbnails quickly and then I'm going to continue again. Alright guys, so I have added category images to all the categories which I want to display over here. Alright, so let's begin and I'm going to name all those categories which I want to display. So first of all, what you should do is disable this because this would hide the empty category images from here. So I'm going to add bags over here, this one. And then I'm going to add glasses. And let's see, I'm going to add kids, men's, and then women. So let's add kids. Men and women. Sorry. Here, it will look fine. We just need to change the design. First of all, click on update and let us go to style. And from the layout, select this kind of style. May study with vide, so the first product will be wider. All right, so it looks exactly like a reference upside. So let's come back and click on Update. And now I'm going to do the same thing again. Good to advance dealing this. And I'm going to leave 60 pixels from the bottom or right click on Update. And there's one more thing which we must take care of is how this page will appear on a mobile phone. And to find that out, we'll click on this mode, responsive mode. Once you do that, the display will adjust like this, and it is going to appear something like this. So let's find out from the top. I hope our slide a section looks fine on a mobile phone, will find that out also in a while. Scroll down. I think this section looks perfect. Now scroll down, but this title bar looks quite congested, little slept on it. And over here, let us adjust the width. You can adjust the width like this. I'm going to make it around 70. Alright, this looks much better. Now scroll down and rest of the things look fine. Yeah, wrestled things looks fine. Now click on update. And let us also find out how it looks on a tablet. So click on tablet. So this is how it is going to look on a tablet. And I think this also looks nice. We do not have to make any changes. So let's get back to the normal view. Alright, so the first section and the second section and the third section is complete. Now let us move on to a fourth section. This section, the featured products section. So over here, first of all, we have this title and then we have this Products tab. So let's come back and let us add a section having this kind of structure. Actually, the title that has been used over here is just like the title we have designed over here rate. So we'll come back and we'll do one thing, will simply copy this title. Scroll down, and we'll paste it over here like this. Alright, so we have saved a lot of time. Now let us add the next element. Let's go to all widgets and over here, search for products. We need to have tabs over there. So I'm going to select this one as x Products tab. Just drag and drop it below this title. Alright, So it already appears good. Now come over here. We do not have this title over here, so I'm going to remove this. And for the type titles, I do not want it to be tapped Title 1 and 2. I want to have women collection and men collection. So come to tabs. And first of all, remove this third title. Welcome to the first one, and go to text. And over here, I'm going to change it to men's collection. Alright, you can come to query and you can adjust the data source from here. If you click on featured, all the products that you have added as featured on you're all products will appear over here. Let me show it to you. If you'll go to the dashboard and if you'll go to all products, you can make a product featured by clicking on this star over here, it will click on the star. This product will become featured product. So all the products which have been added as featured over here, we'll start getting displayed over here if you click on featured. But I'm going to keep it all products. You can also select a particular product if you want to display it over here. And since this is men's collection, I can add the men's category over here, right? Like this. So own, so not only men's product will appear, I do not want to have this kind of thing I just wanted to teach you. So let's close this and come to tab titled to go to text. Similarly, change this text over here. I'm going to write it women collection. Alright, good query. And again, you can do the same thing. You can come over here and write women over here. And you can select women. And now if you'll go to women, only, women products will appear. Again, I do not want to do this. I wanted to make my website look good. And since I have not added a lot of product, it won't look good if I'm going to filter it. So that is the reason why I'm not doing it. And I can see over here that we have 12 products over here, 123 and three-fourths, 12. I want this thing to show only eight products. So let's come to style and come to products layout. And over here you'll get this option items per page. It is 12 over here. I'm going to make it eight. Alright, let's scroll up. And as you can see, Foreman's a four-foot is eight. So we have eight products. Now, let us click on update again and let us again find out how it looks on a mobile phone. I think it looks perfect. And we do not have to do anything over here. Let's get back. And let us move on to the next section, which is this one. And like I said, this is quite special because we had this image hotspot element. Let's come back and let us crawl down. And let us again add a section having two columns. If you'd come over here this time we have two columns are red. Let's come back and we'll select this kind of structure. Now, good to all widgets and search for image hotspot. It is going to appear over here, drag and drop it over here. Now let us choose an image. The image that I'm going to choose is going to be this one. But you can also choose this image, this one or this one. Alright? Let's select this one and click on Insert media. Alright, so the image has been added, and now I'm going to change the size of this image. So from this drop-down, I'm going to make it custom. And from the width, I'm going to write 795 by 600. So this is the width and height that I want in this image. Click on Apply, and the image is going to get adjusted. Now let's come to items. You'd find that we have this hot spot over here. We need to have some more hotspots. I'm going to add Venmo. So we have to now, let's go to the first item first. And I can adjust the horizontal position of this hotspot by dragging it like this. So I'm going to first pointed to the glasses like this. And now what I can do, I can come to content, makes your product is selected, and I can search the product, which I want to get displayed over here. So I want to add shades over here, this one. And now someone's going to hover over this hotspot. They're going to find the product like this. Similarly, I'm going to close this and come to the next one. Come to position. And I'm going to point to the bag. Or it like this. The come to content. And I'm going to add bags over here, this one. And now if you'll hold the purse, it is going to display the post product. If you wanted to add some more items, you can click on Add and follow the same process already. So let us move on to the next column, which is this one. And in the next column we have a product after the title. Let's come back and go to all widgets. And we'll again just drag and drop this title over here. In this case, we do not have a subtitle, so I'm going to remove this. Let's come back over here and I'm going to copy this, hitting from you and paste it here. I'm going to select this. Come over here, copy this content, come back, and I'm going to paste it over here. Again. This is complete. Now let us add the product, Goodall widgets and search for products. And it is this one that I have used over there. So I'm going to drag and drop it over here. This blue is title. And you'll get to see a lot of products over you. But I wanted to display only one. So if you have a product in mine, you can simply type it over here and choose that product, but I'm not gonna do that. I'm going to go to Style. And instead of this grid, I'm going to select carousel. The number of items per page I want is one. So I want to display only one product. So you now come to cancel. And the slaves per view also should be one which will make this product really big. But don't worry about that. Hide the pagination. Just good to advance. And I wanted to give some margin from right and left. So first of all, dealing this and make it percent. And over here on the right, I want to leave 20 percent margin. And from the left also under leave 20 percent margin or red. So it would look something like this, but don't worry. You can also do one more thing. You can drag this column over here and make it 66%. You'd find a percentage sign over here. Alright. So I'm gonna make it 66% to this image hotspot. I'm going to assign 66 percent to this column. You can also assign the column percentage over here. And if you add 66 percent over here, this column would automatically be 33 percent are in. I think this should look fine. Let us click on update. And let us click on this thing. And as you can see, it looks better now, let us click on this one again. And let's add a background color for this section. So first of all, we will select this section, go to style and add a background color. Click on Color. And over you add this code, F7, F7, F7. Alright, you'll get to see a really subtle gray color in the background. And it would look something like this. Very professional and very beautiful. Let us click on update and let us find out how it looks on a mobile phone. Alright, so it looks something like this, and I don't think we need to change it in any way. Let us go to the tag version. And this one also looks nice. So let's get back again. And let us give it some margin. First of all, we have to give some margin to this section also. So select this section, go to advance. And I'm going to dealing this. And from the bottom, I'm going to leave 60 pixel. So it is going to leave 60 pixels from the bottom like this. And for this section also, I'm going to go to advance dealing this. And I'm going to leave 60 pixel at the bottom. Alright, so this section is also complete. Now click on update and let us move on to our next section, which is a latest post. Let us come back over here. Click on Add a section. And we are again going to select this kind of structure. If you click on this plus button also, you'll get to see all the sections over here. So let us first of all find out what do we have to add. It is this title element. Again. Let's come back. And again, I'm going to go to a previous section. I'm going to copy this element. Come back over here and I'm going to paste it on an insert of this featured category. He wanted to be our latest post straight. So I'm going to copy this. Come back over here, and I'm going to paste it over here. Alright, so our title is done. Now let us add the blog element, come back over here and search for blog. Drag and drop this element of a young horrid. We have only one blog available on our website, and that is right. That blog is getting appeared over here. So let us make few blogs. Let us come to a reference website. And there are four blogs over here. So let us go back to a dashboard and go to posts, and click on all post. So this is the blog that is getting appeared over here. Let's add few more. Click on, Add New. Adding blogs is really easy. Let us go back to our reference website and let us open a blog. So I'm going to open this one. Let us come back. And I'm going to. Copy this title from you. Copy it, come back and I'm going to paste it over here. Let us come to the body section, come back over here. And I'm going to copy this entire content. And here, up to here, I'm going to copy it, come back and I'm going to paste it. Actually, they have designed the post section using Elementor. If you want to make your posts using element or you can go for this option, edit with Elementor, and then you can make your entire post using Elementor. So our first post is done. And over here, click on Post. Now scroll down and you'll get to see this option featured image. Click on the featured image. Click on set featured image, and you can select the featured image from here. The first image that we have over there was this one. So let's get back. And I'm going to add that image over here. You can select featured image. And this image is going to be the featured image for this post. Don't forget to add categories for your post. Click on add new category. And the category that this post belong is, let me find out it is furniture. So let's come back and I'm going to add a category name, furniture like this. We have already seen how category works, so I'm not going to explain it over here. Just click on add new category. And this category is going to get added. Let us close this and do add few tags over here. So I'm going to add something like clothing or dresses or something like that. And you know how things work over here. Now close this and you can publish this. Now, click on Publish again. And let us make one more post already. So let's come back and click on Add New again. I'm gonna go back to a reference website and I'm going to open a new post. So click on Add New. And I'm going to copy this title from you, come back, paste the title. And for the body also, I'm going to come back and I'm going to copy this entire thing from here. And I'm going to paste it. All right, so this is again done. Now let us call, don't come to post first. Let us come to Featured Image. Select a featured image. And I'm going to add a featured image, this one, click on select featured image. Don't forget to add categories and tags. Click on Publish, publish again. So now you know how to add blogs on your website. So now you can make the rest of the post by yourself. Let us come to the Elementor page builder again. First of all, we are going to delete this. And I'm again going to search for blog. Drag and drop this just below this title. And now we're able to see the posts, but this is not the style that we have on a reference upstate. So we'll go to style. And from the block design, I'm going to select Masonry grid to make it appear something like this. The number of columns that we want over here is actually four. As you can see over here, we have four columns. So let's get back. And we will add four columns over here. I'm also going to reduce the number of items per page and make it four. Don't worry about this blank space. This is blind because we have not enough post on our website. And if you scroll down, you'd find a long list of content that we have on this particular post. And to make it short, go to your dashboard and go to team dashboard and click on theme settings. Over here we'll go to blogs and scroll down. And you should find an excerpt option over here. Post excerpt, click on Accept, and click on Save Options. Alright, so the changes have been saved. Now you can come back to elementor. And let's remove this again. And let's bring that block section again. This, this was just to make sure that it gets refreshed already. Let's come to style again. And from the block design, I'm going to select the same thing, Masonry grid. And for the number of columns, I'm gonna make it 44 items per page. I want to keep it four again. And now if you scroll down, you will not find that long content. So this section is again, Then let us click on this section. Go to advance dealing this. And I'm again going to leave some margin at the bottom. I'm going to leave 60 pixels already. Click on update. And let us move on to our next section, which is let me see this video section, a red. Let's come back. Click on add new section. And I'm going to select this kind of structure. And first of all, I'm going to give it a background. So select this section, go to style and click on classic and choose an image. And let's see. It was this image that I've used to click on it, click on Insert media. And I have also provided an overlay, but before that, let us set up the position for the position may get centres enter, repeat, no repeat size. I'm going to make it a couple. Don't worry about the height. It is short because we have not added any element over here. Alright, so let's get back and find out what do we actually have to add. So we have to add this text element over here. This is actually the title element. Come over here and we'll search for the title element. It is this one. Drag and drop it over here. And I'm going to change this title, this copy, this come back pasted for the title also, I'm going to copy this. Come back, pasted. And for this one as well, copy, come back and paste it. I'm going to make it central line, so come to style and make it left align. I don't think we should have a black text Columbia, come to style, not style. Come to predefined color and make it white. And to give it a good contrast, go to this section and add an overlay. We'll have an overly option just below this background option. So come to overlay, and we'll add a black overlay. So go to black and the selected black color. And I'm going to increase this opacity to maybe 75. Alright, let me this much, this looks better. Now select this section again and come to advance. And first of all, I want to give some margin over here. So first of all, I'm going to dealing this and from the bottom, I'm going to leave 75 pixel, whatever you want you can choose over here. Now come to padding, dealing this. And over here, I want to give a padding of 70 pixels from the top and from the right. Also I'm going to give 15. And from the bottom molecule, Let's give 50, 70, and left 15. Alright, so this would look better. Now click on this title element and we'll make it a little bigger because it just looks really small. So make it large. Alright, but this looks much better. Now we will add a video over here. So I'm going to add a video element over here. So it is this one which I have added. This drag and drop it over here. Make sure that the sources YouTube and you can add any YouTube you do over here. But if you want to add the one which I have used in the reference of S8. This one, you can do one thing. You can just simply remove this. Go to the folder that I've provided you. Good important info. Open this file, copy this link which you can see over here. Copy it, come back and you just have to paste it over here. Alright, I have also added an image overlay, which is that girls image. So first of all, we have to enable this. And then you can choose the image from here. Click on this girl's image, and click on Insert media. So it will appear something like this. Play button, this quite different in our reference of S8. Okay, let us refresh it first. If you scroll down now, the Play button is little bit different. So you can come back, go to style and, and you can enable this setting team style already. So the Play button will change like this and there would be a hovering effect like this. Click on Update. And the last thing I would suggest you to do is select this section, go to Layout. And over here you'll get to see this option, stretch section, CSS, click on stretch section. So this will be stretched and this I think looks better. Click on update. And your entire homepage is complete. Let us find out how it looks. Go to the dashboard and let us find out how it looks. All right, so it looks something like this. And I think it looks amazing. Right? Alright case. So with this, we have completed our homepage. Now we will add our about us page, Contact Us page and all those pages which we want on our website. But for About Us page and contact us page, we're not going to design the entire webpage from scratch. I'm going to provide you a template and you can import it and you can add it on your website and use it. 18. 11c Importing About & Contact Pages in Elementor: Now we will add our about us page, Contact Us page and all those pages which we want on our website. But for About Us page and contact us page, we're not going to design the entire webpage from scratch. I'm going to provide you a template and you can import it and you can add it on your website and use it. So let us first make our about us page. Let us click on this option and click on executive dashboard. To make our about page. We'll go back to pages and we'll click on add new. The name of this page would be about. The next thing I would do is scroll down and disable the page title and disable the sidebar. So click on without, click on publish and publish again. Alright, let us find out how it looks. All right, it is blind and you can get back to you edit page by clicking on this option edit page. And here you'll get to see the edit with Elementor option. Let's click on it. And here I'm going to teach you how you can import your about us page. So click on this folder option and go to Import Templates. Click on Select File, and go to the folder that I've provided you. You'll get to see this folder element or templates. Click on it. And I'm going to import the about page template. So I'm going to open it or it now let's click on Insert. And as you can see, we have imported the entire About Us page in a matter of seconds. You can change the data according to your company and use it on your website. So this was our about us page. Let us click on Update and move on and make our Contact Us page Phyllis exited to the dashboard. And let's get back again. Let's click on Add New. And let us make a contact us page. I'm going to name it as contact. And again, I'm going to scroll down, disable this, scroll down further, disable decide bar, publish, publish again. Let us find out how it looks. Again, there is no sidebar, no title, but let us edit the page. Click on edit with Elementor. And we're going to import our Contact Us page as well. So click on this folder option again, and click on this icon, and click on Select File. And you'll find the contact us page over here. Click on this template and click on Open. And now simply click on Insert. And you'll find your contact us page right in front of you. Over here there is a map. You just have to click on this map is select this element and come over here and enter your location. And whatever location you are going to enter over here is going to be pointed in the map. So if I'm going to enter lower parallel like this, it is going to point that location in the map like this. And just below this, there are two options. The first one is for zooming, so you can zoom the map like this. And the second one is for the height. So if you want to increase the height, you can do it like this. I'm going to keep the height this much only and click on Update. And if you take a look at the bottom of the page, you'd find this pop-up button does not a normal button. This is a pop-up button. And let me show you how it works. Let us go to a reference website and go to Contact. And here we have this pop-up button. If we click on this pop-up button, a pop-up will appear. A customer can come over here and fill this form and click on submit. And then this message will be sent to you through an e-mail at your e-mail address already. So we have to make a pop-up for this button. And to make that bubble will go to the dashboard. And over here, just go to HTML blocks. Here we have to design a pop-up. So click on Add New. And let us give it a name of contact. Form, pop-up, name it, whatever you want. Now click on Publish. And now click on Edit with Elementor. And over here we have to design this particular pop-up. So let us get back. And since here we have two sections. We'll add a section in which we have two columns. Click on it. Now the column on the left-hand side has got this heading or the title. And then we have got this form. So let's get back. And then we'll add a title. So we'll drag and drop a title over here. We'll remove that subtitle and this text as well. Let's get back and let us copy this title from you and paste it in tightly. Now let us come to style and make it left aligned. And this is the size of this title looks quite big. I'm going to reduce it and make it small. Alright, so this mesh looks better. And now we will add this form over here. Alright, so let's get back and come to all widgets and search for contact form seven or eight, it is this one. Drag and drop it just below the title. And then in this drop-down, select Contact Form 1, you will find one contact form always be created in your WordPress website. So our firm is complete and with this, we have completed the section on the left-hand side, novel design, the session which we have on the right-hand side. Which is this one. So let's get back. And again, you'll find that we have this title over here. So let's get back. And I'm going to copy this title from you and pasted. Now what I have to do is simply copy this title, come back and replace it with this title. Now let us change the background color of this section. If it come over here, you'll find that we have a black background color over here. It is not actually black. So let us find out what do we have to add. First of all, select this section. If you're not able to make the selection, you can come over here to navigator and you'll find all the sections in columns listed over here. And you can select that column from here. I've selected this column. That's why this column has been selected. Let us move this. And since it has already been selected, will come to style and background type. Click on Classic. And from the color, I'm going to give it a color code of 3, 3, 3, 3, 3, 3. This text does not look nice. So we'll select this text, go to Style and make it white, predefined color. We'll make it white. Alright, so the color has also been changed. And now if you'd get back, you'd find some information over here, right? So we'll come back and search for information box. Search for information box, which is over here. Drag and drop it just after the title. Okay, so let's design this now. And over here. First of all, we have this type, so it is this one. And instead of text, I want to select icon. And now I have to select the icon. So click on it and click on Upload Files. Go to Select Files. Now scroll down and you'll find all these three icons which we have over there. Let us upload these icon's. So selected, click on Open. Yeah, it has been uploaded. It is white in color and that is why it is not properly visible. So the first Eigen that I want to choose is this one, this location image. Click on Insert media. And now this Eigen has been inserted. Now I'm going to give it a size of custom, and I'm going to give it a size of 30 by 30. Click on Apply. And you'd find the size of the image. It has been changed. Now come to content. And we do not have any subheading or this title. So we simply remove this and remove the title as well. We only have this text over here. If it come over here, you'd find only text written. So I'm going to copy this text from you. Come back. And it's sort of this text which is written over here. Make sure you are in the Text tab and not individuals. We're going to replace it orange, so our address has been changed. Now let us crawl up. Good style. And from the color scheme, I'm again going to make it light so that it becomes white, orange, so it has become white. And this gives a better contrast against the background. Let's come to content again. I can see that we have a button over here. So let's remove it, just scroll down and come to content. Now if you'd scroll down further, we'll use this bar to scroll down further. And you'd find this button text. Just remove whatever is written over here. Also remove the link, and this way your button will get removed. Now let us crawl up and make it left align already come to style for the text alignment, make it left. And for the image alignment also, I'm gonna make it left or right. So it is going to look something like this. We are pretty close to a reference pop-up. Let's get back and says we have computed the first one. I'm simply going to duplicate it. Right-click on it, and click on duplicate and duplicate it once again. Now click on the second one and come to choose Image. And now we will choose the mobile phone image or at the smartphone, click on Insert media, and you'd find their image has also been changed. And now you can change this number as per your company. I'm going to the next one and I'm only going to change the icon, so I'm going to use this one now. Click on insert media, and the icon has been changed. Alright, so after the icon we have this divider. So let's get back and get ourselves a divider. So it is this divider. Drag and drop it over here. Let's go to style. And from the color, I'm going to make it a little bit lighter. Maybe this much, this is better. Now let's get back. And then again, we have got some text, so we'll come to all visits and search for text. So let's drag and drop a text editor over here. You already have some dummy content, so we are going to leave it like that. And now we have got some social icons. So let's get back, come to all widgets and search for social. Already, I have used this one, drag and drop it after the text said, alright, so we have it like this. You're going to make it colored. We're going to come to style and make it colored already, but the size looks quite big, so I'm going to make it a little smaller. Let's make it 14. All right, so this looks much better. Now what we can do is we have to make this section bigger, right? So we'll simply drag this section like this. I'm going to make it 66 percent. Okay, So this looks much better. Now, click on Update and we have created the pop-up. So let's exit it to the dashboard. Click on leave. And now what we can do is let us first go two blocks again. Already guys. And now that we have created the pop-up, Let's go back and we need to refresh this first. So I'm going to first delete this and search for pop up again. So this is it. I'm going to drag and drop it over here. And in this drop-down you'll get to see that Popovich you have just made. So I'm going to select that pop-up. If you're not getting this pop-up, please wait for some time because sometimes it does not appear way to 10, 20 minutes and you'll find the pop-up. Now let's design this one. So come to buttons. And instead of read more, I wanted to be write a message, right? So I'm going to write down now come to style and come to buttons. And for predefined color, select primary color and make it left align. All. So this is done. Let's click on update. So let's click on this button and find out how it looks. Alright, so it does not look that nice. And it does not look that nice because it has been squeezed. So let us get back and fix it. So we'll come back over here and click on Edit with Elementor for the contact form pop-up. Alright, so we are over here. And like I said, this was squeezed over them. This was squeezed because the original sizes, this one service fix it first. So first let us select this section and go to advance. And because it is getting squeezed, it is going to leave some margin from the top, bottom and center. So we are going to give it a negative margin so that it does not leave that margin. So let's make it first of all 30 and give it a negative margin. Add a minus sign over here, and make sure you do not dealing this one All right this time. Now, as you can see, it does not look that nice. So what we will do is we will select this column and select this column since we're not getting it, we will take the help of Navigator. So come to navigator and say the first column and go to advance. And since this does not look that nice, I will give margin from all the sides. Alright? So from first of all dealing this, so from the top, Let's give some margin. And let's give em margin a little bit more. Let's keep it 30, okay. And from the right, Let's find out what works out. Because the form is absolutely touching it. So let's give a margin of let's keep it 30. And this looks better. And from the bottom, the bottom looks fine, but we will give some margin. Alright? We will give some margin. Let's keep it a little bit less. Let's keep it 15. And now come to the left one. And from the left we will add some margin. And as you can see, as we are increasing the margin, it is coming in place. So let's keep it. Let's keep it 40. Already click on Update. And now you can remove the navigator. And now let us exit it. Let's get back to our page. Now let us close it, click on Update, refresh it. And now let's find out if it works well now, so click on it and as you can see, it looks fine. So our contact form page is also done. Now let us close it. Saw Contact Us page is complete and now we will create few other pages. So let us first of all exited and go back again. 19. 12 Making Track Order Wishlist & Compare Page with Shortcode: And let's create a new page. And we'll name this page as track orders. Scroll, don't disable the page title and the header as well. Can publish, published again. And now we will add a code in track order pj already. So we'll go to the folder that I have provided you and open this file, important info. And for tricorder, I'm going to copy and paste a code. So let's copy this code. Come back and we'll paste it over here. Already click on update. And let's find out how it looks. A 100. So the truck got a page does not look nice. I think it will look better if we will add a page title. So let us click on Edit page and we are going to enable the page title over here. So we had disabled it earlier. I'm going to enable it now. Click on update. And it is find out how it looks now. This looks better, I think. All right, so with this, attract order pages complete, now we will add another page and we'll take a shortcut, hover to this plus button New and click on Pages. So this will add new page. And I'm going to name it wishlist page. And for wishlist page also, I'm going to keep the page title, but I'm going to remove the sidebar, click on without, and click on publish and publish. And let's add a quote for wishlist. So let's get back to the file again and copy the wishlist code and paste it over here. Now click on update. And let's find out if it looks fine. All right, so our wish list page also looks good. And there's one more page left. So hover to New and click on pages. And this time we're going to add a page. So right, compare. And let's add the code over here. So we'll copy this code, paste it over here, scroll down, and remove the sidebar. Click on publish, published again. And let's take a view. Alright, so our campaign page all looks good. And there is one more page which we need to create. Simply hover to new, go to pages. Let's name it blogs. You can name and blogs you can name it, post whatever you like. The scroll down and just disabled the sidebar. Click on publish and publish it again. Now naming the blog page will not make it a blog page. We have to assign it. So let's get back to a dashboard and simply go to Settings and go to reading. And over here from the blog page, select the pace that you have just made. Select Blog, scroll down and click on save changes. And this way our blog page will be ready. 20. 15 Creating Menus: And now let's make a menu to make them a new hover to Appearance and go to menus. And before we start making a minute, let us find out how many minutes do we actually have to create. Alright, so let's get back on a reference of sight. And so this is a first menu, and this is a second menu. And if you scroll down at the bottom of the page, we have 1, 2, 3. So 3 plus 2 is 5. So in total, we have to make five minutes. Let's create the main menu first. So I'm going to name it as main menu. You can also name it as primary menu, whatever you like. Make sure that main menu is selected over here. Click on Add Menu. And a man who has been created and now all we have to do is add pages to this menu. Click on View will. And I need the homepage, blog page About Us page. And I need the contact us page over here. And the shop page. I think this is it. Click on Add to Menu, and all these pages will be added in your menu. You can also rearrange them. So I'm going to bring down the blog page and keep the contact page at the bottom and bring the shop page after the About Us page or red. So our main menu is complete. Let us click on Save Menu. And now let us make a top bar menu, which was this one, are red cells come back and let's create a new menu. Click on leave. And we are going to call this menu as top bar menu. Scroll down, click on Create menu. And now let's add the pages. Click on fuel. And let us find out how many pages do we have over here. So we have wishlist, tricorder and logout, come back and we need the wishlist page from here, track Orders page from here. Let us click on add to menu. And let's scroll down to the bottom of page and you'd find this WooCommerce endpoints. Click on it, and you'd find this logout option over here. Click on logout and click on Add to Menu. So loud option will also be added over here. Alright, so we have track out of wishlist and then love out. I want the tricorder page to be in the center. Click on salesman. And a top bar minuss complete. Now let's make three more footer menus. So click on, add a new menu. Click on leave. And this time we're going to create footer menus like we have over here at the bottom of the page. I want to create three minutes, which I want to display over here, here and here, so that it does not look vacant. So let's come back and let's call it a footer menu as F1. Already click on Create menu. And let's add all the pages. So click on View all at home blogs about and conduct is click on Add to Menu and all these pages will be added, will just shift it like this and click on save menu. So footer one is complete. Let us create a new menu. And I'm going to call it, Let's see footer too. F2. Alright, click on Create menu. And in this menu I want to add options related to Google Miss endpoints. So add orders, download addresses. Don't add downloads because we have not created downloadable products. Now click on account details and layout. Click on Add to Menu. And these pages will be added over here. Click on save menu. And let's add one more menu. And I'm going to call it F3. Click on Create menu. Let's click on fuel. And I'm going to add this tame compared page, which is over here. And then I'm going to add my account page here, wish-list, it's fine where it is, wishlist here and then track orders. Let's see. Here. Click on Add to Menu. And all these pages have been added. Click on save menu. Alright, so with this, we have completed making all avenues. You'll be able to see your main menu on the page itself, like this. But for the rest of the menus, we have to make a few changes. 21. 16 Footer Setting Up Widgets: So let's get back. And now let's design a photo. So let's scroll down and come to widgets. Click on leave. Already guy. So this is a widget section. Let us remove this notification first, and we have five different options for five different columns that we have on a photo reference of S8, you'd find that we have five columns. And in the first column, we have written something about the company, followed by some contact details. So let's get back. And in column one we will add a text editor. So let's search for text, which is over here. We'll send it to photo1. Scroll down and click on Add Widget. You could have also drag and dropped it. But let's do it this way. Now scroll up and you'd find your visit over here. So first of all, let us add the logo. Click on Add Media. Good, Upload Files. Click on select files. Now scroll down and you should find the logo over here. Just click on this logo, click on Open. And now click on insert into post. And this logo has been added. Let us go to the next lane and let us just copy and paste this content. What we have over here. Let's paste it. And let's go to the next line again. And let us add this contact details. So let's get back and go to the folder that I have provided you and open this file, photo1 contact. Just open it. Select all copy. And over here we'll simply go to Text. Dismiss this. And we'll scroll down, come to next lane and pasted arete. Click on Save. Good visuals again. And you'd find all the contact details over here. If you want to change the address, you can do like this. If you want to change the country. Like I'm going to change it to India. And instead of London, I'm going to change it to Mumbai. Let us click on Save. And now let's find out how it looks. Click on Refresh. Alright, let us scroll down to the bottom. Alright, so it looks perfect, but we have some unnecessary space over here. So let's get back and remove this space. Now click on Save again, come back and click on Refresh. Alright, so this looks better now. Let's get back now. And in the next column we had this recent post. So let's come back, close this and search for recent post. Woodmont, recent post actually. So over here, make sure you select the bookmarks recent posts. Now scroll down and send it to footer too. Okay, click on Add Widget, and the widget has been added. Now a recent post is already written over here. So we'll scroll down and the number of posts that I wanted to show over there is going to be only two. Red click on Save. Now close this one as well. Now come to Footer 3 and inverter three, I want to display some navigation option, navigation menu actually. So over here we have navigation menu and scroll down and send it to Footer three, click on Add Widget. Similarly, I'm also going to send this to foot of 45. So I'm going to select navigation menu again. And I'm going to select footer 50. Click on Add Widget. Again, I'm going to go to footer five, click on Add Widget. Now come to Footer 31st and give it a title of us toes. Let's copy this, come over here and paste it. You can write whatever you want, radio own title, and from Select menu, I'm going to select photo1, Save. All right, so this is done. Now come to footfall. For the footer 50, the title should be this one. Useful links come over here and paste it. Now select menu, go for footer to click on Save. Done. Now comes, come to five for the title. I'm again going to copy this one. Copy it, come back, pasted and silt for the three, click on Save. And let's get back to our website. Click on Refresh, find out how it looks. Alright, so it looks perfect. You could have also added a few more links over here, infinite of 1, 2, 3, so that it looks better. Let's come back. And now that will design a sidebar. So let's close this. Come back to our website and let us go to shop page or click on shop. Right now we do not have a sidebar, right? But if you'd go to a reference upside and if you'll go to shop, you'll find that we have a sidebar over here. First of all, we have displayed few categories. We have filter by price, and then we have few products. So let's get back and do that. Side bizarre actually visit and you'd find that sidebar over here, Shoppe page visually area. So we're going to search for price filter first. So we'll find the price filter somewhere over here. Over here, filter products by price. Let us click on it and send it to shop page widget area. Click on Add widget, and this widget will be added, will just capitalize this P. Alright, click on Save. And the next thing that I want to add over here is calories and do not add this category. This category is for posts. Already just scroll down and you'll find product category somewhere over here. Over here. Product categories and Shoppe page vegetative is already selected. So I'm going to add the widget. Come over here, capitalize this P. And I don't want to show any hierarchy. Disable that and click on Save. Close this now. And the next thing that I want to add is few products. Okay, so let's come back and search for products over here. Just make sure shop page widget is selected. Click on Add Widget, and this has also been added. We had the first letter capitalized, so we don't have to take care of that. And I do not want to display five products. I'm going to reduce this to four or three. Let's keep it for you. Scroll down and click on save. Let's come back and click on Refresh and find out how it looks. Alright, so we have our praise filter, then we have our categories, followed by some products. All right, so this is also done. So with this, we have completed our widgets. 22. 17 Adding Cutom Header and Logo: And the next thing that I want to do is I want to edit my header. It is very unorganized, as you can see on top, there's something written over here and our social icons are over here. I do not want this kind of header. The header that I want is this one. So let's come back and edit our header. You can either hover to this team dashboard and click on Edit header. Or you can hover to this Woodmont menu and click on header builder. And this is where we are going to edit our headers. So let's scroll down. And if you click on this, Create a new header. There are some pre-made headers available over here. Few of them have search bar also. But the header that I've used in reference of sight is, I think this one. Let's come over here. Yes, it is this one. So I'm going to select this header, but you can select from all the different headers that we have over here. Alright, let's click on this header. And a header has been imported, but simply choosing your header will not make it your default header. Let us make it a default header. So click on it, click on, Okay, and now if you'd come over here and click on Refresh, you'd find your header has been changed like this. Alright, so let's come back and let us start designing a header. So first of all, we have this random texts written over here. I want to bring the social icons to this side. So let's come back. And first of all, I'm going to bring the social icons on this side. And I'm going to remove this text from here. So let's remove this and click on Okay, then scroll down and click on Save header. And let's get back and click on refresh. And let's find out if has, if this has worked. Alright, so this has worked. Let's come back. We have to divide this over here and we have a menu. And I want to have a menu over here. So let's click on Edit. And the menu that I want over here is the top bar menu. So I'm going to select that and click on Save. Let's click on Save header again. Let's come back and click on refresh. And as you can see, a man who is getting displayed. Now, let's come back over here. Make sure you have not removed these dividers. If you want to change your logo on your website, which is getting displayed over here, is this logo which is getting displayed. If you'll click on Edit, and if you'd upload a logo, this logo is going to get disappeared and your logo will appeal. So let's come back and close this. Now. Let's find out if there's anything which have to do over here. Let's come over here. Yeah, I think rest of the things I find v should have a Compare button over here. So let's come back and over here we have to add a Compare button. So click on Add Element. Now, select Compare from here. And let us have an icon and not a text. Click on icon and click on Save. Click on Save header. Let's come back again and click on refresh the page. All right, so we have a Compare button. I wanted to compare options somewhere in the middle, and I want the card option to be the last one. So let's come back and let us drag and drop the compare option over here. Now the cart option is the last one. Click on Save header. Let's get back to a website and click on Refresh. All right, so that change has been made. Let's come back again. And there is one more setting which I want to make it come over here, you'd find the top bar has got this color, green color. If it come to our website, you'd find that Autauga is green. So let's come back and change that color. So to change that, click on Edit and go to colors. Now you'd find the color option over here, just selected. Scroll down and go to the important info file. And you'd find this color primary color, or it just copy this color comeback and pasted already click on Save, click on Save header. Let's get back and click on Refresh. And you'll find your color has been changed. Let us go to the Homepage. You'll find a problem over here. You'd find a lot of gap between our header and from web page starts. So to fix this problem, we'll click on edit with Elementor and hover to go first section, select the first session. A slide is still not getting appeared in the element of Page Builder. But don't worry, let's come to advance. So let's dealing this first. And from the top and from the top, we're going to leave 50 pixels and make it negative. Alright, I think this should do a job. Let's click on update and let us get back to our website and see if it works. Alright, so it looks absolutely fine. Let's come back to a reference website. Let's go to home and let us compare it with our page. All right, so it looks absolutely identical. Let's come back. And since we have completed editing our desktop header, you can go to mobile layout now. So click on mobile and let's find out how a header looks on a mobile phone. So let us take it to the mobile view. Alright, so this is how it looks and I don't think we need to change anything over here. It looks absolutely fine. But you want to change something over here. I would ask you to add a search bar over here. Alright, let's get back and add a search budgets before this carte option. So click on Add Element. Click on this search and make sure you click on this icon, not the form or it. Click on this icon and click on save. And I like to keep my card option as the last option. So I'm going to do that and click on Save header. Let's come back to a website and click on refresh. And as you can see, we have a search bar over here. So let's get back to the normal view. And with this, we have completed our header. 23. 18 Theme Customisation: And you can go to Theme Settings either by hovering to this option and clicking on theme settings. Or you can go to Theme Settings over here directly. So we'll click on theme settings. Okay guys, so this is a theme settings page. And the first option that we have over here is the header. We have already set our default header in the Edit header, so you do not have to do anything over here. Then we have the Page Builder make sure element or is selected over here. Otherwise you won't be able to use element o. And then we have got a favicon. Let me show you what exactly 50 coins are. If I'm going to make this a little smaller, all these icons that you see on top left corner of your tabs. This one, this one and all these icons that we have over here known as family cons. So I'm going to add a family can click on Upload Files. Icons are generally logos of your website. So I'm going to click on upload files and click on select files. Actually do not have a logo, I think. So let's get back. So let's upload an icon from this folder already. Let me upload an icon of this chair. So he had this icon over here, and I'm going to use this icon as my fabric on. So you click on, Use this file, click on Save Options. Let's go back to our website and click on Refresh. And now when I'm going to resize this window, and now you'll find your icon has been changed. Alright, so let us get back to normal and let us get back to theme settings again. Now scroll down and we have the retina image. You can upload the same file again. Now scroll down and if you have a 400 error page, you can select it from your otherwise you can move on. And let me see. And here we have element of sections, negative margin. We have seen how we have added negative margin just to put this section in proper place. Alright, so if you disable that, you won't be able to add negative margin on your website. And in the end we have the search results. We do not want our search to display results from blog. We wanted to display from products. Okay, so do not disable this. Let's call up and move onto mobile bottom nav bar. The mobile bottom live by is actually option that we have at the bottom of the screen. So these are the icons and the text that is written below them is known as labels are red. So let's get back. So first of all, we will enable this nav bar. So click on on. And then we have our nav bar labels. We want to keep it on. Then we have select buttons. So we have currently 12345. If it come over here, you'd find 1234. We have only four options over here, but over here we have five options. This off Canvas site but is extra. And let me show you what exactly this off Canvas sidebar is. If it come back over here and go to the shop page. And you'd find this option filter option. You will not find this option in any other page. This is only available in the shop page. So it is this option. If you remove this option, this gets removed. Alright, so we will leave it like that. Now you can also have a custom button if you want. You can have one mode button over here. So you can go to maybe contact us page and you can copy this URL, come back and you can paste that URL over here. You can name the label, and then you can add an icon over here. So if I'm going to select this icon, this icon is going to appear over here along with the label that I am going to provide over here. Similarly, you can have customer 223 and so on. So let us click on save changes. Let us find out how our website looks now. So let us refresh it and take it to them, Bellevue. And as you can see, we have the mobile bottom by now. Let's get back and let us move on to a next option which is general layout. Over here, the side with the full width, let us keep it as full-width. They're talking about actually this width which we have over here. This can also be contained, but I do not want that. Now for the sidebar position, I want it to be on the right-hand side. We have our sidebar on the right-hand side. If you'd go to the shop page. And then we have the off Canvas site buffer mobile. So if it come back over here and take it to the mobile view and go to shop page again. You would find an off Canvas sidebar over here. If you click on this option, the sidebar would open. So it is this option that they are talking about. And if you click on, off the side but will be gone. But I want that sidebar over there. Then again, we have side-by-side. We have small, medium and large. Just keep in medium because small is too small and large is a little bit too large. Now come to page title. For the page title, we have it as centered. If you'd go to a shop page, the normal view, we have it as centered and I want to keep it like that. Alright, so let us keep it centered and then we have the page title, color and back don't. So for the page title background, we have it as black in color. So this background is black. If you want, you can also change the color from here. But I do not want to change any color. I just want to upload a background. So click on Upload, go to Upload Files, go to Select Files again. Come back to the main folder and select this file. Dummy would title. I'll right-click on open. That file is uploaded. Now click on Use this image. And now if we click on Save Options, let's get back to a product's page again, are the shop page. And click on Refresh. You'll have a background now and this looks better. I think. So let's come back and scroll down. Then we have text color for page title. If you wanted to be lightened color, you can keep it light. Currently we have it light. The light color is the white color. And if you want to keep it dark, it will turn to black. And if you scroll down further, you'd find page title sides. If you'd come to a reference upside. Let us take it to the normal view. Actually we have it as small. If you want to keep it default, you can keep it default. But since we have used the small size in our reference website, I'm going to choose small. Furthermore, if you scroll down and then we have show bread crumbs. We do not have page title in most of our pages, so it really doesn't matter whether you turn it off or on. Let us save options and move on. All right, so we'll go to footer now. And by default we have our footer enabled. Let us keep it enabled because footers look really nice. And if you scroll down further, we have this layout selected with two columns or the photo a big and rest of the columns are small, like this one, which we have over here. Two columns are big and rest of the columns are small. And I want to keep this layout so I'll scroll down and find out if we need to change anything else. Yes. Footer text color. Currently we are using a dark text color. If it come back over here, let's scroll down to the bottom of the page. We have a dark footer text color. If you want to use a light one, makes sure that you change the background as well. If you're using a dark text color, make sure you choose a white background. And if you're using a light one, make sure you choose a black background. Now if you scroll down further, we have a copyright text. A copyright text is this thing. Now let's come back. We have two columns over here. So we have two columns over here. Now, if you see over here, we have the defaulting and the default text. So I'm going to change this. Let us change this to our website, copy it. And within this inverted commas, I'm going to paste this link. Remove this forward slash. And instead of Woodmont, I'm going to use my name. And that is Muhammad's man. For the year. I'm going to use 20, 21 and created by x demos, not externals, but moments of man. And it is written over your premium e-commerce solution. I want to write upgrade your fashion lifestyle. Upgrade your lifestyle. Alright, let us click on Save Options. Let's get back to our website and click on Refresh and find out if this has changed. Alright, so this has changed. And over here the image is getting displayed properly. Make sure that image is getting displayed properly. Let's come back and let us move on to the next option, which is topography. The topography of our website is actually fine. And Poppins is one of my favorite fonts. But if you want to change it to something else, you can change to rubato, which we have used on a reference website. So I'm going to choose to rubato. And for the style, I'm going to select medium 500 already. And I think the rest of the things are fine. So let's go to style and colors. Now over here we have a primary color set to green. In a reference upside, we have a primary color is in this color, so I'll choose this color. Let's come back. Click on this primary color. Let us click on this box. And instead of this color, I'm going to use the primary color which we have in the important info file. Paste that color over here. Alright, and then click on Save Options. Let's get back to our website and you'll find this green. Let's refresh it. And you'd find this color. Turn to the color that we have just chosen. Alright, all these color have now changed. All these color that you see have changed. Let's come back and let us go to Buttons. The current styling of these buttons is like this. You can change it, but I think there is no problem in this button and it also looks really beautiful on it, so we will not make any changes over you come to blogs, No. And over here we have blog layout and this kind of style is selected where the blog is on the left-hand side and on the right-hand side we have this side, but let me show it to you. Alright, let us go to our blog page and select a simple blog. All right, over here we have the blob on the left-hand side. And on the right-hand side we have the sidebar. You can choose any of these layouts from you. And I want to keep this one. So let's move on and come to blog sidebar size. Currently, it is this size which they are talking about. I do not want to change the size. I want to keep it medium. All right, now come to block design. So the block design that we have on our website is currently Masonry grid. If it come back over here and go to the blog page, it looks something like this. Let us go to a reference of sight and let me show it to you. We have a lot of blogs over there. Alright, so the masonry grids looks something like this. And I like this tile which we have over here are red, so let's come back and we'll keep the Masonry grid. But if you want, you can select from all these options. Alright, so let's scroll down. And over here we have blog items column. So we have three columns over here. If you want to increase or decrease the number of columns, you can increase and decrease it from here. Then we have space between these posts. So we have some space between these posts. Currently this space is 30 pixels, I think. No, it is 20 pixel. You can reduce it or you can increase the space already. Let's scroll down. And we have the bot, and we had the blog style. If you'll come over here, we have this subtle shadow. Whenever we hovered over a blog rate, you can change this by clicking on flat. We already know what excerpts and full content. Let us scroll down and, and we have blocked pagination. Pagination is actually if you scroll down, you will have an option over here, which will display the number of pages that are left and the current page will be highlighted. But currently we do not have so many posts. So it is blank. So you can choose from either load more or you can go with in finite scrolling, or let it be the numbers. Okay? And then we have single blog post options. Come back and open a single blog post. Alright, so let's come back and find out the options. So we have a single post design, so it is in default. So it is this image that they are talking about currently this is in default. Size will keep it default because large images, little bit too large. Right now, let's scroll down single post header. I would not recommend you to have a single post header. Now scroll down further. We have sharing buttons as on. So if you scroll down at the bottom of this page, you have some sharing options. So we have turned this on, then we have post navigation. This is the post navigation where you can go to the next post. And we can have an option over here as well if there is a previous post. So it is this option, then we have author bio. If it come over here, you'll find an author bio over here. But currently I have not set any author bio from you. You can go to edit profile and add an auto bio, which is going to get displayed over here. So let's get back and find out. All right, So this is complete. Let us click on Save Options already. Let's come to portfolio. Okay, So we have not done anything in portfolio. Let's go to shop. Alright, so over here we have search by SKU. You can also search a products based on SKU, But this is only possible if you have entered the product SKUs in all your products, right? And if you want them to be displayed on the drop-down, you can select this option. Then we have use relevancy for eject search. Relevancy is actually an additional plugin which will enhance the features of your search results. But we do not need it. The search result that we have currently is also very good. You can try it if you want. Next, we have sharp filters, not very important. A jack shop is also not very important. And then we have quantity input on shopping cart visit. So what happens if you go to a product page and if you add something to the cart, this sidebar appears right. And you cannot actually edit the quantity from the sidebar. So what this thing does is if you turn this on and if you just save the options, let us come back and refresh. And now she'll add something to the cart. You can actually adjust the quantity from here, right? You can adjust the contrary like this. So this is what it does. Now click on Close, Let's get back. And we have action after you add something to the cart. So whenever we add something to the cart there, this side bar appears you just saw. So you can remove that by clicking on no action. Or you can show a pop-up over there. And then we have hide widget automatically. So what happens is whenever you add something to the cart, this thing does not get hidden. You just have to close it manually so you can automate it by enabling this option. And then you have hide the two price. So whenever there is available product like this one, you have a price range over your rate from 2800 rupees to 3000 rupees. So if you want to hide that to praise, you can simply turn this on. Now scroll down and we have Quick Shop for valuable product, not that important. And we have category description position. Again, I don't think this is important. And we have empty cart text. So what message are cartwheel display it. There is nothing in the cart, so it is displayed this message. You can also edit this message. And then we have bread crumbs on a shop page. We have this as turned on if you'd come over here. This is actually the bread crumbs on a shop page. Let's come back. And since we have completed this one, click on Save Options. And now let us move on to the next option which says products grid. And in the products grid page, Let's see, we have products per page. So if you'll come over here, you'd find that we have 12 products over here in total, 1, 2, 3, 4 like this. So if you want, you can also change this. Now, we have products per page link. Let me show you what this is. It is actually this one. It shows nine, 24, and 36. So you can allow your customers to change the number of products that you have on your website. From this link, you can also change this number by going over here and just changing the number from here, right? And then we have shop products view. So you had the grid view in a shop page. Currently, we can view it in a grid format. You can also choose to see enlist. I do not like it, so I'll keep it as grid. Number of columns we have on our website is 12, 3, 3. So we have a three. You can also increase this number. Then we have the number of columns on a mobile phone. You can have two columns in mobile phone for Shoppe page. Then we have space between the products. The space between each product is currently 30 pixel. You can reduce this if you want. And you know what pagination is. We'll scroll down. You'll have page numbers over here and the page on which you are will be highlighted. If you do not want to have a page number, you can have this kind of a button which says load moon button. Or you can have infinite scrolling. Then we have number of column selector. Number of column selector is this one. Let me show it to you. We have two columns, three columns and four columns. The same thing. We can edit it from you. You can turn it off, and you can also edit the number of columns that can be that can be displayed over there. Click on Save Options, and let us move on to the next option, which is product style. Over here we have the Masonry grid. I see Lesley did not like this tail. You can find it out how it looks. And this is also not something which I like. Now what will happen when you hover over a product? Currently, whenever you hover over a product, it is going to show you these options. I do not like this title, so I can edit this style I like is the quick style. And along with the quick you, you can also turn this option on quantity input on products page. Let's find out how it looks. Click on Save Options. And let us come back to our products page and let us click on refresh. It would look something like this. Okay, You had the selection option at the bottom. This is for a valuable product. If you'll go to a simple product like this, you'll also have this option of changing the quantity before the adding it to the cart. So that is why I like this style. If you want, you can choose some other style from here. Alright, So then we have bothered grid, not that important hallway image. So whenever you hover over a particular image, so then zooming effect trait, you can turn that off from here. Then we have stock progress bar and countdown timer. Stop progress bar. Option actually enables you to find the number of stock that is remaining in the website. So you can turn that on. The countdown timer will actually show you how much time is left in this particular price. But this is only going to work if you have, should you build your sale in your website? Right? Now, scroll down. We have Show product category next to title. I do not like this. And let's see, then we have product title lines limit. So if you'd come to a product's page, you'd find that all the products are in the same line. This is because we don't have a long titles for a product. If we had a really long description, it would go to the second line. So we can disable that by making it display in just one lane. Okay, I'm going to save this option. And let us move on to the next option which says category style. The category's title that we have on our website is this one. If you'd go to a homepage, Let's go to our homepage. The category looks something like this. If you want, you can change the style from you. I like the default option, so I'm going to stick with this one. And then we have category with shadows. So we have enabled that option. There'll be a subtle shadow on your categories. And then we have hide product count on categories. So if you come over here, you'd find that one product we have in this category and all these products written over here. So if you want, you can also hide this. So I'm not going to hide this. Let us come to sidebar and page title. And over here we have this shop page layout. You have the sidebar on the left-hand side. If you wanted somewhere else, you can choose any of them. Then we have site by size, medium is preferable. And then you have off Canvas site buffer mobile. Actually, we do not have enough space on a mobile phone rate. So we can have a small button at the bottom of our screen in the nav bar so you can keep it off. And whenever you want to have that sidebar, you can simply click on that button and get the sidebar. You can filter your products from there. And then click on that button again and that will be gone. Then we have the same thing for the tablet. And if you do not want the same thing for the desktop, and we definitely do not want it as a sticky button. The next thing we have is shop title. These things are not that important. To scroll down and come over here, show category count on each category. Currently, if you'll go to the product page and if you scroll up to the top, you'll have the product count for each category, okay? You can turn this off if you do not want that. And you can also exclude the categories which you do not want to display over here, orange. So let us say these options and move on to the next one, which is attribute searches. Actually, we have not defined any swatches over here. So we'll skip this next. We have brands in the brands, make sure that you have selected your attribute from this drop-down. If you have brands in your page. And then we have show brand on a single product page. If you go to a website and open a page, a single product page, you'd find this brand logo over here. So you can turn this off by clicking on, off. But honestly, I really like this design, but it is your choice. Let's come back. And if you'd scroll down further, you'd find that we have short tab with brand information if it come to a single product page and if you'd scroll down, we have an additional tab that says about brand. If you click on this tab, you'll have this brand information and then few products which belong to this brand. And to get this additional tab over here, let's find out how to do it. So let us first go to Dashboard, hover to HTML blocks and click on All Items. The brand is that is getting displayed over there, is this one brand LEC. Let us find out how it looks. Alright, so this is how we have designed it, but I'm going to show you how to do this from scratch. So let's come back and click on Add New. And over here this time I'm going to name it as brand Eva solo. We have a brand and our website which goes by the name EVA solo. So we'll first of all published this. And now let us edit with Elementor. So let us add a new section and select this kind of structure. And let's see, we have the brand image over here. And then we have text, text, and then we have got this, this is actually a button already there. And then over here in this section we have got these products. Let's come back. And first of all, we are going to add the image element is drag and drop it over here. And I'm going to select this Image As I must have uploaded all the brand images, the logos, I mean, so I'm going to select this one and click on Insert media. And for the image size, let us click on Custom. And the image size that I've used is a 100 by 35. So I'm going to make it a 100 by 35. Alright, click on Apply, and then make it left align. So this is done. Let's go back and I'm going to search for text editor. It is here. Just drag and drop it over you. And I do not want to change the text over here. Let's come back and then we have, I think, a divider. Yes, there's divide over here. So let's come back and I'm going to add a divider over here, just drag and drop it over here. It is very dark. I'm going to make it a little lighter. So come to style. And from this color I'm going to use probably this one. Okay, this looks nice. Now let's go back again and I'm going to again add a text editor. So I'm going to drag and drop it over here, and then I'm going to add a button. Okay, I'm used this button, so drag and drop it over here. And first of all, change this text. So I'm going to right view more products. So this is done. Let us go to Style select Link button and make it left align. Alright, so we have this design like this, and now we will add these products. So let's come back. And first of all, just reduce the size of this section. And over here, we'll come back and we'll add the products element. All right, So we will add this one, this drag-and-drop interview. And you have to make sure that you categorize this element. And you have to make sure that you mentioned the attribute over here. So I'm going to select the video and I'm going to search for EVA solo. Here. This is the brand name. And since I have added only two products in EVA solo, that is why they are getting appeared over here. Let's go to style now. And the number of columns that I need is three. So I'm going to make three items per page. I did not want to have 12 items. I need to have only three. Okay, click on Update. And with this, we'll just exit this dashboard. Now. We'll go back again. And now that we have designed it, so we'll simply copy this short code and let us hovered two products, good attributes. You'll find the brand attribute, click on Configure terms, and go to IV. Also learn click on edit. And over here in the description, you simply have to paste that code. Or it pays that HTML blockquote, and then click on update. Alright, I find over here that this is not enabled. Make sure you enable searches for all your attributes. Otherwise, swatches and colors will not appear orange. So just make sure that you make this change. Click on Update. And now let's go back to a product's page that is scroll down and let us get another product which is of the brand Eva solo. So this is the product which belongs to either solo. So let's open it. You'd find this brand logo here. And if you scroll down further, you'll get to see this about brand. And over here we get this additional tab of EVA solo already. So let's get back to a theme settings and make sure you turn it on if you want to view that tab. And we do not have anything over here, let's click on Save Options. And now let's move on to quick view. Scroll up and we see that there is a quick view option. Let me show it to you what it is. If you hover over product, you'll get these options. You can go for the quick view. And it would appear something like this. I want to keep this option on, so I'll keep it on. And then we have show variations on quick view. Yes, we want to show some variations. If there is a version, it should be displayed, so we'll keep it on. And then we have Quick View Layout. Currently we had this kind of layout in which the image is on the left-hand side and the content is on the right-hand side. You can also choose to have this kind of view in which the image will go up and the content will go down, and then you can adjust the width from you. So next we have compared. That is good to compare. Enabled can pay. Yes, we want to enable it compare page. We're not assign the Compare page, so we'll assign it and click on Compare. Now let us crawl. Don't show buttons on products grid is we want to have the Compare button over here, right? If you hover over this, you'll have this Compare button. We want to have this. So that is what it is. Now you can add or remove the fields based on which your products can be compared. From here, then if it is empty, this is going to get displayed. So this is all complete. Let us click on Save Options. Now come to wishlist. In the wishlist we want it to be on and only for logged in. No, we want it for everyone. Then we have wishlist page. Make sure you assign your wishlist page. Okay. Then scroll on. Show buttons on products on loop. Yes. Keep it turned on and whenever it is empty, you can see this text. Click on Save options. Okay, let us scroll down now and we have catalog mode not required login to see prices. You can also enable this option login to see prices. I would like to keep it off. So let us move on. Now come to Cookie Law info. In some of the countries it is mandatory to display this option that you'd be saving their cookies. So if you're targeting those countries which are under European Union, you can turn this on and you can display whatever message you want over here. Then we have we have promo pop-up. You have not made any popup, had a banner of widgets, not important. Then we have products labeled come to products label. And from here you can adjust the shape of the label that you can see on your website. Okay, this discount sticker, we have it as circular. You can also keep it as rectangular. And then you can also turn off the percentage icon. If you want to display it as new, you can turn it on or off. You can also choose not to see the hot label and then click on Save Options. And let's scroll down and find out if we have anything else. Thank You. Page is also not that important. Come to products page. Let us crawl up and let's open a single product page like this one. Come back for the single product page, we do not have a sidebar, so this style is selected. Now come down and we have side-by-side is we have silicon medium, but since there is no side bus, so not important. And then we have full-width product page, not important, single product header you can have you can have a different header for your single product page, but I do not recommend it. I would recommend you to keep a consistency in your website. And then let's scroll down products page design. The design is in this form. That is, the text are aligned on the left-hand side. If you want, you can also keep them as centered. And then we have these options, which I don't think a very important, you can go through them once if you want. Let us click on Save Options and let us move on. Now, scroll down and you'd find show hide elements. Over here also, we have most of the things very self-explanatory and the product navigation is this option. And then we have the short description on. Obviously, if you turn it off, it will be turned off. And these options are important, but these are self-explanatory. So let us go to images and let's scroll up. And we have you have product image with the image width that we're using is medium, which is taking almost the half of the page. You can also make it small image. And then we had the terminal position. Currently we are using this kind of structure. If you'll come over here, the main image is appearing on the top and then the gallery images are appearing at the bottom like this. If you want, you can use this kind of structure, if you will. Let's click on Save Options and let's find out how it looks. Good to a page and click on Refresh. Alright, so as you can see now, our image is on the right-hand side and on the left-hand side, on the top, we have the gallery images. So it was that if we turn off the available images, these images, you could turn it off from here. But I don't think it's a good idea. And then, and then these options are again, very self-explanatory. So let us move on to the share buttons. Scroll up and we have the share buttons. If you scroll down, we have these share buttons over here. You can also remove them by turning it off. And what do you want these buttons to? Do? You want them to have a sharing option or you want them to take it to the follow page, you can adjust it from here. Alright, so this was a product's page. We also have a general options for our social media links, which was over here, come to link to social media profiles. And over here you can add the links of your social media profiles. Whatever social media profiles that you will add over here will be linked. And whenever customer clicks on those links, they'll be diverted to your link. Next we have Share button option. And if you want to add some additional sharing options, like these days, WhatsApp is very common. So you might want to turn this on sharing in WhatsApp. And if there's anything else you want, you can add it from here. Click on Save Options. So with this, we have completed all the settings that we needed for our website and covered the major points and settings about the customization of this team. But WordPress comes with different teams, different settings with different interface. I suggested that you go through all the settings here at least once, even if you do not want to make any changes so that you have an idea of what all things are available for customization. Whether you are setting the subset for your client or for yourself. We'll come back to this customization option if we see that there is anything missing. 24. 19 Final: So with this, we have completed making our entire website. And now let us find out if you have not missed anything. So let's go to our homepage and let us scroll down and find out if everything looks okay. Alright, so I find that everything looks okay. Here we go. So let us go to a contact page and find out if our map and our form looks okay. Let us click on the form. Yeah, this also looks fine. Now close it and let us go to a shop page now. And now let us make a purchase and find out if we are able to check out with the items smoothly. Alright, so scroll down and let's just say we want to purchase this bridle shoes. So I'm going to add it to the cart and okay, close this. I also wanted to purchase this t-shirt. So let us click on the elect options. And over here, I want the white t-shirt with small size. So let's click on Add to Cart. So I have added these two in the car and I can go to the checkout page directly, but I also want to view the cart. So let's click on View the cart. So everything is finally here, but we have this sidebar which I do not need. So let's click on Edit page and let's remove the sidebar from here. Let's scroll down. And for the sidebar we'll click on without and click on update. And let us get back to our page. All right, so I sidebar has been removed and as you can see, all the items that we have added are getting displayed over here along with the taxes, that is 10 percent taxes on this particular t-shirt. And that is why when rupee is getting displayed over here as a tax, and we also have an option of adding the coupon code. And early in this video, I had told you all, I'll show you all how to add a coupon code. So let us go to our dashboard. Let us add a coupon code, right? So this is a dashboard and hover to marketing and click on coupons. This notification is very disturbing. So let me remove this first and now let us create your first coupon. You can also choose this option. Alright, so again, let me clear this out. And I'm going to add a coupon code. And I'm going to call this coupon code as Ximen, not like this. Ximen and I'm going to give a discount of 50 percent. So I'm going to add 50 over here. And for the discount type, I'm going to select percentage discount. And you can fill the rest of the details if you want for the amount since I'm going to offer 50% discount. So I'm going to add 50 over here and remove the 0 from you. And if you want to allow free shipping, then you can enable this. And along with these options, if you also want to give an expiry date of your coupon code, you can click on this option and select an expiry date from here. Alright, let me copy this coupon code, otherwise I'll forget it. Is copy it and click on Publish. All right, so let us get back to a cartridge and let us refresh it first. All right, so I'm simply going to paste that coupon code over here and click on apply. Alright, so as you can see, this coupon code has been applied successfully and we have been able to discount 50 percent on our total price. And after adding tax, I total is 19 rupees. So I'm going to click on proceed to checkout. Alright, again, in this checkout page we have the sidebar and I do not want the sidebar. So click on Edit page and scroll down. And we're going to remove this sidebar. Click on without click on update, and let us click on View page again. Now if you scroll down, you can either select cash on delivery or you can enter your dividend credit card to make the payment. But first of all, let us fill this form. So let's fill this form. Okay, so our firm has been filled and now I will enter my card details, but I will hide this information. Okay, guys, so I have entered my card details and you can also select this checkbox if you want to use this card for future purchases. And then click on Place Order. And here I am getting the option of authenticating it. So I'm going to click on authenticate and then I'll receive an OTP, which I'm going to enter over here. So I have entered my OTB, click on make payment. And as you can see, the payment for a successful and I received this message. Thank you. Your order has been received. I received my order number, date, and all these details, the order details along with my billing address. Now what I'll do is I'll just copy this order number and check if my Track Order page is working. So I'm going to click on track orders. And I'm going to paste that ordinal movie here. And I'm going to enter my email address. Let's click on tricorder and find out if it works already guys, so it is working the way it should work. Ada isn't processing and all these information is getting displayed over here. So this was our website from the customer's point of view. Let us find out what V will get to see from our dashboard. When you open your dashboard on it, Let us first of all, remove this notification. And I think I have removed an important screen element from here. So click on screen options. And over here, just make sure that you have not removed this. So enable this and click on screen options again. And over here, there's a quick set of which I can see just click on Start Selling. And let's find out what it is. We have, since we have already computed all these things. So we'll skip this, skip this nothingness, complete the task. Alright, so this is done. Let's get back to our dashboard. And you'll get to see this debt is one order awaiting processing. So if you want to view the order, you can either click on this option or you can hover over WooCommerce and click on orders. And over here you will find all the orders that you have received on your website. Let's click on this order which we have just made. And in this page you'll get to see all the order details. As you can see, all the items have been listed which we have ordered for and the coupons that I have used, the total amount. And the billing address is also somewhere over here? Yes. Over here, the billing addresses over here and the shipping address is over here. Now since the payment was successful, we are getting this message, stripe charge complete. And if you want to make sure whether you have received the payment or not, you can go to this stripe dashboard and go to payments and you'll find a payment over here. So this was the payment which we have just made. It was made right now on today's date. So we have received the payment successfully. So you'll receive the payments from Stripe. Let's get back. And after you have send this product to the customer, what you can do is you can add the tracking ID over here. And you can simply go to this drop down and click on node to customer and click on Add. And this tracking ID will be sent to the customer like this through e-mail. Okay, guys, so after you have completed this order and you have delivered this product to the customer, you can change the status from processing to complete. Otherwise, this will be in processing state. So we'll update this. And as you can see, this notification has gone. So with this, we have completed making our website. And I'm so glad that you have made so far who deserve a short break. You have just unlocked a new set of skills by following this course. I hope that you had a great learning session throughout the journey. Thank you for choosing and believing in me for this course, if you like the course, don't forget to leave a review. It will help me to stay motivated. Work had a great lectures and add more lectures on regular basis. So all the best and God bless you all.