For the people interested that will stumble upon this post, here is the code I used to achieve what I wanted (I had to use my child theme and disabled the plugin)
This could be useful for the people that want to edit the default quantity field to display custom +/- buttons to adjust quantity.
I added the /woocommerce/global/quantity-input.php template to my child theme (found here) and modified it:
Notice how I added a .minus and .plus inputs.
<?php
/**
* Product quantity inputs
*
* This template can be overridden by copying it to yourtheme/woocommerce/global/quantity-input.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 4.0.0
*/
defined( 'ABSPATH' ) || exit;
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 buttons_added">
<?php do_action( 'woocommerce_before_quantity_input_field' ); ?>
<input type="button" value="-" class="td-quantity-button minus">
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label>
<input
type="number"
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 ); ?>" />
<input type="button" value="+" class="td-quantity-button plus">
<?php do_action( 'woocommerce_after_quantity_input_field' ); ?>
</div>
<?php
}
And I add the following JS to my child theme:
$(document).ready(function () {
/* Add action JS for quantity buttons */
$('.td-quantity-button').on('click', function () {
var $this = $(this);
var $input = $this.parent().find('input.qty');
var $max = parseFloat($input.attr("max"));
var $min = parseFloat($input.attr("min"));
var $quantity = $input.val();
var $new_quantity = 0;
if ($this.hasClass('plus')) {
if ($max > $quantity){ // this makes sure that when you click the button, it will not add more if it's equal to the max
var $new_quantity = parseFloat($quantity) + 1;
} else {
return;
}
} else {
console.log($quantity);
if ($quantity > $min) { // makes sure that you go under the minimum value defined
var $new_quantity = parseFloat($quantity) - 1;
} else {
return;
}
}
$input.val($new_quantity);
});
});
