julianoe

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);
        });
 });

Thanks @yordansoares for taking time looking into this issue.
The host uses Nginx server side cache. As recommended by Woocommerce I excluded the pages /cart /order and others from the caching to avoid big problems.

My issue is not really how to hide it. I’d like to know if there is a way – maybe from previous experiences – that I missed by reading the other forum posts to avoid this or work around this problem.

I tried adding just now a script from another issue that refreshes fragments but it does not fix it, even though the action run (I think), the number of products in the cart stays unchanged.

Just to be clear: when I load the page the cache often loads with the cart number being wrong but if I add a product to cart it is updated, the script runs as it should. Obviously when I switch page, it loads another cached page and the counter is wrong again.

It is not good UX to have wrong numbers on page load for users. I’d rather hide the number with CSS for example and have a script that fetches the good number and then displays it again. Or something like that.

Here is the website we are working on: https://www.calyce-cidre.com

Thanks for the answer @alexmigf.

There is no way to have a script running after the page loads that will go fetch again in the cookies (or localstorage) the cart information and update the front? Or do you mean that no script is running at all when server cache is active?

Hi @wooassist thx for the answer!
I’m in fact deep diving in the code right now and modifying code to add support for this.
Have a good one!

This is much needed indeed. Or at least give us an API so that developers can create a folder structure but not by hand.

I took me some time but i opened an issue here to follow up on this
https://github.com/WordPress/gutenberg/issues/18814
?? thanks for your answer

“Duplicate and detach” is exactly the feature I was thinking about. It would solve my personal problem and, i think, allow a different way of using reusable block.

I will post in the issues later in the day.
Thanks for the answer!

Perfect answer to a perfectly stupid question. Thanks for taking the time, it works now ??

That’s not ideal but thanks a lot @zota ! I can’t believe i did not thought of Archive.org before! Thanks!
I hope this plugin had active doc that we could contribute to.

Same here! Can someone link the docs? Who is maintaining this plugin currently?

Have you tested it properly ? Do you know Rocket.Chat ? Maybe the plugin lacks explanation or documentation