How do create a WooCommerce website?
Assalam-o-Alaikum In this tutorial, I will share with you how to create a WooCommerce website. Some people are confused between WooCommerce and e-commerce. Let me clarify: e-commerce is the process of buying and selling, and WooCommerce provides you with more features. We are going to create a store website where we can sell our and others products.
Responsive WordPress Theme
So we will complete this step first. Before that, I covered which theme we were going to use. I will share a WooCommerce theme with you that more than 200,000 people use. You must be doing more, but here you can see that there are 2,49,948 sales of this theme.
The name of this theme is FlatSome. This is a multi-purpose WooCommerce theme. You can create your own WooCommerce website without any problems.
You simply get the option to import the demo data and you can do it. I will share the whole process in this tutorial. First of all, I will discuss your step-by-step in today’s video. Our topic is the responsive WooCommerce theme. After that, let’s talk about how we have to register the domain.
WooCommerce Website Hosting
So I am simply using the hosting to register the domain. You can also do it if you get the link in the description. It is perfect in Pakistan because you can pay it with easy money like cash. We are going to use a business plan. You get 100 websites and a free domain. Free domain whose value is 2500 rupees. Not 2000, but 2300 rupees.
The website has automatic, free migration. After that, you get free email and unlimited SSL certificates. You also get free CDN. After that, let’s talk about clicking on choose plan. You have to simply click on choose a plan. As soon as you click on choose plan, the period will show up with you. For how long do you want to buy it? See, you get a 30-day money-back guarantee. You are almost there. Simply check your order.
If you do it for one month, it will cost you 2500 rupees. If you do it for 12 months, it will cost you 960 rupees. Similarly, if you do it for 24 months, it will cost you 800 rupees. If you do it for 48 months, it will cost you 719 rupees. So, simply put, I will do it for 12 months. Let me show you. See, it is costing me 11,500 rupees. See, it is costing me 11510 rupees. See, if you come here, it will cost you 14000 rupees.
How to Create an eCommerce Website WordPress + WooCommerce | Step-by-Step Tutorial 2024
Here I am adding a full tutorial. I already added an English subtitle, so you can watch with subtitles, watch the full video, read the full article, and make your website happy with me.
I will give you the link in the description. If you come here, it will cost you 11,000 rupees. Automatic referral code. 20% discount. As soon as you submit the payment. See, here you have easy money and jazz cash. Whatever payment you have, bank alfalfa, connect, batch bill, or credit card. Whatever you have available, you have to select it. After selecting, whatever your OTP is, it will come. It will be told to you that if there is a payment, it will automatically be cut.
you will be shown so simply you will get an option here and here you will get a website, then you have to register your domain Whatever domain you buy depends on you, Now let’s move on to the next step.
How to Create SubDomain in the Hosting Pannel
Creating a SubDomain is not a part of this tutorial This is because I am Making a tutorial and working on a subdomain so that’s why I am Creating a subdomain, Creating a subdomain is very easy; you just go to your channel or channel search subdomain and you’ll find the option of creating a subdomain. Here, I am choosing a name, gigiwoo.shortlpak.com, and click create. now let’s install WordPath and the WordPress theme.
Step-by-step Guide to Woocommerce Website Development
Install WordPress and Flatsome Theme
you will not have it So how do you do it, I am talking about WordPress, and you will have the WordPress option And you have to click on the overview, This time, you have to keep all the focus on HTTPS. You have to search here for whatever domain I have created, whatever your domain is You have to select it, and after selecting it, you are simply get the option of installing WordPress here So simply click on install and a pop-up will be shown here in front of you.
So I keep the name GigiWoo; you have to change the email; whatever you can do, I recommend you create the same email related to your website or domain, install WordPress on a separate domain, and keep your passwords or emails safe because we are creating strong passwords. Okay, do you let me install WordPress?
Simply put, I create a password and then do next. Whatever setting is here, PHP version 8.1 is recommended. Whatever setting is here, you have to leave it as it is and click on install. The moment you click on install, our WordPress will be installed in front of you. After that, see, we have installed WordPress.
simply,simply,After that, install the Flatsome Theme. Our next option is to install the Flatsome Theme. Our WordPress is installed here. So simply here we go to the admin panel. The way we clicked here on the admin panel, then whatever WordPress admin is here. That’s it. It will open here. Admin panel. Okay, see here, the light speed is recommended.
So simply click on recommended link here. the certificate is also going to be installed now, so they will do it later, Now let’s talk about it, So simply here, see our WordPress is here, ok, here is the post area, ok, simply here
I show you my website, and how it will show, so this is simply the WordPress trend, ok, this is available here, simply our option is to install the flat some theme, so to install the flat some theme, let me tell you if you want to work, you can buy it from here if you are well-optimized, money is related to money, then you can buy it by simply visiting it, you will get the link in the description of it, now look,
that you can see thatwe are going to create a website of this kind of WooCommerce, okay, so in which all of us are here, you see the classic demo, this is the rest of the demo, all of these demos, you can see that you can see that you can see that you can see that you can see that you can see that you can see that you can see that you can see that you can see that you can see that
here you will get the option of adding a new theme and here you will get a section for uploading a new theme Simply put, you can see that already popular themes like Astro and Generate Press are available for free
simply click on Choose File, and here is the version of flatsome I open it and click on install As soon as you click on install, you will get the option to activate it so simply activate it Here you can see that our version of flatsome is activated and here you can see the popup of flatsome simply click on let’s go Now, and here, you will get purchase code
if you are using the full version, then you don’t need to add a purchase code, but if you are using the premium version, then I simply add a purchase code and click on activate Here you can see our version of flatsome purchase code has been added, so simply click on continue, and here it is saying to install the child theme, so we do it
activated,ok here we click on continue here whatever plugin we click on continue whatever plugin we click on continue whatever plugin we click on continue it will be automatically installed and activated whatever plugin is not activated we will do it later.
Customize Flatsome Theme And Other Settings
Now let’s come to Flatsome. Here you get the themes option. Okay. Let’s come to this. Okay. Now we are talking about customizing. Okay. To customize this theme, do you have to do everything? Now look at our style here. Let’s come to style. Look here. Colors. Okay. Look here. This is also the primary color here. Now I have changed the color here. Okay. Let’s make it red.
Okay. Look here. It has become red. Come back. Here in global color. you can change it according to you, you will not have any problem with it, whatever you want to keep the color, you can keep it, whatever color you see, our color is also fine, it has changed, let’s click on publish, let’s come back, see here, after color, we get global styles, ok, you will do the setting of the button, from here you will do the setting, what type of font you want to add, you can do it from here, you simply need to be on here,
page.you need a letter, then you can do it, whatever you want, you have to do it, you have to do it custom here, see the image lightbox, you have the image lightbox, you will enable it in this way, downturn it off, it’s better, very simply, you get a blog option here, you talk about the blog layout, you get a layout, see the sidebar, be on this sofe or the full sidebar,
.Keepkeep the sidebar because you can show ads in the sidebar so it is easy for you now to see if a blog single post ad is also shown like this blog global settings you will do from here our blog page is done after this let’s talk about layout keep full width our is full width complete width is shown here simply see this as we click here logo option comes here categories comes here
header main main header comes here whatever we search main menu now see whatever we have search main menu search ok search main menu our everything is here, here is header account see here all settings will come from here we will do mouse we can change ok all settings you have to customize here according to you now see let’s talk about footer,
we have come to footer click on footer here we have come all footer block will come here here will come widget ok whatever you click on here those things will show here now see all the layout of footer whatever you want to change you can do so simply talk about customize footer is also done header is also done now we have talked about home page let’s talk about menus simply see we have two menus,
;main menu and secondary menu which is showing in footer In the footer, which menu is here, let me show you now, first of all, let’s talk about the main menu. Our demos, first of all, we have to remove this demo, we should not have these demos. We have to come here, demos and click on remove here. In the same way, we have to remove all of them.
We have to remove it. If we want to add new, then we will simply click on add a new. We will click on the menu here and whatever we have created will be the post.
Here we have created pages; whatever we have to add, whatever we have to add, we will simply add it from here. Then our home page will be selected. So simply, I talked about our categories, whatever we will add here. It is simply a matter of social media. If we click on the social header here, then our social media will be shown here. Simply whatever Facebook’s, Twitter’s, Pinterest’s, Instagram’s, whatever Google’s, whatever YouTube’s,
here,Now look here, click on the top bar, then here we will have the top bar of the top bar. The enable top bar will come, what to do, what not to do, what color to do, you can also do all the settings from here. Ok, this is done, ours is done. Now look here, add anything here to just remove it. Ok, just add something here to remove it. Let’s talk about custom content. Now look here, now here hello. Ok, I wrote hello here.
OkayOk, something has changed here. So simply we have to do all the settings from here. Rest look here, come back, come back. Now look, you get the option of share, you get the option of reset settings, you get the option of pages. Now look, we have an option here, create product pages. Ok, now let’s talk about product pages too. Ok, now I will show you how to create a product change and show you how to do it. Simply I am closing this now, ok, I am not going to change any setting. Simply return to the dashboard.
How to Set Up WooCommerce
Woocommerce is a productto create e-commerce. On the website, you need to install Woocomerce plugin. On the WordPress dashboard, on the left side, you, will find option plugin Click on add ne plugin Here, you will find search option search woocommerce and you will find woocomerce plugin Simple install and activate it.
After installing the WooCommerce plugin, you will see different options on left side of WordPress dashboard. Here, you will find some options Let’s start with product option; later, we will discuss other options.
Step-by-step Woocomerce setup
How to List your Products
Simply return to the dashboard. Now look here. Here is our products:. And now look here, all products and add new products. We are getting the option to add new product. Now look, we have not listed anything yet, which is why we see nothing here, Now we are adding our own product here so let’s start. on wordpress left side you see products option click and add a new product here,
Whatever your product is, we have to add our title here. Ok. We will add a product description here. I will show you something now. See, simply, I come back to the demo. Now I will show you some product. Ok. How is it going to be shown to us?
Simply come back to the product. See our product. Here is our short description. And here is our long description. Ok. You have to take care of this thing. So simply come here again. Here is our product description. Long description.
Here will be the title of the product. Ok. Here is Demo Product 1. Ok. This is our product description. Here, you see. This will be our regular price.
For example, I want to sell it for $1800. In $1100. So simply, we will do this. How much discount is there for automatic luggage? Now see if our product is virtual or downloadable. If it is virtual, then you have to do the setting of your product from here.
But mine, for example, is digital download. book, coveror , whatever you have to download, you will add it hereand, you will upload it, if you want to keep the limit, then do it, whether it expires or not, you can’t set it from here, so simply our product has been set up from here, now see the short description,
the short description shown here, here is the short description, Telus l your product a small one, we will simply do it from here before the card, after that, along-distance or related products will be shown here automatically,
Okaynow see here, the gallery images of our products will be there, gallery images, what is it, I will show you, these are our gallery images, we have to admit, after adding the gallery image, see our categories and, we will create from here, ok, if you want to add tags,
they will do it from here, then simply our product will be created, ok, without wasting time, we visit the next point, our next point is how to set up WooCommerce, configure WooCommerce setting, add product, ok, our method has just been done,
Payment Setup
.let’s talk about the setup payment method, simply come to the payment method, simply here you will get the option of payments, now see in our payment, see PayPal, and enable PayPal, you have to pay Amazon, do, ok, whatever you want to enable,
Nowyou can do it after coming to the WooCommerce payment option, now see install WooCommerce, ok, for free, ok, now you can install this too, ok, in this you get all our payment methods, etc., visa card master pay, discover, google pay, book pay, you get all these things.
So simPayPalypal is not in Pakistan but worldwide it is very famous. If any of your relatives live abroad, you can create it in their name.
Create Pages
So simply after the payment option, we talk about how to create other pages about us, contact us, and a header menu. We have discussed how to add a header menu. But now we talk about how to create pages. So simply come here and get the option of pages and all pages. First of all, let’s see which pages are ours. So blog, card, demo business.
Now, we have removed all the other things, like a grid, etc., that are useless pages. The second demo, see PayPalypal, is activated. So simply to add it, I simply add it from here. Before that, let me tell you about the pages. Simply add a new page.
When we click on it, then whatever page we want to add about us, we do it from here. See more about us. We have created a page. Ok, about our age.a simple play about us page came. Here you have to say who am, blah blah blah. Whatever you add, you will add your description from here and you can simply click on publish. So our about us page is ready. OK, the About Us page has been created.
How to Create Pages And Add to Our Website HomePage
We already added our product,and and when we talk about how to create pages, the question is how to show them on the homepage or on the website header or footer where we want. How did we do it? We have created a page about us. So to add it, simply click on the page. And here you are getting the option of menus. Ok, you have to visit the menu option. Now see our shop, our classic shop and shop menu.
you will be shown on our home page. Ok, as soon as I visited the home page, I saw demos and our classic shop pages, these elements, etc. Everything is added here. So simply visit from the bottom.
See, these elements are also present. see, from here, we have to add our page. To add, simply here about us; whatever page you have, understand everyone here. There is no help. Ok, click on add to menu. As soon as I clicked on Add to menu,
See here below; about was been added here. Ok, we have to remove these pages. Whatever bad pages we have. Simply click on save here. Let me show you, by refreshing your website, whether our page has been added here or not.
Ok, in the same way, we will add here. My problem is that the page is not showing here. But here, yes, because it has been added, it is not showing. Ok, no problem. Ok, our pages have also been created.
Bonus Tips: Import Demo Content
After that, our bopointsoiare nt, demo content, download demo content, import content, use content, and ok, strategic starting point. Demo content is an easy starting point. Like my demo content, all categories have been added here. According to you, a person can customize from here. Okay, that’s why it becomes easy. Simply come to the option of flat sum. Ok, see, now our next option is demo content.
Ok, demo content; we have already imported all of it. Now, see here: in the option of our flat sum, we have come to the advanced option. Ok, see here, header script; whatever our header code is, our footer code will be. Ok, see here, header script; whatever our header code is, our footer code will be. we will add it from here and do it here, right? Custom CS etc.
want to do site loading, right? Light colors, etc. will be there for those who want to disable the site search UI UX builder, right? Lazy loading Global API maintenance mode four zeros, four page custom font WooCommerce rigAll in all, you have options here, whatever your settings are according to what you want to do, you will do it yourself, see whatever you will do; do it according to you, see what looks best to you, we will do it. The best thing is that if you know something, then only you have come to it, right? If
you don’t know, right? Then tell me in the comment box, brother, I’m new, right? Custom is full for you, right? Two to three hours of full tutorial, right? We will serve you on your page; you don’t have to worry, right? So in today’s video, I just had to show a lot, right? The video will be very long from the beginning, so don’t waste more time on it, I will ask you for your permission.
If you like the video, and if you want to see more videos related to it, then subscribe to the channel because more videos are going to come on it on WordPress, blogging, and other platforms, right? So you subscribe to the channel, Allah Hafiz