How to make an eCommerce website from scratch

Ananda Projapati
Last Updated: August 25, 2021

Do you want to make an online store and sell your products?

Then you need an ecommerce website.

In this video, I’ll walk you through and show you how you can build an ecommerce website from scratch in WordPress just using a free theme and plugins.

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

Recommendations

Hosting: GreenGeeks
Image: Freepik

Here is the CSS code

.yith-wcwl-icon.fa{
	font-family:FontAwesome;
	font-size:17px !important;
}
.woocommerce ul.products li.product .entry-content-wrap{
	margin:0;
}
.button.yith-wcqv-button{
	margin-top:5px;
}
ul:not(.products-list-view).woo-archive-action-visible.woo-archive-btn-button .yith-wcqv-button {
  position: absolute;
  top: -43px;
  left: 0;
	border-radius:0;
	background:rgba(0,0,0,0.5) !important;
}
#yith-quick-view-content .entry{
	box-shadow:none;
}
@media screen and (min-width: 1025px){
	.yith-wcwl-add-to-wishlist{
	left:-30px !important;
	transition:0.3s all;
}
.woocommerce ul.products li.product:hover .yith-wcwl-add-to-wishlist, .woocommerce-page ul.products li.product:hover .yith-wcwl-add-to-wishlist{
	left:20px !important;
}
ul:not(.products-list-view).woo-archive-action-visible.woo-archive-btn-button .yith-wcqv-button {
	opacity:0 !important;
	transition:0.5s all;
}
.woocommerce ul:not(.products-list-view).woo-archive-action-visible.woo-archive-btn-button li.product:hover .yith-wcqv-button, .woocommerce-page ul:not(.products-list-view).woo-archive-action-visible.woo-archive-btn-button li.product:hover .yith-wcqv-button{
	opacity:1 !important;
}
}
/*===== Wishlist =====*/
.woocommerce-wishlist .yith-wcqv-button{
	display:none;
}
.wishlist_table tr td, .wishlist_table tr th.product-checkbox, .wishlist_table tr th.wishlist-delete{
	text-align:left;
}
.wishlist_table .product-add-to-cart a{
	display:inline-block !important;
}
.wishlist_table.mobile{
	padding-left:0;
}
.wishlist_table.mobile li{
	border-bottom:1px solid;
	margin-bottom:30px;
}
.wishlist_table.mobile li .item-wrapper .product-thumbnail{
	display:block;
	text-align:center;
	margin:auto;
}
.wishlist_table.mobile li .item-wrapper, .wishlist_table.mobile li .item-wrapper .item-details{
	display:block;
	width:100%;
	text-align:center;
}
.wishlist_table.mobile li .item-details-table{
	margin-top:7px;
}
.wishlist_table.mobile li .item-details-table .label, .wishlist_table.mobile li .additional-info .label{
	display:none;
}
.wishlist_table.images_grid li .item-details table.item-details-table td.value, .wishlist_table.mobile li .item-details table.item-details-table td.value, .wishlist_table.mobile li table.additional-info td.value, .wishlist_table.modern_grid li .item-details table.item-details-table td.value{
	text-align:center;
}
.woocommerce-orders-table__cell-order-actions a{
	margin-right:5px;
}

/*==== Contact Form ====*/
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button{
	background:#414151;
	border-color:#414151;
	color:#fff;
}
div.wpforms-container-full .wpforms-form input[type=submit]:hover, div.wpforms-container-full .wpforms-form input[type=submit]:focus, div.wpforms-container-full .wpforms-form input[type=submit]:active, div.wpforms-container-full .wpforms-form button[type=submit]:hover, div.wpforms-container-full .wpforms-form button[type=submit]:focus, div.wpforms-container-full .wpforms-form button[type=submit]:active, div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active, div.wpforms-container-full .wpforms-form .wpforms-page-button:focus{
	background:#3A3A3A;
	border-color:#3A3A3A;
}

Theme and plugins used

Important links

Download the templates and customizer settings

Here are some of my favorite website building tools

Thank you for reading the article hope you have found this helpful. Here are some of my favorite tools that I always use and hope you will find them helpful too. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission at no extra cost to you. I recommend these tools to my clients and friends as well.

Web Hosting: For starting a new website, I like to use GreenGeeks. They are reliable and affordable for a beginner. They have a very simple setup process that anyone can use. I’m personally using their service for over a year now.

Page Builder: For building beautiful websites in a short period of time I like to use Elementor. It is one of the most powerful page builders in the market. You don’t need any technical knowledge to make websites.

Content Writing: When you make a website you have to add content to it. I use Grammarly to write better content. It improves the writing by checking spelling and grammar mistakes automatically. It has a premium version but for starters, the free version is a good starting point.

Advertising Network: When you have built the website and have traffic on it, ads are the easiest way to monetize the website. Adsense is the most popular choice but I recommend Ezoic which will give you a much higher earning than Adsense and the best part is it is free to use.