I am making a widget for “Woocommerce+elementor+wordpress”. There it displays the product on the page, photo, price, button to add quantity and add to cart. The problem is that the +/- buttons do not respond to pressing, and the window for the quantity, when I add more than 1, it adds one product to the cart, and then +1 for each page refresh.

php

<?php
/**
 * Plugin Name: Custom Product Widget v1.000000
 * Description: A custom WooCommerce product widget for Elementor.
 * Version: 1.000000
 * Author: blvckfamily
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

function register_elementor_custom_product_widget() {

    // Checking if the ElementorWidget_Base class is available
    if ( ! did_action( 'elementor/loaded' ) || ! class_exists( 'ElementorWidget_Base' ) ) {
        return;
    }

    class Elementor_Custom_Product_Widget extends ElementorWidget_Base {

        public function get_name() {
            return 'custom_product_widget';
        }

        public function get_title() {
            return __( 'Custom Product Widget', 'plugin-name' );
        }

        public function get_icon() {
            return 'eicon-products';
        }

        public function get_categories() {
            return [ 'general' ];
        }

        protected function _register_controls() {
            // Here you can add settings for your widget, if needed
        }

        protected function render() {
            // Query to get WooCommerce products
            $args = array(
                'post_type' => 'product',
                'posts_per_page' => 20,
            );
            $loop = new WP_Query( $args );
        
            if ( $loop->have_posts() ) {
                echo '<div class="custom-product-grid">';
                while ( $loop->have_posts() ) : $loop->the_post();
                    global $product;
                    ?>
                    <div class="product-card">
                        <a href="<?php the_permalink(); ?>">
                            <?php woocommerce_show_product_sale_flash(); ?>
                            <?php woocommerce_template_loop_product_thumbnail(); ?>
                        </a>
                        <h3><?php the_title(); ?></h3>
                        <span class="price"><?php echo $product->get_price_html(); ?></span>
                        <div class="quantity-box">
                            <button class="minus">-</button>
                            <input type="number" class="qty" name="quantity" value="1" min="1" max="<?php echo esc_attr( $product->get_max_purchase_quantity() ); ?>">
                            <button class="plus">+</button>
                        </div>
                        <a href="<?php echo esc_url( $product->add_to_cart_url() ); ?>" data-quantity="1" class="button add-to-cart"><?php echo esc_html( $product->add_to_cart_text() ); ?></a>
                    </div>
                    <?php
                endwhile;
                echo '</div>';
            } else {
                echo __( 'No products found' );
            }
            wp_reset_postdata();
        }
        
    }

    ElementorPlugin::instance()->widgets_manager->register_widget_type( new Elementor_Custom_Product_Widget() );
}
add_action( 'elementor/widgets/widgets_registered', 'register_elementor_custom_product_widget' );

js

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.quantity-box').forEach(function (box) {
        var minusButton = box.querySelector('.minus');
        var plusButton = box.querySelector('.plus');
        var qtyInput = box.querySelector('.qty');

        minusButton.addEventListener('click', function () {
            var currentVal = parseInt(qtyInput.value);
            if (currentVal > 1) {
                qtyInput.value = currentVal - 1;
                updateAddToCartButton(qtyInput);
            }
        });

        plusButton.addEventListener('click', function () {
            var currentVal = parseInt(qtyInput.value);
            qtyInput.value = currentVal + 1;
            updateAddToCartButton(qtyInput);
        });

        qtyInput.addEventListener('change', function () {
            updateAddToCartButton(qtyInput);
        });

        function updateAddToCartButton(input) {
            var addToCartButton = input.closest('.product-card').querySelector('.add-to-cart');
            addToCartButton.setAttribute('data-quantity', input.value);
        }
    });
});

css

.custom-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-card {
    text-align: center;
    padding: 10px;
    border: 1px solid #eee;
    margin-bottom: 15px;
}

.product-card img {
    max-width: 100%;
    height: auto;
}

.product-card h3 {
    font-size: 16px;
    margin: 10px 0;
}

.product-card .price {
    font-size: 18px;
    color: #000;
}

.product-card .quantity-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

.product-card .quantity-box input {
    width: 50px;
    text-align: center;
    margin: 0 10px;
}

.product-card .add-to-cart {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
}

.product-card .add-to-cart:hover {
    background-color: #333;
}

.quantity-box button {
    background-color: #ddd;
    border: none;
    padding: 0 10px;
    cursor: pointer;
}

.quantity-box button:hover {
    background-color: #ccc;
}

/* Remove arrows from number input */
.quantity-box input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
}

.quantity-box input[type="number"]::-webkit-inner-spin-button,
.quantity-box input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

I tried using the plugin as the source code, but it doesn’t work.The buttons worked in the cart and product page
[plagin] https://blvckfamily2.wpcomstaging.com/wp-admin/plugin-install.php?tab=plugin-information&plugin=wc-quantity-plus-minus-button&TB_iframe=true&width=600&height=550