Skip to content

Instantly share code, notes, and snippets.

@guytzhak
Last active April 1, 2020 04:21
Show Gist options
  • Save guytzhak/51c9b0475abd6e1cae5aeeadef90bd3a to your computer and use it in GitHub Desktop.
Save guytzhak/51c9b0475abd6e1cae5aeeadef90bd3a to your computer and use it in GitHub Desktop.
Allow woocommerce to add to cart Float quantities
// Removes the WooCommerce filter, that is validating the quantity to be an int
remove_filter('woocommerce_stock_amount', 'intval');
// Add a filter, that validates the quantity to be a float
add_filter('woocommerce_stock_amount', 'floatval');
add_filter( 'woocommerce_quantity_input_step', 'mz_woocommerce_quantity_input_step', 99, 2 );
function mz_woocommerce_quantity_input_step($step, $product) {
// change the "step" based on $product
return $step;
}
== change in file: woocommerce/global/quantity-input.php ==
if ( $max_value && $min_value === $max_value ) {
?>
<div class="quantity hidden">
<input type="hidden" id="<?php echo esc_attr( $input_id ); ?>" class="qty" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $min_value ); ?>" />
</div>
<?php
} else {
/* translators: %s: Quantity. */
$label = ! empty( $args['product_name'] ) ? sprintf( esc_html__( '%s quantity', 'woocommerce' ), wp_strip_all_tags( $args['product_name'] ) ) : esc_html__( 'Quantity', 'woocommerce' );
?>
<div class="quantity d-flex flex-wrap align-items-center justify-content-center">
<?php do_action( 'woocommerce_before_quantity_input_field' ); ?>
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label>
<button type="button" class="quantity_btn plus"><span class="screen-reader-text">+</span></button>
<input
id="<?php echo esc_attr( $input_id ); ?>"
class="<?php echo esc_attr( join( ' ', (array) $classes ) ); ?>"
step="<?php echo esc_attr( $step ); ?>"
min="<?php echo esc_attr( $min_value ); ?>"
max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
name="<?php echo esc_attr( $input_name ); ?>"
value="<?php echo esc_attr( $input_value ); ?>"
title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
size="4"
placeholder="<?php echo esc_attr( $placeholder ); ?>"
inputmode="<?php echo esc_attr( $inputmode ); ?>" />
<button type="button" class="quantity_btn minus"><span class="screen-reader-text">-</span></button>
<?php do_action( 'woocommerce_after_quantity_input_field' ); ?>
</div>
<?php
}
/** JS code to change the input **/
$('body').on('click', '.quantity_btn', function () {
var quantityInput = $(this).closest('.quantity').find('input.qty'),
step = parseFloat(quantityInput.attr('step') ? quantityInput.attr('step') : 1),
max = parseFloat(quantityInput.attr('max') ? quantityInput.attr('max') : 99),
min = parseFloat(quantityInput.attr('min') ? quantityInput.attr('min') : step),
currentValue = parseFloat(quantityInput.val() ? quantityInput.val() : min),
newValue = 0;
if( $(this).hasClass('plus') ) {
newValue = currentValue + step;
} else {
newValue = currentValue - step;
}
if( newValue >= min && newValue <= max ) {
quantityInput.val(newValue).change();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment