How to make an eCommerce website from scratch

Ananda Projapati
Last Updated: January 26, 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;
}