fbpx

How to make an eCommerce website from scratch

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

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

You may also like

Recent Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
website design illustration

Learn The Exact Steps I Follow To Create WordPress Websites

Easily create WordPress websites for yourself and others following my 2 hrs FREE WordPress Training (Video).