Setting up an online store involves more than just listing products. You need the right platform, proper configuration, and a design that convinces visitors to buy.
WooCommerce is a popular plugin that turns WordPress into a fully-featured eCommerce solution, and gives you control over every aspect of your store without the limitations of hosted platforms.
In this guide, we’ll walk through building an eCommerce website using WooCommerce from scratch.
If you’d rather watch than read, the full video tutorial is available below.
If you prefer to read, here’s a table of contents to help you navigate the article.
WordPress started as a blogging platform but has evolved into something much bigger. Today, it powers roughly 42% of all websites on the internet.
WooCommerce is a plugin that adds eCommerce features to WordPress. It transforms a standard WordPress site into a fully functional online store complete with product management, shopping carts, checkout processes, and order tracking.
According to the WordPress plugin repository, the WooCommerce plugin currently has over 7 million active installs, including 31% of all eCommerce sites.
So why choose WooCommerce over a hosted solution like Shopify? Shopify charges monthly fees and takes a cut of your sales, and its closed nature means you’re limited to what the platform allows. WooCommerce’s core plugin is free, and you’re not locked into any platform. If you need a feature that doesn’t exist, you can build it yourself or hire a developer.
Before installing WooCommerce, you need a WordPress site up and running. This means three things: a managed WordPress host, a domain name, and proper email setup.
For hosting, a managed WordPress host is your best option. These providers specialize in WordPress and handle the technical details so you can focus on your store. Cloudways is a popular choice because you can start affordably and scale as traffic grows.
You’ll also need a domain name, the address customers type to reach your site. You can register one through Namecheap, Cloudflare, or similar providers and expect to pay around $10-12 per year.
If your host doesn’t provide reliable transactional email, you need to address this before launching. WooCommerce sends receipts and order notifications via email, and poor deliverability means customers never receive these messages.
With WordPress ready, you can now turn your site into an online store with just a few clicks.
From your WordPress admin, go to Plugins → Add New and search for WooCommerce. Click Install Now, then activate. The setup wizard launches automatically.
The wizard asks for your store address, currency, and product type. Choose what matches your business, and ensure your email address is correct since order notifications go there.
You can skip optional add-ons for now and add them later. Click Continue, and WooCommerce creates your store pages automatically with a checklist of remaining tasks. We’ll tackle each of these next.
Now it’s time to add products. You can add them manually one by one or import them in bulk from a CSV file.
WooCommerce offers five product types. Simple products are physical items you ship. Variable products let customers choose options like size or color, each with its own price and stock. Grouped products combine multiple items into one purchase. Digital products are files that customers download. External products link to another site for purchasing, which is common for affiliates.
To add a product manually, go to Products → Add New. Enter a name and description.
The Product Data section is where you set pricing, inventory, shipping details, and more. You can also add product images to make it visually appealing and organize products using categories and tags to help customers find what they need.
If you have a large inventory, importing via CSV saves significant time. The WP All Import plugin handles this efficiently and lets you map your spreadsheet columns to WooCommerce fields.
During import, you can set product types, configure inventory settings including stock status and backorder options, define shipping weight and dimensions, add product attributes, and even set up upsells and cross-sells. The drag-and-drop interface makes it straightforward to match your data to the correct WooCommerce fields.
With your products added, the next important step is configuring how customers pay and how you ship orders. WooCommerce handles all of this through its settings and gives you the flexibility to choose the methods that work best for your business.
Getting paid is obviously essential for any online store. WooCommerce offers several payment options directly from your dashboard. To set it up, go to WooCommerce → Settings → Payments to see what’s available.
WooPayments is the built-in option that lets you accept credit cards, debit cards, and other payment methods through WooCommerce’s own service. It’s the easiest way to get started, but transaction fees apply, especially for international sales. Make sure you review the fee structure before committing.
PayPal is another straightforward option. Click install, and the wizard walks you through connecting your account.
Stripe and Square are popular alternatives if you prefer connecting directly to these processors. Each requires creating an account with the provider, then activating the WooCommerce integration. The setup process is similar across providers.
For local businesses or testing, you can enable offline payments like direct bank transfer or cash on delivery. These work well when setting up your store or if you have a physical location.
After enabling any payment method, click the Manage button to add custom instructions for customers.
If you’re selling physical products, the shipping setup comes next. WooCommerce lets you define zones and methods based on where you ship.
Ensure your store address is correct in General settings since this affects tax calculations and shipping defaults. Then go to the Shipping tab.
Shipping zones define the regions you ship to. Add countries or regions and choose which methods apply. You can cover an entire country or specify individual states or zip codes for local delivery.
Shipping methods determine checkout options. Free shipping works well as an incentive for reaching a minimum order amount. Flat rate shipping charges a fixed amount per order. You can also offer local pickup for customers who want to grab their order at your location.
Shipping classes let you charge different rates based on product characteristics. For example, you might create a “heavy items” class that costs more to ship than standard items. When setting up flat rate shipping, add costs for each class.
Tax configuration depends on your location and where you’re selling. WooCommerce offers both manual setup and automated calculation.
In general settings, enable tax and choose which countries you sell to. You can sell to all countries, specific ones, or exclude certain locations. Set your default customer location, which affects tax calculations before customers enter their address.
Once that’s set up, move to the Tax tab and choose whether prices are inclusive or exclusive of tax. In the United States, exclusive pricing is standard, meaning tax gets added at checkout. Inclusive pricing assumes the price already contains tax.
For each tax class, you can add rates for specific locations. This involves entering country codes, state codes, and zip codes to determine when each rate applies. The complexity here depends on your tax obligations.
WooCommerce also offers a free Tax plugin that automates much of this. It connects to your store location and calculates sales tax automatically based on where customers ship.
We covered each area quickly. For a complete walkthrough on setting up payments, shipping zones, and taxes in detail, see 23:21 to 44:32 of our video.
WooCommerce is now installed and configured, but the default look is quite plain. The next step is making your store visually appealing with a visual page builder.
WordPress themes control your site’s appearance, but they limit how much you can customize. A visual page builder gives you complete control with drag-and-drop interfaces. Breakdance is a popular choice as it offers deep WooCommerce integration, meaning all your store elements work seamlessly within the builder.
To get started, purchase a license from breakdance.com and download the plugin. In WordPress, go to Plugins → Add New → Upload Plugin. Install and activate, then enter your license key in settings to unlock full features.
Breakdance also offers an AI plugin to generate content. Install it the same way, then connect your OpenAI API key to start using it.
Building a site from scratch takes time. To make it easy, design templates give you a professional starting point that you can customize to match your brand.
Go to the builder in your dashboard and access the design library. You’ll find various templates optimized for different industries. Browse through the options and choose one that fits your store type. The template imports complete pages, including headers, footers, and product layouts.
After importing, you’ll likely have duplicate pages since WooCommerce already created some. Remove the default WooCommerce pages and then go to WooCommerce → Settings → Advanced and assign your new pages as cart, checkout, and my account pages.
Before customizing individual pages, you’d want to take advantage of Breakdance’s global styles feature. This is one of its most powerful features because it lets you define your color palette, typography, and button styles in one place.
This ensures consistency throughout your store while dramatically speeding up the design process. Start by assigning colors that match your brand and select fonts that align with your identity. Breakdance also provides Google Fonts integration to make the font selection straightforward.
A few more settings need to be completed before we start designing. First, go to Settings → Reading and set a static homepage instead of the default blog post layout.
You’ll also want a favicon, which is the small icon that appears in browser tabs. This might seem like a minor detail, but adding a branded icon looks more professional than the default WordPress symbol. Upload one to the Settings → General. A 512×512 pixel image works best.
With the builder installed and global styles configured, it’s time to design the pages customers actually see. Breakdance makes this straightforward since the entire process happens visually.
The header is the first thing visitors notice, so let’s start there. In Breakdance, hover over the builder icon in the admin bar and click to edit. This opens the visual editor, where you can update colors to match your brand, replace the template logo with yours, and adjust navigation links to point to real pages.
After the header, don’t forget to update the footer similarly by changing colors and replacing text to reflect your business information.
The homepage is your store’s main impression, and you’ll want to make it count. As you’re customizing the imported design template, start by scrolling through each section and tweaking it to fit your brand.
Replace placeholder images with your product photos and update headlines and descriptions using your own copy. If you need help with text, the AI assistant can generate brand-appropriate content based on your business description.
You’ll also want to pay attention to call-to-action buttons. Make sure they link to real pages like your shop or contact page. Lastly, check that all images load properly and display at appropriate sizes.
The next important page is the shop page that displays all your products, so it needs to look clean and organized. Unlike regular pages, you access shop pages through the templates section in Breakdance.
What makes Breakdance stand out for WooCommerce stores is that it includes all the essential eCommerce elements right out of the box. You won’t need to hunt down separate plugins for product filtering, custom product loops, or archive page design. The Product Loop Builder lets you create custom layouts for how products display, whether you want them in a grid, list, or masonry style. You have full control over product images, titles, prices, and add-to-cart buttons all in one place.
You can also customize category archive pages for unique experiences. The shop filter element is another powerful feature built directly into Breakdance. You can add it and let customers filter by price, rating, or attributes without page reloads.
When customers click a product, they land on the single product page. This is where the actual sale happens, so you want it to look professional and encourage purchases. Breakdance lets you create a template that applies to all products automatically using dynamic data.
Instead of designing each product page individually, you connect your elements to dynamic data sources. The product title, description, price, and images all pull from your WooCommerce product data. When you update a product in WooCommerce, the page updates automatically.
Breakdance gives you complete control over the product layout. You can rearrange elements, place the price above the title, or move the description into a sidebar. The sticky column feature is particularly useful. It locks the add-to-cart button and product images in place while customers scroll through long descriptions, keeping the purchase option visible at all times.
The cart and checkout pages are where conversions happen, so they need to be clean and functional. Most page builders only let you style the appearance of checkout pages. Breakdance gives you a dedicated checkout builder with full structural control. You can switch between a multi-column layout or a modern single-column flow.
The builder lets you place form fields anywhere, and you control the styling of every section, including billing details, shipping address, and payment methods.
One useful feature is conditional content based on cart contents. You can show a message about free shipping when customers are close to qualifying, or display different messaging depending on whether someone has one item or multiple items. This keeps customers informed and encourages larger orders.
Don’t forget trust elements. Adding testimonials or security badges near the checkout form reassures customers before they complete their purchase. These small additions can reduce cart abandonment significantly.
The cart page receives the same treatment. You’re not stuck with the default WooCommerce table layout.
The my account page handles customer logins, order history, saved addresses, and more. It’s an often overlooked page, but it plays a big role in the overall customer experience.
Breakdance lets you customize its appearance to match your brand, just like you did with other pages. You can adjust colors, typography, and layout through Breakdance. You can choose between horizontal or vertical tab layouts and customize active states to make navigation intuitive.
This completes the main pages of your store. Each one is now branded and functional, ready to welcome customers and guide them through purchasing.
For a complete step-by-step walkthrough on designing your store with Breakdance, see 45:27 to 01:42:28 of our video.
The default WordPress search works fine for blogs, but it falls short for eCommerce. Customers expect instant results with images, prices, and the ability to add items to the cart right from the search dropdown.
This is where a dedicated product search plugin makes a difference. One popular option is Elevated Product Search, which adds a sleek AJAX search with a slide-out interface to your store.
To get started, purchase a license and install the plugin through your WordPress dashboard the same way you installed other plugins. Once activated, access the settings to configure how the search behaves.
The plugin offers several layout options. You can show a full search bar that stays visible, or choose an icon-only mode that expands into a slide-out search interface when clicked. The icon-only approach keeps your header clean while still giving customers powerful search capabilities when they need them.
Configuring the plugin is also straightforward. Copy the provided shortcode, go to your builder, and replace your existing search element. Adjust the width to match your header layout.
Once live, customers get a much better experience. They can type and see instant results with product images and prices. They can hover over results to see details and add items to cart without leaving the search.
With your store designed and functional, there are two final areas that need attention. Performance affects whether customers stay on your site, and analytics tells you how to improve sales. Let’s tackle both.
Speed matters more than most people realize. If your site loads slowly, visitors leave before seeing your products.
Breakdance performs well out of the box because it follows a themeless architecture. It replaces your WordPress theme entirely and eliminates extra database queries and stylesheet loads that traditional themes add. This keeps your pages lean and fast.
However, you still need to optimize your images. For this, go through the images used in your design and ensure they’re no larger than necessary. A 3000-pixel image displayed at 500 pixels still loads slowly. Resize images to match the space they occupy, then re-upload the optimized versions.
Breakdance also offers lazy loading for images below the fold. Enable this feature so images only load when visitors scroll to them. It improves initial page load times noticeably.
If you need more aggressive optimization, dedicated caching plugins can help. However, with a well-built site using Breakdance, you may find that additional optimization isn’t necessary.
Understanding how customers interact with your store is crucial for growth. You need to know where visitors come from, which pages perform best, and where customers drop off in the purchase process.
For WooCommerce stores, Analytics WP is a popular option because it integrates directly with WordPress and tracks eCommerce events without external scripts. It shows you user journeys throughout your store, including the exact paths that lead to conversions.
Setting up Analytics WP is straightforward. Install the plugin, and it begins collecting data automatically. You don’t need to configure tracking codes or connect external services. The dashboard shows conversions, traffic sources, and customer behavior patterns.
If you prefer Google Analytics, you can set that up as well using plugins or custom code. However, the WordPress-native option is simpler and avoids the complexity of managing tracking scripts.
WooCommerce handles most store needs, but sometimes you need features that don’t come built-in. One option to overcome this is by installing extensions, but doing so for every small feature makes your website bulky.
WPCodeBox lets you add custom code to your site without touching theme files. Instead of separate plugins for small customizations, you can manage all your code snippets in one place.
There are many situations where this comes in handy. If you want to set a minimum order amount, redirect customers to checkout after adding a product, or display “Free” instead of “$0” on prices, these are all handled through code. These are common needs that don’t warrant full plugins.
Here are some useful snippets available in the WPCodeBox library:
The benefit of using a snippet manager is organization. All your custom code lives in one dashboard, and you can activate or deactivate snippets individually without touching code.
Now that your store is ready, it’s time to go live. But before you make it live, a few final steps ensure everything works smoothly.
First, disable any coming soon or maintenance mode your site might be showing. In WordPress, look for the Coming Soon badge in the admin bar. Switch it to live and save your settings.
Testing is crucial. Open an incognito browser and walk through the entire purchase process. Add products to the cart, proceed through checkout, and complete a transaction. This reveals issues invisible when logged in as admin.
Even better, run a real test transaction using your payment processor’s test mode, or process a small transaction and refund immediately. This confirms that payments reach your account and notifications are sent correctly.
Building an eCommerce website from scratch might seem overwhelming at first, but it can be done easily when you have the right plugins. You can create an eCommerce site by setting up WordPress, installing WooCommerce, adding products, configuring payments and shipping, designing each page with a visual builder, and launching with confidence.
WooCommerce gives you something hosted platforms can’t match. You own your data, control your design, and aren’t locked into someone else’s pricing structure. The flexibility to add custom features when you need them means your store can grow without constant plugin shuffling.
The plugins we used throughout this guide work well together as they’re built for WordPress. Breakdance handles your design without slowing things down. Elevated Product Search improves the customer experience. Analytics tells you what’s working. Code snippets handle small customizations without bloating your site.
Now it’s time to put your store in front of real customers. Launch, learn from your analytics, and watch your business grow.
