Create Free E-Commerce Website in WordPress with Elementor & Electro Theme

Create E-Commerce Website in WordPress with Elementor & Electro Theme 100% FREE (Part 1: Demo Setup)

Step-by-step Guide by CodePress Academy to Build a Free Professional Online Store.

Introduction

Welcome to CodePress Academy! In this tutorial series, we’ll walk you through how to create a complete e-commerce website in WordPress using Elementor and the Electro theme — absolutely 100% free. This is Part 1: Demo Setup, where we’ll set up your WordPress, install the necessary plugins, and prepare your site for customization.

Why Choose WordPress for E-Commerce?

WordPress is the most flexible and cost-effective platform for creating professional online stores. With the power of WooCommerce and page builders like Elementor, you can design your dream e-commerce website with zero coding knowledge.

• ✔️ Easy drag-and-drop design with Elementor
• ✔️ Powerful WooCommerce features for online sales
• ✔️ 100% customizable layout
• ✔️ Free themes like Electro for a premium look
• ✔️ SEO-friendly and mobile-responsive

Step 1: Install WordPress

First, install WordPress on your hosting or local server. You can use Local by Flywheel or XAMPP for local setup. Once installed, access your WordPress dashboard via http://localhost/your-site/wp-admin.

Set your Site Title, Tagline, and Permalinks under Settings → General and Settings → Permalinks. Use “Post Name” for better SEO.

Step 2: Install Electro Theme (Free Version)

Go to Appearance → Themes → Add New and search for Electro. Click on Install → Activate. Electro Theme is designed especially for online electronics stores, but it can be used for any niche with Elementor customization.

Pro Tip: Electro provides free demo imports that look premium. We’ll import one in this step.

Step 3: Install Elementor Plugin

Navigate to Plugins → Add New and search for Elementor. Click Install → Activate. Elementor will allow you to design every part of your site with live editing — header, footer, shop page, and more.

Step 4: Install WooCommerce Plugin

Go to Plugins → Add New → WooCommerce and activate it. Follow the setup wizard:

• Store Setup: Enter your business details
• Payment Options: Enable Cash on Delivery or PayPal
• Product Setup: Add your first demo product

Step 5: Import Electro Demo Content

Electro makes setup easy with demo import tools. Navigate to Appearance → Import Demo Data and select your desired layout. Once imported, your site will instantly look like a professional e-commerce store.

You can now customize your homepage, products, and navigation using Elementor. Adjust banners, add product categories, and personalize the design to match your brand.

Step 6: Make It Mobile Friendly

Elementor lets you preview your site in mobile view. Make sure your header, menu, and product grids look perfect on smaller screens. Mobile optimization improves Google rankings and enhances the user experience.

Step 7: Secure and Optimize Your Site

• Install Really Simple SSL for HTTPS setup
• Use WP Fastest Cache for performance
• Install Rank Math SEO for search optimization

Conclusion

Congratulations! You’ve successfully completed Part 1 of our series: Demo Setup for E-Commerce Website. In Part 2, we’ll explore how to customize your homepage, add dynamic banners, and design product pages using Elementor.

Keep following CodePress Academy for more tutorials on WordPress, plugins, and e-commerce growth tips.

Next Tutorial

👉 Part 2: Custom Homepage Design with Elementor – Stay Tuned on CodePress Academy.