Arif Sadiq
Join my YouTube channel where I share simple, practical tutorials on eCommerce, website design, and online business to help you grow faster and with confidence.
Sitekio
Ready-Made Website Files
Build a professional WordPress or eCommerce website in minutes with Sitekio’s ready-made templates.
In this video, I’ll show you exactly how to build your own online store from scratch – no coding required, and completely free!
WHAT’S INSIDE THIS ECOMMERCE TUTORIAL?
We’ll start with getting your domain and hosting, then I’ll show you how to install WordPress and set up your website from scratch. After that, we’ll pick a free theme, add the plugins we need, and turn your website into a fully functional online store using WooCommerce.
You’ll also learn how to add products – simple products, variable products with different sizes or colors – and even set up a wishlist so your customers can save their favorites. Plus, we’ll make your home page, blog posts, About page, Contact page, menus, footer – basically everything to make your website look professional.
By the end of this video, your store will be ready for people to browse, add products to their cart, and buy easily. You don’t need to know any coding – everything is simple and beginner-friendly.
WooCommerce Product Card Styling
/* =========================================
🔹 WooCommerce Product Card Styling
========================================= */
.woocommerce ul.products li.product.type-product {
background: #fff;
border-radius: 0px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
padding: 15px;
position: relative;
overflow: hidden;
text-align: center;
transition: all 0.3s ease-in-out;
}
/* Hover lift effect */
.woocommerce ul.products li.product.type-product:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* 🔹 Product Image */
.woocommerce ul.products li.product.type-product img {
max-height: 280px;
object-fit: contain;
border-radius: 0px;
transition: transform 0.3s ease-in-out;
}
.woocommerce ul.products li.product.type-product:hover img {
transform: scale(1.05);
}
/* 🔹 Sale Badge */
.woocommerce ul.products li.product.type-product .onsale {
background: #ff4d4d;
color: #fff;
padding: 6px 12px;
border-radius: 30px;
font-size: 12px;
font-weight: 600;
top: 10px;
left: 10px;
}
/* 🔹 Title */
.woocommerce ul.products li.product.type-product .woocommerce-loop-product__title {
font-size: 16px;
font-weight: 600;
margin: 12px 0 8px;
color: #333;
min-height: 45px;
}
/* 🔹 Prices (Hide on Hover) */
.woocommerce ul.products li.product.type-product .price {
font-size: 15px;
font-weight: bold;
color: #27ae60;
transition: opacity 0.3s ease-in-out;
}
.woocommerce ul.products li.product.type-product .price del {
font-size: 13px;
color: #888;
}
.woocommerce ul.products li.product.type-product:hover .price {
opacity: 0;
visibility: hidden;
}
/* 🔹 Add to Cart Button (Show on Hover) */
.woocommerce ul.products li.product.type-product .button {
display: inline-block;
font-size: 14px;
font-weight: 500;
color: #000 !important;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
transform: translateY(10px); /* Slightly down initially */
}
.woocommerce ul.products li.product.type-product:hover .button {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
WooCommerce Product Category Card
/* =========================================
🔷 WooCommerce Product Category Card
========================================= */
.woocommerce ul.products li.product-category.product {
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
padding: 20px;
text-align: center;
transition: box-shadow 0.3s ease;
}
/* 🔷 Hover Shadow */
.woocommerce ul.products li.product-category.product:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* 🔷 Category Image */
.woocommerce ul.products li.product-category.product img {
max-height: 200px;
width: auto;
height: auto;
object-fit: contain;
margin: 0 auto 15px;
transition: transform 0.3s ease;
}
.woocommerce ul.products li.product-category.product:hover img {
transform: scale(1.03);
}
/* 🔷 Category Title */
.woocommerce ul.products li.product-category.product h2.woocommerce-loop-category__title {
font-size: 16px;
font-weight: 600;
margin: 0;
color: #222;
}
/* 🔷 Product Count */
.woocommerce ul.products li.product-category.product .count {
display: block;
font-size: 13px;
color: #777;
margin-top: 5px;
background: #fff;
}woocommerce product Categories shortcodes
[product_categories number="6" columns="6"]woocommerce product Sale shortcodes
[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]woocommerce Featured products shortcodes
[featured_products]
