First let’s have a look at what we’ll be creating<\/a>. 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.<\/p>\n 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<\/strong>. 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<\/a>.<\/p>\n Lets have a look at how to set it up. Once you’ve installed the plugin navigate to Products<\/strong> and select an item in your shop you want to add decimal quantities to or add a unit of measurement.<\/p>\n You’ll see a new box titles Product Quantity Rules<\/strong>. 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’.<\/p>\n This plugin will also allow use to specify a unit of measurement. In the image below we see that we’ve set kg<\/strong>. This text will be postfixed to the price for this product.<\/p>\n The nice thing is that we could set this to any value. For example you could put in 500g box<\/strong> to specify the size of the package.<\/p>\n You can also specify global rules that will apply to all products. This can by selecting Quantity Rules -> Add New<\/strong> 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.<\/p>\n 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<\/a> solves this by adding in increment buttons that can be easily styled with some css.<\/p>\n 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.<\/p>\n See Rapid Order in action or try the demo<\/a>.Quantities and Units<\/h2>\n
![\"WooCommerce](\"https:\/\/nickv.codes\/wp-content\/uploads\/2016\/02\/product-rules.png\")
<\/a><\/p>\nSetting unit of measure<\/h3>\n
![\"unit\"](\"https:\/\/nickv.codes\/wp-content\/uploads\/2016\/02\/unit.png\")
<\/a><\/p>\nGlobal Rules<\/h3>\n
![\"global](\"https:\/\/nickv.codes\/wp-content\/uploads\/2016\/02\/global-rules.png\")
<\/a><\/p>\nIncrement Buttons<\/h2>\n
Rapid Order<\/h2>\n
\n![\"WooCommerce](\"http:\/\/rapidorderplugin.com\/assets\/images\/add-items.gif\")
<\/p>\n