Replace Quantity Input with Plus/Minus Buttons on Product Pages

/**
 * Add plus/minus buttons to WooCommerce quantity inputs
 * Replaces default number input with user-friendly buttons
 * Prefix: tpsc_ (TP Snippet Collection)
 */

// Add plus/minus buttons HTML
add_action('woocommerce_before_quantity_input_field', 'tpsc_quantity_minus_button');
add_action('woocommerce_after_quantity_input_field', 'tpsc_quantity_plus_button');

function tpsc_quantity_minus_button() {
    echo '<button type="button" class="tpsc-quantity-button tpsc-quantity-minus">-</button>';
}

function tpsc_quantity_plus_button() {
    echo '<button type="button" class="tpsc-quantity-button tpsc-quantity-plus">+</button>';
}

// Add CSS styling
add_action('wp_head', 'tpsc_quantity_buttons_styles');
function tpsc_quantity_buttons_styles() {
    if (!is_product() && !is_cart()) {
        return;
    }
    ?>
    <style>
        /* Container styling */
        .quantity {
            display: inline-flex !important;
            align-items: center;
            border: 2px solid #ddd;
            border-radius: 30px;
            overflow: hidden;
            background: #fff;
        }
        
        /* Hide number input spinners */
        .quantity input[type="number"]::-webkit-inner-spin-button,
        .quantity input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        .quantity input[type="number"] {
            -moz-appearance: textfield;
            border: none !important;
            text-align: center;
            width: 50px !important;
            padding: 12px 5px;
            font-size: 16px;
            font-weight: 600;
            background: transparent;
        }
        
        /* Plus/Minus buttons */
        .tpsc-quantity-button {
            background: #f7f7f7;
            border: none;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 20px;
            font-weight: 600;
            color: #333;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
        }
        
        .tpsc-quantity-button:hover {
            background: #333;
            color: #fff;
        }
        
        .tpsc-quantity-button:active {
            transform: scale(0.95);
        }
        
        .tpsc-quantity-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .tpsc-quantity-button:disabled:hover {
            background: #f7f7f7;
            color: #333;
        }
        
        /* Rounded corners */
        .tpsc-quantity-minus {
            border-radius: 30px 0 0 30px;
            border-right: 1px solid #ddd;
        }
        
        .tpsc-quantity-plus {
            border-radius: 0 30px 30px 0;
            border-left: 1px solid #ddd;
        }
        
        /* Cart page adjustments */
        .woocommerce-cart-form .quantity {
            margin: 0;
        }
        
        /* Mobile responsive */
        @media (max-width: 768px) {
            .quantity input[type="number"] {
                width: 40px !important;
                padding: 10px 2px;
            }
            
            .tpsc-quantity-button {
                width: 35px;
                height: 35px;
                font-size: 18px;
            }
        }
        
        /* Alternative style - Square buttons (uncomment to use) */
        /*
        .quantity {
            border-radius: 4px;
        }
        
        .tpsc-quantity-minus {
            border-radius: 4px 0 0 4px;
        }
        
        .tpsc-quantity-plus {
            border-radius: 0 4px 4px 0;
        }
        */
    </style>
    <?php
}

// Add JavaScript functionality
add_action('wp_footer', 'tpsc_quantity_buttons_script');
function tpsc_quantity_buttons_script() {
    if (!is_product() && !is_cart()) {
        return;
    }
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Handle plus button click
        $(document).on('click', '.tpsc-quantity-plus', function(e) {
            e.preventDefault();
            
            var $input = $(this).closest('.quantity').find('input[type="number"]');
            var currentVal = parseInt($input.val()) || 0;
            var max = parseInt($input.attr('max')) || 9999;
            var step = parseInt($input.attr('step')) || 1;
            
            if (currentVal < max) {
                $input.val(currentVal + step).trigger('change');
            }
            
            updateButtonStates($input);
        });
        
        // Handle minus button click
        $(document).on('click', '.tpsc-quantity-minus', function(e) {
            e.preventDefault();
            
            var $input = $(this).closest('.quantity').find('input[type="number"]');
            var currentVal = parseInt($input.val()) || 0;
            var min = parseInt($input.attr('min')) || 1;
            var step = parseInt($input.attr('step')) || 1;
            
            if (currentVal > min) {
                $input.val(currentVal - step).trigger('change');
            }
            
            updateButtonStates($input);
        });
        
        // Update button states (disable when at min/max)
        function updateButtonStates($input) {
            var currentVal = parseInt($input.val()) || 0;
            var min = parseInt($input.attr('min')) || 1;
            var max = parseInt($input.attr('max')) || 9999;
            
            var $minus = $input.closest('.quantity').find('.tpsc-quantity-minus');
            var $plus = $input.closest('.quantity').find('.tpsc-quantity-plus');
            
            // Disable minus at minimum
            if (currentVal <= min) {
                $minus.prop('disabled', true);
            } else {
                $minus.prop('disabled', false);
            }
            
            // Disable plus at maximum
            if (currentVal >= max) {
                $plus.prop('disabled', true);
            } else {
                $plus.prop('disabled', false);
            }
        }
        
        // Initialize button states on load
        $('.quantity input[type="number"]').each(function() {
            updateButtonStates($(this));
        });
        
        // Update on manual input change
        $(document).on('change', '.quantity input[type="number"]', function() {
            updateButtonStates($(this));
        });
        
        // Trigger cart update on cart page
        if ($('body').hasClass('woocommerce-cart')) {
            $(document).on('change', '.quantity input[type="number"]', function() {
                $('[name="update_cart"]').prop('disabled', false).trigger('click');
            });
        }
    });
    </script>
    <?php
}

// Optional: Apply to cart page as well
add_filter('woocommerce_cart_item_quantity', 'tpsc_cart_quantity_buttons', 10, 3);
function tpsc_cart_quantity_buttons($product_quantity, $cart_item_key, $cart_item) {
    if (is_cart()) {
        return $product_quantity;
    }
    return $product_quantity;
}