How to Make a Ecommerce Website using WordPress & Elementor 2025

Quick Summary

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

FREELANCING MASTERY is now LIVE!

(The wait is over — enroll in the full course now.)

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.

We’ll make this eCommerce website 100% responsive for tablet and mobile devices. Also, it’s optimized best for SEO, so you would get better ranking on google search results.

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

Hide horizontal overflow for the entire page CSS

<style>
/* Hide horizontal overflow for the entire page */
html, body {
   overflow-x: hidden;
}
</style>

Animation Css

.floating img{
    animation: floating-animate-model 4s linear infinite;
}



    @keyframes floating-animate-model {
    0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px)
    }

    50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px)
    }

    100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px)
   }
}

Animation Css Class

floating

Main Product Card Hover Effect CSS

form.cart.e-loop-add-to-cart-form {
    position: relative;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center; 
    padding: 0px 0px;
    border: 1px solid #1B0B0D; 
    border-radius: 48px; 
    background-color: #fff;
    color: #1B0B0D; 
}

form.cart.e-loop-add-to-cart-form::after {
    content: url('https://kitpapa.net/cheeznest/wp-content/uploads/2024/10/shopping-cart.svg')!important;
    display: inline-block;
    position: absolute;
    right: 10px;
    padding-top: 03px;
    opacity: 0;
    width: 0;
    overflow: hidden; 
    transition: all 0.3s ease;
}

/* Increase padding and show the icon when hovering over .main-sec */
.main-sec:hover form.cart.e-loop-add-to-cart-form {
    padding-right: 30px; 
    border-width: 1px; 
    border-color: transparent;
}

.main-sec:hover form.cart.e-loop-add-to-cart-form::after {
    opacity: 1;
    width: 30px; 
}

.main-sec a.added_to_cart.wc-forward {
    display: none !important;
}



.main-sec:hover .price {
    color: white !important;
}
.main-sec:hover h1.product_title.entry-title.elementor-heading-title {
    color: white !important;
}

Subscribe Form Style CSS

/* Default for mobile (up to 768px) */
.custom-form button.elementor-button.elementor-size-sm {
    position: relative;
    bottom: auto;
    right: auto;
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .custom-form button.elementor-button.elementor-size-sm {
        position: absolute;
        bottom: 15.6px; / Adjust as needed /
        right: -95px; / Adjust as needed /
    }
}

/* Desktop (1025px and up) */
@media (min-width: 1025px) {
    .custom-form button.elementor-button.elementor-size-sm {
        position: absolute;
        bottom: 15.8px;
        right: -98px;
    }
}

Subscribe Form Style CSS Class

custom-form

Main Product Card Hover Effect CSS Class

main-sec

Product Carousel Arrow Style Css

.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next:hover svg, .elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev:hover svg {
    fill: none;
}
.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next svg, .elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev svg {
    fill: #1b0b0d00;
}

Form Input Field Style Css

.select-caret-down-wrapper {
    display: inline-block; /* Make sure it's visible */
    position: relative; /* Necessary for proper positioning */
}

.select-caret-down-wrapper {
    display: inline-block; /* Make sure it's visible */
    position: relative; /* Necessary for proper positioning */
}

.select-caret-down-wrapper::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('https://kitpapa.net/cheeznest/wp-content/uploads/2024/09/chevron-down.svg') no-repeat center;
    background-size: contain;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

svg.e-font-icon-svg.e-eicon-caret-down {
    display: none;
}

.elementor-field-group .elementor-field-textual:focus {
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0%) !important;
}

Filter Style Css

.filter li{
    width: 100%;
}

.filter label{
    color: var(--e-global-color-primary);
    text-transform: capitalize;
    font-family: 'Poppins';
    
}

.filter .wpf_item_name{
    font-size: 20px;
    font-family: 'Poppins';
    font-weight: 500;
}

.filter .wpf_search_button{
    background-color: var(--e-global-color-accent)!important;
    font-family: 'Poppins';
}

.filter .wpf_search_button:hover{
    background-color: var(--e-global-color-primary);
}

.filter .ui-widget-header{
    background-color: var(--e-global-color-accent)!important;
}

.filter button{
    padding: 10px 32px 10px 32px;
    color: #fff;
}

.filter .wpf_autocomplete input{
    background-color: transparent;
}

Filter Style Css Class

filter

Review Slider Arrow Icon Css

.elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-next svg, 
.elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-prev svg {
    fill: none; /* Default fill */
    stroke: currentColor; /* Apply the current text color */
}

.elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-next:hover svg, 
.elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-prev:hover svg {
    stroke: #FFFFFF; /* Change stroke color on hover */
    fill: none !important; /* Ensure no fill is applied on hover */
}

Cart Text CSS (Header Option)

.ca-icon-text::before {
    content: 'Cart ';
    font-size: 14px;
    font-weight: 400;
    color: #1B0B0D; 
   margin-left: 16px;
    font-family: 'DM Sans', sans-serif;
}

.ca-icon-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
}

Button Icon Style Css

selector span.elementor-button-icon{
    height: 16px;
}
selector span.elementor-button-icon svg{
   width:16px;
}

Blog Card Author Text And Icon Css

.custom-heading .elementor-heading-title:before {
    content: "Written by";
    color: #1B0B0D;
    font-size: 14px;
    font-family: DM-sans;
    font-weight: normal;
    display: block;
}


.elementor-button-icon svg:hover {
    fill: none !important;
}

.blog-tittle .elementor-heading-title{
    overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box;
  -webkit-line-clamp: 2 !important; /* Number of lines to show */
  -webkit-box-orient: vertical !important;
}

Blog Card Author Text And Icon Css Classes

custom-heading
blog-tittle

Search Popup Css

selector .e-search-input, selector .e-search-submit  {
    height: 56px !important;
}
selector .e-search-submit  {
    position: absolute;
    right: 0;
}

How to Make a Ecommerce Website using WordPress & Elementor 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