Hi, I’m Simon! In this tutorial, I’ll walk you through the process of creating your own e-commerce website from scratch using WordPress and WooCommerce. Whether you’re new to WordPress or just looking to set up an online store, this guide makes it simple—no coding required. By the end, you’ll have a fully functional, responsive e-commerce site ready to sell products. Let’s dive in!
Step 1: Get Hosting and a Domain
Every website needs hosting—a server to store your files and keep your site online 24/7. I recommend Hostinger for its reliability and affordability. Here’s how to get started:
- Choose a Plan: Go with the Business plan for more storage and features like CDN (Content Delivery Network) to boost speed and user experience. Use my referral link (check the video description) and coupon code METICSMEDIA for an extra 10% off.
- Set Payment Period: Opt for 12 months or more to skip setup fees and get a free domain for the first year.
- Claim a Domain: Pick a simple, memorable .com domain (e.g., meticsfashion.com). Register it with your details via Hostinger’s dashboard.
Once your hosting and domain are set, verify your email, and you’re ready to move forward.
Step 2: Install WordPress
WordPress is the foundation of your site. Here’s how to install it on Hostinger:
- Access the Dashboard: Log into Hostinger, go to Websites, and click Setup for your hosting plan.
- Install WordPress: Select “WordPress with AI,” create an admin account (use the same email as your hosting), and skip pre-installed plugins or templates for now.
- Link Your Domain: Assign your domain (e.g., meticsfashion.com) and choose a server location close to your customers (or rely on CDN if on the Business plan).
After installation, access your WordPress dashboard via yourdomain.com/wp-admin and bookmark it for easy access.
Step 3: Clean Up and Configure WordPress
Start with a clean slate:
- Remove Defaults: Delete pre-installed posts (e.g., “Hello World”), pages (e.g., “Privacy Policy”), and unused plugins like Hostinger’s tools. Keep LiteSpeed Cache but deactivate it during setup.
- Basic Settings:
- General: Set your site title (e.g., “Metics Fashion”) and tagline (e.g., “Fashion for Everyone”).
- Permalinks: Use “Post Name” for clean URLs (e.g., yourdomain.com/product-name).
- Reading: Set a static homepage (create it later) instead of showing latest posts.
Step 4: Install a Theme (Flatsome)
For an e-commerce-ready design, I recommend Flatsome, the best-selling WooCommerce theme on ThemeForest ($59 one-time fee). Here’s how:
- Purchase and Download: Get Flatsome from ThemeForest (link in the video description), downloading the installable WordPress file and license code.
- Upload and Activate: In WordPress, go to Appearance > Themes > Add New > Upload Theme, install Flatsome, and activate it. Enter your purchase code to register.
- Customize:
- Fonts: Go to Customize > Style > Typography and set Montserrat (800 variant) for headlines and base text.
- Colors: Set primary, secondary, and link colors (e.g., black and blue for my demo).
- Layout: Adjust container width to 1300px for larger screens.
Delete unused default themes to keep things tidy.
Step 5: Create Core Pages
Set up essential pages:
- Add Pages: Go to Pages > Add New and create Home, About, Contact, FAQ, and Blog pages. Publish each one.
- Set Homepage: In Settings > Reading, set “Home” as your static homepage and “Blog” as your posts page.
- Navigation Menu: Go to Appearance > Menus, create a “Main Menu,” add your pages (skip Home if using a logo link), and save.
Step 6: Design the Homepage
Use Flatsome’s UX Builder to design your homepage:
- Hero Section:
- Add a Section (label it “Hero”), then a Slider, and a Banner (Badge Simple template).
- Upload a background image (600px height), adjust overlay opacity, and edit text (e.g., “Summer 2024 Collections”).
- Set the page to “Full Width” in UX Builder settings and tweak responsive heights (400px for tablets, 300px for mobiles).
- Duplicate Slides: Copy the banner, swap images and text for additional slides (e.g., “Elevate Your Style”).
Save and preview your work at yourdomain.com.
Step 7: Install WooCommerce
Turn your site into a store with WooCommerce:
- Install: Go to Plugins > Add New, search for “WooCommerce,” install, and activate.
- Auto-Generated Pages: WooCommerce adds Shop, Cart, Checkout, and My Account pages. Delete unnecessary drafts (e.g., Refund Policy) for now.
Step 8: Add Products
WooCommerce supports three product types:
- Simple Product (e.g., Ruby Dress):
- Add via Products > Add New, set a name, description, price ($40 regular, $30 sale), and stock (100 units). Upload a main image and gallery images.
- Variable Product (e.g., Top with Colors/Sizes):
- Switch to “Variable Product,” add attributes (e.g., Color: Light Pink, Yellow | Size: S, M, L), generate variations, and set prices/images individually.
- Group Product: Combine related simple products (not covered here).
Categorize products (e.g., Dresses, Tops) for easy navigation.
Step 9: Build Additional Pages
Enhance your site with these pages:
- Shop Page: Auto-created by WooCommerce—customize later via Customize > WooCommerce.
- FAQ Page:
- Use UX Builder, add a banner (FAQ title/image), and import the “FAQs 2” template from Flatsome Studio. Edit questions/answers and add a “Contact Us” CTA.
- Blog:
- Add posts via Posts > Add New with titles, content, and featured images. Customize layout in Customize > Blog (list view, no sidebar).
- Add a “Blog Posts” section to the homepage with a slider (2 columns on tablets).
Step 10: Customize Header and Footer
Polish your site’s look:
- Header:
- In Customize > Header, pick a centered logo preset. Add search, account icon, and cart on the right. Set height to 70px, white background, and black nav text.
- Enable a sticky header and add a top bar (e.g., “Free Shipping on Orders Above $40”).
- Upload a logo (1000x350px) and favicon (512x512px) via Canva.
- Footer:
- Create a new UX Block named “Footer,” import the “Footer” template, and customize: black background, logo, social links, and menu links (Shop, About, etc.).
- Blend the absolute footer by setting it to black and removing text/icons.
Step 11: Add Policy Pages
Create legal pages:
- Privacy Policy: Use UX Builder with the “Text” template, add a title and content (generate via ChatGPT if needed).
- Duplicate: Install the Duplicate Page plugin, copy the page for Terms of Service, Refund Policy, and Shipping Policy, then edit titles/content.
- Link in Footer: Edit the Footer UX Block, add buttons for each policy with respective URLs (e.g., /privacy-policy).
Link Privacy Policy and Terms of Service to the checkout page in Customize > WooCommerce > Checkout.
Step 12: Set Up Payments and Shipping
Make your store functional:
- Payment Providers:
- Install Payment Plugins for Stripe WooCommerce and PayPal by Payment Plugins. Connect your Stripe and PayPal business accounts, switch to live mode, and enable in WooCommerce > Payments.
- Shipping Rates:
- In WooCommerce > Settings > Shipping, add zones (e.g., United States: $7 flat rate, free over $40; Rest of World: $15).
- Taxes (Optional):
- Enable in Settings > General, manually add rates (e.g., 8.1% VAT for Switzerland), or use the WooCommerce Shipping & Tax plugin for automation (connect to wordpress.com).
- Coupons: Go to Marketing > Coupons, create a “Welcome” code (10% off, one use per user).
Step 13: Final Touches
- Test Checkout: Add products to the cart, apply coupons, and verify payment/shipping options.
- Activate LiteSpeed Cache: Enable this plugin to boost site speed.
- Review: Visit yourdomain.com, test responsiveness, and tweak as needed.
Conclusion
That’s it—you’ve built a fully functional e-commerce website with WordPress and WooCommerce! From hosting to product pages, this guide covers every step to get you selling online. If you found this helpful, give it a thumbs up, leave a comment, and subscribe for more tutorials. Happy selling!
