WooCommerce is one of the most popular solutions for building an online store. Unlike online store solutions like Shopify or BigCommerce, WooCommerce doesn’t come with a recurring fee or additional costs such as the transaction charges each time someone buys from you.
Also, getting WooCommerce to work is a lot simpler than integrating complex online shopping cart software with your site.
In fact, you can add and configure WooCommerce on your site all by yourself — without any coding skills or the need to hire a developer. And this is exactly what I’m going to show you in this WooCommerce for beginners guide.
In this WooCommerce tutorial, you’ll learn how to:
- Install and configure WooCommerce and open your online store
- Choose the right free/premium WordPress WooCommerce theme and extensions to take your store to the next level
- Step #1: Things to get ready before you start
- Step #2: Install and configure WooCommerce settings
- Step #3: How to add products to WooCommerce?
- Step #4: Choosing an eCommerce theme
- Step #5: WooCommerce extensions – Free and premium
- Wrap up
- Platform – WordPress.org
- Domain registrar – Name Cheap
- Web host – Bluehost, Hostgator, InMotion
- WooCommerce theme (free) – Storefront, Coeur
- WooCommerce theme (paid) – Shopkeeper, Aurum, Walker
- Ext. handle cart abandonment – Abandoned Cart Lite, Recover Abandoned Cart
- Ext. add product filtering – WOOF, WooCommerce Products Filter
- Ext. control shipping, and discounts – Extended Coupon Features, Dynamic Pricing & Discounts, Advanced Shipping
FTC Disclosure: WHSR receives referral fees from tools listed on this website. But, the opinions are based on our experience and not how much they pay. We focus on helping small businesses and individuals to build websites as a business. Please support our work and learn more in our earning disclosure.
Step #1: Before you begin, buy a domain name and hosting
If you have already chosen a domain name and hosting and have installed WordPress, move on to the step of choosing a theme.
If not, buy a domain name from Namecheap and go for a cheap WordPress hosting.
Going for a managed WordPress hosting means that the hosting provider will take care of your site’s maintenance, updates, and security. By choosing a dependable web host like Bluehost, you can forget about these hassles and focus solely on the business side of your store.
Bluehost comes with a WordPress+WooCommerce hosting too, but I wouldn’t recommend going for it now as it will be a little steep on your pocket at $12.95/month, whereas the simple web hosting costs just $3.49/mo.
(You can check out my full Bluehost review before you sign up. Also, Hostgator and InMotion are two more cost-effective managed hosting providers that you can confidently choose.)
So once you’ve chosen a domain name and hosting, you need to:
- Install the WooCommerce plugin and configure its settings
- Choose a beautiful online store theme
- Add a bunch of free or premium WooCommerce addons
Step #2: Installing WooCommerce and configuring its settings
To begin building your online store, first, download WooCommerce and activate it on your WordPress site.
As soon as you activate WooCommerce, you should see its settings page.
Click on the Let’s Go! button.
If you don’t want to complete these settings now, you can access them again via WooCommerce > Settings.
So … WooCommerce setup begins with the addition of the following 4 pages to your site (WooCommerce adds these pages on its own, you don’t have to do anything):
- My account
Click on Continue to proceed to the next step.
For the next step, WooCommerce asks you to add your store’s information like its:
- Product units (how you’ll measure your product – kg, lbs, simple quantity in digits, etc.)
- Product dimension units
Fill out all these details and click Continue:
WooCommerce will then prompt you to input your shipping and tax preferences. Tick if applicable; click Continue.
In the final configuration step, you need to choose the different ways in which you’ll let your users pay. WooCommerce supports PayPal, Stripe, Check, Bank transfer, and cash on delivery (COD) payment methods.
Choose the applicable options and click Continue.
With the checkout options configuration, you’re done with setting up WooCommerce.
Now you need to start adding products to your store.
So, on the next screen, click on the Create your first product! option.
Step #3: Adding products to WooCommerce
WooCommerce offers an editor very similar to its post editor for adding products. Add your product title and description just like you’d add a post and its actual content. Once you add the product content, you need to configure the remaining product settings.
Let’s look at each of these settings in detail:
Here, you have the field for listing the product price. You also have an optional field for adding a sale price.
Another cool feature is that you can choose to show the sale price between specific dates, which means you can automate the process of launching and closing an offer. You can also set the wholesale price in WooCommerce if you consider selling to both retail and wholesale customers.
The inventory option lets you add inventory details like the product’s SKU, stock status and more.
If you’re wondering what SKU means … well … it’s a seller’s unique formula for naming a product type.
Shopify gives an easy-to-understand definition of SKU. It says:
A SKU is a unique code consisting of letters and numbers that identify characteristics about each product, such as manufacturer, brand, style, color, and size.
Here’s an example Shopify shares:
A SKU for a pair of purple Ugg boots in the Bailey Bow style, size 7 might look something like this: UGG-BB-PUR-07.
Basically, you need to come up with a format for naming your product.
If you’re selling Yoga pants in 3 different colors, your SKU could look like:
You get the idea, right?
Now, I’m sure your product is not as easy to name as the example I took. So, to help you better, I’ve dug up this awesome free SKU generator from TradeGecko (requires signup).
… Back to the WooCommerce product settings:
After the SKU field, the second option in the Inventory section is to choose if WooCommerce should manage the product’s stock.
When you enable the Manage stock? provision, 2 additional fields appear:
- Stock quantity
- Allow backorders
Here, all you need to do is specify the number of units that you have for a product. With this information, WooCommerce will be able to understand when you’re out of stock.
If you go out-of-stock, you can set WooCommerce to:
Take a backorder (a backorder is an order for an out-of-stock product).
Take a backorder and notify the customer about the stock status (tell the customer that you’ve booked the order but the product is out of stock and that you’ll ship when it’s available).
Stop taking orders for out-of-stock products.
Next is the Stock status field. Use it to set the availability of a product.
And the last preference Sold individually tells a user that they can only buy one copy of the said product.
The Shipping section is pretty straightforward. Here, you just need to specify a product’s weight, dimensions, and class.
The value in the Shipping class of a product helps in calculating its shipping rates. So, if you sell products that can be easily categorized into classes like bulky, moderate, and light-weight, these three will become your shipping classes.
Once you’ve specified a shipping class, you can easily associate a shipping method to it. For example, you can choose a flat fee shipping method for items in the light-weight shipping class. A lot of shipping rate calculator plugins also use the value of the shipping classes to determine the shipping rates, so try to define proper shipping classes.
You can read more about WooCommerce shipping here and here.
4. Linked Products
The Linked Products sections lets you make up-sells, cross-sells, and promote product groups in your store.
Up-sells: Making an up-sell means recommending a product that’s a little better than the product a user is currently checking out.
For example, if a user if looking at a $45 headphone, in your up-sell section, you should recommend a $60 headphone.
Cross-sells: Making a cross-sell means suggesting an item related to the item the user is checking out.
For instance, if someone is looking at a monthly planner, in your cross-sell section, you should recommend daily and annual planners. (Here is the difference between upselling and cross-selling.)
Grouping: In grouping, you bundle together related products and offer them at a package. So, if you sell photography equipment, you’ll bundle up items like a tripod, camera bag, SD cards and more and offer this group to your users.
WooCommerce lets you add custom product attributes to describe your product better.
For example, if you sell office notepads, you might want to add the number of pages as a custom attribute.
The Advanced section lets you add a personalized purchase note to the buyer.
Now that you understand the basics of how WooCommerce works, let’s see how you can choose the right theme for your store.
Step #4: Choosing a WordPress eCommerce theme
Now, a lot of WordPress themes ‘support’ WooCommerce.
But all such themes don’t necessarily make beautiful WordPress stores.
Yes, they do work with WooCommerce, so you’ll be able to add products and all, but in my experience, such themes look quite off.
To make sure that your store looks great, you need to choose a specialized eCommerce WordPress theme and not a just another WordPress theme that’s compatible with WooCommerce.
WordPress theme for eCommerce
Here are 2 such free themes:
With more than 80,000 active installs, Storefront is one of the most downloaded WordPress eCommerce themes. It comes from the same team that’s behind WooCommerce, so you can expect WooCommerce and Storefront to work like magic together.
Storefront’s homepage beautifully displays the product categories, on-sale and top-rated products, and the featured product listings.
In addition to being responsive, Storefront also supports the schema markup language that is known to improve SEO.
Coeur is another beautiful WordPress eCommerce theme. It offers a large hero area on the homepage that can be used to feature a product. Also, it comes with 3 elegant skins: Classic, Flat, and Material.
In Coeur’s settings, if you set the homepage to be the store page, your product listings will display beautifully on your store’s homepage.
Coeur’s product pages are gorgeous and make buying a breeze:
This theme supports 3 widgets in the footer (it also has a widgetized sidebar). You can use any of the free WordPress WooCommerce widgets to add to these areas:
So those are two great free themes. But because they’re free, they do lack the bells and whistles of a premium WooCommerce theme.
Beautiful premium WooCommerce themes
Let’s now look at 4 beautiful premium WooCommerce themes you can buy:
Shopkeeper is a well-thought-out eCommerce theme that’s packed with a number of features that could charge you 100s of dollars if you had to buy individual premium plugins for them.
- Sell external / affiliate products (If you don’t have your own products to sell, but want to endorse products from other websites, you can use this feature.)
- In-built order tracking system
- In-built shipping calculator
- In-built rate/reviews functionality
- Advanced product filters
In addition to these features, Shopkeeper also has stunning product page templates for products that have variations, are downloadable, affiliate, out of stock or on sale. Shopkeeper has as many as 9 homepage layouts.
Another lovely feature that this theme offers is that of banner templates. Shopkeeper offers a slick set of ready-to-use banners. These banners can be customized and added anywhere on your store.
This theme has sold over 10,000 copies and is an absolute steal at $59.
#2: Aurum – Minimalist Shopping Theme
Aurum is an elegant WooCommerce shopping theme that comes packed with two premium plugins (Visual Composer valued at $34 and Layer Slider valued at $18). Visual composer helps make Aurum more customizable, and with Layer Slider, you can add bold sliders anywhere on your store.
Aurum offers 4 sleek homepage layouts. All look great, but I loved the second option (V2):
The product page design is also beautiful:
Aarum’s lazy loading feature helps speed up your store’s loading time. With lazy loading, only those images of a site are loaded that are in the viewing area of the visitor. The images below this area are only loaded as the visitor scrolls.
Aurum comes with about 50 shortcodes that you can use in combination with the visual composer and design your store as you’d like.
Aurum costs $59
#3: Walker – A Trendy WooCommerce Theme
Walker is a refreshing WooCommerce that comes with 9 brilliant homepage layouts (in addition to the default layout). I especially love the Casual, Stylish, Masonry, and Urban versions.
Honestly, when I saw the demo, it was difficult to choose one over the other because each is strikingly beautiful.
The Checkout, Cart, Wishlist, and order tracking pages look great.
When you look at the product types this theme supports, you’ll realize how much time the theme makers might have actually put into planning this theme. You have special designs for pages for products that are on sale or out of stock. Similarly for the ones that come with options.
You also have a special page for products that you endorse (and not sell directly).
This team gets the full score when it comes to looks and elegance. Just couple it with a few premium extensions and you’ll be able to offer your visitors a world-class shopping experience.
Walter is quite a bargain at $59.
#4: WoonderShop – WooCommerce theme focused on mobile UX
More than a half of the internet users are already shopping on mobile devices, and the number is growing every day.
I tried WoonderShop theme on mobile to see if it's really as good as advertised. I've seen many theme authors claiming mobile-friendliness, but very few themes actually deliver a proper mobile experience.
I played around trying to recreate a typical shopping behavior and believe it or not, I was pleasantly surprised. WoonderShop delivers!
When you are deep in the store, there is a sticky navigation with the shopping cart, always available. When you want to search for a product, there is an auto-suggest search that helps you find products faster and better. When you add a product to the shopping cart, it opens up and gives you a nice feedback that your action was successful. When you want to filter down the products, there you’ll find mobile optimized filters, updating the products list in real-time.
The overall navigation across the WoonderShop is smooth and intuitive. Authors did a great job implementing established UX navigation practices from the biggest online stores in the world.
Beside mobile UX, WoonderShop theme is also a good choice for eCommerce experts to whom conversion rate optimization (CRO) means something.
A couple of interesting conversion hacks I found are:
- Distraction-free checkout (which results in lower bounce rate at the checkout)
- Urgency countdown (that “helps” shoppers make their decision faster)
ProteusThemes, the author of WoonderShop, is a well-known player in the WordPress ecosystem with more than 33,000 customers, so the reputation is on their side.
Don’t lose the big chunk of mobile visitors with a half-made theme and rather convert them into buyers with WoonderShop.
WoonderShop cost you $79 but it offers you 7-day free trial.
Step #5: Free and premium WooCommerce extensions
WooCommerce excels as a shopping store engine. But as you start selling … you’ll realize that you need more functionality in your store.
For example, you might want to:
- Enable customers to calculate shipping costs before placing an order
- Offer dynamic pricing and coupons
- Follow up with the buyers who didn’t complete the purchase.
Unfortunately, such features aren’t built into WooCommerce. For these, you’ll have to use free or premium WooCommerce extensions. Below, I’m recommending a bunch of such add-ons for adding some of the most important functions you’ll need in your store.
WooCommerce extensions to handle cart abandonment
A cart abandonment instance is one where a customer adds items to their cart but doesn’t complete the purchase. According to Baymard Institute, 67.45% of online shopping carts are abandoned.
To recover the potential revenue loss from cart abandonment, a very effective tactic is to reach out to such buyers and prompt them to return to the store and complete the purchase. WooCommerce doesn’t have any in-built functionality to handle cart abandonment instances but here are some great plugins that can help:
#1: Abandoned Cart Lite for WooCommerce
This plugin lets you send email reminders to your customers or guest users who added products to their cart but didn’t complete the purchase.
Abandoned Cart Like for WooCommerce claims that it can help you save up to 30% of your lost sales. It comes with a ready-to-use template that you can personalize with values like a customer’s name and product cart Information with a link to the abandoned cart.
This plugin’s PRO version gives you 3 templates and lets you start sending reminder emails within minutes of a cart abandonment instance; in the free version, you can only send reminders after an hour.
But the really cool feature is that it lets you give coupons and discounts in the reminder email. An email reminder with a discount is 100% more powerful than one without it because a discount offer gives a user an incentive to act fast.
#2: WooCommerce Recover Abandoned Cart
WooCommerce Recover Abandoned Cart plugin does all the things that the above plugin does and a lot more.
In addition to sending a series of automated email reminders (with discounts and coupons), WooCommerce Recover Abandoned Cart plugin also lets you fetch a user’s phone number for manually following up with them.
You can also monitor the performance of your follow up emails with this plugin’s reporting feature.
WooCommerce extensions to add advanced product filtering
Most niches offer customers lots of options. For example, if you run an apparel store, you might want to enable your customers to filter products using values like colors, sizes, materials, brands and more. By default, WooCommerce doesn’t support advanced filtering. Here are some plugins that can add this feature to your store:
#1: WooCommerce Products Filter (WOOF)
WOOF is a great free plugin to add basic filters to your online store.
This plugin’s premium version unlocks more filters like colors, labels, drop-downs, checkboxes and more. Also, the premium version includes analytics, so you can see the product specifications your users are actively searching for, and order more of those products.
Check out the demo here. The premium version costs $30
#2. WooCommerce Products Filter
This plugin lets you offer custom filtering options to your visitors thereby enabling them to look for products super-fast. With this plugin, your visitors will be able to filter your products based on their attributes like color, size, availability, price range and more.
You can display these filters using several stunning layouts. I especially like the plugin’s sidebar, full-screen, and masonry layouts.
WooCommerce Products Filter supports tooltips too, so you can offer additional information when users hover over any filtering option/value. Plus, WooCommerce Products Filter gives in-depth analysis of the filters your customers routinely use. This information can give you more insight into what your customers want.
WooCommerce extensions to control shipping, pricing, and discounts
As you saw in the above section on WooCommerce product configuration, WooCommerce gives just limited settings to price and ship products. But you can add advanced pricing and shipping rules with the following add-ons:
#1. WooCommerce Extended Coupon Features
WooCommerce Extended Coupon is a free plugin that let you set conditions on which coupons are automatically added to a buyer’s cart. You can use it to set rules like: Give the buyer 5% discount if their cart value is greater than $500 or something.
#2: WooCommerce Dynamic Pricing & Discounts
This plugin introduces a whole new level of control to pricing your products. This plugin lets you set unlimited combinations of rules for a discount using values like the cart subtotal, number of items in the cart and many more.
For instance, you can set a rule like this: “Buy between 2 and 5 units get 10% discount, buy at least 6 get 20% discount”
You can also give freebies. For e.g,: “Free frame with each picture purchased”
To rush users into buying, you can even show the promotional offer’s validity (the start and end date) to boost sales.
WooCommerce Dynamic Pricing & Discounts can also be used to run a customer loyalty program, where you can offer more and higher discounts to loyal customers.
#3: WooCommerce Advanced Shipping
When it comes to shipping settings, again, WooCommerce just offers some very basic options like offering a flat rate or free shipping.
If you want more control over your shipping rates, you should get WooCommerce’s Advanced Shipping. This plugin lets you add a number of shipping rate calculating methods to your site.
You can use properties like weight, volume, stock status, delivery location and more to create custom shipping rates. You can also use it to offer free shipping when the cart value exceeds some pre-defined amount and when the order is ship to a particular region, or set percentage based shipping costs.
Find out more about the plugin. Price: $17
Wrapping it up…
WooCommerce is a great solution to open an online store, but you can make it 100% more powerful by pairing it with a conversion-friendly theme and some extensions. I hope this post gives all the guidance you need to get started.
Wish you many sales on your store!
If you are looking for alternatives for your online store, here are the best online store builders you can check out.