This guide covers exactly how to set up a WordPress ecommerce website with the WooCommerce plugin.The WordPress platform originally began as a way to blog online. Over the years, it has evolved into a full blown “content management system” – in other words, a backend software that can “power” any type of website – including an ecommerce website.That said, WordPress as an ecommerce platform isn’t a good fit for everyone. Quick aside – Anytime something is free, you should look for the catch. In this case, WooThemes makes money for things like advanced inventory management, direct credit card processing (ie, the free version syncs with PayPal, but not directly with your credit card processor). WooThemes also sells custom themes, which are encouraged but not required.While there are solid alternatives like out there, if you’re going to go WordPress for your online store – I recommend using WooCommerce for its strong developer base, app store and compatibility with a range of plugins & themes. It’s what this tutorial will focus on.WooCommerce has a ton of options.
When it first launched back in 2003, WordPress was regarded as just a blogging tool. Very quickly it took off, becoming a fully fledged CMS used on millions of sites across the world. And creative professionals have been pushing the CMS' boundaries to create complex and beautiful WordPress websites.
Here’s how I generally install it for clients with a focus on things that often trip up first timers. It may look daunting, but it’s really straightforward once you get a handle on the general structure. Install Your Ecommerce PluginTo get started with WooCommerce, navigate to your WordPress Dashboard and Add New Plugin. Search for WooCommerce, and simply install and activate WooCommerce by WooThemes.
Aside – in addition to theme compatibility, keep in mind that there are many 3rd party plugins that will sync up with WooCommerce. Make a note to set up those options. For example – consider Analytics.To call the ecommerce analytics available in powerfully useful would be quite an understatement.
But you can’t take advantage of it unless your site’s analytics.You should be using the for your Google Analytics integration, but we want to go a step further and markup your online store with lots of specialized ecommerce tracking (like passing SKUs, and item attributes seamlessly into Analytics).To do that, head back over to Add New plugins and search for. It too is produced by WooThemes, and is free. Install and activate. Boom – you’ve just added tracking that agencies normally sell for $$$$. You can do this same process for and many other plugins.
Now that you have WooCommerce installed, let’s move to the site structure before moving to General Settings. Setup Your Online Store StructureOne huge benefit of WordPress + WooCommerce is efficient setup of ie, “permanent links.” Online stores often have a thousand ways plus one to display products. It can generate really inefficient, ugly, and search engine unfriendly URLs for your products and product categories.Once you set up a permalink structure, it’s difficult to change. Even though the defaults are generally best, I like to confirm them before moving to General settings or anything design related. To start, go to the new WooCommerce link on your Dashboard – WooCommerce – Settings – Products. WooCommerce needs a product archive page that’s going to display all your products and/or categories. Think of it like your Blog page that displays all your recent postsbut with your products.WooCommerce uses a standard WordPress page for this archive.
By default, it’s the Shop page. You can edit that name in Pages – All Pages. You can create a new page. You can call it whatever (ie, ‘Store’).
You can leave it default.Your visitors don’t have to see it, or you can go to the main Settings – Reading and make it your Homepage. But it has to exist, and this is where you go to customize it.After confirming that page, click the link to look at your Product Permalinks. These permalinks are structured so they never conflict with blog post categories you may write.
But they are customizable if you want to customize them. For example, if you have a Gloves product categorybut a Gloves blog category, then by default they will be displayed as.
youronlinestore.com/category/gloves. youronlinestore.com/product-category/glovesMake sense? Usually the defaults are cool, but if you want to customize it, then this is where you do it. I also generally choose the Product option under the Product permalink base, simply for aesthetics.Now your online store setup is finalized. Feel free to navigate to the new Products link in the main WordPress Dashboard to create a sample product or category to see how the URLs look to you before going further.
Get a Compatible WordPress ThemeBefore we get to General settings, you’ll want to make sure that your WordPress Theme is compatible and setup with WooCommerce.As a WordPress refresher, control functionality of your website. Control the design and “output” of your functionality – ie, what your visitor is going to see.A plugin like WooCommerce adds a lot of functionality that some themes aren’t built to handle or output correctly (especially themes with a lot of built-in choices). It’s important to find a theme that doesn’t produce product pages that a garbled and ugly.That said, you’ll also want a versatile theme that can be designed, updated, and in general just give you the website you want. There’s a few options that I recommend.First, you can get. They are premium (ie, not free), well-made, and (of course) sync perfectly with WooCommerce. This is the easiest (especially with the integrated support) but priciest solution. Check out.Second, you can use a WordPress default theme like.
These are free, well-made, and can be extended. Your installation probably already has one, but you can grab one via Themes - Add New. This will be the cheapest option, but also one that requires some technical work to get the site you want.Third, you can head over to a marketplace with high-quality standards like, and get a WooCommerce compatible premium theme. These are well-made, and a very easy solution, but be sure to define exactly what you’re looking for in a theme. Many oversell their features. But definitely go browse. I also highlighted 25 of.Fourth, you can get a Theme Framework such as.
It’s my preferred way of building sites. Genesis adds some critical theme functionality (like adding content to category pages), syncs across all sorts of plugins, and allows you to easily make design changes without impacting your whole site (especially with built-in Child Themes).You can go read, but it’s the way to build a WordPress website in my experience. All the other options are awesome though – and WooThemes especially is a good fit if you want something that’s plug and play.If you go with, it takes a small addition to make it sync up with WooCommerce. Here’s how to sync it up. WooCommerce also has built-in styling for buttons, borders, and the like.
If you want to get real control, you can customize these in your style.css theme fileor you can just match these to your and everything will look great.Also, WooCommerce allows you to enable Lightbox. It’s a piece of code that allows visitors to click on your product images and see them in a bigger, zoomable window without leaving the product page.
Super-awesome.You’ll also need to double-check the Product Image settings. Look to see what size your product images are. Are they square?
What do they scale down to? In this case, WooCommerce allows you to set Catalog Images (which appear in category pages), Single Product image (the featured image on the Product page), and Product Thumbnails (which appear below the featured image on Product pages).The image setup can get a bit complicated, but which I’d read before uploading thousands of photos. But if the dimensions aren’t quite right, don’t fret since you can come to this same screen and regenerate your image dimensions. Most of the rest of the Settings are fairly self-explanatory,. The main thing is to pay attention to detail, and take advantage of all the options that WooCommerce gives you. If you go with a platform solution, you often won’t have this many options available.
And other self-hosted ecommerce solutions (like Magento) are nowhere near as user-friendly.Walk through the settings and customize every aspect of the experience for your customer even what email they receive when they reset their password. As I said in the Into to Options, one huge advantage of WooCommerce is the deep community of developers and apps they have that seamlessly work with the software.Usually, when building an ecommerce store with a specialized functionality (like syncing with QuickBooks or setting up a new payment gateway), you’d need to hire a developer to program a custom solution for a problem that honestly doesn’t need to be that custom.
It’d cost hours and $$$ to develop.With WooCommerce, you get access to a huge range of extensions that you just “plugin to the plugin” and make WooCommerce go further. Most all the extensions are paid, but they cost way less and start working much faster than a custom solution.You should check out the. They are easy to add on and this tab is where you head to manage them. So now your WordPress ecommerce store is functional and set. Next is exploring what you need an online store for in the first place – your products. Setup Product PagesYour theme will provide the design, look, and feel of you product pages, but here’s how to understand all that goes into your product pages.
Here’s an example product page with the default setup and a default Twenty Twelve theme.It has all the basics needed, but is also highly customizable. And all the attributes are marked up with Schema, which helps with search engine optimization. If you have any reviews, they will also appear below the product descriptionBelow is a full capture of the backend in WordPress that generates that page. Note especially where the content gets pulled from (ie, Main Content vs. Short Description).A few features to call out:.
Product Categories – self explanatory, but you can add them directly from the product page. Product Tags – add additional categorization that doesn’t need to be a product (like colors, etc). Product Gallery – pictures that appear as thumbnails on the product page. As the customer clicks on them, they cycle to become the “big” featured image. Product Image – set the main feature image.
WooThemes has a. But I want to highlight the most confusing aspect. A simple product is a product with no options, no changes, and isn’t a part of a collection.
It’s just a single, simple product. Like a book or something.Grouped products allow you to put a product as part of a collection. The category level pages also allow the creation of subcategory pages. Shipping classes, which I haven’t really touched on, are fairly self-explanatory but allow you to customize your shipping policies and rates based on distance, weight, bulk, etc.Quick aside: If you are running a theme like Genesis that allows you to put content on your category pages, these can be a huge opportunity for your search engine optimization strategies. Next StepsIf this guide seems daunting, and you think a would be a better fit, I’d recommend checking out or. They are both excellent options for a hosted platform.If you love the look of the control that WooCommerce gives you, and you think it’d be a good fit for your online store, then go follow and then get started installing WooCommerce! And check out my complementary posts such as and (great for those thousands of products), and my list of.If you want further video documentation –.