Input type number field with decimal values displays a comma instead of a period

Question

I'm using Woocommerce for a project and I want people to be able to order products with a decimal value.

Now I fixed this problem pretty easily with this code:

add_filter('woocommerce_quantity_input_min', 'min_decimal');
function min_decimal($val) {
  return 0.5;
}

add_filter('woocommerce_quantity_input_step', 'nsk_allow_decimal');
function nsk_allow_decimal($val) {
  return 0.5;
}

remove_filter('woocommerce_stock_amount', 'intval');
add_filter('woocommerce_stock_amount', 'floatval');

However for some reason the HTML on the site outputs the values with commas instead of periods like so:

<input id="quantity_5a66016934e7b" class="input-text qty text" step="0,5" min="0,5" max="" name="quantity" value="1" title="Aantal" size="4" pattern="" inputmode="" type="number">

Which obviously doesn't work since it's using commas instead of periods. However I have no idea what's causing this. I've already set my global divider in woocommerce to a period thinking that'd be the problem but it's not.

Any idea what could be causing this problem?

Answer 1

I have tested your code and it's working fine even if the field displays a coma instead of a period. When looking at the source code the value in the field is set with a period, but the displays shows that with a coma.

Below you can click on "Run code snippet" button and you will see:

<div class="quantity">
    <label class="screen-reader-text" for="quantity_5a660e741bc2f">Quantity</label>
    <input type="number" id="quantity_5a660e741bc2f" class="input-text qty text" step="0.5" min="0.5" max="506" name="quantity" value="0.5" title="Qty" size="4" pattern="[0-9.]*" inputmode="numeric">
</div>

So as you can see, the field value is 0.5, but the display is 0,5…
Is just the normal behavior for this html5 <input type="number"> field and so this has nothing to do with WooCommerce.

In this related documentation about <input type="number"> "Allowing decimal values" section, the same thing happens. The value in the source is with a period, but displayed with a coma

In woocommerce you can control also everything in woocommerce_quantity_input_args unique filter hook:

add_filter( 'woocommerce_quantity_input_args', 'custom_quantity_input_args', 20, 2 );
function custom_quantity_input_args( $args, $product ) {
    $args['input_value'] = 0.5; // Default starting value (Optional)
    $args['min_value'] = 0.5;
    $args['step'] = 0.5;
    $args['pattern'] = '[0-9.]*';
    $args['inputmode'] = 'numeric';

    return $args;
}

And you should need also (as in your code) this:

remove_filter('woocommerce_stock_amount', 'intval');
add_filter('woocommerce_stock_amount', 'floatval');

Code goes in functions.php file of your active child theme (or active theme). Tested and works.