December 2018 brings a great deal of excitement to the WordPress world. The 4th meeting of WordCamp US, held in Nashville TN, has just completed. WordPress 5.0, with its much discussed Gutenberg editor has just been released into the wild. (It was followed less than 10 days later by v 5.0.1, a security update.) Even with all that news, we are going to take an introductory look at how to build a new ecommerce store with WooCommerce.
Having just attended WordCamp US 2018 Contributor day, I was made aware of a number of initiatives available to the WordPress community to assist in learning more about the WordPress project. One of the items that I came across was the availability of a variety of training materials, created by community volunteers, to help others strengthen their WordPress knowledge.
For our session we are starting with a brand new WordPress installation on Local by Flywheel. This installation includes the latest version of WordPress, v5.0.1, the Storefront theme from the folks at Automattic, and the WooCommerce plugin. A video was shown to review the process of installing the plugin and the theme. While any theme can be used, the free Storefront theme is specifically styled to be used with WooCommerce and offers features that highlight your WooCommerce store.
Once the theme and the plugin are installed, the WooCommerce setup wizard is run to enable us to configure a few of the initial settings needed to get our store going. We found it did not re-run if the plugin had been previously installed and then deactivated. During the SIG session, we did not find the trigger to restart the wizard so I brute forced the steps to make the initial configuration setup. A quick Google after the SIG ended pointed out that the WooCommerce Setup Wizard can be re-run at any time using the link on the Admin Bar Help Tab while on the WooCommerce settings page.
Once we configured the settings, we reviewed each of the menu items in the WordPress dashboard under WooCommerce and added a couple of products.
Before adding the products, we discussed the types of products our store could handle and decided that our store, which was to sell posters, needed to add variable products. This type of product allowed for a variety of attributes to be associated with the product. Our poster products were going to be available in two different sizes initially. Later on, we were going to make them available on a variety of stock material. For the sake of brevity, we added two new variable products available in two different sizes. The attribute ‘size’ was created. This attribute would be used later when we created the actual product.
The first product was created as a variable product. An image was uploaded as the product image and a brief description was entered int he short description field. In the product data meta field, we selected the attributes tab and added the custom attribute ‘size’. We then added the new values 8×10 and 24×36. This enabled us to have a product with two size options. The variations were created and the prices set for each variation. The lesson plan from make.wordpress.org steps through this very well.
We completed the product add and viewed the product on the front end.
We initially set the store to permit check payments only and discussed online payment options such as PayPal and Stripe. These methods require an account to be setup for the store to use so we did not pursue that for this session.
WooCommerce is an excellent plugin for use in setting up any ecommerce store – from one with only a few products to a store handling a few thousand products. The performance is limited only by the hosting platform that is running the store.
WooCommerce.com offers a number of good tutorials and complete documentation on how to use the plugin.
Resources mentioned or used during the session:
Sample Images: https://source.unsplash.com/random/1950×500
Woo Extension Store: https://woocommerce.com/product-category/woocommerce-extensions/
WooCommerce Plugin: https://woocommerce.com/
Storefront Theme: https://woocommerce.com/storefront/
Storefront Contact Plugin: https://wordpress.org/plugins/storefront-homepage-contact-section/