How to Make a Gadget Shop Using WordPress 2026

Build this store once… and you’ll have a skill you can use again and again.

Quick Summary

Build this store once… and you’ll have a skill you can use again and again.

In this 4 hour step-by-step masterclass, you’ll learn how to create a real eCommerce website with WordPress, WooCommerce and Elementor using free tools. This is not just a pretty homepage tutorial — we’ll build a full working gadget store with products, variations, shipping, tax, payments, SSL, and a real demo order from start to finish.

Get Free Domain & Web Hosting (up to 78% OFF 💸)

(Use coupon JFD10 for an exclusive discount)

In this tutorial, Zannatul from Jim Fahad Digital shows you how to create a FREE eCommerce / online store website with WordPress, WooCommerce and Elementor — step by step, from scratch, in one complete beginner-friendly masterclass.

beginners who want to learn WordPress eCommerce

freelancers who want to build client-ready online stores

business owners who want to create their own WooCommerce website

anyone who wants to learn how to make a professional gadget shop website without coding

✔ How to get a domain name and web hosting ✔ How to install WordPress properly ✔ How to set up WooCommerce the right way ✔ How to create simple, variable and professional-looking products ✔ How to add product options like color, storage, size, etc. ✔ How to configure shipping and tax so totals calculate correctly ✔ How to connect payment methods like PayPal and Stripe ✔ How to secure your website with SSL ✔ How to design a clean modern gadget store with Elementor ✔ How to place a real demo order and test the full buying process

This is not “YouTube theory.”

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Project Files Download the resources used in this tutorial.

Download Files

Kitninja eCommerce Elementor template kits.

Get Templates

Kitpapa Ready made Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Website Default Style CSS

:root {
    --primary-color: #130B32;
    --light-bg: #F8F8F8;
    --border-color: #eaeaea;

    --gradient-text: linear-gradient(90deg, #FFBB31 0%, #FF21DB 100%);
    --gradient-text-secondary: linear-gradient(180deg, #FF21DB 20%, #FFBB31 100%);
}

.woostify-container {
    padding-left: 30px;
    padding-right: 30px;
}

@media (max-width: 767px){
    .woostify-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}


.elementor-page .page-header {
    display: none;
}

.page-header {
    position: relative !important;
}

.page-header:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    background: var(--primary-color);
    opacity: 0.6;
}

.page-header .woostify-container * {
    z-index: 99 !important;
}

.page-header .entry-title {
    margin-bottom: 15px;
    font-size: 64px !important;
    line-height: 1.2em !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}

.woostify-breadcrumb {
    text-align: center;
}

@media (max-width: 767px){
    .page-header .entry-title {
        font-size: 46px !important;
    }

    .woostify-breadcrumb {
        font-size: 16px;
        line-height: 1.4em;
    }
}

Text Gradient Style CSS

.gradient-text 
.elementor-heading-title {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block !important;
}

.gradient-text .ekit-heading--title span {
    background: linear-gradient(180deg, #FF21DB 20%, #FFBB31 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

Text Gradient Style CSS Class

gradient-text

Text Path Rounded Animation Style CSS

.cus-ani-icon 
.elementor-icon {
    transform: translate(-50%, -50%);
}

.cus-ani-icon.elementor-view-stacked 
.elementor-icon {
    background: linear-gradient(90deg, #FFBB31 0%, #FF21DB 100%);
}

.animation-image img {
    animation: rotating 7s linear infinite;
}

@keyframes rotating {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

Text Path Rounded Animation Style CSS Classes

cus-ani-icon
animation-image

Product Category Card Style CSS

.product-categories .products {
    display: flex;
    flex-wrap: wrap;
}

.product-categories .product-category {
    background: white;
    min-height: 252px;
    margin: 0;
    border: 1px solid #e3e5e6;
    border-right: 0;
    width: 16.6667% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-categories .product-category:last-child {
    border-right: 1px solid #e3e5e6;
}

.product-categories 
.product-category 
.woocommerce-loop-category__title {
    font-size: 24px !important;
    letter-spacing: -0.008em;
    line-height: 32px;
    font-weight: 400;
    margin: 0;
}

.product-categories 
.product-category img {
    height: 124px;
    width: 108px;
    object-fit: cover;
    margin-bottom: 10px;
}

.product-categories .count {
    display: none;
}


@media (max-width: 1024px){
    .product-categories .product-category {
        width: 33% !important;
        border-bottom: 0 !important;
    }
	.product-categories li.product-category:nth-last-child(1),
.product-categories li.product-category:nth-last-child(2) {
    border-bottom: 1px solid #e3e5e6 !important;
}

	.product-categories 
    .product-category:nth-child(3n) {
        border-right: 1px solid #e3e5e6 !important;
    }
}


@media (max-width: 767px){
    .product-categories .product-category {
        width: 50% !important;
    }
	
	.product-categories 
    .product-category:nth-child(3n) {
        border-right: 0!important;
    }
	
	.product-categories .product-category :nth-child(5), .product-categories .product-category :nth-child(6){        
        border-bottom: 1px solid #e3e5e6 !important;
    }

    .product-categories 
    .product-category:nth-child(2n) {
        border-right: 1px solid #e3e5e6 !important;
    }
}

Product Category Card Style CSS Class

product-categories

Product Categories Short Code

[product_categories limit="6" columns="6" ]

Product Short Code Best Selling

[products limit="6" columns="3" best_selling=”true”]

Product Short Code New Arrival Product

[products limit="6" columns="3" orderby=”date”]

Woocommerce Product List Style CSS

.woocommerce-loop-product__title {
    letter-spacing: -0.030em !important;
}

.loop-add-to-cart-btn {
    justify-content: flex-start !important;
}

.product-loop-wrapper img {
    padding: 20px;
}

.product-loop-wrapper .product-loop-content {
    padding: 28px !important;
    background-color: var(--light-bg) !important;
    border-top: 1px solid var(--border-color);
}

.new-arrible-product 
.product-loop-wrapper 
.product-loop-content {
    background-color: #fff !important;
}

.product-loop-wrapper 
.woocommerce-loop-product__title {
    line-height: 1.4em !important;
    font-weight: 400 !important;
    margin-bottom: 10px;
}

/* Rating */
.star-rating {
    margin-bottom: 10px;
}

.star-rating > span:before {
    color: var(--primary-color);
}

.star-rating:before {
    color: var(--primary-color) !important;
    opacity: 0.2;
}

.variable-items-wrapper {
    margin-bottom: 10px !important;
}

Woocommerce Product List Style CSS Class

new-arrible-product

Single Product Page Style CSS

.single-product .woostify-breadcrumb,
.single-product .woostify-breadcrumb .item-bread a {
    color: black;
}

.woostify-breadcrumb 
.item-bread:hover a {
    color: var(--primary-color);
}

.woostify-container 
.product-images-container img {
    padding: 20px;
    width: 100%;
    background-color: white;
}

.related.products h2 {
    font-size: 34px !important;
}
.product_title {
    font-size: 24px !important;
    margin-top: 0;
    font-weight: 500;
    margin-bottom: 10px;
}
.woocommerce-product-details__short-description {
    font-size: 16px;
    line-height: 1.4em;
}

Shop Page filter Style CSS

.wc-block-product-filters__overlay .wp-block-heading,
.wp-block-search__label {
    font-size: 24px !important;
    font-weight: 500 !important;
    margin: 20px 0 10px !important;
    color: #000;
}

.wp-block-search__inside-wrapper {
    margin-top: 10px;
}

Blog Page And Blog Post Style CSS

.blog .post-loop {
    margin-bottom: 15px !important;
}

.blog .post-loop img,
.blog-post img {
    height: 400px !important;
    object-fit: cover;
}

.blog .post-loop .entry-header {
    text-align: left;
}

.blog .post-loop .entry-header-item {
    margin-bottom: 10px;
}

.blog .post-loop .entry-summary {
    display: none;
}

Blog Post Style CSS Class (For Home Page)

blog-post

Single Blog Post Style CSS

.single-post .post-cover-image img {
    height: 420px;
    margin-bottom: 20px;
}

.single-post .wp-post-image {
    width: 100%;
}

.single-post .related-title {
    font-size: 26px;
}

.single-post 
.site-main 
.post-loop 
.entry-title {
    font-size: 32px;
    font-weight: 400;
    color: var(--primary-color);
}

@media (max-width: 767px){
    .wp-singular 
    .page-header 
    .entry-title {
        font-size: 32px !important;
    }
}

Footer And side widget Style CSS

.widget li {
    line-height: 1.8em;
    margin-bottom: 15px;
}

.widget li a {
    color: var(--primary-color) !important;
}

.widget li time {
    margin-top: 5px;
}

.site-footer .widget-title {
    font-size: 26px;
}

.site-footer .widget li {
    font-size: 16px;
    line-height: 1.2em !important;
    margin-bottom: 10px;
}

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

How to Make a Gadget Shop Using WordPress 2026

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel