how to make ecommerce website in wordpress | Step by step Tutorial

In this tutorial, I will show you how to make an e-commerce website in WordPress. This is a complete step-by-step tutorial and beginner friendly. If you don’t have any previous experience, you can also make your own eCommerce website only by following this video. By the way, here I used all free tools, so you need not spend any money for this website except getting a domain and hosting. Now let’s have a look at some basic steps

Step 1 : Purchase Domain & Hosting. If you already have domain and hosting, you can skip this part.
Step 2 : Install wordpress

Step 3 : Install Theme (Bizz Ecommerce)

Step 4: Install Necessary Plugins (Elementor, Elementor Header & Footer Builder, WooCommerce, ShopLentor, YITH WooCommerce Wishlist, WPForms Lite)

Step 5: Upload different type of products.

Step 6: Create necessary pages (Home, About, Contact). Upload logo, create menu, add some basic settings and add custom CSS to improve site design.

Step 7: Download the zip file from here. You will find several files inside. Import all pages.

Step 8: Explain how to replace dummy content with your own content.

Step 9: Explain woocommerce settings and we are good to go.

CSS Code
.single_add_to_cart_button {
	padding: 6px 50px !important;
}
.single-product div.product form.cart button.minus, .single-product div.product form.cart button.plus {
	border: none;
}
.single-product div.product form.cart input[type="number"]{
	border-top: none;
	border-bottom: none;
	border-radius:0;
}
.btn-wrapper .fa {
	color: #111;
}
.custom-logo {
	max-height: 60px;
	width: auto;
}
/******  form css  ********/
.wpforms-submit {
	padding: 0 !important;
	background: none !important;
	border: 0px !important;
	font-family: poppins;
	color: #000 !important;
	letter-spacing: 1px !important;
	font-weight: 600;
}
.wpforms-submit::after {
	content: "\f30b";
	font-family: "Font Awesome 5 Free";
	padding-left: 3px;
}

@media screen and (max-width:1024px){
	.single-product div.product form.cart input[type="number"] {
		width: 45px;
		height:45px;
		line-height: 12px;
	}
	.single_add_to_cart_button {
	padding: 6px 15px !important;
}
}

Download all files

Where should I send you this file?

    Get in touch

    Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

    Call me by Skype (farjana.rashid55)

    3 + 13 =

    [wpforms id="2272"]