Make a Grocery Website in WordPress| Full eCommerce Tutorial | Md Zaman | Skillshare

Playback Speed


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

Make a Grocery 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

28 Lessons (3h 10m)
    • 1. 01 Introduction

      3:48
    • 2. 02 Domain and Hosting Explained

      0:50
    • 3. 03 A Preferred Hosting and its Features

      3:56
    • 4. 04 WordPress Installation & Login

      6:59
    • 5. 05a WordPress Introduction: Overviewing Menus

      6:36
    • 6. 05b WordPress Introduction: Important Settings & Overviewing Menus

      2:57
    • 7. 06 Themes: Installing a Premium theme

      3:13
    • 8. 07a Plugins: Installing theme plugins & Additional Plugins

      2:40
    • 9. 07b Plugins: Briefing of all the Installed Plugins

      2:24
    • 10. 08a WooCommerce: Quick Setup

      1:49
    • 11. 08b WooCommerce Settings: General tab and Products tab

      2:42
    • 12. 08c WooCommerce Settings: Taxes Tab- Setting up taxes

      2:07
    • 13. 08d WooCommerce Settings: Shipping Tab- Setting up shipping/ assigning Delivery fee

      4:35
    • 14. 08e WooCommerce Settings: Payments Tab- Setting up the payments

      2:45
    • 15. 08f WooCommerce Settings: Acc Privacy, Email, Integration & Advanced

      1:40
    • 16. 09 Downloading and Processing Copyright Free Images

      7:15
    • 17. 10 WooCommerce: Uploading Products- Simple and Variable

      16:01
    • 18. 11 Pages: Creating the Homepage and assigning it

      4:18
    • 19. 12a Slider Revolution: Designing Homepage-with Elementor & Intro and Importing Sliders

      10:10
    • 20. 12b Elementor: Designing Homepage body with Elementor

      23:59
    • 21. 12c Elementor: Importing About & Contact Pages

      4:00
    • 22. 13 Blogs: Creating & Assigning the Blog Page

      4:35
    • 23. 14 Pages: Creating Track Order, Compare & Wishlist Pages

      1:51
    • 24. 15 Menus: Creating Menus and Mega Menus

      11:12
    • 25. 16 Header: Designing Custom Header, Uploading Logo and Category Menu

      11:56
    • 26. 17 Footers: Intoduction to Widgets- how it works

      6:35
    • 27. 18 Theme Customisation

      30:25
    • 28. 19 Chekup/Checkout and Finalising

      8:18
  • --
  • 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.

49

Students

--

Projects

About This Class

In this step-by-step WordPress course, we will learn how to make a Grocery 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 Introduction: Hi guys, My name is moments of man. And in this course we will learn how to make a grocery website in WordPress. I have been designing websites for more than a decade and I have done all the hard work for you to choose the right theme and the right plug-ins to ensure that you do not have to compromise with the quality or speed of the website. You can design this website in the easiest way possible. That is drag-and-drop. So let's just say you want to change something over here. You can simply click on this Option, Edit with Elementor. And this option is going to be available in all the pages of our website. Just click on this option. And let's say you want to change something over here. So you simply have to click on this particular element and then go to content. And let's say I want to change this text to my name itself. So I'm going to write something like this. And this text is going to get changed. Now let's say I want to change this Eigen. So I'm going to click on this icon, click on Choose image, and then I can select any image from him. Let's say I select this one. Click on Insert media, and that image has been changed. All you have to do now is click on update, and this is how your page gets updated. Let's come back and click on refresh. And now if you'll scroll down, you'll find the image and your text has been changed. And let me add on to this. You do not need to have any WordPress knowledge also, because we will be learning this entire website from scratch and it is going to be step-by-step. So without wasting any time, let me show you what are you going to make after you have followed this tutorial. We will be using a premium WordPress team to design this entire website. We learn how to add custom headers like this and about from the regular menus that you can see over here. I will also teach you how you can add mega menus like this. On the left-hand side, we have this beautiful category menu. This menu also has some mega menus. And we had this beautiful icon over here in front of each category. I will teach you how to add them. I will be showing you how you can import and customize these kind of beautiful sliders and then add icons like these to highlight some of the key features about a website. I will teach you how to add all the product types that are required for a grocery website. And I will teach you how to add them in tabs like these. I will be providing you all the images that I've used in products, banners, and then categories over here. And I will not only teach you how you can add these images, but I will also ensure that you can make sections like this by providing a session in which we will learn from there you can get these images. I will also teach you how to edit them and then customize them so that you can add it on your website and make your website loads faster. And the bottom of the page, we have our footer. We have some links over here after a short description of our WordPress website. And then recent post, I will teach you how to make blogs so that you can drive additional traffic on your website. A customer can come to your website and either search for products like this. Or you can directly go to the shop page or Arab product to the cart by clicking on Add to cart. Over here, the item will be added on his card and he can view the card by going to the View cart page. We will learn how we can configure a website to calculate the shipping charges. Keeping in mind that we are making a grocery website, we learn how we can provide our services in a particular location based on zip code. Well, restricting the other areas, we will learn how we can add GST or tax slabs and then assign products on different tax slab so that GST is calculated automatically. We will see how we can add payment gateways so that we can accept payments from customers directly on our website itself. It is not possible for me to summarize all the features in the introduction itself. But I assure you that you will have a great learning session. 2. 02 Domain and Hosting Explained: So irrespective of what kind of website you want to make, you need two basic things, a domain name and web hosting. Our domain name is simply the name of the website and it could be anything. It could be Google.com, Muhammad's Amman.com. It could be Facebook.com anything. And remember, 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 survey 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. 3. 03 A Preferred Hosting and its Features: I have a good solution for them postings. You can open a new tab and go to MDs among.com slash AFC M. And 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 oculus, which will allow us to install WordPress very easily. And then we have got daily backups. 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 server security, they're using bit ninja, which is an awesome solution. Then you get three website transfer. So 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'll show you how to do this. There are other features of this website 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 HDD space, 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 608. 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 WordPress. 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, 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. 4. 04 WordPress Installation & Login: 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 here. 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 could be in two scenarios. If you have come this far, in the first scenario, you would have registered your domain name from fast commit 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 register. From there you have registered your domain name. I've 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 these 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 foster, 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 would find names server-1 and NIM server to just go to first names ever 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 paste it. 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 comment 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. So 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 rule. Come back and enter the master password. Click on Proceed. Our IT guys. So this is a fast comment cPanel dashboard. And the first thing that we have to do over here is make sure that we have a 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 will 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 we have to install WordPress. And to install WordPress, just search for soft calculus over here and you'd get this option, soft cyclists App installer. Click on it, and you'll come to this page, you'd find that there is a Lwoff Wordpress click on install in this page. First of all, we'll select the version, make sure you select the latest version for your WordPress website. And then we have Jews installation URL for the 2s protocol and make sure you select HTTPS and no other protocol. Alright? And then over here we have choose domain. I want to install WordPress to this domain. So I'm going to enter this domain name. And for the indirect worry, I'm going to keep it empty. Just keep it empty. Alright, scroll down. We can change this later on also, so I'll leave it the way it is now. And then we have admin account. Make sure you give a good admin user ID and a good password. So I want to give a user ID of and for the password. For the admin email, make sure you enter an email address which you actually use. So I'm going to change this. You can choose your language from here and then scroll down at the bottom of the page and click on install. The installation process is very short. It is going to be completed before you know it. And it is done after installation is complete. You can go to your WordPress website either by clicking on this link or you can open a new tab and then enter your website's URL. And then add slash WP hyphen admin. Just like this and click on Enter. Once you do that, you'll be asked about your login credentials. So I'm going to 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 this is going to bring you to the WordPress dashboard. 5. 05a WordPress Introduction: Overviewing Menus: Wordpress dashboard. This is the backend of our WordPress website. And from her you can manage your entire WordPress website. There are a lot of notifications of you, and there are some widgets as well. We do not need these visits, so I'm simply going to click on screen options and uncheck all these checkboxes. This is going to make our dashboard a little cleaner. We definitely need some widgets, but it is not going to be the ones that we have just removed. All right, the next thing that I want to do now is I want to familiarize you with all these menu options that are available over here. Alright? This is going to be just an overview, not a very detailed explanation. So the first thing that we have over here is a dashboard VR in the homepage of our dashboard. The very next set menu we have over here is updates. If you click on updates, are bits actually deal with all the updates that are available for your WordPress website, all the plugins and themes that you have installed it there is any update available. This option will let you know. It is also going to let you know if there is any WordPress abrade available. The current version of our WordPress website is 5, 17. So let's say tomorrow if we get an update of 5.8, this option is going to let you know if there's any update available. You'll find a small number, notification number right in front of updates. And the next thing we have is post. Posts are also known as blogs. And you can manage a post somehow. Over here we already have a deep fault post available, so we can edit it, deleted, or take a bulk action by clicking on this particular post from here. If you click on a play, this action is going to get a blade. Each post will have its author name, categories, and tags. The username with which we have logged in was this username. You can add some more users by going to users and clicking on Add New and whatever post that user's going to write is going to be displayed over here. We have categories and tags. This is the default category of WordPress. If you don't categorize your posts, it will be uncategorized, just like this. Tags and categories can be added value or writing the post. You can also add tags and categories by going to categories and tags menu individually. So let us move on to our next menu item, which is media. And the media library is going to contain all the videos, images, and any other kind of file that you upload on your WordPress website. You can add some more media files by clicking on this Add New button. Or you can click on this option as well. So this was media and let us go to Pages now. Pages in WordPress is just web pages of your website. It can be homepage About Us page. There are two pieces that are available by default. And these pages can be managed just like we have seen in posts. You can either edit them or put them to trash or preview them. Or you can also take an action by clicking on a particular post. And if you want to select all the pages, you can click on this checkbox and take a bulk action from here. We do not really need these pages, but we will be deleting. And afterwards, you can add some more pages by clicking on this button, Add New, or you can use this option. This was pages. Now let us go to comments. Comments are something which you receive from a viewers. So whenever you receive a comment, you can do all these things. You can either unapproved them, reply to them, span them, are polluted trash and just late posts and pages. You can also take a bulk action by selecting this particular checkbox and selecting a bulk action from here. So let us move on to appearance. The first thing we have in appearance is teams. The appearance menu contains links which can be used to change the appearance of our website, the front end appearance of our website for our viewers. We are currently in the backend. The front end of our website would be this one. This is a front end of our website and this is a backend. We will be discussing the rest of the summer newsletter. But let me show you how our website changes whenever we change up regular team. So the current team that is active is 2021 team. And if you'll open the front end of your website, it is going to look something like this. So if you change the team and activate the 2020 theme, let us activated and go to a website and click on Refresh. You'll find that the look of the website has completely changed. So this is what a team does. It changes the look of the website. Wordpress theme is the front end styling of a WordPress website. It provides fonts, colors, widgets, templates, style of blog posts, etc. It is basically the overall design of style of your WordPress website, the way your WordPress website will look. So there are free themes and premium themes available in WordPress. For this particular website. I've used a premium theme, which is one of my personal favorites, but we will be installing our team later. First, let us complete the overview. The next thing that we see over here are plugins. So let us click on plugins. Plugins are softwares that we install in our WordPress website. These plugins either enhance the features or functions of your website or add entirely new features. These are just like ABS that we install in our mobile phones from App Store, you will learn more as we move forward, just like we have an app for everything we want to do in our phone. We have plugins for everything that we want to do in our WordPress website. So whenever you want to add any plug-in, you simply have to click on add new, either from here or from here. And you can search for the plugin you want. From the search bar. In the Installed plugins page, you'll find there are several plugins already installed by default. We are simply going to lead them because we do not need these plugins. So to delete all the plugins, I'm going to simply click on this checkbox and take a bulk action by selecting, Delete and clicking on, Apply. Click on Okay, and all the plugins will be deleted just like that. The next thing that we have over here is users. You can add some more users to your WordPress website by clicking over here or over here and giving them a particular rule. Read. Now you are the admin. You can add them as editor, author or whatever you want. So this was users. And next we have tools. Tools are not very important for now. So we'll go to Settings. 6. 05b WordPress Introduction: Important Settings & Overviewing Menus: Now there are a few basic settings that we need to make. Just make sure that you are in the general sub-menu of settings. And the first thing we have over here is site title. It is currently my Wordpress. The cytosol could be a brand's name or your shop's name or whatever site title you want to give. So under name it would not. This is actually the team name that we are going to use. The next thing we have here is tagline. And for grocery store tagline, let me give it as groceries at your doorstep. Okay? And then we have two URLs. For the URLs, just make sure that you add HTTP S as o here, as well as stands for secure. And since we have already installed SSL certificate, we have to add an es, make our website secure. If you'd go to the URL bar, you'd find that it says here that it is not secure after adding an S. And as soon as we go to save changes will be logged out of our WordPress website. So when we login again, you'll find the status changed to secure. Next, we had the admin email address. Make sure you put an e-mail address which you actually use. Check this checkbox so that anyone can register and you can change the sign language from you. And for the time zone, I'm going to be using my own time zone, the Kolkata time zone. This is going to be my date format. And the restaurant, the things are fine. So I'm going to click on save changes. As I click on save changes, I'm going to be logged out of my WordPress website and I'll have to again login. So I'm going to enter my login ID and my password. And I'm again going to check this checkbox. I'm going to login again. So we're back again. And now when you see the URL bar, there is a small lock of you. And when you click on this lock, it says connection is secure. This means that our SSL certificate is up and running. Let us cancel this. And the very next important setting that we have to do is by clicking on permalink and make sharp boost name is selected. So whenever you make a post, a blog post, like over here, if it go to blog, we already have a post by the name helloworld. And if you view this post, the URL is going to look something like this. Our website's name slash the post name. We want a URL to look something like this. There are few more formats available. If you'd go to Palm links. There is this viewer clean format which gives a random number and that is this date name available. So what do you have a do over here is select this post name format that is over here. This is the best permalink format for your SEO. So make sure that this one is selected and click on save changes. So this was an overview of our menu. Now let us come back to our dashboard. 7. 06 Themes: Installing a Premium theme: All right, so now that we are quite familiar with the menus, we will install a new team. If you'd go to a WordPress website, it looks very basic and it needs a lot of designing. Rate solely install a new theme and to install a new theme, hover to Appearance and click on Teams. You'd find some themes of you. These teams are default WordPress themes. They are very basic and they do not provide a lot of customization option. So let us click on Add New. And you'd find a lot of teams over here. Also. Some of these themes are really good. But the theme that we are going to use is going to be much better than these teams. So open a new tab and enter MDs among.com. Slash would mark and press Enter. You'll come to theme forest and you'll see wood marked him over here. And apart from providing a lot of customization option, there are other features which I strongly recommend, like we can use Elementor page builder to design the website. And then we have this header designer, the header layout builder. You can customize your header the way you want it to be. And better than this builder. There are few pre-made header layout. I like this one and the one that we have used in our website the most. And this is going to save us a lot of time. Apart from that, this team uses very few plugins and most of the functionalities are embedded in the team itself. So we do not have to install a lot of plug-in to design our website. Then we have the footer nav bar. I want to show this to you if you'd go to a reference website and take it to the mobile view. This photo over here gives the users and apps like experience and they can navigate your website using this mobile BR. And then last but not the least, if you'd scroll down and hover to a particular product, you'd find that you can add the quantity for a particular item from here itself. This is not available in most of the premium themes, MSC, most of the premium themes offer this kind of add to cart option. They do not have this quantity option over here. So let us get back to a team page and click on, Add to Cart. Click on go to checkout and enter your first name. Click on. I agree. And once you check out with you order, your theme should look something like this. You just have to scroll up. And over here, you just click on Download. Now click on this burger download and click on install WordPress file. And then a zip file will be downloaded just like this. We'll go to the homepage and click on Upload team. And then just drag and drop this theme over here and click on Install. Now, it has hardly going to take any time to install this file. Click on activate. And once a team gets installed, we'll remove the rest of the themes. Just like this. Click on a team and click on Delete on the bottom right corner, and click on Okay. So we have only one team right now. And if you'll scroll up, you'd find that they're recommending few plugins. So we'll install these plug-ins as well. 8. 07a Plugins: Installing theme plugins & Additional Plugins: Okay, so now that we have completed installing our team, we will install plug-ins are permanent teams comes in a package. The package include some plug-ins as well. So we will install these plugins first, and then we will install the plugins if they required. You can either begin your installation from here or you can go to the plugins page. I do not want to take any shortcut, so I'll go to plug-ins. To go to Plugins, just click on plug-ins from you. And you will come to install plug-ins. Here you'll find all the plugins that you have installed, if you remember correctly, we had deleted all the plugins that we're here by default. Now you see that same notification over here as well. So we will click on, Begin installing plugins. And all the plugins that are required will be listed over here. And to install all the plugins, I'm simply going to click on this checkbox and this is going to select all the plugins that I owe you. And from the bulk action, click on install and click on Apply. So this process will install all the plugins that are required by a team. So let us go to install plug-ins again. And you'd find the same notification. Again. This is because although we have installed all the plugins, we have not activated them solidous, activate them all at once. Just click on this checkbox. And from the bulk action, click on activate and click on apply. You may be redirected to other menu. But I'm going to go to Plugins again. Now if you scroll down, you'd find this WP Bakery page builder. I'm not a great fan of WP Bakery page builder. And since I already have elemental with me, I do not want this plugin. So I'm going to delete it. And to delete any plugin, first of all, you have to deactivate it. And then you can delete it just like this. So we have installed all the plugins that are required by a team. And now we'll install some plugins that we need for our WordPress website. So click on Add New. You can call it your Wordpress App Store. Search for the plugins that you want. The plug-in that I need is stripe. Stripe is a payment gateway for a WooCommerce plug-in. The WooCommerce plugin, which we have installed, which was recommended by a team. The WooCommerce plug-in requires a payment gateway in order to accept payments from our customers, which is going to be striped. So click on install now and click on Activate. I think we have installed almost all the plugins that we require for now. We will install some more plug-ins when we need them. 9. 07b Plugins: Briefing of all the Installed Plugins: All right, So since we have finished installing a plug-in for now, I just want to briefly about all the plugins that we have installed so far. So the first plugin that we have over here is Contact Form 7. Using Contact Form 7, you can make any kind of phone if you go to a reference upside. And if you go to Contact Us, the form that we have over here has been made using Contact Form 7. And the next plugin we have is Elementor. And like I have told you, elemental is a drag-and-drop website builder. You will see lead to how easy it is to design a website using drag-and-drop method. And then we have Mailchimp. Mailchimp is for email marketing. You can make a form using Contact Form 7, and then you can let your customers sign up for your weekly newsletters. The next plugin we have over here is safe SVG. If you've not heard about SVG, SVG stands for Scalable Vector Graphics. It is a kind of file format like JPEG and PNG. Svg was mostly used for icons, but these days, SVG files are also used for logos. The benefit of having SVG file is, no matter how much you scale it, it does not get pixelated. What this plugin does is it allows SVG uploads into your WordPress and it filters the SVG before you save it. And the next plugin we have over here is slightly revolution. If you'd go to a reference of sight and good to a homepage, you'd find a slide over here. This image over here, it keeps on changing. And you can also change this image by clicking on this next button. Okay, So this later has been made using Slider Revolution. You learn how to use it. Then we'll go to designing. The next plugin we have over here is WooCommerce. Now what WooCommerce dens is if you install WooCommerce to your WordPress website, it transforms it into an e-commerce website. It adds e-commerce features to your WordPress website. And like I said about stripe, Stripe is a payment gateway and this particular plugin adds payment features to your WooCommerce website. You'd be able to accept payments from customers using this plug-in, the wordmark cope plugin comes with Woodmont and it helps them customization of your team. And it also adds a lot of features. All the plugins that we have installed over here have made their place in the menu list, either in the menu or in the sub-menu. The next thing that we would be doing is setting up a WooCommerce store. We have installed a WooCommerce plug-in, and now we will set up our store. And to do that, you can either click on settings from here, or you can simply go to WooCommerce from here and click on it. 10. 08a WooCommerce: Quick Setup: And as soon as you click on WooCommerce, you will be redirected to the quick setup page. So the first thing we have over here is our address. So I'm going to enter my address. And then my country, followed by my region, which is state in India. So I'm simply going to search for Maharashtra. It is over here. And then for the city, I live in Mumbai. And there is a checkbox over here which says I'm setting up a store for declined. No, I'm not. So I'm going to let this checkbox empty and click on continue. Over here they are asking if they can track you to improve the service. I do not like people tracking me, so I'm just going to go for no thanks. Then they won't know in which country does this store operate. I'm going to go for food and drinks and then click on Continue. The product type is going to be physical products. And yes, that's it. Click on Continue. And then your business detail, how many products do you plan to display under display, maybe less than 1000 products. So I'm going to go for this one. And guys don't take this seriously. This is just a quick setup. You can change all of these settings later. The next question we have over your IU selling elsewhere. So I'm going to go for no. And there are a few plugins that they recommend. I am not interested in them, so I'm simply going to deactivate these and then click on Continue. And in this case they're asking us to choose a theme. We already have a team which is this one. So I'm going to go for, continue with my active team. And in this page they are suggesting us to go for this plugin. This is a good plugin, but I do not want to go for it, so, no thanks. Just close this one. Alright, so we have completed our quick setup and now we will do the settings in advance. Like we'll setup a payments are taxes, shipping, and all those things. And to do that, just click on settings from here. 11. 08b WooCommerce Settings: General tab and Products tab: So we have completed our quick setup and now we will do the settings in advance. Like we'll set up a payment. Our taxes are shipping and all those things. And to do that, just click on settings from here. And since we have completed our quick setup, our store address has already been filled over here. And from the general option, we have selling location. Where do you want to sell your products? So we have options like sell to all countries, sell to all countries except for and then sell to specific countries. I want to go for cell to specific countries. So I'm going to select it. After you do the selection, you will get this option. Simply type in your country's name here. And the next option we have over here is shipping location. This is for shipping purposes, the delivery fee and all those things. So we have shipped to all countries you sell to ship to all countries, shipped to specific countries only or disable it. I want to ship to specific country only. So I'm going to select it and I'm going to enter my location, which is India. This one for default customer location, select geo-locate, and then scroll down. And then over here we have enabled taxes. If you'll enable this option, that means you want WooCommerce to calculate the taxes based on the information that you have given. And if you enable this, there will be one more time over here, which will say taxes. But we'll see that later on after we save the settings. Okay, so the next option we have over here is enabled coupons. Yes, I want to enable the coupons. I want to provide some coupon codes to my customers. For the currency, I want to select Indian rupee here, and rest of the settings are fine. So click on save changes. And like I said, once you've saved the changes, you'll have the tax option as well. But let us go to products first. Most of the settings in this page is fine, but if you want to change your vein unit, you can change it from here. You can change from KG is two pounds or whatever you want, and dimensions as well. But I do not want to change it. So I'm going to go to Inventory. This option in WooCommerce allows you to manage stock. If you scroll down over here, you'll find low stock threshold. You can set it to any limit. This basically means that you'll be notified if any of your stock goes below this limit, your WordPress website will send you an e-mail on this e-mail address notifying you that you have so and so item which is low in stock to this email. And similarly, we have an option of out-of-stock threshold. Whenever any of your product reaches 0, you'll be notified on this e-mail address. Now let us click on save changes and let us move to taxes. So click on taxes. 12. 08c WooCommerce Settings: Taxes Tab- Setting up taxes: So click on taxes. We do not have to do anything over here. Just scroll down and you'll find this option. Additional tax classes. Don't get confused, guys. This simply means tax slabs that you have in your country where you want to sell your products. You may be having taxes by many names. Like we have GST in India, but earlier we used to have that. And no matter how many tax labs you have, you simply have to write it over here and click on Enter. Like in our country, we have for tax slab 5% 121828 under GST. So I'm going to simply name them. I'm going to press Enter and then I'm going to write GST five for 5%, GST, 12 for 12 percent, GST 804, 18 percent, GST, 28 for 28%. Okay. Right now, you have just written the name of all the taxes that we have available in our country. I'm simply going to click on save changes. And by doing this, I'll get all these tax labs available over here. Just like this. Okay. So first of all, let us go to GSD five rates and click on Insert rule. And in the country code, type in your country name. Even before you complete the spelling, the name of a country should appear in the drop-down. Just click on it, leave these rows blank. And for the rate, just write 5% is already written over here. You do not have to add percentage. And for the tax name, I'm going to write GST. If you have that in your country mixture, you read that over here and make sure you type that while defining also an unchecked this shipping checkbox and click on save changes. Now this rate has been assigned to GSD five. Now, let us go to GSD 12, and I'm going to repeat the same process. I'm going to add the country code. Leave these rows blank. And for the rate, I'm going to add 12 and tax name as GSD and uncheck the shipping option, and click on save changes. And this is how easy it is. You can add the rest of the tax rates. The process is the same. 13. 08d WooCommerce Settings: Shipping Tab- Setting up shipping/ assigning Delivery fee: Shipping is basically defining where we want to sell our products. And it is also about defining how much we want to charge our customers for delivering than the products. You can call it the delivery charge or the delivery fee. So let's click on Add shipping zone. The first option we have over here is Zun name. This is for reference purposes only. So I'll write Zone 1 over here and let's write location one. Then we have Xun region. This is where we actually define a region and zone region. We will explain where exactly we want to sell our products. And you can be as specific as you need. If I'm going to select India over here, this would mean that I want to sell my products in the entire country, but I'm going to cancel this. And I wanted to sell in Maharashtra only. I live in Maharashtra, So I wanted to provide my services in Maharashtra. I can add some other regions also. So if I'm going to add Gujarat, I can add just like this. And you can add as many regions as you want. I'm going to cancel this one and I'm only going to keep Maharashtra over here. And then you will find this option, limited specific zip up post codes. And if you click on this option, you can add your postal code over here. There is a small thing which I would like to explain here. Woocommerce is for any kind of e-commerce website, people sell the product in multiple locations. And if someone is selling a digital product, they can sell it on multiple countries. In fact, in our case, we have a grocery website. We cannot sell internationally. We will provide our services in a particular location, limited to a specific zip code up in code. Since it is a perishable product and shipping far off may incur heavy cost. Over here, I'm going to select the location where I want to sell my product based on pin code. So I'm going to type this pin code for 01105. You can type multiple pin codes over here. And if you want to find the limitations of your PIN code, I mean the area European Code covers. You can simply search it on Google Maps. Like you can open a new tab and you can go to Google Maps and search for the area by zip code. Like if I'm going to type my zipcode, the one that I have ended up with there and search for it. The area that it covers is going to get highlighted. So let's come back. If you want to provide your services in multiple zip code, simply enter the zip code, just be this. There are a lot of examples over here and you can also read this documentation for more options. But for now, I only want to have the zip code for location one. So let's scroll down and you'll find this shipping method. If you'd click on Add shipping method, you'd find we have the option of adding three kind of shipping methods over here. First we have a flat rate, so let's click on it and click on add shipping method. Flat rate is going to get added and now we have to edit it. And I'm going to add 20 over here. So if someone is going to order any product from my website, they're going to be charged to entropies as a delivery fee. Let us click on save changes and let us add another shipping method. And the next one would be free shipping. I want to add free shipping to those people who have a coupon code. So click on Edit and we have an option over here which says free shipping requires to have a valid free shipping coupon. And there are other options as well. You can go through them like you can have a minimum order amount. You can have a minimum order amount or a coupon, or you can have a minimum order amount and a coupon. In this case, you need to have both of them. And in this case, you can have either of them. You can either have a minimum order amount or the coupon. I'm going to select a valid fee shipping coupon. And later on we're going to learn how we can add coupon for our website. So let us click on save changes. And the next option we have in the shipping method is local pickup. I also do not want to charge anything to those people who are ready to pick up the groceries by themselves. So I'm going to click on edit and add as a cost of 0 for the local pickup. Click on save changes. And this shipping method has also been added. I don't think we need to go through the shipping in detail for grocery website. As we are not going to ship our products very far. It is going to be limited in a particular area. So with this, we'll save our changes. Okay, this has been saved. So let us move on to another type which is payment. Click on leave. 14. 08e WooCommerce Settings: Payments Tab- Setting up the payments: Okay, so in this page we'll make a payment settings. First of all, I want to enable this option, cash on delivery. And then if you scroll down, you'd find this option stripe just enable this as well. This option will enable us to experiment from customers who want to pay via card. So scroll down and click on save changes. And you'd find this Manage button over here next to straight. So click on it. And here we'll have to set up the Stripe account so that we can receive a payment. So first of all, make sure that this one is enabled. And for the title, I'm going to remove stripe from you and add debit card over here as well. Or you also am going to add debit card. And I'm going to capitalize the C over here and see over here as well. And remove this option stripe. Next we need some Stripe account keys, but make sure that the text mode is disabled. What we need now is publishable key and secret key. If you scroll down further, you'd find this link over here and you'll get these options from Stripe website itself. So you can use this link to get these keys. So I'm going to click on it. You can also come to this page by entering stripe.com. And like I've mentioned before, Stripe is a payment gateway and it allows us to accept women from customers. Stripe is available in most of the countries. There are few countries where Stripe is not available. Try to find out some other payment gateway. There are many other payment gateways these days and you will definitely find some other payment method for your country on Google, the process is going to be the same. If you do not have a Stripe account already, you can click on sign up from here. Since I already have it, I'm going to login. All right, so this is a striped dashboard. And before we begin, just make sure of two things that you have verified your email address. Email verification is very simple. You will get an email and you can just click on Verify from your e-mail. And the next thing that you have to take care of is add your business detail. I'm not saying this part because this option is very country-specific and the options that I might get could be very different from that of yours. After you're done with these two things, click on developers and click on API keys. Over here you'll get the publishable key that we require in a website. So let's come back and click on this publishable key. It is going to get copied. Let's come back and simply paste this key over here. 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. 15. 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. And 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 reorder 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 a 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. 16. 09 Downloading and Processing Copyright Free Images: And now that we have completed all of WooCommerce settings, now we will move on to create products for an e-commerce website. But before we do that, we must know where to get the images for a website, especially a product images, so that we can upload the images of what VIA selling. I have already provided you a link. From there you can download all the required files and images for a website and the product images as well. But you may want to use a different image or you must be having different products to offer. So they can be three kinds of images. Let us open a new tab. The first one on our list of fresh products, like fruits, vegetables, or some other dry product. So suppose if you want to download images of apples, a few websites where you can get copyright images for free. The first one is free pic.com, free pick. Just like this. And let's just say you want images of apples. So I'm going to search for Apple over here. This is the image that I've used on our reference website. This website limits the number of downloads unless you sign up and login to the website. So make sure you login and then download. So this is the website from where I download my images for fresh products. The next kind of product images that we are going to require our packed products, these kind of images can be quite difficult to get. Let's say you want images of magnitudes. You will get lots of images in Google. Amazon has the best and most professional images in most cases, but there could be copyright issues, although the chances are extremely low, most people download these images and use them because they know that no one cares. And the people who have posted these images have no intention to earn money through the pictures of these images. And many people process them first, like the first rename these images and then they slightly changed the image, like add some labels or flip the image, or add some additional information to make it slightly different to avoid copyright issues, the best way would be to ask your sellers to provide you the pictures or download the pictures from their website after taking the permission. And in the end, you can hire a photographer or you can take pictures yourself by watching few tutorials and for all other kinds of images. For your website, you can use Pexels.com, not just product. You can find all sorts of copyright images in this website. For example, if you search apples over here, you can get images of apples, lots of images of apples. Or if you go for some other search, Let's go for something which is trending. Let us click on t. You get images of t. All right, there are few more websites like this. The second one is pixabay.com. This one, and the third one is Unsplash.com. All right, just make sure of one thing that whenever you are downloading any image, make sure you download the smallest size, like this one, because large images may make your website quite heavy and it is quite important that your website loads faster. And in the end, I would like to talk a little bit about image processing. Suppose you go to one of these upsides and search for an image. You've selected an image and you have downloaded it. Once you go to this folder. The size of this file is 429 KB, and the dimension is also quite big. And apart from that, I want a squarish image. So I would want 500 by 500. So there are lots of online tools where you can get these things done in seconds. You can search for resize image over here. There are a lot of websites like this, but I use reduce images over here. You can simply drag and drop your image just like this. And if you scroll down, you'd find a lot of options over here. If you want to reduce the image size, you can simply type whatever you want over here. Like if you type 500, the height of the image is going to reduce proportionately so that the image does not get compressed sideways. If you remove this lock, this won't happen and I strongly do not recommend you this. So let us keep this locked and reduce the quality to 80 percent. And now if you click on resize, we'll get this resized image. As you can see over here, the resized image is off 21 KB. But this image still does not satisfy me because like I said, I don't need a squarish image and I need a squarish image only for products, because I've noticed that squarish images look better than the theme that we have installed. The Woodmont team. You can do this over here by removing this lock. But like I said, I do not recommend and it would look something like this. It looks weird, compressed from the sideways, and I do not like that. So that's why I use one other website which goes by the name photo p.com. And over here what I personally do is first of all, I take a new file and I give it a name. And I define the width and height that I want. So I need 500 by 500 image, okay, and I click on create. Now the image that I've just downloaded was this one? No, it was this one, I think. Yes. 429. So I'll drag and drop it over here. And then I'm going to increase the size by pressing Shift button, okay? Click on shift burdens so that the image size increases proportionately. I'm not going to leave the Shift button. I'm going to increase the size this field. So, and then I'm going to put the image in the center, this click on Enter, and it is ready to be saved. So I'm going to click on Files again and exported as a JPEG. You can adjust the quality over here. I'm going to leave it as 70 percent. Click on Save, and our image has been downloaded. Now there's a small problem with this image is that it has a background rate. I won't remove this backbone to remove this background, we have one more website. You can search for, Remove BG, just like this. And for this also there are many websites, but I use this one. Remove BG, simply drag and drop this image over here. And your background is going to get removed just like this. Okay? You can download this image like this, and you can go to the folder and you can get your image or eight. So this image is again of 255 KB. So what I'm going to do is I'm going to go to the resize option again and move this one and simply drag and drop this file over here. Scroll down and change it to JPEG. The file that we have received is PNG format of your PNG format. So we'll come back over here, make sure that this one is locked. Check the quality and click on Resources. Now our image is of 30 KB and you can use it on our website for products, I will not recommend you to use an image of more than a 100 KB. So this is how you can edit your images. And although I have downloaded the image from Pixabay, I would advise you that if you want to download a product image, go for free pic.com over here, you'll get more professional images for products and for the rest of the images, you can go for Pexels, you can go for Pixabay or you can go for Unsplash. So that was all about images. And now we'll upload products. 17. 10 WooCommerce: Uploading Products- Simple and Variable: So to upload products, how would the products and click on add new? The first product that we are going to create is going to be a simple product. A simple product is a product where there is no variation. If you'll come to a reference upside and let us scroll down. And if you hover did this product, you'd find that there is this price range of 70 rupees to 170 rupees. And this particular product is available in variance. If I click on Add to Cart button, you'll get this drop-down in which you have to select 500 grams of one liter, because this product is available in valence based on packaging. And if you select a particular packaging, the final price is going to appear over here. And then only you can add this product to the cart. This is not the case with apples. This product is not available in valence, and that is why the final price is getting appeared over here. And you can add it to the card directly. So this is why this is a simple product and this is a valuable product, will design a simple product first. So let us come back over here and add apples. And then over here we have product description. The first section that you see over here is actually the long description. Let us come to a reference of sale and let us open a product. The description that you can see at the bottom of your screen is actually the long description. So I'm going to copy this description from here. Let us come back and pasted. All right, so this was disruption. Now let us scroll down and we have the product data. If you click on this drop-down, you'd find several product types that are available for a WooCommerce website since we are uploading a simple product. So I'm going to select Simple product, so V0. And then we have these tabs. The first tab says general, and the first option we have over here is the regular price. So for Apple that I want to enter a regular price of 150 rupees. And then we have a sale price also in a WooCommerce store. If you're going to enter your sale price along with the regular price, the regular price is going to get cancelled like this, and the sale price would appear like this, orange. So if the product is on sale, I can put it on sale. And let's say I put it 140 rupees. I can also should yield a sale by entering a frown date and a due date. The duration in which I want to put this product on sale. But let's cancel this. Then we have tax status. If you'll keep it taxable, you have to enter the tax slab in which this product falls. I'm going to enter a tax slab of GST five. And let us move on to the next tab which says inventory. Over here. The first option we have is SKU. Sku stands for stock keeping unit. This is just a reference number, a unique reference code you put on every product to identify each and every product. If you have, you can put it or leave it empty. And if you do not have an SKU and you're planning to assign it to all your products. I would like to suggest to you to consider H&S codes. I know in grocery stores we have lots of items. So later on you can apply VLookup if you know Excel to get the GST of all the items, this can make your life easier by invoicing are red. So the next option we have over here is managed talks. If you enable this option, you'd be able to manage strokes on your website. Let's say if you enter a stock quantity over here. Let's say you put 10 over here. So whenever there is an order of Apple's stock quantity will keep on decreasing until it reaches low stock threshold. If you put two over here and the stock quantity of this product reaches two, you'll get an e-mail notifying you that this particular product, apples, is low on stock. So this was top management. I'm going to disable this. And if you disable this, just make sure that your product is in stock and not out-of-stock. All right. Let's move on to the next tab which is shipping. And in this tab you can enter your products, weight, and dimension. The apples that I'm selling is going to be of one KG in one unit. So I'm going to enter one unit is already selected over here. Now let us move on to the next tab which says linked products. Over here we have got up-sell and cross-sell. Up-sell is simply the alternate product or the product that you would recommend your customers. Instead of the prologue he is currently viewing. For example, if a customer is weaving coffee, you're suggesting him to buy tea. This usually comes in related products on Amazon.com. And then we have cross cells. This is the product we recommend the customers based on the product he's currently viewing. All right, so this was alternate product? Well, this was the product he may require is, for example, a customer is zooming tea leaves and you're recommending him to buy sugar. You'd find Amazon.com recommending new products. And customers who bought this also bought already. You can add a product over here. But since we do not have any product, this is our first product. That's why we're not getting any thing over here. Okay, So let us move on to attributes. This is a very important time, but it is for valuable product. So we will cover this when we will upload the product after this, the rest of the things are not that important over here. So let us scroll down. And the next option we have is this products short description. So let us come back and copy the short description from here and simply paste it. Now if you scroll down further, you'll get some more options over here. This option is only available because we have installed the wordmark team. I would not suggest to, to make a lot of settings over here. But if you'd come over here, this product tab option, and if you want to add some other tabs apart from description, review and shipping and delivery. You can add the title over here and read the description that you want over here. Apart from that, I do not recommend you to add anything else. So let us move on top. And let us add some product categories for apples via going to put it under the category of fruits. So I'm going to add fruit. So we'll simply write fruits and click on add new category. And this category would be added. You can also put a product as a sub-category. Let's say if I add citrus over here, this is just for example, and put a parent category and the fruits. So you can do that as well. If we'll click on Add to category, citrus, fruit is going to get added, and it is going to be a subcategory of fruits. I do not want to put apples in citrus fruits, so I'm just going to disable this. The next option we have over here is product tags. So I can add a tag of fruits and then fresh. You can separate them using a comma and click on add. All the tags will be added like this. Now scroll down and we have the option of product image. Click on select product image and go to Upload Files. Click on select files. Go to the folder that I have provided you. And over here you'll get the image of all the products in this particular folder, product images, and select the primary image that you want. Click on Open. Make sure you upload all the product at once. If you come over here, once you come to this folder, you can select all the images and funds. And if you click on Open, all the images will be uploaded at once. So I'm gonna cancel this. Since I have already added this image. Click on select product image, and this image will be uploaded. So this was a primary image. We also need some gallery images. So click on add product gallery images. Since I have uploaded all the product images already. So I'm simply going to scroll down and select the product image that I need. So I want this product image as my gallery image. So I'm going to select it and added to the gallery. So this is also done. The next option you'd find is a 360 view gallery image. I do not have a 360 view gallery image, so I'm not going to upload anything over there. Simply scroll up and click on Publish. And this is how you can upload a simple product. Let us find out how your product looks. Alright, so this is how it looks and this is how we wanted it to look, right? So let's get back and add a new product. So click on add new. You can also add a new product by clicking on this particular option New and then selecting this option product. All right, so let's get back and add the new product. And we're going to add honey now. So again, we're going to get back. And I guess the next product is honey. Yes. So I'm simply going to go to the next product. Now scroll down and copy the long description from yeah, let's come back and simply paste it. Now, although we have not learned elemental yet, but you can also design your website's description using Elementor. I just wanted to know over here how to activate element of your product description. Okay, so to do that, this scroll down and you'd find element or somebody over here. I think it's over here already. We are going to open it in a new tab and then go to that tab. And in this list, you'd find products over here. This enable this option and click on save changes. Now let's get back over here. And first of all, let us publish this and click on Refresh. It has already been refreshed. So you're getting this option of edit with Elementor. I'm not teaching element or no, I was just showing how to activate this. Later on when we will learn element or you can come back to your product's page and you can design your product's page using element or you can add images, you can add text and design it the way you Lake already. Now let us scroll down. The next section that we have over here is product data. Again, we are going to select variable probe this time. And this time the options are slightly different. In general tab, we'll keep it taxable. And for the tax class, I'm going to put it under the tax slab of GST 12 percent. Just remember that you are not getting the pricing option over here in the general tab. Earlier when we were uploading a simple product, we got the option of adding prices in the general tab itself. So let us move on to inventory. Again. It is the same thing you know about inventory. So let us go to link products. You already know about shipping rate. So we'll go to link products. And over here we have upsells and crosses. Again. Currently we only have one products in our website. So I'm going to type that product's name and you'll get the option in the drop-down. You can do the same thing for cross-sell also. You can add apples over here. Okay, so apples is not an appropriate product for either upsells across cells for honey. An ideal product for upsells for honey could be date paste or maybe maple syrup. And for cross cells, it could be bred or something like that. We are putting apples of you only to show you how products appear for cross cells and upsells. Alright, so the next option we have over here is attributes. And here in this tab, you'd have to mention the subject name based on which your product is going to vary. Let me show it to you. Click on Add. You'll get two boxes over here already. The first one would say name, the next one would say values. So you'd have to enter the subject name based on which your product is going to vary. If it is going to vary based on color, just type color. If it is going to vary based on size, right? Size. In our case, it is going to be different based on packaging. So I'm going to write packaging over here. And then in this tab, you'd have to write all the packaging options that are available on your store. So I'm going to write 500 ML and then add the separator. You'll get this separator by clicking on shift and then the button which is on top of Enter button. Alright, then space, and then one liter. You can write some more packaging, two liters, three liters, vertebrae, whatever that is, whatever that is available on your website. And then make sure you enable this option. Use for variation and click on save attributes. Once you do that, the attribute is going to get saved. And then you'd under price individually by going to the variation tab, go to variation, and then from this dropdown, add variation, select, create variations for all the attributes. And click on, Go, click on Okay. And Okay. And here you'd find, you're getting the option of adding a different SKU for this variant and a different SKU and price and everything else for this variant, one liter, alright, so you can add a different vision for each and everything that you want. So for regular price in 500 ML, I want it to be 70 rupees. And since it is available on sale, so I'm providing it for, let's say 65 rupees. We also have some other options which I'm not going to add. Simply close this and come to one liter. And for this one, for the regular price, I'm going to add 180 rupees. And it is available on sale for 170 rupees. Okay, something like that. This is just a demo, so just click on save changes. So this part is complete. Now we will add a short description. So let's come back over here and we'll copy this description. Short one over here on this call down, and this is complete. So we'll add a category over here. Just click on add new category. And just the way we had added a category previously, we'll do the same. Click on Add New. And this category has been, I will now just scroll down and you'll get the option of adding tags. So I'm going to add dry and honey and something like breadth-first or something like that. Click on Add. And this tag has also been added. And let's add a product image, click on Set product image, and then scroll down and you'll get the honey image, some little video. I hope I have added. Yes, it is only a set product image and the image has been added. Now we'll add a gallery image. And we'll select the next image which we have over here and click on add to gallery. Now we'll simply scroll up and click on Update. So let's find out how it looks. Alright, so we have successfully added up product. And it looks amazing. You can see over here, across all product is coming over here. Alright, so let us go back. And now what I'll do, I'll add some more products for the website. It's currently we have only two that have said we will not look good if we'll have only two products over here. So I'm going to add some more products. You also add few products. And then I'm going to continue the video. 18. 11 Pages: Creating the Homepage and assigning it: Alright guys, so I have uploaded a total of 11 products mixture. You categorize the products and add tanks to them. This helps in better indexing and they also help in search engine optimization. You will learn about categories after awhile. But now it is time to create pages. And to create any page is click on pages over here. And over here you will find several pages which have already been created by a WooCommerce plug-in. We do not have to do anything to these pages except for sample and privacy policy page. These pages were created by default, by WordPress and we do not need them. So I'm going to select them. And from the bulk action, I'm going to move them to trash, click on Apply, and they are going to get deleted. The first page that we are going to create is going to be a homepage. And to create a page, click on Add New. You'll come to this page. Just close this one. The first option we have over here is the title, will give the title as home. And simply click on publish first. Publish again. And let us see how our page looks. If would go to the page that we have just made, you'd find few things that we do not require. First of all, we have this title bar, and then we have the sidebar. We do not need both of these, so we'll come back again to our homepage. We are simply going to scroll down. And for this option, Disable page title, I'm going to enable this one. And then scroll down further. And for the site by position, I'm going to enable the Without option. Now I'm going to come over here and click on update. So let us find out how it looks now. Now if I'm going to update the page, it is going to be completely blank. The only thing that is left over here is the header and the footer. The body part is blank. Other page can be divided into three parts. If you'll go to a reference website, you'll find the top part of our website, which contains a logo and our menus, and the rest of the things is known as header. We'll learn about that later. And then we have the body part. The body of our webpage starts where I had ends and continues before offer to this area over here is known as the photo, will discuss about the footer and the header later. First we will design the body. So let us come back. And there's a small problem in this page. The homepage that we have just made is not currently the default page of our website. As you can see over here. After a website, you have to write slash home in order to see this page. Simply naming a page, home does not make it a homepage. If you remove this home from this website, from this URL and go to its default URL. There is some other page, which is our default page. In order to create a homepage, will go to the dashboard and we'll hover to settings over here. And we'll go to reading. And over here you'll find this option, a static page. Enable this option. And from the homepage, select your homepage that you have just created. Now scroll down and click on save changes. Now if you'll go to a website and refresh the page, the default page is going to be our homepage that we have just created. Since it has designed a homepage, come back to a dashboard, go to pages, all pages. And before we design our homepage by clicking on Edit, we have to ensure of one thing that I Elementor page builder is a default page builder. And to do that, we have to hover to Theme Settings and go to General. Over here you'd find your default page builder as WP bakery. But we want to use element o as a page builder. So we'll click on Elementor and click on Save Options. And now let us get back to pages, all pages. And let us edit our homepage. Click on Edit. And you'll get this option over here. Edit with Elementor, just click on it. So let us go to our reference website and find out how do we actually have to design. The first element we have over here is a slider. And you have to create the slider. To create a slider will go to a dashboard, scroll down and you'll find Slider Revolution over here. Click on it. 19. 12a Slider Revolution: Designing Homepage-with Elementor & Intro and Importing Sliders: So let us design a homepage. Come back to our dashboard, go to pages. All pages hover to the homepage and click on Edit. And you'll get this option over here. Edit with Elementor, just click on it. So let us go to our reference website and find out how do we actually have to design. The first element we have over here is a slider. And you have to create the slider. To create a slider will go to a dashboard, scroll down and you'll find Slider Revolution over here. Click on it. So to make a slider, click on New Blank module. Actually I'll be providing in the slide deck that I have used in a reference subset. And you can change all the images and the text and use it on your website. But if you want to make a slide up by yourself, you can use this option. Click on New Blank module and click on quick guide. Or in case I would like to advise you here to avoid making a slightly from scratch. And that is simply because it takes a lot of time. Don't get me wrong. I'm not saying it's useless or something. It's just that it takes a lot of time. But you can do instead is uploaded them blood and modified or customize it. I would recommend you to use what I'm going to show you only to customize the template that I'm going to provide. All right, So let's begin. This is the place where we are going to design a slider. And the first thing over here that are going to do is define a layout. And to do that, good slides and click on global Lear's. Then click on settings from here, and click on Layout scored on from here. And you'd find these options. These are actually layer size. This is the size that is going to appear on different devices. This is the size that is going to be used on a computer. And this is for the laptop. Next day I've got tabs and then mobiles. The size given over here is quite big. I'm going to use a little bit smaller, so I'm going to change each of them. And to do that, first of all, go to the folder that I have provided you. And you'd find this text file over here. This open it. And you'll find all the dimensions. The Revolution Slider, you'll find all the screen width. So for desktop we have 1240 by 580. So I'm going to come back and I'm going to do that 240 by 580. And for the laptop, we have 1024 by 480. So this is going to be 1024, which is already there. And then we have 480. So let's try it for 80. First of all, you'd have to turn this on, let us turn on the rest of them also come back. And you have 480 over here for the tab. Besides you won't is 778 by 480. So all we need to do is add 480 over you. And for the mobile we need 480 by 600, which is already over here, 600 over year. So we'll do that and click on Save. So a Layer Sizes complete. And now I'll add a slide. So we have one slide already over here. I'm going to go to that slide. The first slide that we have in our reference of Sayed was this blue slide. So we want this blue color and this image and some text on the left-hand side. So come back. And then click on this icon. You'll have this background option over here, click on it, and over here from the source, click on colored. And then we'll have to define a color. The color that I have used is also given over here. So I'm going to just copy this code from here, this blue code for slide 1. Copy this code from you and simply paste it over here and click on. Okay. So we have this blue color over here. And now we'll add this image and some text on the left-hand side. So first we'll add the image. And for that, I'm going to unzoom it a little bit, maybe this much. And to add the image, I'm going to hover to add layer, how would the image, and then click on this option WordPress library. And we'll upload that file. So select files. You'll get this folder over here, slider. Click on it, and you'll get the image over here. Click on Open and click on Insert. So we had this image over here and we need to make it a little bigger. So simply drag it like this and bring it over here. Okay, I'm going to make it a little bigger in B this much. And I'm going to make it a little bigger. I think this is fine. Now let us add some text on the left-hand side to add a text. Hover two layers again and click on Text. I'm going to add a headline, so I'm going to click over here. And our layer has been added. They are giving us some options. I'm going to keep it this much and let us close it now. And from here I can edit the content. So I'll remove this. And I'm going to write 30. That x that we have over here is 30 percent discount product on Barilla. This like this. I can also increase the size like this. Alright, and I can drag and drop it anywhere I want. So I'll keep it like this. And then I'm going to add another text. And this time I need a quick style text. So I'll add this one. I think this should do a job. So I'll increase the size and keep it this much. Close this one, make sure you are in the content and now to edit weekly discounts over here. And then I'll add a burden over here, right? We have about, okay, we have some texts and then we have a button. So we'll come back and we'll again add some text by clicking over here. I'll use this one. I'm going to drag and drop it over here. I'm going to increase the size a little bit, maybe this much, and close this one. Go to content and remove this. There is copied some dummy content from your, I'll copy this one. Come back. And I'm going to paste it over here. Reduce the size a little bit, maybe this much. Come to content, and I want this text to be on the next line. This looks fine. Now how would you layer? And now we'll add a button. So click on button. We have pre-made buttons available over here. I'm going to select this one. And then I'm going to simply drag this, okay, this is getting dragged. I want the button over here and this one in its place. Now, I'm going to increase the size of this button and bring it over here. Let's close this. And you can do all sorts of styling from here. You can remove the background color. The default color of this button is white. And we want it to be that way. Now good content and go back to a reference subset. Let us find out what we have written over u given read more. So come back and I'm going to write, read more and go to style. And I see over here that the button we have over here is transparent. So comeback. And for the background color, I'm going to remove this background color and I'm going to keep it transparent. Just drag and drop this slide over here. It is going to get Transparent. Click on OK. And for the text color, we have vite as a tech school over there. So I'm going to do that and I'm going to select on, okay. And this way, our first slider is ready. If you want to add one more slide, is how would the slide and click on Add slides? And this time I'm going to add an image as a background. So from the source, select an image and from the media library, just upload an image that I have already provided you. It is this one. Click on Open and click on Insert. So this background has been added. And how would you add layer? How would the image and click on WordPress library? Click on upload files, select files. And I'm going to add this image over here. Click on Open and click on insert. Just drag and drop it over here and follow the same process which we have followed earlier. And once you're done with the slider, just click on Save. So this is a slide two and the one that we have designed earlier, slide one. If you want to take a preview of your slider, you can hover did this option and click on the screen. So if I'm going to click on mobile, it is going to look something like this. It looks really bad on a mobile screen. So I'm going to edit it. Just increase the size over here of this image. This looks better. And then, Okay, and just reduce the size a little bit. Because you also want some space for the text that we have written above. For this text, I'm going to increase the size. This much. For this text. I'm going to increase the size up to this much. I'm going to bring this down this much for this one, like this. And after you completed this click on Save, just like it is going to get sieved through. Let's go back. Now scroll down and you'll see the slider which has just made. But I'm going to import the slider which I had made earlier. So I'm going to click on manual import and click on Choose. Go to the slide a folder, and select this file, Woodmont grocery slider. Click on Open. And it is going to look something like this. And after this we do not have to do anything. Just click on the Dashboard. Now hover to pages and go to all pages. Go to Home, click on Edit, click on Edit with Elementor. From here, you'll come to Elementor page builder and click on this button to add new structure, I'm going to select this kind of structure. And a structure will be added. Now click on All menus and search for Slider Revolution and drag and drop this visit over here. You'll get to see this option, select grocery one slider from here. Once you do that, you'll see you slide over here. 20. 12b Elementor: Designing Homepage body with Elementor: A 100 gates. So we have already designed our first section in elemental for a homepage. And let me brief you what exactly Elementor page builder is. Elementor page builder is a drag-and-drop page builder. We just have to drag and drop the tool that you need to build your entire website. The section on the right-hand side, which you can see over here is for designing. While the session on the left-hand side is where you'll get all your tools, which are also known as widgets, and they are also known as elements. And that is why the name of this page builder is elemental. Solid. Me show it to you. The section that we have got next is this section in which we have got three columns. So we'll get back and click on this plus button and choose a structure in which we have got three columns. Click on it. And a three-column structure will be added over here. As soon as we add a structure or an element from this side, that element or structure is going to be selected and all the editing option will appear on the left-hand side. The editing option will be categorized in three tabs. The first one would say layout our content. The second one on the middle one would say styling, and the last one would say advance. Since we have added this structure, this structure is already selected and all the options with which we can edit this section are getting displayed over here. So we have at the structure and now we will add the element that we need. The element that we need is information box. So we'll simply scroll down to find the information box which is over here. Just drag and drop this element over here. Instead of this text that we can see over here, we need an icon. So from this drop-down, select icon and choose an image. Go to upload files and click on select files, and go to the folder that I've provided you and go to icons. Over here, you will find this Eigen best quality. Click on Open. Or I just forgot that you cannot upload an SVG file format in elemental. So let us cancel it. And let's go to the dashboard and go to Media. Click on, Add New, and let us add all the images that we need right now. So we will select all these images, click on Open, and we will select the rest of the images as well. We'll select all of these. Click on Open. And the folder that was inside this click on Open. Let's get back to the main directory as well. And we will select all the images that we have over here as well. And we will remove the folders and the files that we do not want. Let me see. I think we have selected all the images. If there's anything left, we'll come back and upload it again. So all the images are getting applauding. Alright, so all our images have been uploaded. Let's get back to element 0. And in order to refresh the media over here also will simply delete this. And we'll again drag and drop this element over here. Change this to icon, and then click on Choose image. And the Eigen that we wanted was this image. Click on Insert media. Let us find out. All right, it looks like this, so let's get back and go to content. We do not have a subtitle, so we'll remove this. And let's come back and simply copy this text that we have over here. And we will base this entitle over here. Alright, so we'll paste this over here. Come to content. We don't want so much of contents, so we'll simply copy it from here. Come back, and we'll paste it. Now if you scroll down further, you'd find this text button. So remove this text button in order to get rid of this button from you. And will also remove this hashtag from the link. But I would like to remind you that please do link all the burdens that we have over here. I have not linked this Read More button over here, but make sure you link it by going to the Slider Revolution. And as soon as you click on this button, you'll get the option on the right-hand side. So let us continue. Let us crawl up now and click on icons. Right now the icon looks very big, so I'm going to adjust the image size and click on Custom and make it 50 by 50. Click on apply. And this looks much better. Now come to style and close this option generally come to Eigen section. And from the style, select width background. As soon as you do that, a gray colored background would be added to this Eigen. So if you have completed designing the first column, and now we do not have to do it again and again. We can simply click on the column, click on the column, and click on Duplicate. Click on duplicate again. And let's remove the remaining columns. Now. Click on delete, right-click and click on Delete. Now all we have to do is change the images in them. So we'll click on the second one and click on Choose image. The icon that we have next was this icon, I think. And we get back and see yes, online payment option. So click on this icon and click on Insert media. So we have this fixed. Now close this section and come to content. And instead of best quality, will replace the text with online payments. So copy this and replace the text like this. Now come to the third section. And over here we'll select the third image, which was, I think this image. Click on Insert media. Now get back, copy this text from here, and close this one, come to content and replace it. Now we want to have this section on top of this slider, right? If you'll go to a reference subset, you'll find that section is on top of the slider. So we'll get back and select this particular section. Go to advance. And first of all, let me show you how Margin works. So first of all, dealing this and from the drop, if I'm going to enter 50 pixels, it is going to leave 50 pixels from the top. Similarly, if I'm going to give a padding of 30 over here, this would mean that it is going to leave a space of 30 pixels from the bottom. But since we want the section on top of this one, so we will add a negative sign over here. This is also known as negative margin. But what we see over here that this section is getting inside the slider. So to bring it to the front, we'll add a Z index of one. Any element, structure, row or section having a larger set index would appear on top. And on top of all of this, we need some space from the left-hand side, as well as on the right-hand side. So we want to leave some space inside our section. And to do that, first of all, dealing this and from the right-hand side, I'm going to leave 60 pixel. Similarly from the left-hand side as well. I'm going to add 60 pixel. Ok, so this part is complete. Now come to style and we will give it a white background. If you'll come over here, you'd find that we have a white background in this section. And we also have this subtle partition after each and every column, right? So we'll come back, go to style. And from the background type, click on Classic and for the color select white. And now Alcala is also set. Now close this section. We also want a partition over here and here rate. So select the first column and come to style and come to borders. Now instead of border type, None, select Solid and dealing this and from the right-hand side give a border width of one pixel. And for the color. And this color code, E6, E6, E6. Okay, So this is the color code that you have to use. And now if you remove this panel from you, you'd find that we have a border of you. You also want a border for this column. So we'll select this column and do the same thing over here as well. Click on Solid, dealing this and give it one pixel width. And we'd add that same color code over here already. And the last thing that we have to do over here is give some space from the top. So we'll go to advance again and select this particular section, advance. And from the top, I'm going to give a padding of 40 pixels. All right, so this looks exactly like our reference of S8. So we have made our second column. So let us move on to the third one. In the third column, we had this discount and promotions in which we have displayed some products. So let's get back and select a structure in which we do not have any columns at all. So select this kind of structure and then click on widgets and search for a jags product. This one, drag and drop this over you. And you'll already find your products over here, select the title, come back over here, and copy this table from you. Come back and replace it. We do not have to do anything in image. So come to tabs. And for the tab that'll one, I'm going to change it and make it as new. Come to query. And over here you can assign a different data source so you can make it as featured products, sale products, whatever you like. And we'll leave it for all products in new. Let's close this new one and come to the tab titled to come to text. And instead of type Title 2, I'm going to make it featured. Come to query. And instead of all products, select featured products is called on. And you'd find all the featured products over here. Now, I have assigned my products as featured by going to the dashboard and hovering two products and clicking on all products, you'd find this column over here which says Featured. And as soon as you click on this top, your products will become featured. Alright? So whenever you click on these does your products is going to appear over here. Now let us close this and come to tab titled 3. So instead of Title Three, I wanted to be top cell is over here. So our contents section is done. Let us go to style for the design, make it simple, and come to product layout. And instead of this grid will make it carousel. And let it be whatever number of items you want over here. Come to carousel. And the slides per page that we want over here is, I think five, 1, 2, 3, 4, 5. Yes, we want five, so I'm going to make it five. Now scroll down and you'll find this option, pagination control. I do not want this pagination over here. You also do not have it in our reference website. So I'm going to hide this pagination. So this section is also complete. So I'm going to close carousel and come to product design for the product Hobo, I'm going to select quick. Now scroll down and you'll find this option, quantity input on products. Make sure that you have enabled this. Actually, I like this design if you do not want this design in which you can also see the quantity, you can choose to disable it. So we'll close this one as well. And with this, we have completed our third section. All I want to do now is I'm going to select this particular section, come to advance and I'm going to give some margin from top and bottom so that all the sections are not stuck together. So first of all, dealing this and from the top, I'm going to leave 30 pixel. And from the bottom also I'm going to leave 30 pixel. Now click on Publish and don't forget to click on publish every now and then guys, otherwise you might lose all your design. And the wind. Next important thing that we have to do to make sure that our website looks good on a mobile phone. And to make sure of it, click on responsive mode. And you'd find your websites mobile version. So I think everything looks good on a mobile phone. Let's find out if it also looks good on a tablet. And don't worry guys, whatever changes that you are going to make over here is not going to be reflected on your desktop version of your website. But everything looks fine. I don't think that we have to change anything over here. So let's get back to our desktop version and move on to our fourth section, which is this one. And here we have got two columns. So let's get back. Click on this plus button and add two columns over here. Now go to all elements and search for promo, promo Urbana. This element. Just drag and drop it over here and go to Image. Click on Choose image. And I'm going to select this image. I do not recommend you to use this image because of this ice cream over here. If you want to use a different image with the same background, I have also provided you this image over here. I mean, this is only the background. You can add your image on this particular background. So let's cancel this. And for this image size, I'm going to select on full. And now let us edit the content that we have over here. Click on content for the subtitle. We'll just copy this subtitle from here. We have copied it actually it is a linked, that is why it is taking us to the top. So let's come back and we'll paste this over here. And for the title, we have our ice cream. I'm again going to copy it. Control C, come back and I'm going to paste it. And for the content, we have this text. So I'm going to copy it again, Control-C. Let's get back and based it for the button text. We have read more over here and we have got this hovering effect. I'm going to remove this hovering effects. But first let us change this text that we have over here. We have to shop. So I'm going to add to shop. And let us go to style and style for the hallway effect, select parallax. And now if you'll hover, it will look just like a reference website. Let's get back and find the title. We want the color to be white, so I'm going to make it white. This looks much better. And for the custom typography, I'm going to say, I'm going to increase the size of this text a little bit, maybe this much. Let's come back over here. Okay, It is a little bigger. So I'm going to make it this big and be 30. Leave it 230. Alright, now close the title and come to button. For the burden position. I'm going to keep it as static so that hovering effect will go away. And for the predefined color, I'm going to make it primary. So a primary color is green, and that is why the green color is getting reflected over here. I also wanted to scream on the next line. So I'm going to go to content. And before cream, I'm going to add a very small HTML code, which under bracket says BR. Okay? This is a very small code. We have HTML only up to this limit. And then before the information also I want this small quote over here so that it looks like a reference and say, Let's come over here and let's just scroll down. We have these texts as white in color, so we'll do that also will come to style. And for the title, we have already said it to white. But for the subtitle, I'm going to make it white. So I'm going to keep it fight and further content. I'm going to keep it white and click on Update. Now instead of doing this, again, will again select this particular column and duplicated and then delete the empty column that we have over here. And all we have to do now is select this element, come to image. And instead of this image, I'm going to select this image now for this image also I have provided in the background, you can add your own breads. Click on Insert media, and I'm sure you can change the text from here. It's fairly easy. Come to content. And there's one more thing which I would like to bring to your attention is do add your URLs. Don't leave any button or any link unlinked, broken links are not at all appreciated. Now click on this particular section and we'll again add some margin from the top and bottom. So I'm going to add 30 pixels from the top. And 30 pixel at the bottom as well. So with this, we have also completed our food section. Let us move on to the next section, which is this one. We have products in this section, we have the same kind of elements. So what I'm gonna do is I'm going to duplicate this one. And we'll duplicate this one. And I'm going to simply scrawl this and I'm going to drag it over here, okay, the duplicated one. Now select this particular section element. And, and first of all, let us fix the type title. So I'm going to make it as new offers. Let's copy this from your comeback and pasted. Nothing to do in images. And for the tabs, I think everything is the same except for except here we have top sellers. Do we have tops a little bit? You also yes, we have top sellers, So we do not have to do anything in tabs. Let us get back and come to style. Now come to product layout. And instead of this carousel, I'm going to make it as grid now. And let me find out if you have four columns over here. In our reference of side, we have got five columns, so I'm going to make it as five columns. And let me find out if we have to do anything else, the number of products that we can see over here is 12. This would be, I think too much. So I'm going to make it ten only. Okay, so let me close this section and come to product design. Let me see if we have to do anything over here. This has been set to quick already and this one has been enabled. So I'm going to close this. All I'm going to do over here is I'm going to add the margin again. So I'm going to give a margin of 30 pixels from the top and 30 from the bottom. So this one is done. Now click on update and let us find out if it looks good on a mobile phone. Click on responsive mode. I think all of the sections look good, except for this one. The text is too big over here, so let us click on this element, come to style. And for the title, I'm going to reduce this type our PHP and make it, let's see. This much I think is enough. Now close this and come to subtitle. For the subtitle also, I will reduce the size and I'm going to make it this much. Okay, make it 10. Now close the subtitle as we'll come to content. And for the content also, I'm going to reduce the size and make it this much, okay, Keep it 11. But I don't think that we are able to fix the view. So what I'm going to do is come to content, good content, and I'm going to remove this beer from here. All right. Just remove this code that we have added from here and remove this one as well. So I'm Burton has also come to the top, but I am going to reduce the size of the button as well so that it appears on the element itself. So predefined size, I'm going to make it extra small. And now it appears fully. So I'm going to copy this style. I'm going to paste style over here. Make sure you paste style and not paste. Click on paste style. And over here is a burden still does not look nice. So I'm going to click this and come to content. I think we have, I think the pasting did not remove this BR from you. So we'll remove this manually. And I'm going to do the same thing that this BR also. And now it appears nicely. So click on update and let's scroll down if it looks good for the rest of the elements. Yes, it looks good. So we'll come back to an extra version and we'll move on to the next section, which is, let me see popular categories. So let's come back and good to all elements and let us add a section over here. And we're going to add this kind of structure. And Goodall elements again. And search for category over here, and drag and drop this element over here. And right now we have a lot of calories over here. So we will limit this number to four. I think we have four categories over here. Yes, we have four. So let's come back and we will add these category images and add these category images. We have to go to the dashboard and hovered two products visit with you and go to Categories. And we have you have all categories that we have made till now. We have to add the images in them. Click on Edit. And if you scroll on over here, you'd find thumbnail option, click on Add or upload image. I think we have already uploaded the images of the categories. No, we haven't. So we'll click on Upload Files, click on Select Files. Go to the folder that I have provided you and you'd find this folder. Category images is click on it. And I'm going to select all the categories that we have over here. Click on open. You can use these images on your website. Okay? Just select bakery OVO, which we have as a category over here. Click on Use image. We're gonna do this again. So scroll down and click on Edit for the fruits, and click on Upload. And over here, let's find the fruit image. Over here. Click on Use image. Then at the bottom, click on Update orange. So this is how you add your category images. Let us get back to elemental. And over here you can choose the category image that you want to get displayed over here. So I'm going to add fruits. Let's click on it first, fruits, and then I'm going to add bakery. This click on Update. So these two category images are getting appeared over here. But we have forgotten to add the title, which we have over here as a popular category. So we'll search for title, drag and drop it over here on top of this category element. No, we do not have a subcategory, so I'm going to remove this. And for the title we have it as popular category. So I'm going to copy this. Come back over here, and I'm going to paste it. We do not have anything in the contents. I'm going to remove this. Now, go to style. And the style will make it as underlain. And we also want it to be left aligned. And for the predefined color, I'm going to make it as primary. I think this looks like our reference website. Yes. If you'd add the rest of the category images it is getting, it is going to get displayed over here. Now let us find out if it looks good on a mobile phone. So let us scroll down. Yes, it looks good on a mobile phone. So click on Update. And now we'll add our About Us page and contact us page. 21. 12c Elementor: Importing About & Contact Pages: Alright guys, so our homepage is complete. And now we'll make our About Us page and a contact us page. And then we'll make our menu. Alright, so come back and let us exit our element of the problem with this team. Okay, So we are in our dashboard, let us go to All Pages and then we'll click on Add New, and add a new page by the name about us. Let us keep it about. Now, click on publish and publish again. And let us find out how it looks. Again, we have this title bar and the sidebar. We are going to come back and we're going to remove those. So disable the title bar. And for the sidebar, click on without NO, cancel this and click on Update. Let's come back to a page and click on Refresh. Okay, the title bar and sidebar has gone. And now we will not design our page using element or what we're gonna do is we're going to import the pages. I think you have already understood how to edit with Elementor page builder and how to design a webpage. So to save time, I'm just giving you this template so that you can use it on your website is to import a page. Click on Edit with Elementor. Now click on this folder and go to this option which says import template. Now select file. I've provided this file in Elementor template. Now select About Us and click on open. Now click on insert. And this way your page is going to get imported. You can change whatever you want in your website. It is just drag-and-drop and whatever you want to edit, this, click on it and you'll get this option. You can edit it from your write whatever you want. Just like this. It is very simple. If you want to change an image, is select on it, you can add some few more images that is cancel it makes sure that everything is in place. And click on Update. So About Us page is complete. Now let us go back and back to All Pages. Now, I'd enter the page by the name contact us. You can read contact or you can write contact us. Now scroll down and we'll disable the page title and remove the sidebar and click on publish and publish it again. Let us find out if it looks fine. Yes, it is blank. Now let's come back and click on Edit with Elementor. Click on this folder icon again, go to this import option and click on Select file, select the file contactus, and click on Open and click on Insert. Okay, So your contact us page has been important. What you have to do over here is you'll get this map. You have to point out to a location over here. Select this map. And over here you just have to write down your location where you operate your stool. If I want, I can also change this location. I just have to type in my location and that's it. So the map will take you over the next option we can zoom. And in this next option, we can adjust the height. I'm going to keep it zoomed a little bit more. And then as you scroll down, there's a contact form over here which is not getting displayed because there's a small problem and fix that. They have to go to the dashboard. And over here you'll find this menu contact. Click on it. You'll find a contact form already made for you by default. So just simply copy this contact form, come back over here. And okay, this is going to get refreshed and then only it is going to work. So we'll update this. And now let us refresh this page. Okay, scroll down and select this element. And from the drop-down, select the contact phone that was made so selected and your contact form is ready. Now click on Update. And our Contact Us page is also complete. 22. 13 Blogs: Creating & Assigning the Blog Page: And now we'll make a few more pages and then we'll move to menu service. Go to the dashboard. Good pages again. And now we'll make a blog page. And to make a blog page, first of all, we need to make some blogs on a website. And to do that, we have to go to post. Here. You'll get a post by the name helloworld. I have deleted it so you can delete it as well. Then click on Add New and give a title to your post. So let us go to a reference of sight. And over here you'll find blog, click on it. And we'll select an individual blog like this. And we'll select this title from you. Come back and we'll give a title to our post. Good, the body part. Come back and we'll copy this texts from your copy this, come back over here and paste it. I can also add images and buttons over here with the help of this tool. And I can also design my post using Elementor. Just like what we have seen in our reference of Sayed. Over here, they have designed the post beautifully, but I want a symbol one. So I'm going to leave the text over here. I'm only going to add this, this image over here. So come back. And instead of blocks go to post. And there are quite a few things which you can do over here. Like you can categorize your post. Make sure you do this and add some tags. And then we have a featured image. Click on the featured image. And select this image. Click on select featured image. And we have this image added. Click on publish and publish it again. Now let us view the post. So up page looks quite simple, but I'm quite sure that you can design your post using Elementor. So this is our post is made, we'll make one more post. So let us come back and click on Add New. Let us open another blog. So we'll come back. Let us open this one now. Copy this title from you. Come back, pasted. And for the body, go back over here. We'll copy the body. Copy it, come back over here and we'll paste it. Alright, so this is done. You know how to go to post an ad categories and tags. Just add the featured image over here. Let us add this one. Click on featured image, and click on publish and publish it again. So we have created two posts and now we'll make a post page. So let us go to pages. Click on, Add New. Now give it a title. You can add a title as post or blogs in our website. In our reference of S8, I have given a title of blog. So I'm going to give a title of blog. And inner reference of sight. We have the title as well as the sidebar. So this time we're not going to remove both of them. Click on Publish and click on Publish again. Now simply creating a blog page will not make it a blog page. We have to assign this pages, blog page first, let us find out how it looks. Go to the blog page. And yes, it looks fine. Let us come back. And to assign this pages or blog page, we'll go to Settings over here and go to reading. And just like we had assigned the homepage, we're going to assign our boast page as a blog. So keep it blog and click on save at the bottom. Now let us go to a blog and see how it looks to click on Refresh. And opposed are visible like this. There's only a very small problem. They have a very long description. I want to cut them short. And to do that, we have to go to team setting. Good theme settings from here, go to blogs, scroll down and you'd find excerpt option over here. Post accept, click on Accept, and click on Save option. Now go to your blog page and click on refresh. And now if you score, you'll find that disruptions are quite short, so we'll keep them this way. You notice over here that the posts over here are not horizontally aligned. This is because the image dimensions of these two images at different, make sure you have the same dimensions. If you'll go to the folder that I have provided you, you'll find the images are of the same dimension, just hover to it. And you will find the images are of non-zero 24 by 720. And this is the case with all the images. So we'll come back. And now since our blog page is complete, we'll make a tricorder page. So let's go to a dashboard and let us click on Add New. 23. 14 Pages: Creating Track Order, Compare & Wishlist Pages: And let us click on Add New. Give this a title of track orders, and click on Publish. Click on Publish again. Now let us see how it looks. Now it is up to you whether you want to keep the sidebar in the tricorder page or not? I do not want to keep it, so I'll come back and I'm going to remove this and make it without NO cancel this and click on Update. And there is a shortcut that we have to add in the tricorder page so that it becomes the tricorder page. And that short code is given in the folder that I have provided you. So we'll go to that folder. There's comeback and good important info. And you'd find this code over here. Copy this code, come back and simply paste that code Ohio. All right, click on update and let us find out how it looks now. Alright, so it looks like a tricorder page. Simple and nice. Let us come back. The next place that we'll make is a compared page. So click on Add New, go to the title and write compare. And will again add a short code. So let us come to that file again and copy this compare code from you. Come back and paste it, click on publish and publish it again. And I'm going to see how it looks. This also looks nice. Let's go back. And the last page would be visual speech. So click on Add New and give it a title wishlist. Go to that file, copy this code, come back over here and paste it. Publish, publish. And let us find out how it looks. So this also looks fine. And now we'll make a minute. So let us get back and hover to Appearance and go to menus. 24. 15 Menus: Creating Menus and Mega Menus: All right, so before we make a menu, first, we need to know how many minutes do we actually have to make. So let us go to our reference upside. And over here we'd see that 12345. So we have to make five minutes. So let us come back and first we'll make our main menu. So if you'll come over here, this is our main menu. You can call it the main menu. You can call it the primary minimum. I'm going to call it the main menu. And click on Create menu. And now I'm going to add all the pages that I need in the main menu. So click on View all and from her select Home Blog about contactus. And let's see the shop page. Click on Add to Menu, and all the pages will be added over here. Now you can rearrange them if you want. So I'll take the shop page and bring it over here. And the about page just up to my homepage. You can also make them as a sub-menu by dragging a little bit on the right-hand side. But I'm not going to do that. Click on save menu and make sure that main menu is selected. Now let's find out how it looks. It looks nice. Don't worry about the side. We'll change that later on. But if you'd go to a reference upside, you'd find that there is a mega menu over here, right? So we'll also create a mega menu. And to create that, let us go to a dashboard or LMS, forgot. These two widgets are very important. Make sure you do not remove these widgets because these are important widgets. In the first visit, you'll be able to strike your net sales and all the awaiting orders and all the products that are out of stock on all those things. And this will let you know about the reviews on the products that you have received. All right, so with this, let us continue and go to HTML blocks. And to make a mega menu click on Add New and give it a name. Let's give it a name of grocery, mega menu, click on Publish. Okay, I almost forgot that we need to enable the Elementor page builder for HTML blocks. So to do that, hover to elementor and go to settings. And from here, just make sure that this one is enabled HTML blocks and click on save changes. So let us get back to HTML blocks. And over here you'll get this edit option. Click on it. And here you can edit with Elementor. And once you enter into element or you know how to do this stuff, you have to design the same way the way we have designed homepage. So in a mega menu, we see that there are four columns and four ones and 50 to the aid. Actually there are four columns at the bottom. Also, settlers come back and click on this plus button and select this kind of structure which has got four columns. We need one more of these sums simply going to duplicate. And we have this forward and for now good, all widgets. And drag-and-drop this element extra menu list. All right, as soon as you do that, you'll get this list. And then your work becomes very easy. All you have to do is at this title. So let us name it fruits. And please do not forget to link this to a category, to link it to your category, I'm going to show you how to do it. If you'll select a particular product, you will get the category link from here. Now, this is the category structure. Your website's URL followed by product, hyphen categories slash fruits. If you want to make it a vegetable Calibri, simply remove fruits and add vegetables and so on. Now click on copy and come back. And we're going to paste it over here. And then we'll move on to the lists. So the first list we have over here is many child item one. We're going to remove this title. We're going to name it oranges. And similarly, you can add a link to this list item also, and you can add some labels as well. So currently you see that there are no labels like this on oranges. So if I'm going to write zoom on over here, I'm going to get a label of x1. And then I can also change the label color. So if I'm going to make it blue, it is going to be blue. Okay? Like this. So this is how the extra minimalist works. And then we also have a beautiful image in the background. And to add that background, select this column and go to style, good background type and click on Classic. And from the image, I'm going to select the required image. Like I'll select this one and click on Insert media. Now for the position. I do not want to be in the center. So I'll make it top right. Like this, but I'm still not satisfied. But we'll fix that for repeat, make it no repeat. And for the size, make it custom and will reduce the size up to this much, make it 69. And for the position, make it custom. And this is the x-axis and y-axis. And the x-axis is for horizontal and y axis is vertical. So we'll make it go this much on the vertical side. And for the horizontal side will make it to the top, maybe up to this much. So we have a content ready and now we do not have to make it again and again will simply duplicate this. We need four and now we have four. So we'll remove these extra columns. We can also duplicate the entire section as well. So I'm going to duplicate them and remove this extra section from here. So we had this kind of mega menu, and of course you can change the image and all the list items we have over here. I will also provide you this mega menu template. So you do not have to worry, but since everyone is going to have different requirements, you should learn how to make this of your own. You can get this template if you'll go to my folder and Elementor templates and from the mega menu template. So the first one I've already created for you, but you have to make a lot of editing over there. So it is this one. And the next one which I have created was bakery mega menu. If you'll come back. And go to the reference subset, come to home. This is a category menu also over here. If you'll go to be grea, we have this mega menu over here. So this one can also be made very easily. What could confuse you a little bit, was this accessories, we have some products over here, right? So let me show you how to add these products. Let me remove this element from you. Now go to all widgets and you'll find a product visit over here. It should be somewhere over here. Over here. Wc products widget. Just drag and drop it over here. And you'll get those items. Let me remove this so that it looks quite clear. Okay, so we had this product over here as well. So this is how you can add products. And of course you can select this widget and you can add a lot of things over here, like add a title, select the type of product you want to have, and the number of products and so on. So click on update and let us exit this. All you need to remember now is this name, grocery mega menu. So let us come back to menus. First of all, we need to refresh our page. So click on Reload. Now, I want to add that mega menu in shop. So I'm going to select shop. Scroll down from the design, just select full width. And then you get to see a new option which says HTML block. And from this drop-down, I'm going to select the block grocery mega menu, and click on save menu. Now let us find out how it looks. So I'm going to refresh the page. And now if you hover to shop, we had that mega menu over here, red. So you have learned how to create a megameter 10. So let us come back to menus and we'll make the rest of the menus. So we have created a main menu, and now we'll create a category menu. This menu. All right, so come back and click on create a new menu. Click on leave and name it the category menu. Click on Create menu. And we need some categories over your rate. So come back and we'll get the category at the bottom of the page. I think. Actually no, this was the block category. We have to go to the screen options and enable the product category. From here. Enable the product category. Also make sure that the WooCommerce endpoint is enabled. And now click on screen options again. Now you can find the product categories over here. So we'll select that. And I want to add fruits and, and whatever categories that I want to add over there. So I'll add dairy and bakery and chocolate. And let's see. Okay, that is enough. Click on Add to Menu. And we had these categories of young 1, 2, 3, 4. You can add as much as you want. You must be having a lot more categories than I have. Click on Save Menu and your money will be saved. You won't be able to find the category menu now because we have not designed the header, but don't worry, we'll come to that. Now let's come back and let's create three more menus. So click on, create a new menu. Click on leave. And I'm going to name it photo1. Click on Create menu. And from view all I'm going to add all those pages which I had added earlier. Click on add to menu. And all the widgets will be added. Click on save menu. I just want to display something over here so that it does not look vacant, okay? I just want to display something over here, here and here. Thrillers come back and let us create one more menu. Click on leave, name it footer to click on Create menu. And then I'm going to scroll down and I'm going to add options from WooCommerce endpoints. So I'm going to select orders, addresses, payment methods, account details, and let us add layout as well. So click on Add to Menu. So these things have also been added. Click on save money. And now a last minute. So click on New and named footer three. You can create click on View all I'm going to add this time compare, Maya count, Track Order, wishlist, and that's it. So click on save menu. So we have created all avenues and now we'll move on to final customization of our website. 25. 16 Header: Designing Custom Header, Uploading Logo and Category Menu: Okay guys, so we have completed making all avenues. But if you'd go to a website, you'd find that a menu does not appear the way we wanted it to be. Modal header also does not look nice. We want a header to look something like this, right? So we'll come back and we'll design a header. So go to menus and hovered would mark and go to Header below. Click on leave. And in this page will be able to design a header. The first one has already been built for you. And this is our default header, which we can see over here. The first thing that you can do is you can import the header. I've already provided you. If you would go to the folder that I have provided do in the head of older, you'd find this file grocery header. All you have to do is open this folder. I mean, sorry, file, select all the content over here, copy it, come back over here, and you just have to paste it over here and click on Import. You'll get this header by the name header grocery. And this is the header that I've used over here. If I'm going to make it as default and click on Okay, and let's come back to a website and click on, Refresh. The header that we have on a reference state is going to appear like this. But you may have to do several things over you. Like we cannot see the main menu over here. Sometimes it happens. What do you do then is click on menus and choose the menu instead of the category maneuver here, we'll make it the main menu. Click on Save and click on Save header. Now if you'd go and click on Refresh, you'll see your main menu over here. You can also choose to have a different icon and different information over here. To do that, you'll come back, click on Edit for the first element. And you'll see the information that is getting displayed over there. If you want to change the information and write it off your own. So let's say if I want to write my own number, I can write something like this. I do not want to change it, so I'm going to click Close, click on Edit again. And let's say I want to change the icon, know? And if you want to change your icon, Let's close it. And we'll go to the media library in a new tab. And suppose you want to use something else over the rate. Let's say you want to use this Eigen. So open it and copy this file URL. Copy to clipboard, this button. Come back. Now click on Edit over here. Go to Text. And then instead of this link over here, which is given inside this inverted commas, just replace it and click on Save. Click on Save header. Now let's get back to our website and click on Refresh. And you'd find your icon has been changed. Alright, so this is how it works. I also wanted to show you from where you can get these icon's. The first website to get these kind of icons is flat icon.com. So we'll open a new tab and go to flat icon. You can go to this website and search for any item you want. Let's say we want images of mobile. So you can search for Mumbai and click on the icon that you like, and you can download the SVG file. Most of the icons that I've used in our website is of SVG format. You can use some other format. You can use the PNG as well. So you can click on this button and download your icons for free. Rate, or you can edit your icon as well. If you click on Edit icon, you can go to choose a new color. If you want to make it red. You can do like this. If you want to make it some other color, you can go like this, okay? And if you want to make it white, you can do like this. But if you want to change the color, make sure you're logged in first flight, con won't let you edit the Eigen if you're not logged in. I have already shown you in the shop page that we need some white icons. Although this is optional and you can choose not to have it. But I want to show you how it is done. I will show you where to upload your icons so that you can display them over here. But first let us complete our header. So let us get back. So this was how you can upload a header. The next thing that you can do over here, as you can come back and you can edit your default header is click on this pencil button Header Settings, and you'll come to your default header. First of all, let us make a default so that whenever we refresh, we can see what we're editing. Let's come back and click on refresh. All the headers are divided into the top bar. This is the top bar. And then we have the main header over here. And then the bottom, we have the footer header. It is this one. And you'll see the same thing over here. Dopa, main header and header bottom. In the top bar we have got three elements, 1, 2, and 3. So we'll add those elements. So come back. And first of all, let us remove this. Click on okay, and we'd Alan element. We'll add a text HTML element. So add this one over there and click on Save. So our first element has been added. Let's close this one and we do not have to click on Add Element again and again, we can simply clone them. Okay, just like this. Now let us edit the first one. You'll come over here and go to Text. Now go to the folder that I have provided you and go to this file, text HTML file under header. Okay, open it. You have to copy the first one. Come back and pasted under text. And click on Save. Go to the next one, click on Edit, go to the text, go to the file. This one will copy, the next one, copy it, come back and paste. Now the reason why I do not want to show you this is because it is an HTML code. I've already showed you how you can replace this image over here and get your things done. So let us click on Save and go to the next one. Go to text, come back. And we'll copy the third one, no. And click on paste, click on Save. So our top bar, which we have on the left-hand side is complete. Now come back and we'll edit what we have on the right-hand side. In the right-hand side, we have got social buttons. If you click on edit, you can edit these buttons as well. And later on, I'll teach you from there you can add the links of your sushi lichens so you can keep this element over there, or you can remove this and click on the element which we have on a reference website. Go to text and copy the photon, which is this one, is copied, come back and simply paste it over here. Click on Save. And we have completed making element. Now let us click on Save header. Go back and click on Refresh. You'd find what if you have just designed? Over here we have one more link. It is not visible because it is of the same color as its background. We'll fix that later. But first let me show you how you can add links to your text. Alright, so we'll click on edit. And in this special offer we had this link which will direct you to the shop page. And on the track order page, we had this link which will redirect you to the tricorder page if you want, you can also edit it and click on the Settings option. You can search for the page which you wanted to be there. So if you want, you can have your shop page over there as well. If you want, you can have your homepage with the as well. Okay. If I'll click on this link and click on update. The link over there would get updated. Click on Save. So our top bar is complete. Now let us come to a main header. And the main header on the left-hand side, we also have a logo video. Right now it doesn't default. You can also upload your own logo by clicking on upload and selecting your logo from your, let's say I select this one and click on Use this image. I can adjust the logo with also. And if I'm going to save it, save the header. Let's come back and refresh the page. You'll see your logo has been changed. But let's come back. I do not want this logo, so I'm simply going to click on edit and remove this image, click on Save. And the logo will be reverted to the default image. Click on Save header. But in the middle we have a search bar, which you can see over here, right? So we'll come back and click on Add element. Now we want a search form over there. And then we have to make few settings. So for the display we want it to be a form. And for the form we want this kind of style and not this one. And I also want to display some categories over there. If you'd come over here, you'd find this category option. So comeback and enable this. Enable this option as well. It will improve your search result. Now, scroll down and make sure you have product selected over here. And then we'll click on Save. Click on Save header. Let's come back and refresh our page. All right, so we also have a search option over here. I also want some spacing over here and here, we'll come back and I'm going to add an element for space. So it is this one. Instead of 10 pixels, I want to keep it 20. So I'll keep it 20 and click on Save. And then I'll simply duplicated and you can drag it over here. Now click on save header. Let's come back and refresh. Okay, now we also have some space. Let's come back. And not at the header bottom, we want the main header to be on the right-hand side. And in the left-hand side, we want this category menu. So we'll add an element, the category element, this one. Choose the menu that you want over there. So we want our category menu over there. So we will make sure that it is selected. You can also limit the number of categories. And now click on Save. So this is how we design our header. Now click on save header. And let's go back and click on Refresh. And now our header is complete. It will hold with this, you'll get your categories as well. Now you'd find that you cannot see that category image which we have over here rate. And to do that, we'll come back and go to product category, product and then categories. You can come to product categories and click on Edit. Now, at the bottom of the page you will find these options. And the last option that you can see over here where it says upload an image is actually of this category already the one that we have in a drop-down. And the second last one that we have over there is for this shop category. Okay, let's come back. Click on upload. And let us upload the black category image, which has got the black outline for bakery. I want this to be our image. So click on Use this file. And for the next one, I'm going to click Upload. And for every black outlined I can, I have a white outlined icon. So click on it and click on Use this file. Now both of the file has been uploaded and click on Update. Let's go back to our website and click on Refresh. And now let us go to the shop page. You'll find your category image over here. And if you hover to this, the category menu, you'd also find your bakery icon over here. You can also leave them empty. The choice is yours. So let's get back. Make a photo and to make our pseudo hover to Appearance and go to widgets. 26. 17 Footers: Intoduction to Widgets- how it works: Alright guys, so we have five different column options for five different columns that we can see over here. So come back. And first of all, we'll design the first column. In the first column we had this logo and then some text and then some information. So come back and click on column 1 and go over here and search for the text widget, which is over here. You can also drag and drop it. But I'm simply going to click on this drop-down and search for, for the column one, and click on Add Widget. Now come over here, you'll find this widget added under column one. So let's add the logo. Click on Add Media. Click on upload files, select files. Now scroll down and you'll find this logo would logo white selected and click on Open. Click on, insert into post. And you'll have your logo at it. Don't worry, the background is also white and that is why we cannot see our logo. If you click on it, you'd be able to see it partially. Now come down and we'd copy this text from your comeback and paste it and go to the next lane. And for the information that we have over here, we'll pay some code. Go to the folder that I have provided you and open this file photo1. Copy this entire code that we have over here. Come back, go to Text, and at the bottom, just paste it. Alright, come to visuals again. Now come over here. If you want to change any information, like if you want to change it to India, you can do it just like this. You can change London to Mumbai. Click on Save. But make sure you do this in Visual, in texts will only paste the code. So click on save and let us come back to our website and click on Refresh. Let's see if we have done everything correctly. All right, We have done things correctly, but but the thing is that the background of the photo is also white, so we're not able to see our logo. So what we'll do, we'll go to team settings and go to Footer. This scroll down, and you'll find this option, footer text color. We want it to be light. And for the backroom, select Color and go to the file from very, you have copied the code. Just copy this code, and come back over here and paste the code over here. Click on Save Options. Now let us see how it looks. Scroll down and you'll find that first column is done. The only problem is there's too much of space over here, so let's fix it. Come back over here, and we'll remove this space from here. Okay, Let us save and see if it looks fine now, click on Refresh. Okay, It looks better. Now let us come back and we'll move on to footer to succumb to footer too. And in folder 2 we have recent post, but this is not normal recent posts. This is Walmart's recent post. So we'll search for Woodmont recent post. Over here. Would march recent post, come to column two and add widget. Now let's get back. The title is already written. For the number of posts we want it to be 20 only. Rest of the things are fine. Click on Save. And let's come to column 3. Now in column three, we want to have menu. So let's come back and search for navigation menu. It should be nav menu or navigation menu, something like that. Navigation menu. Okay, so we'll put it in footer 3. And we'll put the same thing in front of four also. And also in photo five. Alright, so let's come to foot off 31st. And for the title, I'm going to add it as a story or whatever it is written over here. We'll just paste it. And from this drop-down, I'm going to select the footer one, click on Save. So our column 3 is complete onto column for, for the title, I'm simply going to copy and paste. And I'm going to select folder to save. And for the last one, fundamental or whatever you want, you can write it over there. Pasted and photo 3. Click on Save. Let's come back to our website and click on Refresh. All right, So offered a LES complete. So let's come back. Okay guys, so we have committed and making a photo and now we'll make site buzz. If you'll go to a product page, you'll find that we do not have a sidebar over here. And it is because we have not added any sidebar individualization. So we'll come back and we'll go to this option shop page widget area. This is the sidebar off a shop page. So we'll make this 1 first. So the first widget that we have over here in our reference upside is filter by price. So we'll come back and fill search for filter by price. It is over. You will click on this and select shop page widget area. And from here we'll click on Add Widget. The budget has been added will just change this P, capital P. Alright, click on Save knife. You'll go to a product page and click on Refresh. You'll find your filter over here. Next we see that we have few products and then we have our categories. Let's come back and let's find out products over here. Shouldn't be over here, some over here, sharp edges already selected. So I'll simply add this visit. And the number of widgets I want to display over there is 44, I think four is enough, I think click on Save. So our next budget has also been added on. Next we're going to add product categories. So don't add this category. This is the product, this is the block category. You'll find the product category somewhere over here. Over here. Click on it. Michelle shop pages selected, click on Add Widget. And the product category has also been added. I do not want to show any heirarchy, disable this, and make this C as capital. Okay, Think rest is fine. Click on Save. Let's come back to product page and click on refresh. And as you can see, we have all the things in place. Let's come back. And with this, we have completed off for dissection as well. And now we'll do the final customization. And do the final customization. Click on theme settings. 27. 18 Theme Customisation: Alright, so this is a team customization page. So first of all, we had this page builder option. We had already selected element off of this. If you're comfortable with using WP bakery, you can go ahead. Then we have favicon. Favicon is also known as the site icon. Let me reduce the size of this browser. If I'm gonna make this smaller, you'd be able to see all these icons that we have on the left-hand side, right? All these icons over here, I known as favicon or citations. So I'll upload a site icon. Click on Upload. I don't think I have included any site I can fund our website. So let me just upload a dummy one. Let me upload this one. I know this is not right, but let's use this image. Now click on save options and let us find out how it looks. If I'm going to resize my browser. The fabric, the fabric on is appearing over here. Let us resize it back and get back. Now the next option that we have over here is off retina favicon. It is the same thing. If you have a better, if you have a better quality of this image, you can upload it over here. Then we have Show Comments on page. Turn it on. If you'll turn this off, you'll not be able to see communities that you receive on your page. Currently, we do not have that kind of page in which we can see comments, but let us keep it turned on. Okay. Then we have custom 400 four page must have come across this kind of 400 four error. Whenever you want to access a URL which does not exist, you can have a custom 400 four page made on your website and you can select that page from here. So the customer will be able to see that page whenever there is a 400 error. Alright, then we have the Google Map API keys. Again, not use the Google Map which files provided by Woodmont. If you'll go to the Contact Us page, the man that he can see over here has been provided by element OR, and NOT the Woodmont theme itself. This is only to avoid this API key, this belly and difference with the look. So I've used the Google Map, which was provided by the element 0. Next we have sticky notification, will turn that on. And then the element or negative section margin. We saw in a homepage that there was some, there was some gap over here, right? And in order to remove that gap, we added a negative margin. But if you disable this, you won't be able to use any negative margin. So keep it enable. Next we see the search results. You can search for any products you want on your website. The search is going to be based on the products that you have uploaded on your website, right? But if you'll select this, it is going to be based on the blogs that you have uploaded on your website. All right, so our general pages over, let us go to mobile bottom nav bar. And then we have a mobile navigation bar, will turn this on and click on Save Options. Let's get back to our website and click on Refresh and ticket to the mobile view. This buyer, which you can see at the bottom of your screen, which all these options, known as the mobile navigation bar. And below each and every option, you'll find these labels over here, right? You can turn them off if you'll click over here, nav bar labels off. And you can also have some custom buttons. Right now we have only 1234 buttons. You can also have some more buttons over here. If you click on Custom Button 1, you can connect it to some other page by adding the URL and giving it a label, and then adding a custom icon as well. You can have up to three custom buttons. But over here you'd find that we have got five options. If you cancel this one, you'll have got five options over here. Shop off Canvas, vicious guard and my account. This off Canvas sidebar is extra. If you'll come over here, you not find the off Canvas sidebar, which is quite interesting. If you'll go to the shop page, you'll find one more option over here by the name filters. These filters option is available on all the pages where you have the sidebar you'll get to see in the shop page, and you'll also get to see in a single blog page. So do not remove this button. Alright, so click on Save Options, and now we'll move on to our Instagram APA. In this section, you can connect your Instagram account video website. And then what you can do is you can go to the visit and add an Instagram widget over here. This would mark Instagram visit. It will select this and take it to the main widget area and click on Add Widget. What will happen is whatever Instagram photos that you want to display on your website can be managed from here already. You can display any number of photos over there. And this Instagram widget can be seen from your blog page. If you'll go to a single block page, open up dog like this. And if you'll add that Instagram widget, you can see at the bottom of the screen, this is already getting displayed, although we have not added anything. Since we have added nine photos over here, nine grids have been created, but we do not want that, so we'll simply delete this. Let's get back and then we have age verify pop-up issue website is 4 18 plus. You can turn this on and write all those messages which you want to display it before entering into your website. And if they select know, this is the message that is going to get displayed on the screen. So this was age restriction. Now let us go to general layout. Currently our website is on full width. So from right to the left, this is the full width that are also box with website. Not very important. So let's get back and then we have the sidebar position. We want to keep the sidebar on the right-hand side. Currently, we have disabled the sidebar for most of the pages that we have on our website. But if we will not disability, it is going to be appeared on the right-hand side. Keep the off Canvas site Buffon mumbles on. The sidebar size should be medium. Now good page title. Most of our website do not have a page title, but we have a page title in our shop page. It is central line. If you'll keep it to default, it will be left aligned. Then we have page title background. The background that we have over here is black. You can change this background to any other color. Then come back. You can change it to any color you want. You can make it blue. I can make it whatever color you want. We do not want that. We want to have an image in the background. So we'll upload a background image. Click on Upload Files, click Select Files. I provided this image. You can use it on your website. Click on Open and click on, Use this image, let it upload. Use this image. So we'll have that image over there. Okay, the text color that we have on our page title is currently lightened color. We can also change it and make it dark. Then scroll down and you'd find the page title size. You can make it default small, large vertebra you like. And then we have got a bread crumbs. You currently do not have any breadcrumbs over here because rest of the pages do not have the page title. So even if you are going to keep this off, it is not going to matter at all. Let us scroll down. So this setting is also complete. Let us click on Save Options. Go back to our website and click on Refresh. Let us see if this has changed. Alright, so this has changed. So there are few more options to explore. So let us go to the footer area. And in the footer area, it is currently turned on. Make sure that it is turned on photos look really nice. And then we have what kind of layout you want to use. Currently we are using this kind of layout in which the first two columns are quite big horizontally and the rest of the columns are small. Now scroll down and then we have scroll to the top button. If you'll go to a website and if you scroll down, you will have this kind of button over here. Okay? If you'll click on this button, you'll be scroll up to the top of the page. So that is what this option does. Next, we have sticky for dm. Sticky footers are just like sticky header. If you'll just scroll down from your website, sticky footers will stick with you. Okay, Next we have collapsed widget on my vales, Not really important. Photo color scheme. The photo color scheme you have changed earlier. And then we have photocopy rates will keep the copyright on. And then for the layout, we have got two columns. It will come to the website and scroll at the bottom we have two columns. The first column consists of the texts that we have written over here. And the next column will have this option of payment. Let me take you to the reference website and scroll down at the bottom of the screen, you'd find these two columns. In the first column we have some text. And the column that we have on the right-hand side, we have got this image, okay, in which we have explained what all option that we accept payment. Let's come back and you can edit this option as well. This is actually an HTML code. You can, first of all, just remove this link from here. And instead of this link will just copy this link which we have for our website. Copy this and replace it. Now for the Woodmont. We'll remove the Woodmont. And instead of that, I'm going to write my own name. You can write your company's name. Keep the copyright as it is. And then for 2019 will make it 2000 and 2001 because the Europe right now is 2000 and 2001. And then we had this link again. I'm again going to just remove this link from here. And I'm going to paste the link that we have for our website. The next thing that we see over here is this x. This x which we see, oh yes, it is of different color. So if you want, you can do this, but let us make it this way. Okay, I'm going to remove this again. It was extended Studio. So I'm going to make it m, d and then space and then Ximen or let me keep the D or the with the M. I'm going to keep it this way. Alright. I didn't hyphen over here. And then for premium e-commerce solution, I'm going to add web designer. Alright, let's click on Save Options and let us find out how it looks. So click on refresh. And so this is how it appears moments among treated by Muhammad zone. The designer MD is in red because we had, because we had put MD separated, Wade was x and then our payments option. So let's come back and scroll down. At the bottom of the page, you'd find this link. And I'm going to select this link, which we have under inverted commas and then go to media. I'm going to open media in another tab, and then I'm going to upload this image. Okay, make sure you upload this image I have provided you in the folder. Click on Copy to Clipboard. Now let's come back and paste that URL over here, paste it, and click on Save Options. Let's come back and click on Refresh. Let's see if it is over there. Yes, we have it over here. Now let's come back. So offered a section is also complete and now let us move on to typography. I do not recommend it. Do anything in typography, the primary font has been set to Poppins, and the text font has been set to lateral. Both of these funds are my favorite, so I do not really recommend you to do it. But if you have good understanding in fonts, you can change it. No problem. So I'm going to skip this part topography and come to style and colors. Over here we had this primary color. You can also change this if you want. You simply have to replace this color code with the one that I have provided you in, uh, in this file. Important info. Open this file and you'd find this color, red color. Okay, copy this color code. Come back over here, and we'll simply replace this and click on Save Options. Alright, let us come back to our website and click on refresh all the colors that we see over here, which was green earlier, is now red. Okay? This one is red. If you'd scroll down, all these underlining is red and this particular background is in red. And all these things, as you can see over here, are red, but I do not want to use that color. So I'm simply going to make a default. Okay, click on Save Options again. You can also change your secondary color the same way we have changed our primary color. Then rest of them are not very important. And now that we have a trend of using Doc teams, even I am using a dark theme. So if you want, you can turn it on from here. Let's get back and go to page background. The default setting in this section is perfectly fine. So I do not want to do anything over here. If you'll go to Buttons, you'll find some default buttons. Currently, the default buttons looks something like this. And the 3D burdens that we have as Add to Cart and checkout and login and all those burdens that we see over here in our product page. Also, if will come, you'll find this button. And this button you'll find this This underlining, okay, which gives a 3D leg experience. So that is why they are saying that it is 3D button. If you want to use some other kind of button, you can use it from here. Restful things over here are quite self-explanatory. Alright, so let us go to our next option, which is font-style. The font-style is the search option that VC over here at the top of our page. This is actually kind of a form. Can lead the thickness of this border is to pixel. I can make it one pixel as well. And I can make it rounder and I can make it underlined. I can remove this entire the upper part and make it underlined only. Alright, so this is how it works, but I'm going to leave it the way it is. The default setting is fine. Then notices, we do not have to do anything in notices come to blob. So in the blog page, we currently do not have any layout of having side buzz. Okay, if you'll go to a blog page, it is good to a blog page. The page that you can see over here currently does not have a sidebar. I mean, the styling that we have chosen from here. The Masonry grid, this kinda styling does not have a saint, but if you want a sidebar on your blog page, you can simply change the design and have that sidebar. I actually like the Masonry grid, look very much, so. I'll keep it mismeasuring grid. And then we have side-by-side. I'm going to keep it medium. The blog items column. We have it as three. If you go to a blog page, you'll find 123 we have made only to blogs. That is very Only two is getting appear to V0. If he would have made the third one, it would have appeared over here. Let's come back. And the space between these posts are actually 20 pixel. If you want, you can just reduce the pixels of space that we have over there. Then we have the block style. We have it as with shadow. If you go to the blog page, you'll find that there is a subtle shadow at the back of the block, which is because of this option. So that was that and post excerpt. We already know about post excerpt. If you are going to click on full content, this entire page is going to be filled with the content that we have in this particular post, right? So we'll keep it as excerpt. And then these things are self-explanatory. And then we have got blocked pagination. Pagination is something we have when we have a lot of blogs. When we have a lot of blogs, we get a number option over here, right? And the page in which we currently is going to be highlighted. So you can have that kind of option. Or if you want, you can have the Load More button. You can also have infinite scrolling where you can just keep on scrolling and your posts wound end. So that was for the blog page that we have over here, the blog page, and now we have the single blog post option. So let us click on a single blog tsunami. We have options related to this page. Okay, Let's come back and over here we have a single post design. Keep it default. The large image is very big. Then we have the single post header. For the single post had actually we can have different kinds of header. I don't recommend that. I would strongly recommend you to maintain some consistency on your website. So keep it none. Then justify galleries not important. Share buttons. If you'll come over here and scroll down at the bottom of the page, you have some sharing options over here, right? So these sharing options can be even extended that you can also have the WhatsApp option and some other social media options, which we are going to find out later. If you want to disable this option, you can simply turn it off. Then we have post navigation in the post navigation is this option. You can go to the older post, and if you have a previous post, you'll have an option over here. And the next option that we have over here is auto bio. We currently do not have any author bio because I have not added anything in my profile. But if you want, you can add something and it is going to be displayed over here. So, and then we had the related posts. The related post is going to appear just below this section. We do not have any related post for this post. So we're not getting anything. Let's come back on it. So this is done. So let us click on Save Options. And with this, we will move on to our next option, which is portfolio. We have not done anything in portfolio, so we leave it come to shop page. So the first option we have over here is searched by product SKU. You can also search your 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. Adjunct shop is also not very important. All these options are not that important. Quantity input on shop cart widget. Let me show you what it is for this. Let me take you to the shop page and wherever you add something to the cart, what happens is that this visit opens up over here. We have some quantitative written, but we cannot edit this quantity. But if you'd enable this option, you would be able to edit that quantity. Click on Save Options and let's find out how it looks. Come back over here, disclose this, and add something. First of all, refresh this page. Now, add something to the cart and you'd find that you are able to adjust the quantity is no. Okay, So that is what it does. Let's come back and let's scroll down. And the very next option that we have over here is actually after the add to cart. Whenever you add something to the cart, this widget appear is right. If you want, you can disable this or you can choose to show a pop-up, then we have a height visit automatically. This widget does not get hidden. You'd have to close it manually. You can automate it by enabling this option. And we have hiding the two price. If you'll come over here and hover over a valuable product, you'd find 80 rupees, 170 rupees. You can choose to see only one price and remove this two from you. By enabling this, then we have could shop for valuable product. Not really important. And this is also not that important. What will happen if you have the cart empty, This message will appear. You can also edit this message. The breadcrumbs we have on the shop page is this one. You can also choose not to have it by turning it off and click on Save Options. Now let us move on to the next one, which is product grid. Product grid is basically the number of products that you can see over here, okay? So comeback and the number of products per page we have over here is 12. If you'd kind the number of products over here, it is going to be 12. We don't have enough products. That is why this grid is empty. Now let's come back. You can edit the same thing from you. Now, products per page link, products per page link is this link which we have over here, nine, 24, and 36. You can also edit this link. If you'd come over here, you'd find this option nine, 24, 36. You can edit this. Next we have 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 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. If you'll scroll down, you'll have page numbers over here and the page on which you are will be highlighted. I do not want to have a page number. You can have this kind of a button which says Load More 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 listed 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 with this, I also keep my quantity input on products on. It'll display the quantity as Phil, bordered grid. You can have a bordered grid. I do not recommend it. Hover image. Whenever you hover over a product, you have a hovering effect of zooming in rate. So you can turn that off from your stock progress bar. You can turn these two options on. This option basically will tell your customers the number of products that you have on your stock. And this will display the timer, but this will only display if you have a product on sale for a particular time. And then these options are not very important. Then we have product title limit. Currently we do not have a title limit. That's why our products are getting displayed in several lines. You can control this by making them display in just one lane. Click on Save Options and let us find out how it looks now. Click on Refresh. So they are getting displayed in one lane now. And we have this done. So we'll go to the category styling. Let's call up. We have used the category element in the homepage, so we'd have to go to the homepage first. Let's open a homepage and scroll down at the bottom. Over here we have displayed the category. So let's find out what all option do we have? So we have these many designs. You can choose any of them. I like the default one, so I'm using it. Then we have categories with shadow. If you hover over, the category, does a subtle shadow, I do not know whether you can find it out or not, but there is a shadow. You can turn it off by disabling it. And now come to cite Burton page title. Scroll up. Currently the layout that we have on our shop page has the sidebar on the left-hand side. If you'll come to the product page, 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 the button again and that side 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. The 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. Alright? 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. And for the brands also, we'll skip this. Come to the 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 a 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 soil, keep it on. And then we have show variations on quick view. Yes, we want to show some variations. If there is a village and 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. Enable compare. Yes, we want to inhibit compare page. We are not assigned the Compare page, so we'll assign it and click on Compare. Now let us scroll down, 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 wanted to be on. And only for logged in. No, we wanted 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 or 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 tile 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 ones, 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. 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 over. If you have product image with the image width that we are 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 we'll come over here, the mean 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 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 it won't 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, 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 profile 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. 28. 19 Chekup/Checkout and Finalising: Alright guys, so with this, we have completed all our settings. Now let us find out if I website looks good. Let us scroll down. Alright, so I don't think that we have any problem with our website. We have already seen our About Us page and all the other pages. So let us find if it looks good on a mobile phone over here. Also, I think everything is good. There. We do not have any problem over here, so let us go to the shop page. And here he also, everything is fine. We can improve this a little. We have a card option over here and we have it here also. So what we're going to do is we're going to replace this card option with a search option. So let us go to a header and let us take it to the mobile layout. And over here you'd find the cart option. So we are going to remove this. And instead of that, we're going to add a search option. Make sure you add an icon and not deform. Click on Save, and click on Save header. So let's get back and click on Refresh. Okay, So this one is also fixed. Now let's take it to the extra version. All right, so with this, we have completed our website entirely. And just to ensure this, we will buy something from us too. All right, so let's say we want to buy some apples. So I'm going to add apples to the cart, close this and let us also by some honey. So I'm going to select option. And I'm interested in one liter. So I'm going to add it to the cart and go to View card. And in this page everything is fine, but I do not like this sidebar. So let's click on Edit page and remove the sidebar. Simply scroll down and you'd find this sidebar option and click on without click on update. And let's get back to a page. So as sidebar has been removed and in that place we have our cart totals. In cartilage, we have a shipping and GST. A GST has been calculated appropriately, but our shipping has not yet been calculated. And this is because we have not entered a zip code. We'll do that in the checkout page. But let me show you over here. Over here, you can also adjust the quantity or you can delete your product entirely. And based on your update, your GST will get updated. We can also use a coupon code over here, but for that, we have to make a coupon first. To create a coupon, you can go to the dashboard and scroll down and you'd find this marketing option, click on coupons. And over here we can make a coupon. Click on create your first coupon. Here you'd get the option of either generating a coupon code or you can make your own coupon code. So I'm going to make one of my own. So let's give it Zan GR and something like ten. Alright, I'm going to copy this coupon code so that I do not forget. And over here you'd find there are several options. And in this option discount type, you'd find there are 3. First of all, we have percentage discount, fixed card discount, or you can have fixed product discount. I'm going to choose percentage discount. And I want to have a discount of 10 percent, I'm going to be 20 percent. Let's keep it 20%, okay? And if you want to also allow free shipping on this coupon code, you can check this checkbox and you can also mention an expiry date for this particular coupon. But I'm not going to do any of that. Just click on Publish. And a coupon code is ready. So I've copied the coupon code, just come back over here and click on Refresh. And now let's add that coupon code over here is click on paste and click on apply coupon. So as you can see, 28 rupees has been deducted from the total amount. 20% of 140 rupees is 14. Tuesday 28, which has been deducted from here. I do not want to use a coupon code, so I'm simply going to cancel this. And I'm going to proceed with the order. And we see that we have a sidebar over here again. So let's get back to edit page. Now scroll down and a sidebar click on without an click on Update. Now let's get back. Okay, so our sidebar is gone. And now if you see over here your audience getting displayed along with the payments option. So let us enter our details and then go to checkout. So I'm going to enter my name. You have noticed over here that as soon as I've entered my pin code, the shipping charge has been upgraded to rupees 20, but this shipping charge is only for this pin code. If I'm going to change the spin code to something else, it is going to display this kind of error. This because we have chosen only one zip code for shipping rate. So we'll make that five again. And let's add my number. Now scroll down and I think the rest of the details are complete. So let us place the order. Click on debit or credit card. And here I'm going to enter a dummy debit card number, my expiry date, and click on place the order. I will be asked about my OTP, so I'll simply enter it and click on Make Payment. Okay, guys, so as you can see that our order is complete, you can find your order number, date, e-mail address on all the other details below it, all that you have ordered along with the shipping and GST, judge, and then your total amount. I want to know if our track order page works. Let's copy this order number and go to track orders. And over here, I'm going to enter that DID. And for the billing E-mail address, I'm going to enter this address and click on Track order. Okay guys, so our track order page also works. And now let us find out how all of this looks from the backend. Let us go to the dashboard. Currently we have 0 net sales. Click on refresh. And as you can see, we have 140 as net sales and we have one order I waiting for processing. You can go to the order from you or you can hover to WooCommerce and go to orders. And in this page you'll find all the orders that upending. So I'm going to select the order that we have just received. Once you click on that order, you'll get to see all the details that the customer has mentioned. You'll get to see the billing address, the shipping address, and the product that he has ordered, GST along with the shipping and total and all those things that we need over here. If you want to refund them, you can prevent them from you. And if you scroll up, you'd find that we have notes. And in this note it says striped charge complete, which means we have received the payment. I had entered my wrong card details. That's why these arrows are getting displayed. And in the end you'd find this ad note. If you understand a message to the customer, you can simply type it over here. And from this drop-down, select note to customer and click on Add. And this message will be sent to the customer. You can use this option to send the tracking ID to the customer. And in our case, you can use it to send the phone number of the delivery guy. And then when the order is complete, you can simply scroll up and from the status, you can change the status to complete it and click on, Update on it, guys. So with this, we have completed our tutorial. I'm so glad that you've made it till the end. You 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.