This article was last updated on the April 28, 2018.
You may or may not know exactly what WooCommerce is. WooCommerce is the most popular WordPress plugin for creating an online shop using your existing WordPress site.
According to WordPress.org WooCommerce has over three millions plus installs and on the 19th May, 2015, WooThemes (creators of WooCommmerce) announced that Automattic acquired WooCommerce and WooThemes.
Automattic is the parent company of WordPress co-founder Matt Mullenweg and is behind products such as WordPress.com, JetPack, VaultPress and more.
Getting Started
Open up your WordPress dashboard/admin (yourdomain.com/wp-admin) and go to plugins > add new (wp-admin > plugins > add new), in the search bar top right type in WooCommerce.
Press your "enter" key and you should see that WooCommerce is the top result like this:
Go ahead and click on "Install now", you'll see the plugin downloading and once it's downloaded you should have a screen like this:
Click on "Active" and you'll be presented with the WooCommerce setup wizard, the setup wizard was introduced in WooCommerce 2.4, which is a great new addition, allowing you to easily configure the basics of your site in a few easy steps.
Click on "Let's go" to start the setup wizard. The first step is setting up the pages, WooCommerce does all this for you, and you'll need the pages setup to use the store, so just click "Continue" to move onto the next step.
The next step in the store setup is setting up the locale, including:
- Where your store is based.
- Which currency your store will use.
- Which unit will be used for product weights.
- Which unit will be used for product measurements.
Set those as required and click on "continue".
The next step in the wizard is setting up taxes and shipping, when you first land on this part of the setup, you'll see a screen like this:
Clicking on the checkboxes will show you some additional options to setup your taxes (if you want to charge taxes) and also shipping prices, so once you check those, you should see a screen like this:
Fill those settings in as you need and then click on "continue".
Note: If you don't want to charge taxes at all, don't check the "Yes I will be charging sales tax". This can always be changed later on in the WooCommerce settings.
The next step within the setup wizard is setting the payment gateways, you should see a screen like this:
By default, you can set up PayPal (just enter your PayPal email address into the provided field), BACS, cash on delivery and cheque payment. Enable those as you want and then click "Continue".
Congrats! You've now successfully setup WooCommerce, you should have a screen like this:
Your First Product
Go right ahead and click on "Create your first product!"
There are lots of different settings for your product, varying types, attributes, simple, external, grouped etc. For the purpose of this tutorial we're just going to cover adding a simple product, as WooCommerce already has great docs here that you can read for the other types of products.
You should have a screen like the above (without the numbers of course). So let's cover each part of adding a product.
1: Product Name
This one is pretty simple and self-explanatory, just type your product name into the box
2: Product Description
Enter your product description, you can include images, video, text, shortcodes etc, just as if you were writing a normal blog post or page.
3: SKU
Set your SKU if required, an SKU is a stock keeping unit, common in any form of commerce, normally it's a unique identifier, used by the retailer, to keep track of stock.
4: Regular Price
Enter the price of the product here, numbers only, no text. The box below this is for the sale price, which if entered, should always be less than what you have entered in the regular price box. For the purpose of this article, we won't be covering sales, just regular prices.
5: Product Images
Click on "set product images"
This image will be the one used as the featured/main image on the product page and in your store.
You can either add an image from the media library or upload a new image. Click on an image in your media library (if you aren't uploading a new one) and then click on "set product image" like this:
You should now see your product image in the wp-admin while editing your product, like this:
6: Adding a Category
Click on "Add new product category" and then type your new category name and click on "Add New Product Category".
7: Publishing Your Product
You can now go ahead and publish your product, just click the blue publish button and then you should have a screen like this:
Click on "View product" to take a look at your newly created product on the front-end of your site, as X has built-in WooCommerce integration, you'll see it looks fantastic out of the box without needing any additional styling.
Congrats! You've successfully created your first WooCommerce product
Using Cornerstone/Pro Editor with Woocommerce
You can go to Cornerstone > Settings or if you are using the X theme X > Settings or if you are using the Pro theme Pro > Settings and enable the Cornerstone or the Pro editor for the products of the Woocommerce.
As soon as you enable the settings you can add the description of the product using the Cornerstone/Pro Editor. The single product pages of the Woocommerce are generated by the template files and only the description portion of the page can be changed by the Cornerstone/Pro Editor. The rest of the page can be changed only via Child Theme and code customization.
Conclusion
Through this article, you've successfully setup your WooCommerce store and are ready to start selling, there are multiple other settings you can configure within your WooCommerce store that is covered by the WooCommerce documentation here.
