How to Add Decimal Quantity Inputs in WooCommerce

When it comes to running a WooCommerce store, you may have noticed that the platform only supports selling products in whole number quantities (integers). Simply put, you can’t enter a decimal fraction in the product quantity input box.

However, there are instances where selling products in decimal quantities is necessary, especially for goods measured by weight or volume.

In this blog post, we will show you how you can get around this limitation and accept decimal quantities on your WooCommerce store. This way, customers will be able to enter a decimal quantity on your product pages.

Whether you sell spices by weight, liquid ingredients by volume, or any other product that requires precise measurements, this guide will equip you with the knowledge and tools to make it possible!

Do not use a decimal quantity plugin

Before we dive further into this blog post, it is important to understand that WooCommerce is only designed to accept whole numbers (integers) and not decimal values. Even though there are a few plugins out there that offer decimal quantities, we can’t recommend using them.

Why would we not recommend plugins if they are specifically made to allow decimal quantities?

Extending WooCommerce to allow decimal values in the quantity input box sounds easy, but unfortunately it’s far from that! The quantity field in the WooCommerce code is referenced across a lot of different sections, and it is designed with the assumption that whole numbers will be used. Altering this default behavior means a plugin author would have to alter 70% of the WooCommerce code. It is highly unlikely a plugin can do all of that, so it can lead to unexpected outcomes in various areas:

• Stock management may not work properly anymore, as WooCommerce automatically decreases your stock with whole numbers only.
• Refunding items becomes complex as there is no way to refund a decimal quantity.
• Re-ordering products via the WooCommerce account section will not work when decimal quantities are used.
• Payment gateways may generate errors because they expect whole numbers as the product quantity.
• Third-party shipping plugins like UPS may calculate the wrong shipping cost as they expect whole numbers.

We haven’t seen a plugin that covers all these areas and at the same time integrates well with popular third-party plugins. As a result, we can not recommend using these plugins. They may work fine on basic stores, but once your store grows and you tap into the different functions of WooCommerce, you will run into issues sooner rather than later.

Moreover, each time WooCommerce updates, there is a high risk that your plugin breaks and the functionality no longer works as you want it to.

Fortunately, we have a solution to the decimal quantity problem!

Instead, it’s better to completely bypass the issue, rather than trying to fix it. You can hide the default WooCommerce quantity input field and replace it with a field specifically designed to accept decimal values with fractions.

This is where the Advanced Product Fields for WooCommerce plugin comes in!

Introducing Advanced Product Fields – the best way to create a WooCommerce decimal quantity field

Advanced Product Fields for WooCommerce is a plugin that makes it easy to create a quantity field that supports decimal numbers. It’s powerful, yet lightweight and easy to use. The plugin allows you to add all kinds of input (and informational) fields to your WooCommerce product pages, including quantity input fields.

Advanced Product Fields for WooCommerce

Add a WooCommerce decimal quantity input field to your products with ease.

Find out more

The plugin has all the necessary features to make this happen:

• You can hide the default quantity input field.
• You can add a new quantity field with decimal numbers enabled.
• Add a minimum or maximum allowed quantity to the decimal quantity field.
• The final product price will be calculated based on the quantity entered. This can be a simple price structure or a complex formula if your product requires it.
• Replace the standard WooCommerce price display with something more enticing like “$12 per kg”. Effectively, we’ll add a suffix to the WooCommerce price label.

How to set up WooCommerce to allow decimal quantity inputs

In this guide, we will show you how you can replace the standard WooCommerce quantity input with a quantity input that accepts decimal numbers (fractions).

The time to complete this entire tutorial is 10-15 minutes.

Step 1: Prepare your WooCommerce product

In this step, we will show you how you can disable the standard WooCommerce quantity box and change the WooCommerce price label.

1. Go to the Edit product screen for the product that requires a decimal quantity field.
2. Scroll down to the Product data section and activate the General tab.
3. In the General price setting, enter zero (0) as the price. We’re doing this because we will calculate the product price with the plugin and it doesn’t matter if you are selling by size, weight, or other dimensions accepting decimals.
   
4. In the same section, set the Price display setting to Replace price with text and enter “$10 per meter” as the label. You can enter any label you want, such as “per kg” or “per sq. foot”.
   
5. Now activate the Inventory tab and enable the Limit purchases to 1 item per order setting. This hides the product quantity field on the product page in WooCommerce.
   

Publish or update your product when you are done. Your temporary results should look something like this:

As you can see, the standard WooCommerce quantity input is not included on the page (we will replace it with a WooCommerce decimal quantity box in the next step) and the price label is updated to reflect the cost per unit.

By limiting purchases to 1 per order, WooCommerce automatically hides the quantity field. Since you will be selling products by a different unit of measurement (kg, meters, liters, …), it makes no sense to have a quantity input box anyway.

Step 2: Add the WooCommerce decimal quantity field

As mentioned earlier, we will use the Advanced Product Fields for WooCommerce plugin to replace the standard quantity field with one that accepts decimal values. Follow these steps:

1. Get the plugin from the Studio Wombat store.
2. If you’re unsure on how to install the plugin, follow this short guide. The installation process is quick and easy!
3. Navigate to the Edit product screen of the WooCommerce product you’ve prepared in step 1 of this tutorial.
4. In the Product data section, activate the Custom fields section and click the Add your first field button.
   
5. You’ll notice that a bunch of extra settings appear. This is where you can configure your quantity input field. We’ll explain the important settings below:
   
   • Start by setting the Field type to Number so the customer has to enter a number (and cannot enter other characters).
   • Add a descriptive label such as “length (in meters)”. Your customers will see this label on your product page.
   • Toggle the Required setting so customers have to fill out the input field before they can add the product to their cart.
   • Set the number type to Integer & decimals. This will allow customers to enter either whole numbers or decimal values in the quantity input field.
   • Further down, you can set additional settings (not pictured in the screenshot above), such as a minimum or maximum required value. This will prevent users from entering a quantity they can’t purchase.
6. When you’re done, update the product to save your changes.

This is starting to look better! Your WooCommerce product now has a decimal quantity input box:

We’ve got one more thing left to do: add a product price formula that calculates the final price depending on the quantity entered. Let’s move on!

Step 3: Define the product price

As the last step, it’s time to add the price formula. The product price should be updated when the customer increases or decreases the decimal quantity.

While Advanced Product Fields is very powerful and allows you to build any type of calculator, we only need a simple pricing formula for our product.

In our example, the unit price is $10 per meter. If the user selects 2 meters, we want the price to show $20 (because that’s $10 * 2). Here’s how to do it:

1. Go back to the Product data section of your product and activate the Custom fields section. We’ll add a second field, so go ahead and click the Add a field button.
   
2. Set the Type to Calculation. This allows us to perform calculations that change the final product price and display the price on the page. Furthermore, you can use the following settings:
   
   
   • Add a useful label, like “Total price”.
   • Set the Calculation type to Cost calculation.
   • Use the formula builder to add the simple formula like [field] * 10. $10 is the unit price in our example, so we are simply multiplying the unit price with the decimal quantity entered by the customer.
     

Save your product once again and check the result on your website. You now have a fully functioning WooCommerce product with a decimal quantity input field!

If you want, you can take the pricing calculations a lot further. For example, you can take into account bulk discounts. We explain how to do this in our guide about selling business cards.

Caveats

What we’ve explained above is no doubt the best way to handle decimal quantities without breaking hidden parts of WooCommerce. But, it would be too good to be true if that solves all your problems. So what are the caveats here? Luckily, there is only 1.

Using this method means you can not keep stock within WooCommerce as fractions. When someone purchases your product, the WooCommerce stock is decreased with a quantity of 1, and not the quantity entered in the length box.

In most cases, stock is kept off-site in a warehouse, so this shouldn’t be a big issue for your store. You don’t need to keep the detailed stock in WooCommerce.

The best way to allow decimal quantities in WooCommerce

This complete tutorial explains how to use decimal quantities in WooCommerce. You’ve learned that WooCommerce is not equipped to handle decimal values in its quantity input field. Instead of trying to fight how WooCommerce is inherently built, it is better to replace the standard quantity field with a brand new field that fully supports decimal values.

That’s where the versatile Advanced Product Fields plugin comes in. It replaces the standard WooCommerce quantity field with a custom one that supports decimal values. This makes it easier for customers to purchase products in the exact quantity they need.

The plugin offers a lot of flexibility in terms of how you set up your quantity field: you can set minimum or maximum allowed values, and you have full control over the calculated product price.

Try it out on your store and if it doesn’t work for you, we’re here to help!

Advanced Product Fields for WooCommerce

Add extra options, such as a decimal quantity input field to your WooCommerce products with ease.

Find out more

To recap, here are some questions we answered in this tutorial: