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.

Categories

Related Blogs

Ultimate Guide to Custom Meta Boxes in WordPress

In WordPress, `add_meta_boxes` is an action hook that allows developers to add custom meta boxes to different post types’ edit screens. Meta boxes are additional sections on the post editor screen where you can add and display custom fields or other types of data related to the post.

Shortcodes included with WooCommerce

WooCommerce comes with several shortcodes that you can use to display various elements and functionalities on your WordPress website. These shortcodes allow you to customize the appearance and layout of your WooCommerce store. Here are some of the essential shortcodes included with WooCommerce:

Add Custom Taxonomy Filter on Products Dashboard.

How To Filter Products by Taxonomies in the Dashboard?

WooCommerce provide Many Product filters on admin screen , such as “Select a category”, “Filter by product type”, “Filter by stock status”.