Add +(Plus) & -(Minus) Buttons To Quantity Inputs

To add plus (+) and minus (-) buttons to the quantity input field in WooCommerce using the `woocommerce_before_add_to_cart_quantity` and `woocommerce_after_add_to_cart_quantity` hooks, you can use the following code:

1. Open the theme’s functions.php file in your WordPress theme directory.
2. Add the following code to the file:

// Add plus and minus buttons to quantity input field
function add_plus_minus_buttons_to_quantity() {
    echo '<div class="quantity-buttons">';
    echo '<span class="minus">-</span>';
    echo '<input type="number" step="1" min="1" max="" name="quantity" value="1" class="input-text qty text" size="4" />';
    echo '<span class="plus">+</span>';
    echo '</div>';
}
add_action('woocommerce_before_add_to_cart_quantity', 'add_plus_minus_buttons_to_quantity', 10);

// Enqueue custom JavaScript
function enqueue_custom_scripts() {
    wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() . '/js/custom-scripts.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

3. Create a new directory in your theme called “js” (if it doesn’t exist already) and create a new file called “custom-scripts.js” inside that directory.
4. Open the “custom-scripts.js” file and add the following code:

jQuery(document).ready(function($) {
    // Handle quantity increment and decrement
    $(document).on('click', '.plus, .minus', function() {
        var $quantityInput = $(this).siblings('input[type="number"]');
        var currentValue = parseFloat($quantityInput.val());
        var min = parseFloat($quantityInput.attr('min'));
        var max = parseFloat($quantityInput.attr('max'));
        var step = parseFloat($quantityInput.attr('step'));
        
        if ($(this).hasClass('plus')) {
            if (currentValue < max) {
                $quantityInput.val(currentValue + step);
            }
        } else {
            if (currentValue > min) {
                $quantityInput.val(currentValue - step);
            }
        }
        
        $quantityInput.change();
    });
});

5. Save the changes and upload the modified functions.php and custom-scripts.js files back to your server.

This code adds the plus and minus buttons to the quantity input field in WooCommerce by hooking into the `woocommerce_before_add_to_cart_quantity` and `woocommerce_after_add_to_cart_quantity` actions. The plus and minus buttons are wrapped in a `<div>` with the class “quantity-buttons”. The custom JavaScript handles the quantity increment and decrement functionality when the buttons are clicked.

After making these changes, the plus and minus buttons will be displayed alongside the quantity input field in the WooCommerce product pages, allowing users to easily increase or decrease the quantity.

Please note that you may need to adjust the file paths accordingly, depending on your theme structure.