WooCommerce grocery store
Online grocery stores are no longer reserved for large supermarkets with deep pockets. With the cost of web development falling and the quality of great open-source software rising, there’s no shortage of options to create a quality website on a budget. In this post we’ll be exploring how to create a complete online WooCommerce grocery store, and several additional plugins that will make our online store function more like a supermarket.
First let’s have a look at what we’ll be creating. This site is using several WooCommerce plugins in order to achieve the grocery store functionality we need. Lets have a look at how I created it.
Quantities and Units
Any online grocery store is going to need the ability to allow customers to enter decimal quantities and also show units of measurement. For example, if I’m selling coffee beans in bulk, I might want to specify the price as $3/100g. WooCommerce by default does not give us these capabilities. We’ll need a plugin to give us the ability to specify quantities and units on a per product basis. Fortunately there’s a free plugin (which I maintain) called Quantities and Units for WooCommerce.
Lets have a look at how to set it up. Once you’ve installed the plugin navigate to Products and select an item in your shop you want to add decimal quantities to or add a unit of measurement.
You’ll see a new box titles Product Quantity Rules. Here you can specify rules for this specific product. In the image below we’ve set the step value to 0.05. This will allow users to increment quantities in 0.05 increments instead of the default ‘1’.
Setting unit of measure
This plugin will also allow use to specify a unit of measurement. In the image below we see that we’ve set kg. This text will be postfixed to the price for this product.
The nice thing is that we could set this to any value. For example you could put in 500g box to specify the size of the package.
Global Rules
You can also specify global rules that will apply to all products. This can by selecting Quantity Rules -> Add New in the left menu. Here you can specify a global rule and even select which category of items this should apply to. This is really handy if an entire category has the same rules for all items.
Increment Buttons
Your customers might find it tedious to click each quantity box and manually enter in the quantity for each item. Modern browsers may add in some default increment buttons but these generally are small and difficult to use. Quantity Increment Buttons for WooCommerce solves this by adding in increment buttons that can be easily styled with some css.
Rapid Order
WooCommerce is not setup by default to provide a fast ordering system for customer wanting to add many items to their cart. Rapid Order, a paid plugin for WooCommerce, solves this by displaying your products in list form (full disclosure: I’m the creator of this plugin). While adding this plugin isn’t totally necessary to get your grocery store running, you’ll find your customers will love the features it provides. Customers can add items to their cart by simply changing the quantity. Think of it as combining your shopping cart and product page into one. It also has a few other nice features such as live search and infinite scroll.
See Rapid Order in action or try the demo.
You can find out more about Rapid Order here:
http://rapidorderplugin.com/
Using a basic theme and a few plugins, grocery store owners can easily get an online store for minimal costs. Let me know if this has helped you create your own online WooCommerce grocery store. I’d love to see the results.