How to allow decimal quantity inputs in WooCommerce

We've discovered a unique and easy-to-implement way of enabling decimal quantities in WooCommerce. Decimal quantity inputs are perfect for selling products by size, weight, and more. I'll show you how to set it up.

As an e-commerce business owner, you always want to provide the best shopping experience for your customers. One way to do this is by allowing them to purchase your products in more precise quantities. For example, if you're selling products that are sold in weight or volume, you may want to allow your customers to input decimal numbers for the quantity.

Unfortunately, by default, WooCommerce only allows customers to purchase products in whole numbers. This can be a limitation for businesses that sell products that are sold in flexible quantities such as weight or volume. In this article, I will discuss how to overcome this limitation through a new way of allowing decimal quantity inputs in WooCommerce. This will provide your customers with more flexibility when purchasing your products and improve the overall shopping experience.

We'll do it with the Product Options plugin, which lets you replace the standard quantity field with a WooCommerce decimal quantity field like this:

You'll learn how to:

Why are there so few WooCommerce decimal quantity plugins?

Obviously the ideal way to support partial quantity values is to extend the default product quantity field to allow this. Unfortunately, this is a really bad idea. That's why there are so few WooCommerce decimal quantity plugins on the market. I'll explain why.

Fundamentally, the quantity input field in WooCommerce is designed to support whole numbers (integers) and not decimal values. It is possible to hack WooCommerce to allow decimal quantities, but this can destabilize your store in several ways:

As a result, it's better to bypass the issue and avoid modifying the product quantity field on the product page. Instead, you can hide the default quantity field and replace it with a new field which is specifically designed to support WooCommerce decimal quantity values.

And that's where the WooCommerce Product Options plugin comes in.

Product Options - The easy way to create a WooCommerce decimal quantity field

WooCommerce Product Options makes it easy to create a quantity field which fully supports fractional quantity values. It works like this:

1. First, you edit your products to hide the default quantity field (i.e. the one that doesn't support decimal quantities).
2. Next, you use the Product Options plugin to add a new quantity field with decimal numbers enabled. Create a price formula which calculates the price based on the quantity entered.
3. The new quantity field will appear on the single product page, instead of the original quantity field. Customers can enter a decimal value and the product price changes depending on the quantity step value that they entered.

This method is ideal for stores which need to sell in partial quantities. For example, you might sell by weight or be creating a measurement price calculator like this:

This sort of product pricing is useful for all sorts of products. You might be selling meat by the kg, or milk by the litre.

Now you've learned how WooCommerce Product Options lets you add an advanced quantity field which supports decimal units, I'll show you exactly how to set it up. If you've been looking for tutorials on "How do I add a decimal quantity input to a WooCommerce product?", then the next section is for you!

Tutorial - How to set up WooCommerce to allow decimal quantity inputs

Step 1: Edit the product

The first step is to disable the standard WooCommerce quantity field, and enter the product price per whole number:

1. First, go to the 'Edit Product' screen for one of your products.
2. Scroll down to the 'Product Data' section.
3. Enter the product price as the cost per whole unit. For example, if the product costs $25 per kg then enter the price as £25. (I'll show you how to add "per kg" in Step 2.) If you're using variable products then you should set the price for each variation instead.

   

4. Now open the 'Inventory' tab and tick the 'Limit purchases to 1 item per order' box. This hides the product quantity field in WooCommerce.

   

That's the easiest way to disable the standard WooCommerce quantity field. By limiting purchases to 1, there's no need for a quantity field so WooCommerce automatically hides this.

Obviously, it's not suitable if you want customers to be able to order multiple quantities of the product in a single order. To be honest, order multiple quantities of this type of product seems a bit strange to me. For example, if you're ordering coffee by the kg then it would be unusual to want to add it to the cart once with a qty of 1.2kg, and another time with a quantity of 0.8kg. In this case, why not just order 2kg!

However, if you have a valid use case for allowing multiple purchases of products which are sold by the decimal quantity, then there's another option. Instead of following step 2 above, ask your developer to write some custom CSS to hide the quantity field from WooCommerce. If you don't have anyone who can do this for you then I recommend posting a job on Codeable, and one of their experts will send you a reasonable quote.

Step 2: Create a WooCommerce decimal quantity field

1. 1. Install the WooCommerce Product Options plugin on your site.
   2. In the WordPress Dashboard, go to <em.
   3. Create an options group. You'll need a separate group for each type of decimal quantity pricing that you require. For example, if you're selling one or more products for $25 per kg then you might create a group called something like "Decimal quantity - $25/kg".
   4. Select all the products and categories that you want to add the new decimal quantity field to. Or if you want to use it for most of your products, then you can enable it globally and exclude it from specific products and categories.
   5. Now click 'Add Option' and add a 'Number' field.
   6. Add a name for the field and untick the 'Display' box next to it.
   7. In the 'Choices' section, add 1 option and type the text which will appear next to your new decimal quantity field, such as "Weight (kg)". Leave the price dropdown set to "No cost" because we'll be creating a proper price formula in a minute.
   8. Next, click on the 'Advanced settings' toggle and some more options will appear.
   9. Enable the 'Decimal' number type. This is what tells the new product quantity field to support decimal numbers.
   10. Now think about whether to add a max quantity or minimum quantity value to the quantity field. There are min/max quantity fields that let you control the cart quantity which the customer can order. For example, if you're selling coffee by the kilogram then you could set minimum quantity to 1 and maximum product quantity to 10. The WooCommerce Product Options plugin will then perform the necessary validation on the single product page.

       

   Create a price formula

   1. Finally, it's time to add a price formula. Click 'Add Option' and select the 'Price formula' field type.
   2. You will see the name of the Number field that you just created below the price formula field. Click on this to add it to the price formula, and then add the rest of the formula which will calculate the correct price. For example, if you're charging $25 per kilogram then the correct formula would be [quantity] * 25.

      

   3. Next, enter a price display suffix which will appear next to the main price on the product page. For example, you might type "per kg" here so that the price at the top of the single product page appears as "$25 per kg".
   4. Also tick the 'Ignore main product price' checkbox. This prevents the price that you entered in Step 1 from being added to the results of your formula, which you don't want.

   Step 3: Test the new decimal product quantity field

   Finally, visit one of the products that you just added the new WooCommerce decimal quantity input to. Enter a decimal unit into the quantity field, and make sure the calculated product price is correct. If you set a minimum or maximum quantity, then try entering an invalid number. The Woo Product Options plugin will perform validation checks and prevent you from getting it wrong.

   Click the add to cart button, and proceed to the cart page and then the checkout. Make sure the correct price is passed through at each stage.

   Complete a test order, and you will also see that the decimal quantity correctly appears on the order notification emails.

   The easy way to add decimals in WooCommerce

   I hope that this article has answered the question "How do I add decimals in WooCommerce?" You've learned how to replace the standard quantity field with a brand new field that fully supports WooCommerce decimal quantity values.

   To follow the instructions in this tutorial, you need the WooCommerce Product Options plugin. It's a great solution for those looking to allow decimal quantity inputs in their WooCommerce store. It replaces the standard WooCommerce quantity field with a custom one that supports decimal units, making it easier for customers to purchase products in the exact quantity they need. This adds much more flexibility than just supporting fixed quantities, which is the only option when you use WooCommerce on its own.

   With this plugin, store owners can easily set decimal increment values and decimal precision, giving them more control over their inventory and pricing. It's an essential tool for anyone looking to improve their customers' shopping experience and sell by weight or measurement.

   WooCommerce Product Options comes with a full 30-day money back guarantee. Try it out on your store, and see how easy it makes it to add decimal quantity support to WooCommerce.