Create Custom Menu in WordPress Dashboard
Complete tutorial on create custom menu in wordpress dashboard. Discover practical examples, implementation tips, and expert advice for WordPress and WooCo
Read More โEnhance WooCommerce product quantity selector with plus and minus buttons for better UX. Implement custom quantity controls using JavaScript and hooks, making it easier for customers to adjust quantities without typing numbers manually.
Want to improve user experience in your WooCommerce store? You can add plus (+) and minus (-) buttons to the quantity input using WordPress hooks and a small JavaScript snippet. Here's how:
functions.php file of your active theme.
// Add plus/minus buttons to WooCommerce quantity field
function add_custom_quantity_buttons() {
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_custom_quantity_buttons', 10);
// Load custom JavaScript
function load_quantity_button_script() {
wp_enqueue_script('quantity-buttons-js', get_stylesheet_directory_uri() . '/js/custom-scripts.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_quantity_button_script');
js folder in your theme if not present. Inside it, create a custom-scripts.js file.
jQuery(document).ready(function($) {
// Plus and minus button functionality
$(document).on('click', '.plus, .minus', function() {
var $qty = $(this).siblings('input[type="number"]');
var val = parseFloat($qty.val());
var min = parseFloat($qty.attr('min'));
var max = parseFloat($qty.attr('max'));
var step = parseFloat($qty.attr('step'));
if ($(this).hasClass('plus')) {
if (val < max || isNaN(max)) $qty.val(val + step);
} else {
if (val > min) $qty.val(val - step);
}
$qty.trigger('change');
});
});
Once implemented, your WooCommerce product pages will show easy-to-use plus and minus quantity controls. Adjust the paths and styles as needed for your theme. 
Search our archives or reach out to our team for solutions and expert advice.