How To Make A Fitness & Supplement Store Website Using WordPress 2025

Quick Summary

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

In this tutorial, You'll learn How to Create a FREE eCommerce / Online Shop Website with WordPress, Elementor and WooCommerce. This Masterclass is for Complete Beginners.

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

In this tutorial, I’ll show you how to create a fully professional and Amazing looking eCommerce website for completely FREE. We’ll be using only the best & free resources to create this online shop. We’ll use a FREE Theme, a FREE Page Builder & All FREE Plugins.

To create this Online Shop, we’ve taken all the features and inspiration from world’s top eCommerce websites like Amazon, AliExpress, Walmart, flipkart and so on.

Though we’ll be using all the FREE resources, it will have all the basics and necessary features like a fully professional eCommerce website.

You can sell any type of products – Physical products, Digital products, Products with different colors & sizes… You can name it.

We’ll cover all the advanced techniques: Like, People can add products into cart very easily, then their shipping cost & tax rate will be automatically calculated based on their location.

On checkout, people can pay using different payment methods like paypal,credit cards or your local payment gateways. So people don’t need to go to any third party website, they can pay directly on your website.

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

Prompt Used in This Tutorial

Product Shortcode (All Products)

[products limit=4 columns=4 orderby="rand" order="DESC""]

Product Shortcode (Best Selling Products)

[products limit="4" columns="1" orderby="popularity" class="quick-sale" on_sale="true" ]

Product Shortcode (Featured Products)

[products limit="3" columns="1" visibility="featured"]

Product Card Sale Style Css

.product-page-container span.woostify-tag-on-sale.onsale.sale-left {
    margin-left: 45px;
    margin-top: 8px;
}

Single Product Page image's Style Css

.image-item img{
	width: 288px;
	height: 468px;
	object-fit: fill!important;
}

.image-item{
	background-color: white;
	padding: 30px;
	text-align: center;
}

Shop Page Style Css

.product-page-container span.woostify-tag-on-sale.onsale.sale-left {
    margin-left: 45px;
    margin-top: 8px;
}

.product-loop-image{
    width: 131px;
    height: 222px!important;
    object-fit: fill;
}

.product-loop-wrapper{
    padding-top: 12px;
    background-color: #fff;
}

.woocommerce-loop-product__category{
    font-size: 12px!important;
    font-family: 'Inter', 'Sans-Serif';
}

.woocommerce-loop-product__category a{
    color: #605b58;
    
}
.woocommerce-loop-product__title{
    font-weight: 500;
}

Account Form Eye Icon Style Css

button.show-password-input {
    padding: 0;
    background: rgba(0,0,0,0);
    border: none;
    color: #000;
}
button.show-password-input:hover{
    padding: 0;
    background: rgba(0,0,0,0);
    border: none;
    color: #000;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type=submit] {
    padding: 0 32px;
}

Single Product Page topBar Style Css

.single-product.right-sidebar .content-top, .single-product.left-sidebar .content-top {
	background-color: #f8f8f8 !important;
}

How To Make A Fitness & Supplement Store Website Using WordPress 2025

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